啊哈～哼嗯哼嗯哼嗯哼什么歌,三叶草欧码成人毛片,国模精品一区二区三区

一）jQuery九類選擇器【參見jQueryAPI.chm手冊(cè)】

目的：通過九類選擇器，能定位web頁面(HTML / JSP / XML)中的任何標(biāo)簽; 項(xiàng)目中，通常是多種選擇器一起使用

1）基本選擇器

<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 id="div1ID">div1</div>
    <div id="div2ID">div2</div>
    <span class="myClass">span</span>
    <p>p</p>
    
    <script type="text/javascript">
    
    //1)查找ID為"div1ID"的元素個(gè)數(shù)
    //alert( $("#div1ID").size() );
    
    //2)查找DIV元素的個(gè)數(shù)
    //alert( $("div").length );
    
    //3)查找所有樣式是"myClass"的元素的個(gè)數(shù)
    //alert( $(".myClass").size() );
    
    //4)查找所有DIV,SPAN,P元素的個(gè)數(shù)
    //alert( $("DIV,span,p").size() );
    
    //5)查找所有ID為div1ID,CLASS為myClass,P元素的個(gè)數(shù)
    alert( $("#div1ID,.myClass,p").size() );
    
    </script>
    
  </body>
</html>

2）層次選擇器

<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>
    <!-- 
    <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元素的個(gè)數(shù)
    //alert( $("form input").size() );
    
    //2)找到表單form里所有的子級(jí)input元素個(gè)數(shù)
    //alert( $("form>input").size() );
    
    //3)找到表單form同級(jí)第一個(gè)input元素的value屬性值
    //alert( $("form+input").val() );
    
    //4)找到所有與表單form同級(jí)的input元素個(gè)數(shù)
    alert( $("form~input").size() );
    
    </script>
  </body>
</html>

3）增強(qiáng)基本選擇器

<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>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中第一個(gè)LI元素的內(nèi)容
            //html()要用于html/jsp，不能用在xml
            //text()既能用于html/jsp，且能用于xml
            //alert( $("ul li:first").text() );
        
        //2)查找UL中最后個(gè)元素的內(nèi)容
            //alert( $("ul li:last").text() );
        
        //4)查找表格的索引號(hào)為1、3、5...奇數(shù)行個(gè)數(shù)，索引號(hào)從0開始
            //alert( $("table tr:odd").size() );
        
        //5)查找表格的索引號(hào)為2、4、6...偶數(shù)行個(gè)數(shù)，索引號(hào)從0開始
            //alert( $("table tr:even").size() );
        
        //6)查找表格中第二行的內(nèi)容，從索引號(hào)0開始，這是一種祖先 后代 的變化形式
            //html()：強(qiáng)調(diào)的是標(biāo)簽中的內(nèi)容，即便標(biāo)簽中的子標(biāo)簽，也會(huì)顯示出來
            //text()：強(qiáng)調(diào)的是標(biāo)簽中的文本內(nèi)容，即便標(biāo)簽中的子標(biāo)簽，也只會(huì)顯示出文本內(nèi)容，不會(huì)顯示子標(biāo)簽
            //alert( $("table tr:eq(1)").text() );
        
        //7)查找表格中第二第三行的個(gè)數(shù)，即索引值是1和2，也就是比0大
            //alert( $("table tr:gt(0)").size() );
        
        //8)查找表格中第一第二行的個(gè)數(shù)，即索引值是0和1，也就是比2小
            //alert( $("table tr:lt(3)").size() );
        
        //9)給頁面內(nèi)所有標(biāo)題<h1><h2><h3>加上紅色背景色，且文字加藍(lán)色
            //$(":header").css("background-color","red").css("color","#ffff33");
        
        //3)查找所有[未]選中的input為checkbox的元素個(gè)數(shù)
            alert( $(":checkbox:not(:checked)").size() );
            
    </script>
    
  </body>
</html>

4）內(nèi)容選擇器

<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元素的個(gè)數(shù)
            //alert( $("div:contains('John')").size() );
        
        //2)查找所有p元素為空的元素個(gè)數(shù)
            //alert( $("p:empty").size() );
        
        //3)給所有包含p元素的div元素添加一個(gè)myClass樣式
            //$("div:has(p)").addClass("myClass");
        
        //4)查找所有含有子元素或者文本的p元素個(gè)數(shù),即p為父元素
            alert( $("p:parent").size() );
            
    </script>

  </body>
</html>

5）可見性選擇器

<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元素的個(gè)數(shù)
        //alert( $("table tr:hidden").size() );
        
        //2)查找所有可見的tr元素的個(gè)數(shù)
        //alert( $("table tr:NOT(:hidden)").size() );
        alert( $("table tr:visible").size() );//提倡
    </script>
    
  </body>
</html>

6）屬性選擇器

<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元素個(gè)數(shù)
        //alert( $('div[id]').size() );
            
        //2)查找所有name屬性是newsletter的input元素，并將其選中
        //$("input[name='newsletter']").attr("checked","checked");
        
        //3)查找所有name屬性不是newsletter的input元素，并將其選中
        //$("input[name!='newsletter']").attr("checked","true");
        /*
            請(qǐng)問：在JS中如下符號(hào)表示什么意思
            1)=/==/===
            2)!=/!==
            明天講解
         */
        //4)查找所有name屬性以'news'開頭的input元素，并將其選中
        //$("input[name^='news']").attr("checked","checked");
                
        //5)查找所有name屬性以'letter'結(jié)尾的input元素，并將其選中
        //$("input[name$='letter']").attr("checked","checked");
        
        //6)查找所有name屬性包含'news'的input元素，并將其選中
        //$("input[name*='news']").attr("checked","checked");
        
        //7)找到所有含有id屬性，并且它的name屬性是以"letter"結(jié)尾的input元素，并將其選中
        $("input[id][name$='letter']").attr("checked","true");
        
    </script>
    
  </body>
</html>

7）子元素選擇器

<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]每個(gè)ul中第1個(gè)li元素中的內(nèi)容,索引從1開始
        $("ul li:first-child").each(function(){
            alert( $(this).text() );
        });
        */
            
        /*2)迭代每個(gè)ul中最后1個(gè)li元素中的內(nèi)容,索引從1開始
        $("ul li:last-child").each(function(){
            alert( $(this).text() );
        });
        */
        
        /*4)迭代每個(gè)ul中第2個(gè)li元素中的內(nèi)容,索引從1開始
        $("ul li:nth-child(2)").each(function(){
            alert( $(this).text() );
        });*/
    
        //3)在ul中查找是唯一子元素的li元素的內(nèi)容
        $("ul li:only-child").each(function(){
            alert( $(this).text() );
        });
    
    </script>
  </body>
</html>

8）表單選擇器

<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元素的個(gè)數(shù)
        //alert( $("input").size() );//10，找input標(biāo)簽
        //alert( $(":input").size() );//13，找input標(biāo)簽和select/textarea/button
            
        //2)查找所有文本框的個(gè)數(shù)
        //alert( $(":text").size() );
        
        //3)查找所有密碼框的個(gè)數(shù)
        //alert( $(":password").size() );
        
        //4)查找所有單選按鈕的個(gè)數(shù)
        //alert( $(":radio").size() );
        
        //5)查找所有復(fù)選框的個(gè)數(shù)
        //alert( $(":checkbox").size() );
        
        //6)查找所有提交按鈕的個(gè)數(shù)
        //alert( $(":submit").size() );
        
        //7)匹配所有圖像域的個(gè)數(shù)
        //alert( $(":images").size() );
        
        //8)查找所有重置按鈕的個(gè)數(shù)
        //alert( $(":reset").size() );
        
        //9)查找所有普通按鈕的個(gè)數(shù)
        //alert( $(":button").size() );
        
        //10)查找所有文件域的個(gè)數(shù)
        //alert( $(":file").size() );
        
        //11)查找所有input元素為隱藏域的個(gè)數(shù)
        //alert( $(":input:hidden").size() );
        
    </script>
  </body>
</html>

9）表單對(duì)象屬性選擇器

<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元素的個(gè)數(shù)
        //alert( $("input:enabled").size() );
        
        //2)查找所有不可用的input元素的個(gè)數(shù)
        //alert( $("input:disabled").size() );
        
        //3)查找所有選中的復(fù)選框元素的個(gè)數(shù)
        //alert( $(":checkbox:checked").size() );
            
        //4)查找所有未選中的復(fù)選框元素的個(gè)數(shù)
        //alert( $(":checkbox:NOT(:checked)").size() );
        
        //5)查找所有選中的選項(xiàng)元素的個(gè)數(shù)
        //alert( $("select option:selected").size() );
        alert( $("#provinceID option:NOT(:selected)").size() );
        
    </script>
    
  </body> 
</html>

二）jQuery常用Method-API

目的：對(duì)web頁面（HTML/JSP/XML）中的任何標(biāo)簽，屬性，內(nèi)容進(jìn)行增刪改查

1）DOM簡(jiǎn)述與分類
- A）DOM是一種W3C官方標(biāo)準(zhǔn)規(guī)則，可訪問任何標(biāo)簽語言的頁面(HTML/JSP/XML)
- B）DOM是跨平臺(tái)(window/linux/unix)，跨語言(javascript/java)，
  跨瀏覽器(ie/firefox/Chrome)的標(biāo)準(zhǔn)規(guī)則
- C）我們只需要按照DOM標(biāo)準(zhǔn)規(guī)則，針對(duì)主流瀏覽器(ie/firefox/Chrome)編程
- D）JS/jQuery按照DOM的標(biāo)準(zhǔn)規(guī)則，既可以操作HTML/JSP，也能操作CSS
- E）DOM標(biāo)準(zhǔn)規(guī)則不是JS的專屬，其它語言，也能適用，例如:VBScript，Java語言等
2）DOM標(biāo)準(zhǔn)規(guī)則下的jQuery常用API，注意：以下方法均由jQuery對(duì)象調(diào)用
- each() ：是jQuery中專用于迭代數(shù)組的方法，參數(shù)為一個(gè)處理函數(shù)，this表示當(dāng)前需要迭代的js對(duì)象

<script type="text/javascript">
    
        /*用JS語法創(chuàng)建一個(gè)一維數(shù)組，存入string類型的姓名，再迭代
        var nameArray = new Array("哈哈","呵呵","嘻嘻");
        for(var i=0;i<nameArray.length;i++){
            document.write(nameArray[i]+"<br/>");
        }*/
        
        /*用JSON語法創(chuàng)建一個(gè)一維數(shù)組，存入string類型的姓名，再迭代
        var nameArray = ["哈哈","呵呵","嘻嘻","都都"];//js對(duì)象
        var $nameArray = $(nameArray);//jquery對(duì)象
        $nameArray.each(function(){
            this表示數(shù)組中每一個(gè)元素，this屬性js對(duì)象，this代表string類型
            alert(this);
        });*/   
        
        //用JSON語法創(chuàng)建一個(gè)一維數(shù)組，存入object類型的姓名和薪水，再迭代
        var nameArray = [
            {
                name : "哈哈",
                sal : 6000
            },
            {   
                name : "嘿嘿",
                sal : 7000
            },
            {
                name : "笨笨",
                sal : 8000
            }
        ];
        var $nameArray = $(nameArray);
        $nameArray.each(function(){
            //this代表object類型
            alert(this.name + ":"+this.sal);
        });
        
    </script>

append() ：追加到父元素之后

<script type="text/javascript">
        //DIV標(biāo)簽插入到UL標(biāo)簽之前(父子關(guān)系)
        $("ul").prepend( $("div") );
    </script>

prepend() ：追加到父元素之前

<script type="text/javascript">
        //DIV標(biāo)簽插入到UL標(biāo)簽之后(父子關(guān)系)
        $("ul").append( $("div") ); 
        //DIV標(biāo)簽插入到UL標(biāo)簽之前(父子關(guān)系)
        $("ul").prepend( $("div") );
    </script>

after() ：追加到兄弟元素之后

<script type="text/javascript">
        //DIV標(biāo)簽插入到UL標(biāo)簽之后(兄弟關(guān)系)
        //$("ul").after( $("div") ); 
    </script>

before() ：追加到兄弟元素之前

<script type="text/javascript">
        //DIV標(biāo)簽插入到UL標(biāo)簽之前(兄弟關(guān)系)
        $("ul").before( $("div") ); 
    </script>

attr(name) ：獲取屬性值

<script type="text/javascript">
        //取得form里第一個(gè)input元素的type屬性
        //alert( $("form input:first").attr("type") );
        
        //設(shè)置form里最后個(gè)input元素的為只讀文本框
        //$("form input:last").attr("readonly","readonly")
        //$(":password").attr("readonly","readonly")
        
    </script>

attr(name,value) ：給符合條件的標(biāo)簽添加key-value屬性對(duì)
$("<div id='xxID'>HTML代碼</div>") ：創(chuàng)建元素，屬性，文本

<script type="text/javascript">
        
        //創(chuàng)建div元素，添加"哈哈"文本，ID屬性，并添加到文檔中
        //<body><div id="2015">哈哈</div></body>
        
        /*js方式
        var divElement = document.createElement("div");
        divElement.innerHTML = "哈哈哈";
        divElement.setAttribute("id","2015");
        divElement.id = "2015";
        document.body.appendChild(divElement);*/
                
        //jquery方式
        var $div = $("<div id='2015'>哈哈哈哈哈</div>");
        //$("body").append( $div ); 
        $(document.body).append( $div );    
            
    </script>

remove() ：刪除自已及其后代節(jié)點(diǎn)

<script type="text/javascript">
    
        //刪除ID為secondID的LI元素
        //$("#secondID").remove();
        
        //刪除所有LI元素
        //$("#a li").remove();
        
        //刪除UL元素
        $("#b").remove();
        
    </script>

val() ：獲取value屬性的值

<script type="text/javascript">
    
        //取得<div>中的內(nèi)容
        //alert( $("div").text() );
        
        //取得<option>的值和描述
        var $option = $("#city option");
        var value = $option.val();
        var html = $option.text();
        alert(value + ":" + html);
        
    </script>

val("") ：設(shè)置value屬性值為""空串，相當(dāng)于清空
text() ：獲取HTML或XML標(biāo)簽之間的值
text("") ：設(shè)置HTML或XML標(biāo)簽之間的值為""空串
clone() ：只復(fù)制樣式，不復(fù)制行為
clone(true) ：既復(fù)制樣式，又復(fù)制行為

<script type="text/javascript">
    
        //復(fù)制原input元素，添加到原input元素后，與其同級(jí)
        var $old = $(":button");
        var $new = $old.clone();
        $new.val("新按鈕");
        $old.after( $new );
        
        //為原input元素動(dòng)態(tài)添加單擊事件，且復(fù)制原input元素，
        //var $old = $(":button");
        //$old.click(function(){
        //  alert("動(dòng)態(tài)事件");
        //});
        
        //添加到原input元素后，與其同級(jí)，且和原按鈕有一樣的行為
        //var $new = $old.clone(true);
        //$new.val("新按鈕");
        //$old.after( $new );
        
    </script>

replaceWith() ：替代原來的節(jié)點(diǎn)

<script type="text/javascript">
        //雙擊<div>中的文本，用文本框替換文本
        $("div").dblclick( function(){
            var $text = $("<input type='text' style='width:165px;height:23px'/>");
            //文本框替代div標(biāo)簽
            $(this).replaceWith( $text );
        } );
    </script>

removeAttr() ：刪除已存在的屬性

    //為<table>元素添加屬性border/align/width
        var $table = $("table").attr("border","2").attr("align","right").attr("width","60%")
        
        //將<table>元素的align屬性刪除
        $table.removeAttr("align");
    </script>

addClass() ：增加已存在的樣式
removeClass() ：刪除已存在的樣式
hasClass() ：判斷標(biāo)簽是否有指定的樣式，true表示有樣式，false表示無樣式
toggleClass() ：如果標(biāo)簽有樣式就刪除，否則增加樣式

<script type="text/javascript">
    
        //為無樣式的DIV添加樣式
        //$("div:first").addClass("myClass");
        
        //為有樣式的DIV刪除樣式
        //$("div:last").removeClass("myClass");
        
        //切換樣式，即有樣式的變成無樣式，無樣式的變成有樣式
        //$("div").toggleClass("myClass");
        
        //最后一個(gè)DIV是否有樣式
        var flag = $("div:last").hasClass("myClass");
        alert(flag?"有樣式":"無樣式");
        
    </script>

offset() ：獲取對(duì)象的left和top坐標(biāo)
offset({top:100,left:200}) ：將對(duì)象直接定位到指定的left和top坐標(biāo)
width() ：獲取對(duì)象的寬
width(300) ：設(shè)置對(duì)象的寬
height() ：獲取對(duì)象的高
height(500) ：設(shè)置對(duì)象的高

<script type="text/javascript">
    
        //獲取圖片的坐標(biāo)
        //var offset = $("img").offset();
        //var x = offset.left;
        //var y = offset.top;
        //alert(x+":"+y);
        
        //設(shè)置圖片的坐標(biāo)
        //$("img").offset({
        //  top:100,
        //  left:200
        //});
        
        //獲取圖片的寬高
        //var w = $("img").width();
        //var h = $("img").height();
        //alert(w+":"+h);
        
        //設(shè)置圖片的寬高
        $("img").width(500);
        $("img").height(600);
        
    </script>

children() ：只查詢子節(jié)點(diǎn)，不含后代節(jié)點(diǎn)

<script type="text/javascript">
    
        //取得div元素的直接子元素內(nèi)容，不含后代元素
        //var $span = $("div").children();
        //var content = $span.html();//包含子標(biāo)簽
        //var content = $span.text();//不包含子標(biāo)簽
        //alert(content);
        
        //取得div元素的下一個(gè)同級(jí)的兄弟元素內(nèi)容  
        //var $p = $("div").next();
        //alert( $p.text() );
        
        //取得div元素的上一個(gè)同級(jí)的兄弟元素內(nèi)容
        //alert( $("div").prev().text() );
        
        //依次取得div元素的上下一個(gè)同級(jí)的所有兄弟元素的內(nèi)容
        var $all = $("div").siblings("p");      
        $all.each(function(){
            alert( $(this).html() );
        });
        
    </script>

next() ：下一下兄弟節(jié)點(diǎn)
prev() ：上一下兄弟節(jié)點(diǎn)
siblings() ：上下兄弟節(jié)點(diǎn)
show() ：顯示對(duì)象
hide() ：隱藏對(duì)象

<script type="text/javascript">
        //圖片隱蔽
        $("img").hide(5000);
        
        //休息3秒
        window.setTimeout(function(){
        
            //圖片顯示
            $("img").show(5000);
        
        },3000);
        
    </script>

fadeIn() ：淡入顯示對(duì)象
fadeOut() ：淡出隱藏對(duì)象

<script type="text/javascript">
        //淡入顯示圖片
        $("img").fadeIn(3000);
        //淡出隱蔽圖片
        $("img").fadeOut(3000);
    </script>

slideUp() ：向上滑動(dòng)
slideDown() ：向下滑動(dòng)
slideToggle() ：上下切換滑動(dòng)，速度快點(diǎn)

三）jQuery常用Event-API

目的：對(duì)web頁面（HTML/JSP）進(jìn)行事件觸發(fā)，完成特殊效果的處理

window.onload : 在瀏覽器加載web頁面時(shí)觸發(fā)，可以寫多次onload事件，但后者覆蓋前者
ready : 在瀏覽器加載web頁面時(shí)觸發(fā)，可以寫多次ready事件，不會(huì)后者覆蓋前者，依次從上向下執(zhí)行，我們常用$(函數(shù))簡(jiǎn)化
- ready和onload同時(shí)存在時(shí)，二者都會(huì)觸發(fā)執(zhí)行，ready快于onload

<script type="text/javascript">
        //定義a()和b()二個(gè)方法
        function a(){
            alert("JS方式");
        }
        function b(){
            alert("JQUERY方式");
        }
        /*使用JS方式加載a()和b()二個(gè)方法
        window.onload = function(){
            a();
        }
        window.onload = function(){
            b();
        }
        */

        /*使用jQuery方式加載a()和b()二個(gè)方法
        $(document).ready(function(){
            a();
        }); 
        $(document).ready(function(){
            b();
        }); 
        */
    
        /*使用jQuery最簡(jiǎn)方式加載a()和b()二個(gè)方法
        $(function(){
            a();
        });
        $(function(){
            b();
        });
        */
        
        //將js方式的onload與jquery方式的ready對(duì)比，看哪個(gè)執(zhí)行快
        window.onload = function(){
            alert("傳統(tǒng)");
        }
        $(function(){
            alert("現(xiàn)代");
        });
        
    </script>

change : 當(dāng)內(nèi)容改變時(shí)觸發(fā)

<script type="text/javascript">
        //當(dāng)<select>標(biāo)簽觸發(fā)onchange事件,顯示選中<option>的value和innerHTML屬性的值
        $("#city").change( function(){ 
            var $option = $("#city option:selected");
            var value = $option.val();
            var text = $option.text();
            alert(value+":"+text);
        } );
    </script>

focus : 焦點(diǎn)獲取

<script type="text/javascript">
        //加載頁面時(shí)獲取光標(biāo)并選中所有文字
        $(function(){
            //光標(biāo)定位文本框
            $(":text").focus();
            //選中文本框的所有文本
            $(":text").select();
        });
    </script>

select : 選中所有的文本值
keyup/keydown/keypress : 演示在IE和Firefox中獲取event對(duì)象的不同

<script type="text/javascript">
        //當(dāng)按鍵彈起時(shí)，顯示所按鍵的unicode碼
        $(function(){
            //IE瀏覽器會(huì)自動(dòng)創(chuàng)建event這個(gè)事件對(duì)象，那么程序員可以根據(jù)需要來使用該event對(duì)象
            $(document).keyup(function(){
                //獲取按鈕的unicode編碼
                var code = event.keyCode; 
                alert(code);
            });
        });
    </script>

mousemove : 在指定區(qū)域中不斷移動(dòng)觸發(fā)

<script type="text/javascript">
        //顯示鼠標(biāo)移動(dòng)時(shí)的X和Y座標(biāo)
        $(function(){
            $(document).mousemove(function(){
                var x = event.clientX;
                var y = event.clientY;
                $("#xID").val(x);
                $("#yID").val(y);
            });     
        });
    </script>

mouseover : 鼠標(biāo)移入時(shí)觸發(fā)
mouseout : 鼠標(biāo)移出時(shí)觸發(fā)

<script type="text/javascript">
    
        //鼠標(biāo)移到某行上，某行背景變色
        $("table tr").mouseover(function(){
            $(this).css("background-color","inactivecaption");
        }); 
        
        //鼠標(biāo)移出某行，某行還原
        $("table tr").mouseout(function(){
            $(this).css("background-color","white");
        });
        
        //鼠標(biāo)移到某圖片上，為圖片加邊框
        $("img").mouseover(function(){
            $(this).css("border-color","red");
        });
        
        //鼠標(biāo)移出圖片，圖片還原
        $("img").mouseout(function(){
            $(this).css("border-color","white");
        });
        
    </script>

submit : 在提交表單時(shí)觸發(fā)，true表示提交到后臺(tái)，false表示不提交到后臺(tái)

<script type="text/javascript">
        //瀏覽器加載web頁面時(shí)觸發(fā)
        $(function(){
            //將光標(biāo)定位于文本框中
            $(":text").focus();
        });     
    </script>

    <script type="text/javascript">
        //檢測(cè)是否為中文，true表示是中文，false表示非中文
        function isChinese(str){
            if(/^[\u3220-\uFA29]+$/.test(str)){
                return true;
            }else{
                return false;
            }
        }
    </script>

    <script type="text/javascript">
        //當(dāng)表單提交前檢測(cè)
        $("form").submit(function(){
            var flag = false;
            //獲取文本框的中內(nèi)容
            var name = $(":text").val();
            //去二邊的空格
            name = $.trim(name);
            //如果沒有填內(nèi)容
            if(name.length == 0){
                alert("用戶名必填");
                //將光標(biāo)定位于文本框中
                $(":text").focus();
                //清空文本框中的內(nèi)容
                $(":text").val("");
            }else{
                //調(diào)用方法
                flag = isChinese(name);
                //如果不是中文
                if(!flag){
                    alert("用戶名必須填中文");
                    //將光標(biāo)定位于文本框中
                    $(":text").focus();
                    //清空文本框中的內(nèi)容
                    $(":text").val("");
                }
            }
            return flag;
        });
    </script>

click : 單擊觸發(fā)

<script type="text/javascript">
        $("p").click(function(){
            alert( $(this).text() );
        })
    </script>

dblclick : 雙擊觸發(fā)

//定位左邊的下拉框，同時(shí)添加雙擊事件
        $("#leftID").dblclick(function(){
            //獲取雙擊時(shí)選中的option標(biāo)簽
            var $option = $("#leftID option:selected");
            //將選中的option標(biāo)簽移動(dòng)到右邊的下拉框中
            $("#rightID").append( $option );
        });

blur : 焦點(diǎn)失去

三个男躁一个女,国精产品一区一手机的秘密,麦子交换系列最经典十句话,欧美国产综合欧美视频

JQuery - 九類選擇器

JQuery - 九類選擇器

一）jQuery九類選擇器【參見jQueryAPI.chm手冊(cè)】

二）jQuery常用Method-API

三）jQuery常用Event-API

推薦閱讀更多精彩內(nèi)容

三个男躁一个女,国精产品一区一手机的秘密,麦子交换系列最经典十句话,欧美 国产 综合 欧美 视频

JQuery - 九類選擇器

一）jQuery九類選擇器【參見jQueryAPI.chm手冊(cè)】

二）jQuery常用Method-API

三）jQuery常用Event-API

推薦閱讀更多精彩內(nèi)容

三个男躁一个女,国精产品一区一手机的秘密,麦子交换系列最经典十句话,欧美国产综合欧美视频