【基础篇】理解基础选择器

一、ID 选择器

         所谓ID选择器，是指通过元素的ID来把元素检索出来，跟CSS的写法一致，ID前面加“#”号：$("#elementID").html("kael");

二、样式选择器

        所谓样式选择器，跟ID选择器差不多一样，样式选择器通过元素所使用的class名称来把元素检索出来，跟CSS的写法一致，

         样式名称前面加“.”号：$(".className").html("kael");

三、标签选择器

         标签选择器，根据标签的名称检索元素，例如我们HTML页面中常见的<div>,<p>,<span>等等，通常情况下，我们可能需要对HTML页面中

         所有的div设置背景，这时候使用标签选择器就仅仅是一行代码的事：$("div").attr("background","#000000");

四、并列选择器

         并列选择器: $("selector1,selector2,...selectorN") 跟java中的 or(" || ")差不多，它会把html文档中与selector1,selector2,...selectorN所匹配的所有元

         素检索出来。例如：让HTML中所有div,样式为“cls1" 的元素显示内容为“hello,并列选择器”：$("div, .cls").html("hello,并列选择器");

五、层级选择器

         层级选择器，顾名思义，就是一层一层的往下找。实际开发中，我们经常会需要去获取指定元素下的所有特定子孙元素。例如，

         为所有的div下面的label标签设置背景。这里需要特别说明一下，是所有子孙元素：

<label>标签1</abel>
<div>
     <p>第一个子元素</p>
     <label>第二个子元素</label>
     <label>第三个子元素</label>
     <p>
          <label>div的孙辈元素</label>
     </p>
</div>

上面是将要一个HTML片段，我们在文档中的Jquery中这样写：

$("div label").attr("background","#000000");

执行完上面这句jQuery代码，内容为：第二个子元素，第三个子元素，div的孙辈元素这三个label的背景颜色会被设置为黑色（#000000）;

 

<script type="text/javascript>
$(function(){
    $("div label").attr("background","#000000");
});
</script>

 

六、Child选择器

         child选择器，跟上面的层级选择器原理一样，区别是层级选择器会在指定元素的所有子孙元素中检索，而child选择器只在第一级子元素中检索。

         child选择器语法：$("div>p").html("");

七、Next选择器（下一个兄弟节点）

       $("div+p").html(); 意思是查找div元素的下一个兄弟元素

八、NextAll选择器（下面所有兄弟节点）

 $("div+p").html(); 意思是查找div元素的下一个兄弟元素