jQuery 学习总结

Posted 2022-11-28 yangl517

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对象
                       var obj = $1[0]       //DOM对象
                       var obj = $1.get(0)   //DOM对象
                 DOM对象转jQuery对象
                        var obj = 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的背景色，后代元素
                                     $("body div").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中，第二个子元素的背景色