web初学者必看（纯干货）

JQ原理：

    1.jQuery的本质是一个闭包
    2.jQuery为什么要使用闭包来实现?
      为了避免多个框架的冲突
    3.jQuery如何让外界访问内部定义的局部变量
       window.xxx = xxx;
    4.jQuery为什么要给自己传递一个window参数?
       为了方便后期压缩代码
       为了提升查找的效率
    5.jQuery为什么要给自己接收一个undefined参数?
       为了方便后期压缩代码
       IE9以下的浏览器undefined可以被修改, 为了保证内部使用的undefined不被修改, 所以需要接收一个正确的undefined   
       在window域下undefined不能修改，在局部变量中可以修改

jquery入口函数的测试：

      1.传入 '' null undefined NaN  0  false, 返回空的jQuery对象
            '' null undefined NaN  0  false经过！后都变成false,直接返回创建的新对象即可
      2.字符串:
            代码片段:会将创建好的DOM元素存储到jQuery对象中返回
            选择器: 会将找到的所有元素存储到jQuery对象中返回
      3.数组:
            会将数组中存储的元素依次存储到jQuery对象中立返回
      4.除上述类型以外的:
            会将传入的数据存储到jQuery对象中返回      

apply和call方法的作用:

         专门用于修改方法内部的this
         格式:
         call(对象, 参数1, 参数2, ...);
         apply(对象, [数组]);   

真伪数组的转换：

      伪数组转换成真数组：[].push.apply(真数组名，伪数组名);        
      真数组转换成伪数组：[].slice.call(真数组名);        
      slice()若什么都没有传，会将数组中的元素放到一个真数组中原样返回
      slice(start,end);用于返回数组中的指定元素，从开始到结束，包含开始，不包含结束

join(separator):

    将JS数组中的所有元素放入一个字符串中
    separator表示分隔符，默认为逗号

change与propertychange的区别：

 change 事件在内容改变（两次内容有可能还是相等的）且失去焦点时触发；
 propertychange 事件却是实时触发，即每增加或删除一个字符就会触发。

动画的显示、隐藏、切换、创建：

显示动画：show(time,easing,fn);
隐藏动画：hide(time,easing,fn);
切换动画：toggle(time,easing,fn);
		slow历时600ms,fast历时200ms;
		easing:默认为swing表示弧线运动，缓动，先慢中间快后慢，也可以为linear，表示匀速
展开和收起动画：
    sideDown(time,easing,fn);展开动画				
    sideUp(time,easing,fn);收起动画				
    sideToggle(time,easing,fn);切换动画	
animate(obj,time,easing,fn)
  第一个参数: 接收一个对象, 可以在对象中修改属性
  第二个参数: 指定动画时长
  第三个参数: 指定动画节奏, 默认就是swing
  第四个参数: 动画执行完毕之后的回调函数
  可以在对象中修改属性时注意：
    	设置宽度高度时width:"200" width:"+=100"
    	宽度还可以设置为"hide" "toggle" "show"
delay方法的作用就是用于告诉系统延迟时长
 立即停止当前动画, 继续执行后续的动画
     $("div").stop();
     $("div").stop(false);
     $("div").stop(false, false);
 立即停止当前和后续所有的动画
     $("div").stop(true);
     $("div").stop(true, false);
 立即完成当前的, 继续执行后续动画
     $("div").stop(false, true);
 立即完成当前的, 并且停止后续所有的
     $("div").stop(true, true); 

淡入淡出：

fadeIn(time,easing,fn)淡入
fadeOut(time,easing,fn)淡出
fadeToggle(time,easing,fn)切换
fadeTo(time,opcity,easing,fn)淡入到opcity透明度

jQ原型上的核心方法和属性：

     1、jquery 获取jQ版本号
     2、selector 实例默认的选择器取值
     3、length 实例默认的长度
     3、push 给实例添加新元素
     4、sort 对实例中的元素进行排序
     5、splice 按照指定下标指定数量删除元素，也可以替换删除的元素
     6、toArray 把实例转换为数组返回
                即将真数组转换成伪数组
     7、get  获取指定下标的元素，获取的是原生DOM
             没传参数则返回该数组，传入复数则相当于数组倒数的第几个，正数就返回第几个
     8、eq 获取指定下标的元素，获取的是jQuery类型的实例对象
     9、first 获取实例中的第一个元素，是jQuery类型的实例对象
     10、last 获取实例中的最后一个元素，是jQuery类型的实例对象
     11、each 遍历实例，把遍历到的数据传给回调使用
     12、map  遍历实例，把遍历到的数据传给回调使用，然后把回调的返回值收集起来组成一个新的数组返回   

DOM元素的加载：

     onload事件会等到DOM元素加载完毕, 并且还会等到资源也加载完毕才会执行
     DOMContentLoaded事件只会等到DOM元素加载完毕就会执行回调
     document.readyState属性有如下的状态：
         uninitialized - 还未开始载入
         loading - 载入中
         interactive - 已加载，文档与用户可以开始交互
         complete - 载入完成    
     onreadystatechange事件就是专门用于监听document.readyState属性的改变的     

DOM 操作:

      1、empty ==> 清空指定元素中的所有内容
      2、remove ==> 删除所有的元素或指定元素 
      3、html ==> 设置所有元素的内容，获取第一个元素的内容
      4、text ==> 设置所有元素的文本内容，获取所有元素的文本内容
      5、元素.appendTo.指定元素 ==> 将元素添加到指定元素内部的最后
         特点:
            1.如果指定元素有多个,会将元素拷贝多份添加到指定元素中
            2.给appendTo方法传递字符串, 会根据字符串找到所有对应元素后再添加
            3.给appendTo方法传递jQuery对象,会将元素添加到jQuery对象保存的所有指定元素中
            4.给appendTo方法传递DOM元素, 会将元素添加到所有指定DOM元素中
      6、指定元素.append.元素 ==> 将元素添加到指定元素内部的最后      
      7、元素.prependTo.指定元素 ==> 将元素添加到指定元素内部的最前面
         调用者.insertBefore(插入的元素, 参考的元素);
         insertBefore方法, 调用者是谁就会将元素插入到谁里面      
      8、指定元素.prepend.元素 ==> 将元素添加到指定元素内部的最前面  
      9、元素.insertBefore.指定元素  ==>将元素添加到指定元素外部的前面 
         调用者.insertBefore(插入的元素, 参考的元素);
         insertBefore方法, 调用者是谁就会将元素插入到谁里面 
      10、next([expr]) 获取紧邻的后面同辈元素的元素
      11、prev([expr]) 获取元素紧邻的前一个同辈元素
            实现insertAfter需要用到原生JavaScript的nextSibling属性
      12、元素.insertAfter.指定元素  ==>将元素添加到指定元素外部的后面
          指定元素.after.元素  ==>将元素添加到指定元素外部的后面
          元素.insertBefore.指定元素  ==>将元素添加到指定元素外部的前面
          指定元素.before.元素  ==>将元素添加到指定元素外部的前面
      13、元素.replaceAll.指定元素 ==> 替换所有指定元素
      14、指定元素.replaceWith.元素 ==> 替换所有指定元素
      15、clone ==> 复制节点(true深复制,false浅复制)   
      		 nodeType 属性返回以数字值返回指定节点的节点类型。
     				如果节点是元素节点，则 nodeType 属性将返回 1。
     				如果节点是属性节点，则 nodeType 属性将返回 2。      

元素的操作：

 内部插入：
     append(content|fn)
     appendTo(content)  注意这两个To方法使用时是新增的元素. appendTo(选择器)
     会将元素添加到指定元素内部的最后
     prepend(content|fn)
     prependTo(content)
     会将元素添加到指定元素内部的最前面
外部插入：
     after(content|fn)
     insertAfter(content)  注意这两个To方法使用时是新增的元素. appendTo(选择器)
     会将元素添加到指定元素外部的后面 
     before(content|fn)
     insertBefore(content)
     会将元素添加到指定元素外部的前面
删除元素：
	 remove([expr])   /   detach([expr])   
     删除指定元素
     区别：
        利用remove删除之后再重新添加,原有的事件无法响应
        利用detach删除之后再重新添加,原有事件可以响应
 	 empty()
     删除指定元素的内容和子元素, 指定元素自身不会被删除
替换元素：         
     replaceWith(content|fn)
	 replaceAll(selector) 注意这个方法使用时是新增的元素. replaceAll(选择器)
    替换所有匹配的元素为指定的元素    
复制元素：
     clone([Even[,deepEven]])
          如果传入false就是浅复制, 如果传入true就是深复制
          浅复制只会复制元素, 不会复制元素的事件
          深复制会复制元素, 而且还会复制元素的事件    

nth-child()的用法:

		nth-child(-n+x)就是前x项
		nth-child(2n)就是偶数项
		nth-child(2n-1)就是奇数项
		nth-child(x)就是第x项

有关索引的几种方法：

index()获取当前对象的索引
eq(x)获取索引为x的元素，并将其封装成对象返回
get(x)获取索引为x的元素，不会其封装成对象，而是直接返回成对象       

父、子元素的选择：

children(.selected)通过可选的表达式来过滤所匹配的子元素，只考虑子元素而不考虑所有后代元素
find(.selected)通过可选的表达式来过滤所匹配的后代元素
parent(.selected)将查找过滤所匹配的所有父元素 
parents()将查找过滤所匹配的所有祖辈元素     			    

jQery属性相关的操作：

     1.attr(): 设置或者获取元素的属性节点值
     2.prop(): 设置或者获取元素的属性值
     3.css(): 设置获取样式        
     4.val(): 获取设置value的值
     5.hasClass(): 判断元素中是否包含指定类
     6.addClass(): 给元素添加一个或多个指定的类
     7.removeClass(): 删除元素中一个或多个指定的类
     8.toggleClass(): 没有则添加,有则删除

jQuery事件操作的相关方法：

     1.on(type, callback): 注册事件
        1.注册多个相同类型事件, 后注册的不会覆盖先注册的
        2.注册多个不同类型事件, 后注册的不会覆盖先注册的
     2.off(type, callback): 移出事件   
         1.不传参, 会移除所有事件
         2.传递一个参数, 会移除对应类型所有事件
         3.传递两个参数, 会移除对应类型对应事件

       看到这里，那么说明你的JQ就学习的差不多了，不妨自己动手做几个实例，测试一下看自己是否真正掌握这些知识点。 over!