1、jQuery 基础选择器
$(“选择器”) // 里面选择器直接写 CSS 选择器即可,但是要加引号
名称 | 用法 |
---|---|
ID选择器 | $("#id") |
类选择器 | $(".class") |
标签选择器 | $("div") |
全选选择器 | $("*") |
并集选择器 | $("div,p,li") |
交集选择器 | $("li.current") |
2、jQuery 层级选择器
名称 | 用法 |
---|---|
子代选择器 | $("ul>li") |
后代选择器 | $("ul li") |
3、jQuery 筛选选择器
$(function() {
$("ul li:first").css("color", "red"); // 第一个元素
$("ul li:last").css("color", "pink"); // 最后一个元素
$("ul li:eq(2)").css("color", "blue"); // 索引号为2的元素
$("ol li:odd").css("color", "skyblue"); // 索引为奇数的元素
$("ol li:even").css("color", "pink"); // 索引号为偶数的元素
})
4、jQuery 筛选方法(重点)
(1)查找父级
// (1) parent() 返回最近一级的父级元素(亲爸爸)
$(".son").parent();
// (2) parents(selector) 返回指定父级元素
$(".son").parents(".yeye");
(2)查找子级
// (1) children(selector) 返回亲儿子,类似子代选择器 ul>li
$(".nav").children("p").css("color", "red");
// (2) find(selector)可以选里面所有的孩子,包括儿子和孙子,类似于后代选择器 ul li
$(".nav").find("p").css("color", "red");
(3)查找兄弟节点,不包括自己
// (1)siblings(selector) 除了自身元素之外的所有亲兄弟
$("ol .item").siblings("li").css("color", "red");
(4)查找第n个元素
// eq(index) 更推荐这种写法
$("ul li").eq(2).css("color", "blue");
$("ul li").eq(index).css("color", "blue");// 变量不需要拼接字符串
// 相当于筛选选择器查找第n个元素
$("ul li:eq(2)").css("color", "blue");
$("ul li:eq("+index+")").css("color", "blue"); // 变量需要拼接字符串
(5)判断是否有某个类名
console.log($("div:first").hasClass("current")); // ture
console.log($("div:last").hasClass("current")); // false