jQuery知识篇一

1.获取子包装集：children()

   $('#ajia').children().eq(1)  不等价于 $("#ajia").children[1]   前者通过eq返回的是新的包装集，而后者下标形式的方式，得到的是dom元素，可以理解成javascript数组中的元素，因为jQuery允许包装集+下标 的形式来获取元素，也就是允许包装集当成js的数组来操作

 

2.jQuery的所有触发事件都会从目标元素冒泡的dom树顶，阻止事件默认行为或冒泡的方式有3：

   return false、event.preventDefault()、event.stopPropagation()

 

3.复制节点：$("#ajia").clone().appendTo($("#youxi"));

 

4.get（）：将包装集转化成dom元素，

   var arr = $("a").get()     将a标签的包装集转化成dom元素（js数组)存入变量中

   var arr = $("a").get(1)   获取a标签的包装集的第一个元素且转化成dom元素，存入变量中

 

5.判断单/复选框是否有选中的项

  if($(":radio").is(":checked")){....}   或者    if($(":radio :checked").length>0){.....}

  if($(":checkbox").is(":checked")){....}   或者    if($(":checkbox :checked").length>0){.....}

 

6.判断select是否有选中项

   知识点：$("select").val()  ，如果有选中的值则是选中的值，如果没有默认是第一个option的值

   正确判断方式：if($("select option:selected").val()){....} 

 

7.表单按钮不可用：$(":button").attr('disable',true);  

 

8.单选、复选框被选中 $(":radio").attr('checked',true);

 

9.添加新的包装集到旧包装集中去  add()

   $("img[alt]").addClass('isAlt').add("img[title]").addClass('is_alt_tile');  首先具有alt属性的img标签都加上类isAlt，后面再将具有alt和title属性的img标签都加上is_alt_title类

 

10.获取子包装集 slice( start , end )  从0开始标示

     $("img").slice(2,4)    获取第3和第4个img的子集

     该方法与 children().eq() 的区别在于 前者能够随意获取任意位置的连续子集

 

11. 退到前一个包装集  end()

     $("#ajia").parent().addClass('xixi').end()     退回到 $("#ajia")

     $("#ajia").parent().find(".youxi").addClass('xixi').end().end()     也退回到 $("#ajia")

 

12. each()中的 this 是dom元素

      $("img").each(function(){

          this.alt = 'hello, ajia';

      })

13. 属性与样式操作函数 attr()、 css() 的参数可以使用函数

 

14. 切换同一个样式: toggleClass()

 

15. 判断是否有某个class

    $("#ajia").hasClass("sup")      或者   $("#ajia").is(". sup ")

 

16. select()事件：当 textarea 或 文本类型 的 input 元素中的文本被选择时，会发生 select 事件

 

17. event.target返回的是dom元素，可以直接用于构造jQuery对象 $(event.target).html();
      $("#ajia").click(function(evt){
           // this ==evt.target  dom元素
      })

18. 包裹元素：
      比如想在每个a标签外用div作为父元素，则可 $('a').wrap('');
      比如想在id为ajia的a标签用div作为父元素，则可 $('#ajia').wrapAll('');
      unwrap()则是去除包裹的

19. remove() 删除包装集中所有的元素，同时返回被删除的集，该集仍可用于操作，比如appendTo()

20. 替换元素的惯用方式：after()+remove();
     $('#ajia').after('demo').remove();
      PS:由于after()返回的是被替换的那个包装集

21. 表单的val()函数不仅可以获取值，还可以设置radio和select哪个值被选中
      $('select').val(['apple','blue']);   select中option的值为apple和blue的被选中

22. bind()等绑定函数可以对同一个集进行同个事件或不同事件的多次绑定，类似js的addEventListentener()；
      这类函数能够绑定自定义命名的函数，再使用trigger()来触发调用
      这类函数能够使用命名空间的方式，来区分管理，例如 $("#aija").bind('editModel.click',function(){...});
      删除使用了命名空间的事件：$("#ajia").unbind("editModel.click");

23. $ 是jQuery对象的别名，若要放弃$的使用，可通过$.noconflict（），后面就用jQuery来调用

24. 想用$但又不会与其他库冲突，可使用私有域的js形式来调用
     (function($){
          //jqery代码处
     })(jQuery);   //此处的分号是必须的，jQuery作为实参传递到function中去，并以$形式在函数体内调用

     另一种形式
     jQuery(function($){.......})  //比较少用，上面那种经常用于插件的编写

 

注意：该类方法是在加载完整的dom结构前就会触发的，不同于$(function(){})的，后者是在加载完dom后才去触发

25. 编写插件的3中形式

 

    注意：在插件中this是指jQuery实例本身，也就是this可以等于$(this),但如果是使用$.each()，在其循环体内的this仍是指dom元素

 

    25.1 添加自定义包装器到jQuery的prototype(fn是prototype的别名)中去，每个jQuery对象都能访问

      (function($){
          $.fn.hideFun = function(){      //hideFun  为自定义的函数名
                 return  this.hide();     //自定义的包装器一般都返回操作的包装集，方便后续其他操作
          }
      })(jQuery);                         //分号必须

    

    25.2 使用$.extend（）方法，传入一个对象参数，该对象参数就会合并到jQuery对象中去

      (function($){

          $.extend({hideFun:function(){ 

              return this.hide();

          }})

      })(jQuery);

26. jQuery提供的一些函数操作
     $.extend(源对象，追加对象1，追加对象2........)：将追加对象的值合并到源对象中去，一般用于合并对象常量，该方式经常用在在插件编写中合并默认初始化值和用户自定义值、

     $.getScript()： 动态加载js文件
     $.inArray()：    判断数组是否含有某元素
     $.map()：         对数组每个元素做处理后再返回
     $.grep()：         对数组元素进行筛选
     $.each()：         对数组或对象进行遍历
     $.trim()：          对字符串进行头尾去空
     $.merge()：      合并数组
     $.type(参数)      判断参数的类型
     $.isEmptyObject(参数)：   判断参数是否包含任何属性，包括继承的属性 ，参数不一定是要对象
     $.isPlainObject（对象）： 判断对象是否含有任何属性，包括继承的属性，参数必须为对象
     $.makeArray()：将jQuery包装集转化成js数组
     $.unique()： 剔除Dom数组中重复元素

27. 如果想在 选择器表达式 里使用特殊字符，需要使用反斜线转义，特殊符号：#、$、'、" 等等
     $("#\\$ajia").length    //对id为$ajia的选择表达式 转义

28. 属性选择器
      完全等于：$("[属性名 = '属性值']")
      完全不等于：$("[属性名 != '属性值']")
      包含：  $("[属性名 *= '属性值']")

      复式属性选择器：例如 $("[属性名 = '属性值'][属性名 = '属性值']")

 

29. 过滤选择器中的:nth-child()下标是从1开始

    $('div:nth-child(2)')     //第二个div

    $('div:nth-child(2n+1)')  //每隔2个的那个div 
    

 

30. 自定义选择器，通过扩展$.expr[':']

    $.expr[':'].名称 = function(param){

        return $(param).css('backgound-color') === "green";

    }

    var n = $(":名称").length;

 

31. triggerHandler函数：触发第一个被匹配元素的指定事件

    与 trigger() 方法相比的不同之处：

       它不会引起事件（比如表单提交）的默认行为

       .trigger() 会操作 jQuery 对象匹配的所有元素，而 .triggerHandler() 只影响第一个匹配元素。

       由 .triggerHandler() 创建的事件不会在 DOM 树中冒泡；如果目标元素不直接处理它们，则不会发生任何事情。

       该方法的返回的是事件处理函数的返回值，而不是具有可链性的 jQuery 对象。此外，如果没有处理程 序被触发，则这个方法返回 undefined。

 

33. jQuery一些选择去性能比对，参考该链接http://www.ruanyifeng.com/blog/2011/08/jquery_best_practices.html