jQuery 学习总结

jQuery ： write less , do more
1.  window.onload与$(document).ready()区别
          window.onload
                 网页中所有内容加载完毕(包括图片等 元素的所有关联文件)才执行
                不能同时编写多个,只能保存对一个函数的引用
                ps 如想达到多个函数顺序触发的效果
                     window . onload = function(){
                          one();
                          two();
                    }
  
        $(document) . ready(function(){})
                网页中所有dom结构绘制完毕(与dom关联的东西并没有加载完)就执行
                能同时编写多个,在现有行为上追加新行为
                简写为: $(function(){ });
                            $().ready(function(){})
               注册的事件只要dom就绪就会被执行
  
        load() : jQuery关于页面加载的另一个函数
                   在元素的onload事件中绑定一个处理函数，如处理函数绑定给window对象，

                   则会在所有内容加载完后触发，如绑定在元素上，则会在元素加载完毕后触发
                  $(window).load(function(){});  //等价于window.onload = function(){}
   
2.  end() :
              $("div").addClass('active')     //div添加active属性
                   .siblings().removeClass('active')
                             //移除div同辈的active属性，此时对象已变成$('div').siblings()
                  .end()  //重新返回$('div')对象
                  .find(':radio').attr('checked',true);

3. DOM 文档对象模型
                   通过document.getElementsByTagName、document.getElementByIdx_x_x

                   得到的DOM元素就是DOM对象
  
                  < div id='foo' >test< /div >
                   获得div中的html代码
                        1. document.getElementByIdx_x_x('#foo').innerHTML;
                        2.$('#foo').html();
                 jQuery对象转DOM对象
                      var $1 =$('#foo')   //jQuery对象
                       varobj =$1[0]      //DOM对象
                      var obj = $1.get(0)  //DOM对象
                DOM对象转jQuery对象
                        varobj =document.getElementByIdx_x_x('foo');    //DOM对象
                        var $1 =$(obj)     //jQuery对象
  
4.  判断checkbox是否被选中：
             DOM:
                    var cb = document.getElementByIdx_x_x('cb');
                    alert(cb.checked);
             jQuery:
                    var cb = $('#cb');
                    alert(cb.is(':checked'));

5.  jQuery在其他js库后导入，所有js库加载完毕
              1). jQuery将$ 变量的控制权交给其他js库
                          jQuery.noConflict();
                          jQuery(function(){
                                   jQuery('#foo').click(function(){     //使用jQuery代替$
     
                                    });
                          });
  
                2).自定义一个快捷方式：
                            $j=jQuery.noConflict();   //此时$j相当于$ 的作用
                           $j(function(){
                                 $j('#foo').click(function(){
     
                                 });
                          });
   
  
              3). 函数内部仍然使用$,同时又避免了和其他js库的$ 冲突
                          a.
                               jQuery.noConflict();
                               jQuery(function($){
                                    $('#foo').click(function(){
      
                                    });  
                              });
                          b.
                               jQuery.noConflict();
                                  (function($){            // 定义匿名函数，形参为$
                                         $(function(){
                                                   $('#foo').click(function(){
       
                                         });
                                  });
                            })(jQuery);    // 执行匿名函数，并传递实参jQuery
    
             jQuery库在其他库之前导入
                      无需调用jQuery.noConflict();
  
6.  css选择器：
             < div id='foo' class='foo' >登录< /div >
              < p >< h2 >段落< /h2 >< /p >
               1). 标签选择器   
                        div {}
                2). ID选择器
                        #foo {}
               3).  class选择器
                       .foo {}
                4). 群组选择器
                       div,p {}
               5).  后代选择器:
                        p h2 {}
               6).  统配选择符
                     * {}
7.  css字体加粗
         font-weight : bold;
  
8.  document.getElementByIdx_x_x('foo').style.color ='red';
         如页面没有id='foo'的元素，会报错
    $('#foo').css('color','red');
        页面没有id='foo'的元素，不会报错

9.  检查元素是否在页面上存在：
             $('#foo')          //获取的永远是对象，不能作为判断依据
             $('#foo').length >0   //true表示元素存在
             $('#foo')[0]           //转化成DOM对象，true表示元素存在

  
10.
     基本选择器：
              选取所有的div,span, id为foo，class为myclass的p标签的一组元素:
                     $("div,span,#foo,p.myclass")
  
      层次选择器：
             $("div span") : 选取

元素里的所有的元素，选择的是后代元素
                                    //改变body内所有div的背景色，后代元素
                                    $("bodydiv").css("background","#bbffaa");   
    
             $("div > span") : 选取

元素下元素名为的子元素
                                         $('body > div').css("background","#bbffaa");
                                        //改变body内子

元素的背景色，一级子元素，不包括子div内部的div元素  
  
              $(".one + div") :选取class为one的下一个div元素(紧跟在class为one的元素的后面的div元素)
                                         等价于 $(".one").next("div");
                                         //改变紧邻class为one的div元素的背景色
              $(".one +div").css("background","#bbffaa");   
  
              $("#two ~ div") : 选取id为two的元素后面的所有

兄弟元素(和id为two的元素同级的div元素)
                                          等价于$("#two").nextAll('div');
                                          //改变id为two元素后面的兄弟div的背景色
                                         $("#two ~div").css("background","#bbffaa");    
               $("#two").siblings("div"): 选取id为two元素的所有同辈div元素，不分前后
 
     过滤选择器：选择器以:开头
               1). 基本过滤选择器：
                             :first    
                                    $("div:first") ：选取所有

元素中的第一个div元素
                                    //改变第一个div元素的背景色
                                    $("div:first").css("background","#bbffaa");   
                             :last    
                                   $("div:last") ：选取所有

元素中的最后一个div元素
                                    //改变最后一个div元素的背景色
                                   $("div:last").css("background","#bbffaa");   
                            :not
                                    $("input:not('.myclass')")：选取class不是myclass的input元素
                                  //改变class不为one的div元素的背景色
                                  $("div:not('.one')").css("background","#bbffaa"); 
                           :even
                                  $("input:even")：选取索引是偶数的input元素，索引从0开始
                                  //改变索引值为偶数的div元素的背景色
                                  $("div:even").css("background","#bbffaa");    
                           :odd
                                   $("input:odd")：选取索引是奇数的input元素，索引从0开始
                                  //改变索引值为奇数的div元素的背景色
                                  $("div:odd").css("background","#bbffaa"); 
                            :eq
                                  $("input:eq(1)")：选取索引为1的input元素
       
                           :gt
                                  $("input:gt(1)")：选取索引大于1的input元素
                                 //改变索引值大于3的div元素的背景色
                                $("div:gt(3)").css("background","#bbffaa");   
                           :lt
                                $("input:lt(1)")：选取索引小于1的input元素
                                 //改变索引值小于3的div元素的背景色
                               $("div:lt(3)").css("background","#bbffaa");    
                          :header
                                $(":header")：选取网页中所有的标题元素

、

等
                                //改变标题元素的背景色
                                 $(":header").css("background","#bbffaa");     
                           :animated
                                 $("div:animated")：选取正在执行动画的div元素
                                //改变正在执行动画的元素的背景色
                                $(":animated").css("background","#bbffaa");    

             2). 内容过滤选择器：
                           :contains(text)
                                    $("div:contains('我')"): 选取含有文本‘我’的div元素
                                    //改变含有文本'di'的div元素的背景色
                                   $("div:contains('di')").css("background","#bbffaa");  
     
                           :empty   选取不包含子元素或文本的空元素
                                        //改变不含子元素(包括文本元素)的div元素的背景色
                                         $("div:empty").css("background","#bbffaa");
     
                           :has(selector) 选取含有selector所匹配的元素的元素
                                                 //改变含有class为mini元素的div元素的背景色
                                                $("div:has('.mini')").css("background","#bbffaa");   
                           :parent  选取含有子元素或文本的元素
                                            //改变含有子元素(包括文本元素)的div元素的背景色
                                             $("div:parent").css("background","#bbffaa");

               3). 可见性过滤选择器
                           :hidden  选取所有不可见性元素(像display:none,type="hidden",visible:hidden等)
                                          //改变所有不可见的div元素的背景色，且3s后完全显示
                                           $("div:hidden").css("background","#bbffaa").show(3000);   
                            :visible 选取所有可见性元素
                                        //改变所有可见的div元素的背景色
                                        $("div:visible").css("background","#bbffaa"); 
     
               4). 属性过滤选择器 (通过属性获取元素)
                             [attribute]  选取拥有此属性的元素
                                              //改变有title属性的div元素的背景色
                                             $("div[title]").css("background","#bbffaa");  
    
                             [attribute=value]  选取属性值为value的元素
                                                            //改变title=test的div元素的背景色
                                                            $("div[title=test]").css("background","#bbffaa");  
                              [attribute!=value] 选取属性值不等于value的元素
                                                           //改变title!=test的div元素的背景色,包含没有title属性的div元素
                                                           $("div[title!=test]").css("background","#bbffaa");   
                              [attribute^=value] 选取属性值以value开头的元素
                                                              //改变title以te开头的div元素的背景色
                                                              $("div[title^=te]").css("background","#bbffaa");   
                              [attribute$=value] 选取属性值以value结尾的元素
                                                             //改变title以sst结尾的div元素的背景色
                                                             $("div[title$=sst]").css("background","#bbffaa");  
                              [attribute*=value] 选取属性值含有value的元素
                                                             //改变title属性值中含有ss的div元素的背景色
                                                             $("div[title*=ss]").css("background","#bbffaa");   
                             [selector1][selector2][selector3]
                                                    //改变含有id属性，切title属性值中含有es的div元素的背景色
                                                    $("div[id][title*=es]").css("background","#bbffaa");  

            5). 子元素过滤选择器
                        :nth-child(index/even/odd/eq) 选取每个父元素下的第index子元素或奇偶元素，

                                                                                index从1开始
                                                                             //改变每个class为one的div中，第二个子元素的背景色
                                                                             $("div.one :nth-child(2)").css("background","#bbffaa");
    
                         :first-child  选取每个父元素的第一个子元素
                                             //改变每个class为one的div中，第一个子元素的背景色
                                            $("div.one:first-child").css("background","#bbffaa");  
                                           //改变每个class为one的div中，第一个子元素的背景色
                                            $("div.one:first-child").css("background","#bbffaa"); 

                         :last-child   选取每个父元素的最后一个子元素
    
                         :only-child   若某个元素是其父元素中的唯一子元素，则匹配
                                              //改变每个class为one的div中，只有一个子元素的背景色
                                              $("div.one :only-child").css("background","#bbffaa");

           6). 表单对象属性过滤器
                        :enabled  选取所有可用的元素
    
                        :disenabled 选取所有不可用的元素
    
                         :checked 选取所有被选中的元素(单选、复选框)
                                  $("input:checked").length;
                         :selected选取下拉框中被选中的选项元素
                               $("select:selected").text();