jQuery学习日记(二)

86 阅读1分钟

本文已参与「新人创作礼」活动,一起开启掘金创作之路。

筛选方法

语法用法说明
index()$(this).index()返回当前元素的索引值
parents()$(this).parents(".one")查找所有父级中类名为one的,无参就返回所有
parent()$("li").parent() ;查找父级
children(selector)$("ul").children("li")相当于$("ul>li"),最近—级(亲儿子)
find(selecton)$("ul").find("li");相当于$("ul li"),后代选择器
siblings(selector)$(".first").siblings(''li");查找兄弟节点,不包括自己本身
nextAll([expr])$(".first").nextAll()查找当前元素之后所有的同辈元素
prevtAll([expr])$(".last").prevAll()查找当前元素之前所有的同辈元素
hasClass(class)$('div').hasClass("protected")检查当前的元素是否含有某个特定的类,如果有,则返回true
eq(index)$("li").eq(2);相当于$("li:eq(2)" ) , index从0开始

5.样式操作

操作CSS方法

jQuery可以使用css方法来修改简单元素样式;也可以操作类,修改多个样式。

  1. 参数只写属性名,则是返回属性值

    $(this).css("color");
    
  2. 参数是属性名,属性值,逗号分隔,是设置一组样式,属性必须加引号,值如果是数字可以不用跟单位和引号

    $(this).css("color","red");
    $(this).css("width",200);
    
  3. 参数可以是对象形式,方便设置多组样式。属性名和属性值用冒号隔开,属性可以不用加引号,

    $(this).css({color:"red",height:200});
    $(this).css({"color":"red","height":"200px"});
    //复合属性必须采用驼峰命名法,如backgroundColor:"red",值是数字也可以不用加引号
    

设置类样式

  1. 添加类

    $(this).addClass("current");
    
  2. 删除类名

    $(this).removeClass("current");
    
  3. 切换类

    $(this).toggleClass("current");
    //有current类名就取消,没有则添加
    

注意:

参数类名没有点( . );

6.动画

显示与隐藏

  1. 显示隐藏效果

    show([speed],[easing],[fn]);
    
    • speed :三种预定速度之一的字符串(“slow”,"normal”,or"fast”)或表示动画时长的毫秒数值(如:1000)
    • easing : (Optional)用来指定切换效果,默认是“swing”,可用参数“linear"。
    • fn:回调函数,在动画完成时执行的函数,每个元素执行一次。
  2. 隐藏

    hide([speed],[easing],[fn]);
    
  3. 显示与隐藏切换

    toggle([speed],[easing],[fn]);
    

上滑与下拉

  1. 下拉

    slideDown([speed],[easing],[fn]);
    
  2. 上滑

    slideUp([speed],[easing],[fn]);
    
  3. 切换

    slideToggle([speed],[easing],[fn]);