2、jQuery 选择器

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

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值