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阅读 158,847评论 4赞 362
死咒
序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
沈念sama阅读 67,208评论 1赞 292
救了他两次的神仙让他今天三更去死
文/潘晓璐我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
开封第一讲书人阅读 108,587评论 0赞 243
道士缉凶录：失踪的卖姜人
文/不坏的土叔我叫张陵，是天一观的道长。经常有香客问我，道长，这世上最难降的妖魔是什么？我笑而不...
开封第一讲书人阅读 43,942评论 0赞 205
港岛之恋（遗憾婚礼）
正文为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
茶点故事阅读 52,332评论 3赞 287
恶毒庶女顶嫁案：这布局不是一般人想出来的
文/花漫我一把揭开白布。她就那样静静地躺着，像睡着了一般。火红的嫁衣衬着肌肤如雪。梳的纹丝不乱的头发上，一...
开封第一讲书人阅读 40,587评论 1赞 218
城市分裂传说
那天，我揣着相机与录音，去河边找鬼。笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。我是一名探鬼主播，决...
沈念sama阅读 31,853评论 2赞 312
双鸳鸯连环套：你想象不到人心有多黑
文/苍兰香墨我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
开封第一讲书人阅读 30,568评论 0赞 198
万荣杀人案实录
序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
沈念sama阅读 34,273评论 1赞 242
护林员之死
正文独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋以下内容为张勋视角年9月15日...
茶点故事阅读 30,542评论 2赞 246
白月光启示录
正文我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
茶点故事阅读 32,033评论 1赞 260
活死人
序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
沈念sama阅读 28,373评论 2赞 253
日本核电站爆炸内幕
正文年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
茶点故事阅读 33,031评论 3赞 236
男人毒药：我在死后第九天来索命
文/蒙蒙一、第九天我趴在偏房一处隐蔽的房顶上张望。院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
开封第一讲书人阅读 26,073评论 0赞 8
一桩弑父案，背后竟有这般阴谋
文/苍兰香墨我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。一阵脚步声响...
开封第一讲书人阅读 26,830评论 0赞 195
情欲美人皮
我被黑心中介骗来泰国打工，没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。一个月前我还...
沈念sama阅读 35,628评论 2赞 274
代替公主和亲
正文我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
茶点故事阅读 35,537评论 2赞 269

JQuery - 九类选择器

一）jQuery九类选择器【参见jQueryAPI.chm手册】

二）jQuery常用Method-API

三）jQuery常用Event-API

推荐阅读更多精彩内容