jquery学习3_jquery常用选择器
jQuery选择器有很多,基本兼容了CSS1到CSS3所有的选择器,并且jQuery还添加了很多更加复杂的选择器。
基础选择器
名称 | 用法 | 描述 |
---|
ID选择器 | $(“#id”); | 获取指定ID的元素 |
类选择器 | $(“.class”); | 获取同一类class的元素 |
标签选择器 | $(“div”); | 获取同一类标签的所有元素 |
并集选择器 | $(“div,p,li”); | 使用逗号分隔,只要符合条件之一就可。 |
交集选择器 | $(“div.redClass”); | 获取class为redClass的div元素 |
层级选择器
名称 | 用法 | 描述 |
---|
子代选择器 | $(“ul>li”); | 使用>号,获取儿子层级的元素,注意,并不会获取孙子层级的元素(获取所有ul下的第一层li) |
后代选择器 | $(“ul li”); | 使用空格,代表后代选择器,获取ul下的所有li元素,包括孙子等 |
过滤选择器
名称 | 用法 | 描述 |
---|
:eq(index) | $(“li:eq(2)”).css(“color”, ”red”); | 获取到的li元素中,选择索引号为2的元素,索引号index从0开始。 |
:odd | $(“li:odd”).css(“color”, ”red”); | 获取到的li元素中,选择索引号为奇数的元素 |
:even | $(“li:even”).css(“color”, ”red”); | 获取到的li元素中,选择索引号为偶数的元素 |
筛选选择器
名称 | 用法 | 描述 |
---|
children(selector) | $(“ul”).children(“li”) | 相当于$(“ul>li”),子类选择器 |
find(selector) | $(“ul”).find(“li”); | 相当于$(“ul li”),后代选择器 |
siblings(selector) | $(“#first”).siblings(“li”); | 查找兄弟节点,不包括自己本身。 |
parent() | $(“#first”).parent(); | 查找父亲 |
eq(index) | $(“li”).eq(2); | 相当于$(“li:eq(2)”),index从0开始 |
next() | $(“li”).next() | 找下一个兄弟 |
prev() | $(“li”).prev() | 找上一次兄弟 |
// 鼠标移入的子选项展示
// 给li注册鼠标经过事件,让自己的ul显示出来
$li.mouseenter(function () {
//找到所有的儿子,并且还得是ul
$(this).children("ul").show();
});
$li.mouseleave(function () {
$(this).children("ul").hide();
});
// 选中图片高亮,其他图片加蒙层
$(".wrap>ul>li").mouseenter(function () {
$(this).css("opacity", "1").siblings().css("opacity", "0.4");
});
$(".wrap").mouseleave(function () {
$(this).find('li').css("opacity", 1);
});
// 选中图片高亮,其他图片影藏
$("#left>li").mouseenter(function () {
$("#center>li:eq(" + $(this).index() + ")").show().siblings().hide();
});
$("#right>li").mouseenter(function () {
$("#center>li").eq($(this).index() + 9).show().siblings().hide();
});