jQuery学习笔记之概念(1)

时间:2022-06-22
本文章向大家介绍jQuery学习笔记之概念(1),主要内容包括其使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。

jQuery学习笔记之概念(1) ——————————————————————学习目录———————————————————— 1.概念 2.特点 3.选择器 4.DOM操作 5.事件 6.jQuery的Ajax ———————————————————————————————————————————————— 前言:当前流行的JavaScript库有: jQuery、MooTools、Prototype、Dojo、YUI、EXT_JS、DWR 1.概念: 核心库、UI和插件等。 jQuery是继承prototype之后又一个优秀的JavaScript库。现在jQuery主要包括核心库、UI和插件等。。 jQuery凭借着简介的语法和跨平台的兼容性,极大地简化了JavaScript开发人员遍历HTML文档、操作DOM。处理事件执行动画和开发ajax的操作。

2.特点: 优点: 1.轻量级(写更少的代码,做更多的事) 2.强大的选择器(操作DOM,得到DOM) 3.出色的DOM操作封装 4.可靠的事件处理机制(js里面的函数都是基于事件驱动) 5.完善的Ajax(浏览器给我提供了一个对象叫做XMLHttpRequest,我们可以使用这个对象来发送http请求,完成异步交互) 6.不污染顶级变量,在jQuery里面只有一个对象 jQuery == $ 7.出色的浏览器兼容性 8.链式操作方法 jQuery.size.css() 9.隐式迭代,屏蔽了for,我可以迭代一个数组,集合 10.行为层与结构层的分离 11.丰富的插件支持后期扩展方便 12.完善的文档 什么是jQuery对象,什么是DOM对象? DOM对象,通过DOM包装后的HTML元素 jQuery对象,通过jQuery对象包装DOM对象之后产生的对象 jQuery对象不能调用DOM对象里面的属性和方法; DOM对象不能调用jQuery对象里面的属性和方法。 jQueryOrDOM.java

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
<html>
  <head>
    <title>jquery vs dom 对象</title>
    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
    <meta http-equiv="description" content="this is my page">
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <script type="text/javascript" src="../../js/jquery-1.4.2.js"></script>
    <script type="text/javascript">
//          window.onload=function(){
//              
//              
//          }

//          jQuery  == $
            //页面已加载的时候执行..
//          $(function(){
//              
//              
//          })

            $(function(){
                $("#jquerybutton").click(function(){
                    //什么是jquery 对象,什么是dom 对象

//                  dom 对象
//                  var username=document.getElementById("username");
//                  alert(username.value);

                    //jquery 对象..
//                  var $username=$("#username");
////                    alert($username.val());
//
//
//                  //这两种对象之间是可以相互转换的,jquery 对象可以转换成dom 对象,dom 对象可以转换成jquery 对象,,
//                  //将jquery 对象转换成dom 对象的两种方式...
//                  //第一种转换方式..
////                    var username=$username.get(0); 
////                    alert(username.value);
//                  
//                  
//                  //第二种转换方式.
//                  var username=$username[0];
//                  alert(username.value);
                    //结论:jquery 对象就是一个数组对象...

//              -----------------------怎么将dom 对象转换成jquery 对象..  ----------------------------------


                    var username=document.getElementById("username");
                    //不能调用..
//                  alert(username.val());
                    var $username=$(username);
                    alert($username.val());
                })
            })



    </script>


  </head>

  <body>
            用户名:<input type="text" id="username">
            <input type="button" id="jquerybutton" value="jquery 操作..">

  </body>
</html>

3.案例 核心库 3.1 选择器(去获取DOM,要操作,必须先得到DOM) jQuery提供了9大选择器 1.基础选择器

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 <title>01-基本选择器.html</title>
 <!--   引入jQuery --> 
 <script src="../js/jquery-1.4.2.js" type="text/javascript"></script>
 <script src="./script/assist.js" type="text/javascript"></script>
 <link rel="stylesheet" type="text/css" href="./css/style.css" /> 
 <script type="text/javascript">
  //== window.onload = function(){}
  $(document).ready(function(){   
      //<input type="button" value="选择 id为 one 的元素." id="btn1"/> 
      $("#btn1").click(function(){


            /**
             * css
             * 1:样式的名称
             * 
             * 2:样式的值
             */
            $("#one").css("background","red");
      });

      //<input type="button" value="选择 class 为 mini 的所有元素." id="btn2"/>
      $("#btn2").click(function(){
            $(".mini").css("background","blue");
      });

      //<input type="button" value="选择 元素名是 div 的所有元素." id="btn3"/>
      $("#btn3").click(function(){
            $("div").css("background","yellow");
      });

      //<input type="button" value="选择 所有的元素." id="btn4"/>
      $("#btn4").click(function(){
            $("*").css("background","green");
      });

      //<input type="button" value="选择 所有的span元素和id为two的元素." id="btn5"/>
      $("#btn5").click(function(){
            //组合选择器..
            $("span,#two").css("background","green");

      });

  });
  </script>
</head>
<body>
  <button id="reset">手动重置页面元素</button>
  <input type="checkbox" id="isreset" checked="checked"/><label for="isreset">点击下列按钮时先自动重置页面</label><br /><br />
 <h3>基本选择器.</h3>

 <!-- 控制按钮 -->
  <input type="button" value="选择 id为 one 的元素." id="btn1"/>  
  <input type="button" value="选择 class 为 mini 的所有元素." id="btn2"/>
  <input type="button" value="选择 元素名是 div 的所有元素." id="btn3"/>
  <input type="button" value="选择 所有的元素." id="btn4"/>
  <input type="button" value="选择 所有的span元素和id为two的元素." id="btn5"/>
  <br /><br />



   <!-- 测试的元素 -->
  <div class="one" id="one" >
 id为one,class为one的div
      <div class="mini">class为mini</div>
  </div>

    <div class="one"  id="two" title="test" >
     id为two,class为one,title为test的div.
      <div class="mini"  title="other">class为mini,title为other</div>
      <div class="mini"  title="test">class为mini,title为test</div>
  </div>

  <div class="one">
      <div class="mini">class为mini</div>
      <div class="mini">class为mini</div>
      <div class="mini">class为mini</div>
      <div class="mini"></div>
  </div>



  <div class="one">
      <div class="mini">class为mini</div>
      <div class="mini">class为mini</div>
      <div class="mini">class为mini</div>
      <div class="mini"  title="tesst">class为mini,title为tesst</div>
  </div>


  <div style="display:none;"  class="none">style的display为"none"的div</div>

  <div class="hide">class为"hide"的div</div>

  <div>
  包含input的type为"hidden"的div<input type="hidden" size="8"/>
  </div>


  <span id="mover">正在执行动画的span元素.</span>

<!-- Resources from http://down.liehuo.net -->
</body>
</html>
2.层级选择器
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 <title>02-层次选择器.html</title>
 <!--   引入jQuery --> 
 <script src="../js/jquery-1.4.2.js" type="text/javascript"></script>
 <script src="./script/assist.js" type="text/javascript"></script>
 <link rel="stylesheet" type="text/css" href="./css/style.css" />  
  <script type="text/javascript">
    $(document).ready(function(){
          //<input type="button" value="选择 body内的所有div元素." id="btn1"/>
          $("#btn1").click(function(){
               $("body div").css("background","red");
          });

          // > <input type="button" value="在body内,选择子元素是div的。" id="btn2"/>
          $("#btn2").click(function(){
                $("body>div").css("background","red");
          });

          //+<input type="button" value="选择 id为one 的下一个div元素." id="btn3"/>
          $("#btn3").click(function(){
                $("#one+div").css("background","red");
          });


          //~<input type="button" value="选择 id为two的元素后面的所有div兄弟元素." id="btn4"/>
          $("#btn4").click(function(){
              $("#two~div").css("background","red");
          });

          //<input type="button" value="选择 id为two的元素的所有div兄弟元素." id="btn5"/>//$("#two").siblings("div")
          $("#btn5").click(function(){
               $("#two").siblings("div").css("background","red");
          });
    });
  </script>
</head>
<body>
  <h3>层次选择器.</h3>
  <button id="reset">手动重置页面元素</button>
  <input type="checkbox" id="isreset" checked="checked"/><label for="isreset">点击下列按钮时先自动重置页面</label><br /><br />

  <input type="button" value="选择 body内的所有div元素." id="btn1"/>
  <input type="button" value="在body内,选择子元素是div的。" id="btn2"/>
  <input type="button" value="选择 id为one 的下一个div兄弟元素." id="btn3"/>
  <input type="button" value="选择 id为two的元素后面的所有div兄弟元素." id="btn4"/>
  <input type="button" value="选择 id为two的元素的所有div兄弟元素." id="btn5"/>
  <br />
  <br />

   <!-- 测试的元素 -->
  <div class="one" id="one" >
 id为one,class为one的div
      <div class="mini">class为mini</div>
  </div>

    <div class="one"  id="two" title="test" >
     id为two,class为one,title为test的div.
      <div class="mini"  title="other">class为mini,title为other</div>
      <div class="mini"  title="test">class为mini,title为test</div>
  </div>

  <div class="one">
      <div class="mini">class为mini</div>
      <div class="mini">class为mini</div>
      <div class="mini">class为mini</div>
      <div class="mini"></div>
  </div>



  <div class="one">
      <div class="mini">class为mini</div>
      <div class="mini">class为mini</div>
      <div class="mini">class为mini</div>
      <div class="mini"  title="tesst">class为mini,title为tesst</div>
  </div>


  <div style="display:none;"  class="none">style的display为"none"的div</div>

  <div class="hide">class为"hide"的div</div>

  <div>
  包含input的type为"hidden"的div<input type="hidden" size="8"/>
  </div>


  <span id="mover">正在执行动画的span元素.</span>

<!-- Resources from http://down.liehuo.net -->
</body>
</html>
3.过滤选择器
过滤选择器主要是通过特定的过滤规则筛选出所需的DOM元素,该元素都以":"开头
按照不同的过滤规则,过滤选择器可以分为:
    基本过滤,内容过滤,可见性过滤,属性过滤,子元素过滤和表单对象属性过滤选择器。基本过滤,内容过滤,可见性过滤,属性过滤,子元素过滤和表单对象属性过滤选择器。
3.1 基本过滤
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 <title>03-基本过滤选择器.html</title>
 <!--   引入jQuery --> 
 <script src="../js/jquery-1.4.2.js" type="text/javascript"></script>

 <link rel="stylesheet" type="text/css" href="./css/style.css" />   
  <script type="text/javascript">
    $(document).ready(function(){
          //<input type="button"div:first value="选择第一个div元素." id="btn1"/>
          $("#btn1").click(function(){

                $("div:first").css("background","red");
          });

          //<input type="button" value="选择最后一个div元素." id="btn2"/>
          $("#btn2").click(function(){


             $("div:last").css("background","red");
          });

          //<input type="button" value="选择class不为one的 所有div元素.div:not(.one)" id="btn3"/>
          $("#btn3").click(function(){

                $("div:not(.one)").css("background","red");
          });

          //<input type="button" value="选择索引值为偶数 的div元素." id="btn4"/>
          $("#btn4").click(function(){
                //从零开始算...
                $("div:even").css("background","blue");
          });

          //<input type="button" value="选择索引值为奇数 的div元素." id="btn5"/>
          $("#btn5").click(function(){
            $("div:odd").css("background","blue");
          });

          //<input type="button" value="选择索引值等于3的div元素." id="btn6"/>
          $("#btn6").click(function(){

                $("div:eq(3)").css("background","blue");

          });

          //<input type="button" value="选择索引值大于3的元素." id="btn7"/>
          $("#btn7").click(function(){ 
            $("div:gt(3)").css("background","blue");
          });

          //<input type="button" value="选择索引值小于3的元素." id="btn8"/>
          $("#btn8").click(function(){
                $("div:lt(3)").css("background","blue");
          });

          //<input type="button" value="选择所有的标题元素." id="btn9"/>
          $("#btn9").click(function(){
                 $(":header").css("background","red");
          });



          //<input type="button" value="选择当前正在执行动画的所有元素." id="btn10"/>
          function move(){
                    // slideDwon();  向下滑动
                    // slideUp();  向上收起
                    //如果界面的元素是隐藏的,调用这个slideToggle方法,它会自动显示元素,
                    //如果是显示的,调用这个slideToggle方法,它会自动隐藏元素,
                $("#mover").slideToggle("slow",move);
                //滑动切换:当元素隐藏时,向下滑动,但元素显示时,先上收起..
          }
          move();
          //获取正在执行动画的元素...
          $("#btn10").click(function(){
                $(":animated").css("background","red");
          });
//animated

    });
  </script>
</head>
<body>
  <h3>基本过滤选择器.</h3>


  <button id="reset">手动重置页面元素</button>
  <input type="checkbox" id="isreset" checked="checked"/><label for="isreset">点击下列按钮时先自动重置页面</label><br /><br />

  <input type="button" value="选择第一个div元素." id="btn1"/>
  <input type="button" value="选择最后一个div元素." id="btn2"/>
  <input type="button" value="选择class不为one的 所有div元素." id="btn3"/>
  <input type="button" value="选择索引值为偶数 的div元素." id="btn4"/>
  <input type="button" value="选择索引值为奇数 的div元素." id="btn5"/>
  <input type="button" value="选择索引值等于3的元素." id="btn6"/>
  <input type="button" value="选择索引值大于3的元素." id="btn7"/>
  <input type="button" value="选择索引值小于3的元素." id="btn8"/>
  <input type="button" value="选择所有的标题元素." id="btn9"/>
  <input type="button" value="选择当前正在执行动画的所有元素." id="btn10"/>

<br /><br />

   <!-- 测试的元素 -->
  <div class="one" id="one" >
 id为one,class为one的div
      <div class="mini">class为mini</div>
  </div>

    <div class="one"  id="two" title="test" >
     id为two,class为one,title为test的div.
      <div class="mini"  title="other">class为mini,title为other</div>
      <div class="mini"  title="test">class为mini,title为test</div>
  </div>

  <div class="one">
      <div class="mini">class为mini</div>
      <div class="mini">class为mini</div>
      <div class="mini">class为mini</div>
      <div class="mini"></div>
  </div>

  <div class="one">
      <div class="mini">class为mini</div>
      <div class="mini">class为mini</div>
      <div class="mini">class为mini</div>
      <div class="mini"  title="tesst">class为mini,title为tesst</div>
  </div>


  <div style="display:none;"  class="none">style的display为"none"的div</div>

  <div class="hide">class为"hide"的div</div>

  <div>
  包含input的type为"hidden"的div<input type="hidden" size="8"/>
  </div>


  <span id="mover" >正在执行动画的span元素.</span>

<!-- Resources from http://down.liehuo.net -->
</body>
</html>
3.2 内容过滤
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 <title>04-内容过滤选择器.html</title>
 <!--   引入jQuery --> 
 <script src="../js/jquery-1.4.2.js" type="text/javascript"></script>
 <script src="./script/assist.js" type="text/javascript"></script>
 <link rel="stylesheet" type="text/css" href="./css/style.css" />  
  <script type="text/javascript">
    $(document).ready(function(){
          //<input type="button" value="选取含有文本“di”的div元素." id="btn1"/>
          //选取所有的div 元素文本里面包含div 内容的
          $("#btn1").click(function(){
               $("div:contains('div')").css("background","red");

          });

          //<input type="button" value="选取不包含子元素(或者文本元素)的div空元素." id="btn2"/> empty
          //选择所有的div 元素里面没有子元素(文本)
          $("#btn2").click(function(){
                $("div:empty").css("background","red");
          });

          //<input type="button" value="选取所有的div 元素 含有class为mini ." id="btn3"/>
          //选择div 元素..
          //选择div 元素里面包含class=mini
          $("#btn3").click(function(){

                $("div:has('.mini')").css("background","red");
          });

          //<input type="button" value="选取含有子元素(或者文本元素)的div元素." id="btn4"/>
          $("#btn4").click(function(){
               $("div:parent").css("background","red");
          });


    });
  </script>
</head>
<body>
  <h3>内容过滤选择器.</h3>
  <button id="reset">手动重置页面元素</button>
  <input type="checkbox" id="isreset" checked="checked"/><label for="isreset">点击下列按钮时先自动重置页面</label><br /><br />
  <input type="button" value="选取含有文本“di”的div元素." id="btn1"/>
  <input type="button" value="选取不包含子元素(或者文本元素)的div空元素." id="btn2"/>
  <input type="button" value="选取含有class为mini元素 的div元素." id="btn3"/>
  <input type="button" value="选取含有子元素(或者文本元素)的div元素." id="btn4"/>


<br /><br />

   <!-- 测试的元素 -->
  <div class="one" id="one" >
 id为one,class为one的div
      <div class="mini">class为mini</div>
  </div>

    <div class="one"  id="two" title="test" >
     id为two,class为one,title为test的div.
      <div class="mini"  title="other">class为mini,title为other</div>
      <div class="mini"  title="test">class为mini,title为test</div>
  </div>

  <div class="one">
      <div class="mini">class为mini</div>
      <div class="mini">class为mini</div>
      <div class="mini">class为mini</div>
      <div class="mini"></div>
  </div>



  <div class="one">
      <div class="mini">class为mini</div>
      <div class="mini">class为mini</div>
      <div class="mini">class为mini</div>
      <div class="mini"  title="tesst">class为mini,title为tesst</div>
  </div>


  <div style="display:none;"  class="none">style的display为"none"的div</div>

  <div class="hide">class为"hide"的div</div>

  <div>
  包含input的type为"hidden"的div<input type="hidden" size="8"/>
  </div>


  <span id="mover">正在执行动画的span元素.</span>

<!-- Resources from http://down.liehuo.net -->
</body>
</html>

3.3 可见性过滤

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 <title>05-可见性过滤选择器.html</title>
 <!--   引入jQuery --> 
 <script src="../js/jquery-1.4.2.js" type="text/javascript"></script>
 <script src="./script/assist.js" type="text/javascript"></script>
 <link rel="stylesheet" type="text/css" href="./css/style.css" />   
  <script type="text/javascript">
    $(document).ready(function(){
          //<input type="button" value=" 选取所有可见的div元素"  id="b1"/>
          $("#b1").click(function(){
                $("div:visible").css("background","red");
          });

          //<input type="button" value=" 选取所有不可见的元素, 利用 jQuery 中的 show() 方法将它们显示出来"  id="b2"/>
          $("#b2").click(function(){
              $("div:hidden").css("background","red").show(1000);
          });

          //<input type="button" value=" 选取所有的文本隐藏域, 并打印它们的值"  id="b3"/>

          $("#b3").click(function(){
                //alert($("input:hidden").size());
                    //alert($("input:hidden").length);
                    /**
                     * 1:index  遍历的数组元素的角标
                     * 
                     * 2:遍历出来的dom 元素,因为jquery 对象是一个数组对象,这个数组里面放的就是dom 。
                     * 
                     */
                    $("input:hidden").each(function(index,dom){
                          //alert(index);
                        //  alert(dom.value);
                         // dom.val();
                        alert($(dom).val());
                    })

          });




    });
  </script>
</head>
<body>
  <h3>可见性过滤选择器.</h3>
  <button id="reset">手动重置页面元素</button>
  <input type="checkbox" id="isreset" checked="checked"/><label for="isreset">点击下列按钮时先自动重置页面</label>
  <br/><br/>
  <input type="button" value=" 选取所有可见的div元素"  id="b1"/>
  <input type="button" value=" 选取所有不可见的元素, 利用 jQuery 中的 show() 方法将它们显示出来"  id="b2"/>
  <input type="button" value=" 选取所有的文本隐藏域, 并打印它们的值"  id="b3"/>
  <br /><br />



  <div class="one" id="one" >
 id为one,class为one的div
      <div class="mini">class为mini</div>
  </div>

    <div class="one"  id="two" title="test" >
     id为two,class为one,title为test的div.
      <div class="mini"  title="other">class为mini,title为other</div>
      <div class="mini"  title="test">class为mini,title为test</div>
  </div>

  <div class="one">
      <div class="mini">class为mini</div>
      <div class="mini">class为mini</div>
      <div class="mini">class为mini</div>
      <div class="mini"  title="tesst">class为mini,title为tesst</div>
  </div>

<input type="hidden" value="hidden_1">
<input type="hidden" value="hidden_2">
<input type="hidden" value="hidden_3">
<input type="hidden" value="hidden_4">


  <div style="display:none;"  class="none">style的display为"none"的div</div>

  <div class="hide">class为"hide"的div</div>

  <span id="mover">正在执行动画的span元素.</span>
<!-- Resources from http://down.liehuo.net -->
</body>
</html>
3.4 属性过滤
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 <title>06-属性选择器.html</title>
 <!--   引入jQuery -->
 <script src="../js/jquery-1.4.2.js" type="text/javascript"></script>
 <script src="./script/assist.js" type="text/javascript"></script>
 <link rel="stylesheet" type="text/css" href="./css/style.css" />  
 <script type="text/javascript">
    $(document).ready(function(){
          //<input type="button" value="选取含有 属性title 的div元素." id="btn1"/>

          //选择所有的div 元素里面包含title
          $("#btn1").click(function(){
                 $("div[title]").css("background","red");
          });

          //<input type="button" value="选取 属性title值等于“test”的div元素." id="btn2"/>
          $("#btn2").click(function(){
                $("div[title=test]").css("background","red");


          });


          //<input type="button" value="选取 属性title值不等于“test”的div元素(没有属性title的也将被选中)." id="btn3"/>
          $("#btn3").click(function(){
                $("div[title!=test]").css("background","red");
          });

          //<input type="button" value="选取 属性title值 以“te”开始 的div元素." id="btn4"/>
          $("#btn4").click(function(){
                $("div[title^=te]").css("background","red");
          });

          //<input type="button" value="选取 属性title值 以“est”结束 的div元素." id="btn5"/>
          $("#btn5").click(function(){
                $("div[title$=est]").css("background","red");
          });

          //<input type="button" value="选取 属性title值 含有“es”的div元素." id="btn6"/>
          $("#btn6").click(function(){
                $("div[title*=es]").css("background","red");
          });

          //<input type="button" value="组合属性选择器,首先选取有属性id的div元素,然后在结果中 选取属性title值 含有“es”的元素." id="btn7"/>
          $("#btn7").click(function(){
              $("div[id][title*=es]").css("background","red");
          });

    });
  </script>
</head>
<body>
  <button id="reset">手动重置页面元素</button>
  <input type="checkbox" id="isreset" checked="checked"/><label for="isreset">点击下列按钮时先自动重置页面</label>    



    <h3> 属性选择器.</h3>
  <input type="button" value="选取含有 属性title 的div元素." id="btn1"/>
  <input type="button" value="选取 属性title值等于“test”的div元素." id="btn2"/>
  <input type="button" value="选取 属性title值不等于“test”的div元素(没有属性title的也将被选中)." id="btn3"/>
  <input type="button" value="选取 属性title值 以“te”开始 的div元素." id="btn4"/>
  <input type="button" value="选取 属性title值 以“est”结束 的div元素." id="btn5"/>
  <input type="button" value="选取 属性title值 含有“es”的div元素." id="btn6"/>
  <input type="button" value="组合属性选择器,首先选取有属性id的div元素,然后在结果中 选取属性title值 含有“es”的元素." id="btn7"/>




    <br /><br />
   <div class="one" id="one" >
 id为one,class为one的div
      <div class="mini">class为mini</div>
  </div>

    <div class="one"  id="two" title="test" >
     id为two,class为one,title为test的div.
      <div class="mini"  title="other">class为mini,title为other</div>
      <div class="mini"  title="test">class为mini,title为test</div>
  </div>

  <div class="one">
      <div class="mini">class为mini</div>
      <div class="mini">class为mini</div>
      <div class="mini">class为mini</div>
      <div class="mini"></div>
  </div>



  <div class="one">
      <div class="mini">class为mini</div>
      <div class="mini">class为mini</div>
      <div class="mini">class为mini</div>
      <div class="mini"  title="tesst">class为mini,title为tesst</div>
  </div>


  <div style="display:none;"  class="none">style的display为"none"的div</div>

  <div class="hide">class为"hide"的div</div>

  <div>
  包含input的type为"hidden"的div<input type="hidden" size="8"/>
  </div>


  <span id="mover">正在执行动画的span元素.</span>
<!-- Resources from http://down.liehuo.net -->
</body>
</html>
3.5 子元素过滤
3.6 表单对象属性过滤选择器
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 <title>08-表单对象属性过滤选择器.html</title>
 <!--   引入jQuery -->
 <script src="../js/jquery-1.4.2.js" type="text/javascript"></script>
 <script src="./script/assist.js" type="text/javascript"></script>
 <link rel="stylesheet" type="text/css" href="./css/style.css" />  

  <script type="text/javascript">
    $(document).ready(function(){
          //<button id="btn1">对表单内 可用input 赋值操作.</button>
          $("#btn1").click(function(){
               $("input:enabled").val("wzt");

          });

          //<button id="btn2">对表单内 不可用input 赋值操作.</button>
          $("#btn2").click(function(){
             $("input:disabled").val("ydh");
          });

          //<button id="btn3">获取多选框选中的个数.</button>
          $("#btn3").click(function(){
                alert($("input:checked").length);



          });

          //<button id="btn4">获取下拉框选中的内容.</button>
          $("#btn4").click(function(){
             //select option
//           alert( $("select>option:selected").length);
            $("select>option:selected").each(function(index,doc){
                // alert(doc.value);
                //使用jQuery就可以兼容...
                alert($(doc).text());
             })



          });

    });
  </script>

</head>
<body>
  <h3> 表单对象属性过滤选择器.</h3>
   <form id="form1" action="#">
    <button type="reset">重置所有表单元素</button>
    <input type="checkbox" id="isreset" checked="checked"/><label for="isreset">点击下列按钮时先自动重置页面</label>  
    <br /><br />
  <button id="btn1">对表单内 可用input 赋值操作.</button>
  <button id="btn2">对表单内 不可用input 赋值操作.</button>
  <button id="btn3">获取多选框选中的个数.</button>
  <button id="btn4">获取下拉框选中的内容.</button>



  <br /><br />

     可用元素:<input name="add" value="可用文本框" />  <br/>
     不可用元素:<input name="email" disabled="disabled" value="不可用文本框"/><br/>
     可用元素: <input name="che" value="可用文本框" /><br/>
     不可用元素:<input name="name" disabled="disabled"  value="不可用文本框"/><br/>
     <br/>
     多选框:<br/>
     <input type="checkbox" name="newsletter" checked="checked" value="test1" />test1
     <input type="checkbox" name="newsletter" value="test2" />test2
     <input type="checkbox" name="newsletter" value="test3" />test3
     <input type="checkbox" name="newsletter" checked="checked" value="test4" />test4
     <input type="checkbox" name="newsletter" value="test5" />test5
     <div></div>

     <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
     下拉列表1:<br/>
    <select name="test" multiple="multiple" style="height:100px">
        <option>浙江</option>
        <option selected="selected" value="湖南">hunan</option>
        <option>北京</option>
        <option selected="selected" value="天津">tianj</option>
        <option>广州</option>
        <option>湖北</option>
    </select>

     <br/><br/>
     下拉列表2:<br/>
     <select name="test2" >
    <option>浙江</option>
    <option>湖南</option>
    <option selected="selected" value="北京">beijing</option>
    <option>天津</option>
    <option >广州</option>
    <option>湖北</option>
    </select>
    <br/><br/>
     <div></div>
  </form>

<!-- Resources from http://down.liehuo.net -->
</body>
</html>

下一篇 4.DOM操作 5.事件 6.jQuery的Ajax 插件