jQuery部分知识点总结

jQuery之初步了解

1.什么是jQuery?

jQuery是一个快速、简洁的JavaScript框架，是继Prototype之后又一个优秀的JavaScript代码库（或JavaScript框架）。jQuery设计的宗旨是“write Less，Do More”，即倡导写更少的代码，做更多的事情。它封装JavaScript常用的功能代码，提供一种简便的JavaScript设计模式，优化HTML文档操作、事件处理、动画设计和Ajax交互。

2.特性：

具有独特的链式语法和短小清晰的多功能接口；具有高效灵活的css选择器，并且可对CSS选择器进行扩展；拥有便捷的插件扩展机制和丰富的插件。jQuery兼容各种主流浏览器，如IE 6.0+、FF 1.5+、Safari 2.0+、Opera 9.0+等。

jQuery之基本知识点

1. DOM节点的获取
   

2. 对象的储存
   

3. 链式操作
   

4. 属性操作
   

jQuery之文档处理

-内部插入

1.append()：向每个匹配的元素内部追加内容，将content内容插入到匹配元素内容的最后

2.prepend()：将content内容插入到匹配元素内容的最前

3.appendTo()：把所有匹配的元素追加到另一个指定的元素元素集合中。（例子中就是将p标签中的内容追加到div中)

4.prependTo()：把所有匹配的元素前置到另一个、指定的元素元素集合中。

• 外部插入

1.after()： 在每个匹配的元素之后插入内容

2.before()： 在每个匹配的元素之前插入内容

3.insertAfter()： 把所有匹配的元素插入到另一个、指定的元素元素集合的后面

4.insertBefore() ：把所有匹配的元素插入到另一个、指定的元素元素集合的前面

after/insertAfter区别
var $A = $(“s1”);
var $B = $("s2");//将$A插入到$B之后
$B.after( $A);//返回$B
// 将$A插入到$B之后
$A.insertAfter( $B);//返回表示插入内容的jQuery对象(匹配所有$B之后插入的$A元素 )

• 包裹

1.wrap()： 把所有匹配的元素用其他元素的结构化标记包裹起来

2.unwrap()： 这个方法将移出元素的父元素。

3.wrapAll()： 将所有匹配的元素用单个元素包裹起来

4.wrapInner()： 将每一个匹配的元素的子内容(包括文本节点)用一个HTML结构包裹起来

== wrap/wrapAll/wrapInner区别==
○ wrap()会将这些被选中的节点各自都用进行包裹
○ wrapAll()这个函数的作用是将所匹配到的节点统一到一起，使用一个元素来包裹，因此只包裹了一次。另外倘若所匹配到的节点并没有紧挨在一起，那么这个函数会将其他的节点迁移到第一个节点所在的位置，使之与第一个节点成为兄弟节点，然后进行包裹。
○ wrapInner()这个函数的作用是用元素对内部的内容进行包裹。

• 替换

1.replaceWith()： 将所有匹配的元素替换成指定的HTML或DOM元素

2.replaceAll(selector) 用匹配的元素替换掉所有 selector匹配到的元素。

• 删除

1.empty()： 删除匹配的元素集合中所有的子节点。

2.remove([expr])： 从DOM中删除所有匹配的元素,这个方法不会把匹配的元素从jQuery对象中删除，因而可以在将来再使用这些匹配的元素。但除了这个元素本身得以保留之外，其他的比如绑定的事件，附加的数据等都会被移除。

3.detach([expr]) 从DOM中删除所有匹配的元素,这个方法不会把匹配的元素从jQuery对象中删除，因而可以在将来再使用这些匹配的元素。与remove()不同的是，所有绑定的事件、附加的数据等都会保留下来。

• 复制

1.clone([even[,deepEven]]) 克隆匹配的DOM元素并且选中这些克隆的副本。

jQuery之动画

1.隐藏/显示

• hide() 和 show()
  
• toggle()：切换 hide() 和 show() 方法，显示被隐藏的元素，并隐藏已显示的元素。
  注意
  语法：$(selector).toggle(speed,callback);
  可选的 speed 参数规定隐藏/显示的速度，可以取以下值：“slow”、“fast” 或毫秒。

2.淡入淡出：

• fadeIn()： 用于淡入已隐藏的元素
  
• fadeOut() ：用于淡出可见元素
  
• fadeToggle() ：可以在 fadeIn() 与 fadeOut() 方法之间进行切换
  如果元素已淡出，则 fadeToggle() 会向元素添加淡入效果。
  如果元素已淡入，则 fadeToggle() 会向元素添加淡出效果。
  
• fadeTo() ：允许渐变为给定的不透明度（值介于 0 与 1 之间）
  

3.滑动：

• slideDown() ：用于向下滑动元素
  
• slideUp() ：用于向上滑动元素
  
• slideToggle() ：可以在 slideDown() 与 slideUp() 方法之间进行切换
  如果元素向下滑动，则 slideToggle() 可向上滑动它们。
  如果元素向上滑动，则 slideToggle() 可向下滑动它们。
  

4.自定义的动画

• animate() ：用于创建自定义动画
  语法
  $(selector).animate({params},speed,callback);
  必需的 params 参数定义形成动画的 CSS 属性。
  可选的 speed 参数规定效果的时长。它可以取以下值：“slow”、“fast” 或毫秒。
  可选的 callback 参数是动画完成后所执行的函数名称。
  

5.停止动画
stop() ：用于在动画或效果完成前对它们进行停止
语法
$(selector).stop(stopAll,goToEnd);

• 可选的 stopAll 参数规定是否应该清除动画队列。默认是 false，即仅停止活动的动画，允许任何排入队列的动画向后执行。
• 可选的 goToEnd 参数规定是否立即完成当前动画。默认是 false。
  

jQuery之事件

1.什么是事件？
页面对不同访问者的响应叫做事件。
事件处理程序指的是当 HTML 中发生某些事件时所调用的方法。
实例：
在元素上移动鼠标。
选取单选按钮
点击元素
在事件中经常使用"触发"（或"激发"）例如： “当你按下按键时触发 keypress 事件”。
2.加载DOM树

• 执行时机-与window.onload的区别
  window.onload是在网页中所有的元素以及所有关联文件完全加载到浏览器后才执行；
  $(document).ready()则是在DOM树完全就绪时就可以被调用。但可以使用$(window).load(function(){})等同于window.onload

• 多次使用
  $(document).ready()可被多次使用。

• 简写方式
  $(function(){})

3.事件的绑定与移除

• 事件的绑定
  bind()：对匹配元素进行特殊事件绑定
  

• 事件的移除
  unbind([type],[data])
  移除所有事件、某类型事件、特定时间类型处理函数
  one(type,[data],fn)
  为元素绑定处理函数，处理函数触发一次后立即被删除
  

• 常用事件
  
  详细用法：常用事件

4.事件冒泡

• 事件冒泡：
  事件按照DOM层次像水泡一样由下至上
  点击内部元素，会触发其外部元素的事件
  

• 事件捕获：
  由上至下开始触发
  jQuery不支持捕获
  要用原生js
  

• stopPropagation()方法
  停止时间冒泡
  

• preventDefault()方法
  阻止元素的默认行为。
  网页中的元素存在默认行为，如点击超链接会跳转，点击提交按钮会表单提交）