jquery选择器（一）

jquery选择器

现在我们讲一下jquery的常用选择器

<div id="div1ID">div1</div>
    <div id="div2ID">div2</div>
    <span class="myClass">span</span>
    <p>p</p>

---

基本选择器
（1）查找ID为“div1ID”的元素个数
$(“div1ID”).size(); (2)查找DIV元素的个数$(“div”).length
//3)查找所有样式是”myClass”的元素的个数

//alert( $(".myClass").size() );

//4)查找所有DIV,SPAN,P元素的个数
//alert( $("DIV,span,p").size() );

//5)查找所有ID为div1ID,CLASS为myClass,P元素的个数
alert( $("#div1ID,.myClass,p").size() );

---

层次选择器：

<form>
        <input type="text" value="a"/>      
        <table>
            <tr>
                <td>
                    <input type="checkbox" value="b"/>
                </td>
            </tr>           
        </table>
    </form>
    <input type="radio" value="ccccccccc"/>
    <input type="radio" value="d"/>
    <input type="radio" value="e"/>

---

        //1)找到表单form里所有的input元素的个数
            alert( $("form input").size() );

        //2)找到表单form里所有的子级input元素个数
            alert( $("form > input").size() );

        //3)找到表单form同级第一个input元素的value属性值
            alert( $("form + input").val() );

        //4)找到所有与表单form同级的input元素个数
            alert( $("form ~ input").size() );

---

增强选择器

<ul>
        <li>list item 1</li>
        <li>list item 2</li>
        <li>list item 3</li>
        <li>list item 4</li>
        <li>list item 5</li>
    </ul>
    <input type="checkbox" checked/>
    <input type="checkbox" checked/>
    <input type="checkbox"/>
    <table border="1">
      <tr><td>line1</td></tr>
      <tr><td>line2</td></tr>
      <tr><td>line3</td></tr>
    </table>    
    <h1>h1</h1>
    <h2>h2</h2> 
    <h3>h3</h3>
    <p>p</p>

---

//1)查找UL中第一个元素的内容
            alert( $("ul li:first").text() );

        //2)查找UL中最后个元素的内容
            alert( $("ul li:last").text() );

        //4)查找表格的索引号为1、3、5...奇数行个数，索引号从0开始
            alert( $("table tr:odd").size() );

        //5)查找表格的索引号为2、4、6...偶数行个数，索引号从0开始
            alert( $("table tr:even").size() );

        //6)查找表格中第二行的内容，从索引号0开始，这是一种祖先 后代 的变化形式
            alert( $("table tr td:eq(1)").text() );

        //7)查找表格中第二第三行的个数，即索引值是1和2，也就是比0大
            alert( $("table tr:gt(0)").size() );

        //8)查找表格中第一第二行的个数，即索引值是0和1，也就是比2小
            alert( $("table tr:lt(2)").size() );

        //9)给页面内所有标题<h1><h2><h3>加上红色背景色，且文字加蓝色
            $(":header").css("background-color","red").css("color","blue");

        //3)查找所有未选中的input为checkbox的元素个数
            alert( $(":checkbox:NOT(:checked)").size() );

---

内容选择器

<style type="text/css">
        .myClass{
            font-size:44px;
            color:blue
        }
    </style>
    <div><p>John Resig</p></div>
    <div><p>George Martin</p></div>
    <div>Malcom John Sinclair</div>
    <div>J. Ohn</div>
    <p></p>
    <p></p>
    <div></div>

---

        //1)查找所有包含文本"John"的div元素的个数
            alert( $("div:contains('John')").size() );

        //2)查找所有p元素为空的元素个数
            alert( $("p:empty").size() );

        //3)给所有包含p元素的div元素添加一个myClass样式
            $("div:has(p)").addClass("myClass");

        //4)查找所有含有子元素或者文本的p元素个数,即p为父元素
            alert( $("p:parent").size() );