您现在的位置是:首页 > 技术教程 正文

web学习笔记(三十)

admin 阅读: 2024-04-01
后台-插件-广告管理-内容页头部广告(手机)

目录

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()


1.jQuery选择器

   $('*')选取所有元素
   $(this)选取当前html元素
   $("p.intro")选取 class 为 intro 的

元素

   $("p:first")选取第一个

元素

2. jQuery祖宗的相关方法

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

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

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

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

3.jQuery子代的相关方法

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

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

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

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 效果函数,包括滑动、淡入淡出和自定义动画

标签:
声明

1.本站遵循行业规范,任何转载的稿件都会明确标注作者和来源;2.本站的原创文章,请转载时务必注明文章作者和来源,不尊重原创的行为我们将追究责任;3.作者投稿可能会经我们编辑修改或补充。

在线投稿:投稿 站长QQ:1888636

后台-插件-广告管理-内容页尾部广告(手机)
关注我们

扫一扫关注我们,了解最新精彩内容

搜索