jQuery

$(document).ready()与window.onload的区别:

  1. 执行实际不同,window.onload必须等待网页中所有内容加载完毕后(包括图片)才能执行,而$(document).ready()是网页中所有DOM结构绘制完毕就执行,可能DOM元素关联的东西并没有加载完
  2. window.onload只能写一个,写多个后面的会覆盖掉前面的,而$(document).ready()可以写多个,不会覆盖
  3. window.onload没有简写形式,$(document).ready()可以简写成$(function(){ })

jQ对象和DOM对象区别 :

  • DOM(文档对象模型),每一份DOM都可以表示成一颗树,在这棵树上,所有元素节点都是DOM节点,可以通过js中getElementById等获取元素节点,这样得到的DOM元素就是DOM对象
  • jQuery对象是通过jQuery包装对象后产生的对象jQ对象是jQuery独有的,是一种类数组的对象jQ对象无法使用DOM对象的任何方法,同理DOM也无法使用jQuery中的

jQ对象和DOM对象相互转换方式

 1. 通过[index]方式,得到DOM对象

     var cr = $("#box")
     var c =cr[0]//获得


  2. 通过get(index)方式买得到DOM对象

     var cr = $("#box")
     var c= cr.get(0)

jQueryu其他库冲突解决方案

1. jQ在其他库后引入

      jQuery.noConflict()//移交$
           jQuery(function(){
               jQuery('#box').css('color','red')
           })
 

2. 自定义快捷方式

   let $j = jQuery.noConflict()

3. 不自定义名称,又使用$与其他库不冲突


   jQuery.noConflict()//先让出$
   jQuery(function($){
   ...    //在内部使用$
   })

   或者

   jQuery.noConflict()
   (function($){
   $(function(){
   
   })
   })(jQuery)

4. jQ库在其他库之前导入,直接使用jQuery代替$

$.each

jQuery中有2个遍历的方法,

  • jQuery对象.each() 用来遍历jq对象的
  • $.each() 遍历jq对象,或原生数组和对象
  • 格式:$.each(数组/对象,函数) $.each(arr,function(index,item){})

$.map()

  • 用于处理对象或数组的每个元素,并将处理结果封装为新的数组返回。
  • $.map(数组/对象,function(index,item){ })

$.extend()

  • 用于将一个或多个对象的内容合并到目标对象
  • 格式:$.extend(dest,obj1,obj2...) 将obj1,obj2合并到dest中,返回一个新对象
  • 可作深拷贝 var obj = {name:'liu',baz:{age:23}}//第一个参数为true时,则为深拷贝
     var bar = $.extend(true,{},obj)
     bar.baz.age=21
     console.log(obj.baz.age)//23
     ​

爬。