web学习笔记(三十)

发布于:2024-03-13 ⋅ 阅读:(46) ⋅ 点赞:(0)

目录

1.jQuery选择器

2. jQuery祖宗的相关方法

3.jQuery子代的相关方法

4.jQuery同胞的相关方法

5.jQuery的class类操作 

6.jQuery动画

6.1显示show()和hide() 

6.2滑入slideDown()和滑出slideUp()

6.3淡入fadeIn()和淡出fadeOut()

7.自定义动画 animate()

8.jQuery添加节点的几种方式

9.jQuery清除、克隆和移除节点 


1.jQuery选择器

   $('*') 选取所有元素
   $(this) 选取当前html元素
   $("p.intro") 选取 class 为 intro 的 <p> 元素
   $("p:first") 选取第一个 <p> 元素

2. jQuery祖宗的相关方法

  • parent()   方法返回被选元素的直接父元素,只返回一个。
    $(document).ready(function(){
      $("span").parents();
    });

  • parents()   方法返回被选元素的所有祖先元素,它一路向上直到文档的根元素 (<html>)。
    $(document).ready(function(){
      $("span").parents("ul");
    });

parentsUntil()  方法返回介于两个给定元素之间的所有祖先元素。

$(document).ready(function(){
  $("span").parentsUntil("div");
});

3.jQuery子代的相关方法

  • find() 方法返回被选元素的后代元素,一路向下直到最后一个后代。
    $(document).ready(function(){
      $("div").children("p.1");
    });

children() 方法返回被选元素的所有直接子元素。该方法只会向下一级对 DOM 树进行遍历。

$(document).ready(function(){
  $("div").children();
});

4.jQuery同胞的相关方法

  • siblings()     方法返回被选元素的所有同胞元素(除去自身之外的所有兄弟元素)。
  • next()       方法返回被选元素的下一个同胞元素。只返回一个。
  • nextAll() 方法返回被选元素的所有跟随的同胞元素。
  • nextUntil() 方法返回介于两个给定参数之间的所有跟随的同胞元素。
  • prev()       方法返回被选元素的上一个同胞元素。只返回一个。
  • prevAll() 方法返回被选元素的所有上方的同胞元素。
  • prevUntil() 方法返回介于两个给定参数之间的所有上方的同胞元素。

5.jQuery的class类操作 

  • addClass() - 向被选元素添加一个或多个类
  • removeClass() - 从被选元素删除一个或多个类
  • toggleClass() - 对被选元素进行添加/删除类的切换操作,在括号内写入一个类名,若该元素节点有这个类名就给他去掉,若没有该类名就添加上去。
  • hasClass()-判断一个元素有没有某个类

6.jQuery动画

6.1显示show()和hide() 

  • $(selector).hide(speed,callback);里面的参数都是可选的,speed表示速度,可以用毫秒或者"slow(600ms)"、"normal(400ms)"、 "fast(200ms)"来表示。callback表示回调函数,一般写为function(){}
  • $(selector).show(speed,callback);里面的参数都是可选的,speed表示速度,可以用毫秒或者"slow(600ms)"、"normal(400ms)"、 "fast(200ms)"来表示。callback表示回调函数,一般写为function(){}
  • $(selector). toggle(speed,callback); 里面的参数都是可选的,speed表示速度,可以用毫秒或者"slow(600ms)"、"normal(400ms)"、 "fast(200ms)"来表示。callback表示回调函数,一般写为function(){}

6.2滑入slideDown()和滑出slideUp()

  • $(selector).slideDown(speed,callback);

  • $(selector).slideUp(speed,callback);  参数的使用和显示隐藏是一样的。

6.3淡入fadeIn()和淡出fadeOut()

  • $(selector).fadeIn(speed,callback);   参数的使用和显示隐藏是一样的。
  • $(selector).fadeOut(speed,callback);

7.自定义动画 animate()

(1)格式:$(selector).animate({params},speed,easing,callback);

  • 参数一:必选 定义形成动画的 CSS 属性。
  • 参数二:可选的 speed 参数规定效果的时长。它可以取以下值:"slow"、"fast" 或毫秒。
  • 参数三:可选的 easing代表的是缓动还是匀速 linear匀速 swing缓动(默认)
  • 参数四:可选的 callback 参数是动画完成后所执行的函数名称。

(2)stop()参数含义

格式:   $(selector).stop(stopAll,goToEnd);

  • 第一个参数:可选的 stopAll 规定是否应该清除动画队列。默认是 false,即仅停止活动的动画,允许任何排入队列的动画向后执行。
  • 第二个参数:可选的 goToEnd 规定是否立即完成当前动画。默认是 false。因此,默认地,stop() 会清除在被选元素上指定的当前动画。
  • stop() 方法用于在动画或效果完成前对它们进行停止
  • stop() 方法适用于所有 jQuery 效果函数,包括滑动、淡入淡出和自定义动画

8.jQuery添加节点的几种方式

选择一种记住即可,其他的了解,认识即可。

$()方法也可以创建节点,创建完成后要进行追加append()操作, html() 也可以进行创建节点操作,但是此方法有覆盖性, 会覆盖原来的内容,所以在使用时要拼接完成后一次性放入。

  • append() - 在被选元素的结尾插入内容(比较常用)
  • prepend() - 在被选元素的开头插入内容
  • after() - 在被选元素之后插入内容
  • before() - 在被选元素之前插入内容
  • appendTo() 方法在被选元素的结尾插入 HTML 元素

9.jQuery清除、克隆和移除节点 

  • 清除:   empty() - 从被选元素中删除子元素
  • 移除:   remove() - 删除被选元素(及其子元素)
  • 克隆:    $(selector).clone(true|false)-clone() 方法生成被选元素的副本,包含子节点、文本和属性(参数:true表示会把事件一起克隆,false表示不会把事件一起克隆(默认)但是true false都会克隆后代节点)。
本文含有隐藏内容,请 开通VIP 后查看

网站公告

今日签到

点亮在社区的每一天
去签到