1. 程式人生 > >19、Query九類選擇器

19、Query九類選擇器

要求
1)掌握jQuery九類選擇器及應用
2)掌握jQuery常用Method-API
3)掌握jQuery常用Event-API

一)jQuery九類選擇器【參見jQueryAPI.chm手冊】
目的:通過九類選擇器,能定位web頁面(HTML/JSP/XML)中的任何標籤
(1)基本選擇器【參見01_selector.html】

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

    //2)查詢DIV元素的個數
    //alert( $("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() );

(2)層次選擇器【參見02_selector.html】

  <!-- 
    <input type="radio" value="z"/>
    <input type="radio" value="e"/>
    <input type="radio" value="y"/>
    -->
<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"/> <script type="text/javascript"> //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)增強基本選擇器【參見03_selector.html】

  <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[0]</td></tr>
      <tr><td>line2[1]</td></tr>
      <tr><td>line3[2]</td></tr>
      <tr><td>line4[3]</td></tr>
      <tr><td>line5[4]</td></tr>
      <tr><td>line6[5]</td></tr>
    </table>    

    <h1>h1</h1>
    <h2>h2</h2> 
    <h3>h3</h3>

    <p>p</p>


    <script type="text/javascript">
        //1)查詢UL中第一個LI元素的內容
            //html()要用於html/jsp,不能用在xml
            //text()既能用於html/jsp,且能用於xml
            //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開始,這是一種祖先 後代 的變化形式
            //html():強調的是標籤中的內容,即便標籤中的子標籤,也會顯示出來
            //text():強調的是標籤中的文字內容,即便標籤中的子標籤,也只會顯示出文字內容,不會顯示子標籤
            //alert( $("table tr:eq(1)").text() );

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

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

        //9)給頁面內所有標題<h1><h2><h3>加上紅色背景色,且文字加藍色
            //$(":header").css("background-color","red").css("color","#ffff33");

        //3)查詢所有[未]選中的input為checkbox的元素個數
            alert( $(":checkbox:not(:checked)").size() );

    </script>

(4)內容選擇器【參見04_selector.html】

  <html>
  <head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <script type="text/javascript" src="../js/jquery-1.8.2.js"></script>
    <style type="text/css">
        .myClass{
            font-size:44px;
            color:blue
        }
    </style>
  </head>
  <body>

    <div><p>John Resig</p></div>
    <div><p>George Martin</p></div>
    <div>Malcom John Sinclair</div>
    <div>J. Ohn</div>
    <div></div>

    <p></p>
    <p></p>

    <script type="text/javascript">

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

    </script>

  </body>
</html>

(5)可見性選擇器【參見05_selector.html】

  <html>
  <head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <script type="text/javascript" src="../js/jquery-1.8.2.js"></script>
  </head>
  <body>

    <table border="1" align="center">
      <tr style="display:none">
        <td>Value 1</td>
      </tr>
      <tr>
        <td>Value 2</td>
      </tr>
      <tr>
        <td>Value 3</td>
      </tr>
    </table>

    <script type="text/javascript">
        //1)查詢隱藏的tr元素的個數
        //alert( $("table tr:hidden").size() );

        //2)查詢所有可見的tr元素的個數
        //alert( $("table tr:NOT(:hidden)").size() );
        alert( $("table tr:visible").size() );//提倡
    </script>

  </body>
</html> 

(6)屬性選擇器【參見06_selector.html】

    <html>
  <head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <script type="text/javascript" src="../js/jquery-1.8.2.js"></script>
  </head>
  <body>

    <div>
      <p>Hello!</p>
    </div>
    <div id="test2"></div>

    <input type="checkbox" name="newsletter" value="Hot Fuzz"/>
    <input id="myID" type="checkbox" name="newsletter" value="Cold Fusion" />
    <input type="checkbox" name="newsaccept" value="Evil Plans" />

    <!-- 
    <input type="checkbox" name="letternews" value="Hot Fuzz"/>
    <input id="myID" type="checkbox" name="letnewster" value="Cold Fusion" />
    <input type="checkbox" name="accNEWSept" value="Evil Plans" />
    -->

    <script type="text/javascript">

        //1)查詢所有含有id屬性的div元素個數
        //alert( $('div[id]').size() );

        //2)查詢所有name屬性是newsletter的input元素,並將其選中
        //$("input[name='newsletter']").attr("checked","checked");

        //3)查詢所有name屬性不是newsletter的input元素,並將其選中
        //$("input[name!='newsletter']").attr("checked","true");
        /*
            請問:在JS中如下符號表示什麼意思
            1)=/==/===
            2)!=/!==
            明天講解
         */
        //4)查詢所有name屬性以'news'開頭的input元素,並將其選中
        //$("input[name^='news']").attr("checked","checked");

        //5)查詢所有name屬性以'letter'結尾的input元素,並將其選中
        //$("input[name$='letter']").attr("checked","checked");

        //6)查詢所有name屬性包含'news'的input元素,並將其選中
        //$("input[name*='news']").attr("checked","checked");

        //7)找到所有含有id屬性,並且它的name屬性是以"letter"結尾的input元素,並將其選中
        $("input[id][name$='letter']").attr("checked","true");

    </script>

  </body>
</html>

(7)子元素選擇器【參見07_selector.html】

<html>
  <head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <script type="text/javascript" src="../js/jquery-1.8.2.js"></script>
  </head>
  <body>

    <ul>
      <li>John</li>
      <li>Karl</li>
      <li>Brandon</li>
    </ul>

    <ul>
      <li>Glen</li>
      <li>Tane</li>
      <li>Ralph</li>
    </ul>

    <ul>
      <li>Marry</li>
    </ul>

    <ul>
      <li>Jack</li>
    </ul>


    <script type="text/javascript">

        /*1)迭代[each]每個ul中第1個li元素中的內容,索引從1開始
        $("ul li:first-child").each(function(){
            alert( $(this).text() );
        });
        */

        /*2)迭代每個ul中最後1個li元素中的內容,索引從1開始
        $("ul li:last-child").each(function(){
            alert( $(this).text() );
        });
        */

        /*4)迭代每個ul中第2個li元素中的內容,索引從1開始
        $("ul li:nth-child(2)").each(function(){
            alert( $(this).text() );
        });*/

        //3)在ul中查詢是唯一子元素的li元素的內容
        $("ul li:only-child").each(function(){
            alert( $(this).text() );
        });



    </script>
  </body>
</html>

(8)表單選擇器【參見08_selector.html】

    <html>
  <head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <script type="text/javascript" src="../js/jquery-1.8.2.js"></script>
  </head>
  <body>
    <form>
        <input type="button" value="Input Button"/><br/>
        <input type="checkbox" /><br/>
        <input type="file" /><br/>
        <input type="hidden" name="id" value="123"/><br/>
        <input type="image" src="../images/lb.jpg" width="25px" height="25px"/><br/>
        <input type="password" /><br/>
        <input type="radio" /><br/>
        <input type="reset" /><br/>
        <input type="submit" /><br/>
        <input type="text" /><br/>
        <select><option>Option</option></select><br/>
        <textarea></textarea><br/>
        <button>Button</button><br/>
    </form>

    <script type="text/javascript">

        //1)查詢所有input元素的個數
        //alert( $("input").size() );//10,找input標籤
        //alert( $(":input").size() );//13,找input標籤和select/textarea/button

        //2)查詢所有文字框的個數
        //alert( $(":text").size() );

        //3)查詢所有密碼框的個數
        //alert( $(":password").size() );

        //4)查詢所有單選按鈕的個數
        //alert( $(":radio").size() );

        //5)查詢所有複選框的個數
        //alert( $(":checkbox").size() );

        //6)查詢所有提交按鈕的個數
        //alert( $(":submit").size() );

        //7)匹配所有影象域的個數
        //alert( $(":images").size() );

        //8)查詢所有重置按鈕的個數
        //alert( $(":reset").size() );

        //9)查詢所有普通按鈕的個數
        //alert( $(":button").size() );

        //10)查詢所有檔案域的個數
        //alert( $(":file").size() );

        //11)查詢所有input元素為隱藏域的個數
        //alert( $(":input:hidden").size() );

    </script>
  </body>
</html> 

(9)表單物件屬性選擇器【參見09_selector.html】

    <html>
  <head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <script type="text/javascript" src="../js/jquery-1.8.2.js"></script>
  </head>
  <body>

    <form>

      <input type="text" name="email" disabled="disabled" />
      <input type="text" name="password" disabled="disabled" />
      <input type="text" name="id" />

      <input type="checkbox" name="newsletter" checked="checked" value="Daily" />
      <input type="checkbox" name="newsletter" value="Weekly" />
      <input type="checkbox" name="newsletter" checked="checked" value="Monthly" />

      <select id="provinceID">
          <option value="1">廣東</option>
          <option value="2" selected="selected">湖南</option>
          <option value="3">湖北</option>
      </select>

    </form>



    <script type="text/javascript">

        //1)查詢所有可用的input元素的個數
        //alert( $("input:enabled").size() );

        //2)查詢所有不可用的input元素的個數
        //alert( $("input:disabled").size() );

        //3)查詢所有選中的複選框元素的個數
        //alert( $(":checkbox:checked").size() );

        //4)查詢所有未選中的複選框元素的個數
        //alert( $(":checkbox:NOT(:checked)").size() );

        //5)查詢所有選中的選項元素的個數
        //alert( $("select option:selected").size() );
        alert( $("#provinceID option:NOT(:selected)").size() );

    </script>

  </body> 
</html>
    注意:專案中,通常是多種選擇器一起使用

二)jQuery常用Method-API
目的:對web頁面(HTML/JSP/XML)中的任何標籤,屬性,內容進行增刪改查
(1)DOM簡述與分類
(A)DOM是一種W3C官方標準規則,可訪問任何標籤語言的頁面(HTML/JSP/XML)
(B)DOM是跨平臺(window/linux/unix),跨語言(javascript/java),
跨瀏覽器(ie/firefox/Chrome)的標準規則
(C)我們只需要按照DOM標準規則,針對主流瀏覽器(ie/firefox/Chrome)程式設計
(D)JS/jQuery按照DOM的標準規則,既可以操作HTML/JSP,也能操作CSS
(E)DOM標準規則不是JS的專屬,其它語言,也能適用,例如:VBScript,Java語言等

(2)DOM標準規則下的jQuery常用API,注意:以下方法均由jQuery物件呼叫
each():是jQuery中專用於迭代陣列的方法,引數為一個處理函式,this表示當前需要迭代的js物件
append():追加到父元素之後
prepend():追加到父元素之前
after():追加到兄弟元素之後
before():追加到兄弟元素之前
attr(name):獲取屬性值
attr(name,value):給符合條件的標籤新增key-value屬性對
$(“

HTML程式碼“):建立元素,屬性,文字
remove():刪除自已及其後代節點
val():獲取value屬性的值
val(“”):設定value屬性值為”“空串,相當於清空
text():獲取HTML或XML標籤之間的值
text(“”):設定HTML或XML標籤之間的值為”“空串
clone():只複製樣式,不復制行為
clone(true):既複製樣式,又複製行為
replaceWith():替代原來的節點
removeAttr():刪除已存在的屬性
addClass():增加已存在的樣式
removeClass():刪除已存在的樣式
hasClass():判斷標籤是否有指定的樣式,true表示有樣式,false表示無樣式
toggleClass():如果標籤有樣式就刪除,否則增加樣式
offset():獲取物件的left和top座標
offset({top:100,left:200}):將物件直接定位到指定的left和top座標
width():獲取物件的寬
width(300):設定物件的寬
height():獲取物件的高
height(500):設定物件的高
children():只查詢子節點,不含後代節點
next():下一下兄弟節點
prev():上一下兄弟節點
siblings():上下兄弟節點
show():顯示物件
hide():隱藏物件
fadeIn():淡入顯示物件
fadeOut():淡出隱藏物件
slideUp():向上滑動
slideDown():向下滑動
slideToggle():上下切換滑動,速度快點
面試題–find(“9類選擇器”):查詢指定的節點和多重each()迭代

//使用jquery彈出奇數的tr標籤下的td裡的值

var $tr = $("table tr:lt(4):even");
$tr.each(function(){
//tr中查詢td標籤,$(this)表示tr
var $td = $(this).find("td");
$td.each(function(){
        //$(this)表示td
        var txt = $(this).text();
alert(txt);
});
});

三)jQuery常用Event-API
目的:對web頁面(HTML/JSP)進行事件觸發,完成特殊效果的處理
window.onload:在瀏覽器載入web頁面時觸發,可以寫多次onload事件,但後者覆蓋前者
ready:在瀏覽器載入web頁面時觸發,可以寫多次ready事件,不會後者覆蓋前者,依次從上向下執行,我們常用$(函式)簡化
ready和onload同時存在時,二者都會觸發執行,ready快於onload
change:當內容改變時觸發
focus:焦點獲取
select:選中所有的文字值
keyup/keydown/keypress:演示在IE和Firefox中獲取event物件的不同
mousemove:在指定區域中不斷移動觸發
mouseover:滑鼠移入時觸發
mouseout:滑鼠移出時觸發
submit:在提交表單時觸發,true表示提交到後臺,false表示不提交到後臺
click:單擊觸發
dblclick:雙擊觸發
blur:焦點失去

作業:
1)將selector目錄下的所有練習題做一遍
2)將method目錄下的所有練習題做一遍
3)將event目錄下的所有練習題做一遍[暫不做]
4)將exe目錄下的所有練習題做一遍