jq 选择器

CSS选择器
1.id选择器

$(".list").css("color","red");

2.class选择器

$("#idd").css("color","green");

3.标签选择器

$("li").css("color","yellow");

4.通用选择器

$("*").css("color","red");

5.层级选择器

$("div>span").html()

6.后代选择器

$("div span").html("哈哈")

7.子代选择器

$("div>span>span").html("呵呵");

8.群主选择器

$("div,p").html("我是新增的")

9.交叉选择器

$("#btn.box").css("background","pink")

10.紧邻选择器

        // 条件1: 紧挨着制定目标  (这里的指定目标: .box)
        // 条件2: 需要在目标的下方书写
        $(".box+p").html("我是一个段落");

11.同辈选择器

$(".box~p").css("background","yellow");

12.条件:first 匹配到第一个符合条件的元素

 $('li:first').css("background","yellow")

13.条件:last 匹配到最后一个符合条件的元素

$('li:last').css("background","red")

14.条件:not() 除了()中指定的条件,获取当前指定的元素,括号中可以是类名,不能写数字

$("li:not(.list)").html("我是一个Li");

15.条件:even索引为偶数的,从0开始,0为偶数

 $("li:even").css("background","blue");

16.条件:odd 索引为奇数的

$("li:odd:not(.list)").css("background","pink");

17.条件:eq(指定索引值)

$("li:eq(0)").html("我是一个开头");

18.条件:gt(大于索引值)

$("li:gt(1)").html("我是被修改的");

19.条件:lt(小于索引值)

$("li:lt(5)").css("color","black");

后代选择器和find()方法

$("p span").html("我被html方法改了");
//搜索所有段落中的后代 span 元素,并将其颜色设置为红色:
$("p").find("span").css("background","red");

子元素选择器和 children() 方法

$("p>span").css("color","blue");
// 取得一个包含 匹配的元素集合中 每一个元素的所有子元素的元素集合
// 描述:查找DIV中的每个子元素。
$("p").children().css("fontSize","30px");
// 描述:在每个父级div中查找 .selected 的类名
$("div").children(".selected")

紧邻选择器和 next()方法

 $(".d+button").html("点我");
 $(".d").next().css("color","blue");

nextAll 方法 后面所有

$(".d").nextAll("button").html("哈哈哈");

prev 方法上一个

$(".d").prev().html("我是上一个div");

prevAll 方法上面所有

        $(".d").prevAll().html("我是新来的div");  // innerHTML
        $(".d").prevAll("span").text("我是新来的div"); // innerText
        $(".d+button").val("大爷"); //input框的 value

siblings 方法上面下面所有同级的所有,不包括自己

$(".d").siblings("button")

parent 获取父元素
addclass

$(selector).addClass("class") //为每一个匹配的元素添加指定的类名
  • 1
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

Jason–json

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值