JQuery - 九類選擇器

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

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

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"的元素個數
    //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() );
    
    </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元素的個數
    //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() );
    
    </script>
  </body>
</html>

3）增強基本選擇器

<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中第一個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>
    
  </body>
</html>

4）內容選擇器

<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）可見性選擇器

<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）屬性選擇器

<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）子元素選擇器

<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）表單選擇器

<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）表單對象屬性選擇器

<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對象

<script type="text/javascript">
    
        /*用JS語法創建一個一維數組，存入string類型的姓名，再迭代
        var nameArray = new Array("哈哈","呵呵","嘻嘻");
        for(var i=0;i<nameArray.length;i++){
            document.write(nameArray[i]+"<br/>");
        }*/
        
        /*用JSON語法創建一個一維數組，存入string類型的姓名，再迭代
        var nameArray = ["哈哈","呵呵","嘻嘻","都都"];//js對象
        var $nameArray = $(nameArray);//jquery對象
        $nameArray.each(function(){
            this表示數組中每一個元素，this屬性js對象，this代表string類型
            alert(this);
        });*/   
        
        //用JSON語法創建一個一維數組，存入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標簽插入到UL標簽之前(父子關系)
        $("ul").prepend( $("div") );
    </script>

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

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

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

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

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

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

attr(name) ：獲取屬性值

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

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

<script type="text/javascript">
        
        //創建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() ：刪除自已及其后代節點

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

val() ：獲取value屬性的值

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

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

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

replaceWith() ：替代原來的節點

<script type="text/javascript">
        //雙擊<div>中的文本，用文本框替換文本
        $("div").dblclick( function(){
            var $text = $("<input type='text' style='width:165px;height:23px'/>");
            //文本框替代div標簽
            $(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() ：判斷標簽是否有指定的樣式，true表示有樣式，false表示無樣式
toggleClass() ：如果標簽有樣式就刪除，否則增加樣式

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

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

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

children() ：只查詢子節點，不含后代節點

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

next() ：下一下兄弟節點
prev() ：上一下兄弟節點
siblings() ：上下兄弟節點
show() ：顯示對象
hide() ：隱藏對象

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

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

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

slideUp() ：向上滑動
slideDown() ：向下滑動
slideToggle() ：上下切換滑動，速度快點

三）jQuery常用Event-API

目的：對web頁面（HTML/JSP）進行事件觸發，完成特殊效果的處理

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

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

        /*使用jQuery方式加載a()和b()二個方法
        $(document).ready(function(){
            a();
        }); 
        $(document).ready(function(){
            b();
        }); 
        */
    
        /*使用jQuery最簡方式加載a()和b()二個方法
        $(function(){
            a();
        });
        $(function(){
            b();
        });
        */
        
        //將js方式的onload與jquery方式的ready對比，看哪個執行快
        window.onload = function(){
            alert("傳統");
        }
        $(function(){
            alert("現代");
        });
        
    </script>

change : 當內容改變時觸發

<script type="text/javascript">
        //當<select>標簽觸發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 : 焦點獲取

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

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

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

mousemove : 在指定區域中不斷移動觸發

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

mouseover : 鼠標移入時觸發
mouseout : 鼠標移出時觸發

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

submit : 在提交表單時觸發，true表示提交到后臺，false表示不提交到后臺

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

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

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

click : 單擊觸發

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

dblclick : 雙擊觸發

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

blur : 焦點失去

最后編輯于：2017.12.07 02:21:14

?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明：文章內容（如有圖片或視頻亦包括在內）由作者上傳并發布，文章內容僅代表作者本人觀點，簡書系信息發布平臺，僅提供信息存儲服務。

人面猴
序言：七十年代末，一起剝皮案震驚了整個濱河市，隨后出現的幾起案子，更是在濱河造成了極大的恐慌，老刑警劉巖，帶你破解...
沈念sama閱讀 228,345評論 6贊 531
死咒
序言：濱河連續發生了三起死亡事件，死亡現場離奇詭異，居然都是意外死亡，警方通過查閱死者的電腦和手機，發現死者居然都...
沈念sama閱讀 98,494評論 3贊 416
救了他兩次的神仙讓他今天三更去死
文/潘曉璐我一進店門，熙熙樓的掌柜王于貴愁眉苦臉地迎上來，“玉大人，你說我怎么就攤上這事。” “怎么了？”我有些...
開封第一講書人閱讀 176,283評論 0贊 374
道士緝兇錄：失蹤的賣姜人
文/不壞的土叔我叫張陵，是天一觀的道長。經常有香客問我，道長，這世上最難降的妖魔是什么？我笑而不...
開封第一講書人閱讀 62,953評論 1贊 309
?港島之戀（遺憾婚禮）
正文為了忘掉前任，我火速辦了婚禮，結果婚禮上，老公的妹妹穿的比我還像新娘。我一直安慰自己，他們只是感情好，可當我...
茶點故事閱讀 71,714評論 6贊 410
惡毒庶女頂嫁案：這布局不是一般人想出來的
文/花漫我一把揭開白布。她就那樣靜靜地躺著，像睡著了一般。火紅的嫁衣襯著肌膚如雪。梳的紋絲不亂的頭發上，一...
開封第一講書人閱讀 55,186評論 1贊 324
城市分裂傳說
那天，我揣著相機與錄音，去河邊找鬼。笑死，一個胖子當著我的面吹牛，可吹牛的內容都是我干的。我是一名探鬼主播，決...
沈念sama閱讀 43,255評論 3贊 441
雙鴛鴦連環套：你想象不到人心有多黑
文/蒼蘭香墨我猛地睜開眼，長吁一口氣：“原來是場噩夢啊……” “哼！你這毒婦竟也來了？” 一聲冷哼從身側響起，我...
開封第一講書人閱讀 42,410評論 0贊 288
萬榮殺人案實錄
序言：老撾萬榮一對情侶失蹤，失蹤者是張志新（化名）和其女友劉穎，沒想到半個月后，有當地人在樹林里發現了一具尸體，經...
沈念sama閱讀 48,940評論 1贊 335
?護林員之死
正文獨居荒郊野嶺守林人離奇死亡，尸身上長有42處帶血的膿包…… 初始之章·張勛以下內容為張勛視角年9月15日...
茶點故事閱讀 40,776評論 3贊 354
?白月光啟示錄
正文我和宋清朗相戀三年，在試婚紗的時候發現自己被綠了。大學時的朋友給我發了我未婚夫和他白月光在一起吃飯的照片。...
茶點故事閱讀 42,976評論 1贊 369
活死人
序言：一個原本活蹦亂跳的男人離奇死亡，死狀恐怖，靈堂內的尸體忽然破棺而出，到底是詐尸還是另有隱情，我是刑警寧澤，帶...
沈念sama閱讀 38,518評論 5贊 359
?日本核電站爆炸內幕
正文年R本政府宣布，位于F島的核電站，受9級特大地震影響，放射性物質發生泄漏。R本人自食惡果不足惜，卻給世界環境...
茶點故事閱讀 44,210評論 3贊 347
男人毒藥：我在死后第九天來索命
文/蒙蒙一、第九天我趴在偏房一處隱蔽的房頂上張望。院中可真熱鬧，春花似錦、人聲如沸。這莊子的主人今日做“春日...
開封第一講書人閱讀 34,642評論 0贊 26
一樁弒父案，背后竟有這般陰謀
文/蒼蘭香墨我抬頭看了看天上的太陽。三九已至，卻和暖如春，著一層夾襖步出監牢的瞬間，已是汗流浹背。一陣腳步聲響...
開封第一講書人閱讀 35,878評論 1贊 286
情欲美人皮
我被黑心中介騙來泰國打工，沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留，地道東北人。一個月前我還...
沈念sama閱讀 51,654評論 3贊 391
代替公主和親
正文我出身青樓，卻偏偏與公主長得像，于是被迫代替她去往敵國和親。傳聞我的和親對象是個殘疾皇子，可洞房花燭夜當晚...
茶點故事閱讀 47,958評論 2贊 373

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

JQuery - 九類選擇器

JQuery - 九類選擇器

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

二）jQuery常用Method-API

三）jQuery常用Event-API

推薦閱讀更多精彩內容

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

JQuery - 九類選擇器

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

二）jQuery常用Method-API

三）jQuery常用Event-API

推薦閱讀更多精彩內容

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