本文已参与「新人创作礼」活动,一起开启掘金创作之路。
筛选方法
| 语法 | 用法 | 说明 |
|---|---|---|
| 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方法来修改简单元素样式;也可以操作类,修改多个样式。
-
参数只写属性名,则是返回属性值
$(this).css("color"); -
参数是属性名,属性值,逗号分隔,是设置一组样式,属性必须加引号,值如果是数字可以不用跟单位和引号
$(this).css("color","red"); $(this).css("width",200); -
参数可以是对象形式,方便设置多组样式。属性名和属性值用冒号隔开,属性可以不用加引号,
$(this).css({color:"red",height:200}); $(this).css({"color":"red","height":"200px"}); //复合属性必须采用驼峰命名法,如backgroundColor:"red",值是数字也可以不用加引号
设置类样式
-
添加类
$(this).addClass("current"); -
删除类名
$(this).removeClass("current"); -
切换类
$(this).toggleClass("current"); //有current类名就取消,没有则添加
注意:
参数类名没有点( . );
6.动画
显示与隐藏
-
显示隐藏效果
show([speed],[easing],[fn]);- speed :三种预定速度之一的字符串(“slow”,"normal”,or"fast”)或表示动画时长的毫秒数值(如:1000)
- easing : (Optional)用来指定切换效果,默认是“swing”,可用参数“linear"。
- fn:回调函数,在动画完成时执行的函数,每个元素执行一次。
-
隐藏
hide([speed],[easing],[fn]); -
显示与隐藏切换
toggle([speed],[easing],[fn]);
上滑与下拉
-
下拉
slideDown([speed],[easing],[fn]); -
上滑
slideUp([speed],[easing],[fn]); -
切换
slideToggle([speed],[easing],[fn]);