Jquery相关知识

Jquery相关知识

一、
（1）认识jquery
jquery是一个快速的、简洁的JavaScript框架，它封装JavaScript常用的功能代码，提供一种简便的JavaScript设计模式，优化HTML文档操作、事件处理、动画设计和Ajax交互。
（2）jquery节点获取
jquery获取节点的方法
<1> jQuery.parent(expr)找父亲节点，可以传入expr进行过滤，比如

<2>jQuery.parents(expr)，可以查找所有的祖先元素，不限于父元素
<3>jQuery.children(expr)，返回所有的子节点，这个方法只会返回直接的子节点，不会返回所有的孙子节点
<4>jQuery.contents()，返回下面的所有的内容，包括节点和文本。这个方法和children()的区别就在于，包括空白文本，也会被作为一个jQuery对象返回，children()则只会返回节点
<5>jQuery.prev()，返回上一个兄弟节点，不是所有的兄弟节点
<6>jQuery.prevAll()，返回之前的所有兄弟节点
<7>jQuery.next()，返回下一个兄弟节点，不是所有的兄弟节点
<8>jQuery.nextAll()，返回之后的所有兄弟节点
<9>jQuery.siblings()，返回兄弟姐妹节点，不分前后
（3）对象存储
var a = $(’#abc’);
优点：
<1>减少书写量；
<2>重复获取会创建新的对象，存起来之后就不用这一个；
（4）链式操作
优点：方便，简洁，易于理解
上面的图片中的代码两次获取DOM树，消耗较大，链式只需要一行代码

（5）属性操作
html属性操作，DOM属性操作，类样式操作，值操作（读取、设置和移除）
<1>html属性操作：attr()，removeAttr()
<2>DOM属性操作：prop()，removeProp()，find()
<3>类样式操作：addClass()，removeClass()，toggleClass()，css()
<4>值操作：是对DOM属性value进行读取和设置操作，比如html()，text()，val()

二、Jquery文档处理
（1）内部插入
<1>append(content|fn)：向每个匹配的元素内部追加内容，将content内容插入到匹配元素内容的最后
例：

使用append之后的效果


<2>prepend(content)：将content内容插入到匹配元素内容的元素

<3>appendTo(content)：把所有匹配的元素追加到另一个指定的元素元素集合中。使用这个方法是颠倒了常规的$(A).append(B)的操作，即不是把B追加到A中，而是把A追加到B中。

$("p").appendTo("div");
$("<p>hello</p>").appendTo("div").addClass("active");

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

$("p").prependTo("div");

（2）外部插入

<1>after(content|fn)：在每个匹配的元素之后插入内容
还是上面的例子：

<2>before(content|fn)：在每个匹配的元素之前插入内容

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

$("<span>hello</span>").insertAfter("p");

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

$("<span>insertBfore</span>").insertBfore("p");

（3）包裹
<1>wrap(html|element|fn)：把所有匹配的元素用其他元素的结构化标记包裹起来。

$("p").wrap("<div class="wrap"></div>);

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

$("p").unwrap();

<3>wrapAll(html|elem)：将所有匹配的元素用单个元素包裹起来

$("p").wrapAll("div");

<4>wrapInner(html|element|fn)：将每一个匹配的元素的子内容（包括文本节点）用一个HTML结构包裹起来

$("p").wrapInner("<b></b>");

（4）替换
<1>replaceWith(content|fn)：将所有匹配的元素替换成指定的HTML或DOM元素

$("p").replaceWith("<b>replaceWith</b>");

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

$("<b>replaceAll</b>").replaceAll("p");

（5）删除
<1>empty()：删除匹配的元素集合中所有的子节点。

$("p").empty();

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

$("p").remove();

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

$("p").detach();

（6）复制
<1>clone()：克隆匹配的DOM元素并且选中这些克隆的副本。

$("b").clone().prependTo("p");

上面的代码的功能是：克隆所有b元素（并选中这些克隆的副本），然后将它们前置到所有段落中。
三、Jquery事件
（1）页面事件
$(document).ready() ：页面上的所有 DOM 元素加载完成就可以执行，不需要再等到外部文件（图片、外部 CSS、外部 JavaScript）加载完成。

$(document).ready(function(){
    ……
})

也可写成

$(function(){
    ...
})

（2）鼠标事件
鼠标事件有很多，下面只列出一些常用的事件
<1>click：鼠标点击事件
<2>mouseover：鼠标（指针）移入事件
<3>mouseout：鼠标（指针）移出事件
<4>mousedown：鼠标按下事件
<5>mouseup：鼠标松开事件
<6>mousemove：鼠标移动事件
（3）键盘事件
<1>keydown：键盘按下事件
<2>keyup：键盘松开事件
keydown发生在keyup之前
（4）表单事件
<1>focus：获取焦点时触发的事件
<2>blur：失去焦点时触发的事件
<3>submit：提交事件
四、jQuery动画效果
（1）三个jQuery自带的基础动画
<1>隐藏、显示动画
hide()：若没有参数，大致相当于调用.css(‘display’, ‘none’)
show()、toggle()

$(selector).hide(speed,callback);
$(selector).show(speed,callback);
$(selector).toggle(speed,callback);

<2>淡入淡出动画

fadeIn()、fadeOut()、fadeToggle()、fadeTo()
$(selector).fadeIn(speed,callback);
$(selector).fadeOut(speed,callback);
$(selector).fadeToggle(speed,callback);
$(selector).fadeTo(speed,opacity,callback);

<3>滑动动画

slideDown()、slideUp()、slideToggle()
$(selector).slideDown(speed,callback);
$(selector).slideUp(speed,callback);
$(selector).slideToggle(speed,callback);

（2）自定义动画

$(selector).animate({params},speed,callback);

参数：
params参数定义形成动画的css属性
speed参数规定效果的时光。它可以区以下值：“slow”、“fast”或毫秒
callback参数是动画完成后所执行的函数名称
<1>在一个元素上的动画效果：
同时执行（异步）：将所有动画写在一个对象中（一个animate）
顺序执行（同步）：
①回调函数
②将所有动画写在多个对象中（多个animate）tip：可以链式调用
（3）停止动画

$(selector).stop(stopAll,goToEnd);

参数：
①stopAll参数规定是否应该清除动画队列，默认是false。
②goToEnd参数规定是否立即完成当前动画，默认是false.