JQurey的选择器

1.id

$("#cc").css("color","black");

2.class

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

3.标签名

$("div").css("color","blue");

4.通用选择器

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

5.层级选择器

  console.log($("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");

过滤选择器
需要匹配的条件:first 匹配到第一个符合条件的元素

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

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

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

:not 除了()中指定的条件，获取:前指定的所有元素，

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

     :even 索引为偶数的

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

    :odd  索引为奇数

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

:eq(指定索引值)

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

:gt(大于索引值)

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

:lt(小于索引值)

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

1. 后代选择器和 find()方法

 $("p span").html("我被html方法改了");

搜索所有段落中的后代 span 元素，并将其颜色设置为红色：

  $("p").find("span").css("background","red");

2. 子元素选择器和 children 方法

  $("p>span").css("color","blue");

取得一个包含 匹配的元素集合中 每一个元素的所有子元素的元素集合
描述:查找DIV中的每个子元素。

    $("p").children().css("fontSize","30px");

描述：在每个div中查找 .selected 的类

    $("div").children(".selected")

4. 紧邻选择器和 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
  

siblings 方法

 console.log($(".d").siblings("button"));

属性选择器
1. 获取具有id属性的div
目标[属性名] 当目标具备这个属性时，会被选中

 console.log($("div[id]"));

2.目标[属性名=‘属性值’]
当目标具有 指定属性的属性值时 被选中

 $("div[id='div2']").css("color","red");

3. 目标[属性名!=‘属性值’]
   选取目标中 不具有指定属性值 的所有元素

  $("div[id!='div2']").css("color","yellow");

4. 目标[属性名^=‘属性值’]
   目标指定的属性名， 是以指定的属性值开头的

  $("div[id^='d']").css("background","blue");

5. 目标[属性名$=‘属性值’]
   目标指定的属性名 是以指定的属性值结尾的

 $("div[id$='2']").css("fontSize","30px");

6. 目标[属性名*=‘属性值’]
   目标指定的属性名 只要包含指定的属性值

     $("div[id*='iv']").html("我们都被改了");

JQuery有几种选择器?
　　(1)、基本选择器：#id，class,element,;
　　(2)、层次选择器：parent>child，prev+next，prev~siblings
　　(3)、基本过滤器选择器：:first，:last，:not，:even，:odd，:eq，:gt，:lt
　　(4)、内容过滤器选择器：:contains，:empty，:has，:parent
　　(5)、可见性过滤器选择器：:hidden，:visible
　　(6)、属性过滤器选择器：[attribute]，[attribute=value]，[attribute!=value]，[attribute^=value]，[attribute$=value]，[attribute=value]
　　(7)、子元素过滤器选择器：:nth-child，:first-child，:last-child，:only-child
　　(8)、表单选择器：:input，:text，:password，:radio，:checkbox，:submit等;
　　(9)、表单过滤器选择器：:enabled，:disabled，:checked，:selected