JQuery 筆記——選擇器

JQuery 筆記

選擇器

目的：通過選擇器，能定位web頁面（HTML/JSP/XML）中的任何標籤
（1） 基本選擇器【參見selector_1.html】

    //1)查找ID爲"div1ID"的元素個數
        alert( $("#div1ID").size() );

    //2)查找DIV元素的個數
        alert( $("div").size() );

    //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() );

（2） 層次選擇器【參見selector_2.html】
//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() );

（3） 增強基本選擇器【參見selector_3.html】
//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() );

（4） 內容選擇器【參見selector_4.html】
//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() );