JQuery选择器

JQuery选择器

1.元素选择器

JQuery元素选择器基于元素名选取元素。

$("p")
$("button")

 

   <script>
            $(document).ready(function(){
                $("button").click(function(){
                    $("p").hide();
                });
            });
    </script>    

2.#id选择器

JQuery#id选择器通过HTML元素的id属性来选择指定的元素

$("#btn").click()
$("#test").hide()

    <script>
            $(document).ready(function(){
                $("#btn").click(function(){
                    $("#test").hide();
                });
            });
    </script>

3..class选择器

JQuery.class选择器通过指定的class的来选择指定的元素

$(".btn").click()
$(".test").hide()

　　<script>
            $(document).ready(function(){
                $(".btn").click(function(){
                    $(".test").hide();
                });
            });
    </script>

4.JQuery选择器总结

$("#Element") 选择id值等于Element的元素,#id选择器得到的元素是唯一的，如果文档中有不止一个元素的id为Element，该选择器返回第一个元素
$("div") 选择所有div标签元素，返回div元素数组
$(".Class")  返回所有class="Class"的元素数组
$("*") 返回文档中的所有元素

可以运用多种选择方式进行联合选择：$("#Element,div,.Class") 选择的就是使用了Class，id为Element的div元素

层叠选择器
$("form input") 选择所有form元素中的input元素
$("#Element*") 选择id为Element的所有元素
$("#Element > *") 选择id为Element的元素的子元素
$("label + input") 选择器返回的是label标签后面直接跟一个input标签的所有input标签元素 
    <label>label1</label>
    <input  id="input1" style="width:20px;"/>
    <label>label2</label>
    <input id="input2"  style="width:40px;">

基本过滤选择器：
$("tr:first") 选择tr元素的第一个
$("tr:last")  选择tr元素的最后一个
$("tr:even")  选择tr元素的0,2,4,6...个
$("tr:odd")　　选择tr元素的1,3,5...个
$("tr:eq(x)") 选择tr元素的第x个 
$("tr:lt(x)") 选择tr元素中第0~x-1个
$("tr:gt(x)") 选择tr元素中的第x+1 ~..个

内容过滤选择器：
$("div:contains('John')") 选择所有div中含有'John'文本的元素
$("div:has(p)") 选择含有p标签的div元素
$("td:parent")选择所有以td为父节点的元素数组

属性过滤选择器：
$("div[id]") 选择所有含有id属性的div元素
$("div[id][name='11']") 选择了含有id属性，name值为'11'的div元素
$("div[name!='11']") 选择了所有name属性值不等于11的div元素
$("div[id],div[name='11']") 选择了所有含有id属性的div元素，或者div元素的name值为11的所有元素
$("div[name^='11']") 选择了所有name属性值以11开头的div元素