JQuery的DOM操作和动画效果
相比的原生的js的繁杂的DOM操作，JQuery的DOM操作更加简便，代码也更加简洁。JQuery本身就是对原生JS的封装，封装的目的往往就是让代码更加简洁，更加易懂。
JQuery里面有封装了一些对于元素淡入淡出的操作，可以从一定程度上丰富我们的网页~
DOM操作
JQuery的DOM操作常用的主要用来给某个元素添加子节点或者删除子节点，可以用在JS中获取后端传递的数据，动态的生成界面，很方便。常用的文档（document）操作如下：
-
在一个节点内部插入子节点：
语法 说明 $(selector).append(node) 将节点node追加加到selector的最后一个子节点中 $(selector).appendTo(node) 将selector元素追加加到node的最后一个子节点中，与append操作对象相反 $(selector).prepend(node) 将节点node追加加到selector的第一个子节点中 $(selector).prependTo(node) 将selector元素追加加到node的第一个子节点中，与prepend操作对象相反 说明：selector值的是JQuery的选择器（），node指的是节点元素，其实$(selecotr)和node在某种意义上是相同的，可以说都是指HTML标签对象。
新添加的node的常用形式：
-
直接使用HTML标签字符串
<body> <div> <!-- 这里会被添加一个h1标签--> </div> </body> <script> $(function() { var node = "<h1>这是HTML标签字符串</h1>"; $("div").append(node); //这样即可在下面的div中添加 <h1>这是HTML标签字符串</h1> 这个标签 }) </script> -
使用选择器获取页面中已有的标签进行添加操作
<body> <div id="div1"> <!-- 这里会被添加一个h1标签--> </div> <div id="div2"> <h1> 这是div2中的h1标签 </h1> </div> </body> <script> $(function() { var node = $("#div2 > h1"); //获取div2下的h1标签 $("div").append(node); //这样即可在下面的div1中添加 <h1> 这是div2中的h1标签 </h1> }) </script>值得注意的是：使用这种方式的添加相当于进行元素的移动，会将div2中的h1标签移动div1中，而div2中的h1标签就不见了，如果要实现复制的方式的话，上面的添加可用.clone()克隆的方式实现：
<script> $(function() { var node = $("#div2 > h1"); //获取div2下的h1标签 $("div").append(node.clone()); //这样即可在下面的div1中添加 <h1> 这是div2中的h1标签 </h1> }) </script>
-
-
在节点外部插入节点：即给节点添加兄弟节点
语法 说明 $(selector).after(node) 在选择器选中的所有元素后面插入节点node $(selector).insertAfter(node) 将选择器选中的所有元素都插入到节点node后面 $(selector).before(node) 在选择器选中的所有元素前面插入节点node $(selector).insertBefore(node) 将选择器选中的所有都插入到节点node前面 说明：
由于JQuery选择器选中的匹配节点放在一个数组里面（可以看成JQuery匹配的对象返回一个数据对象），所有上述的操作对于被选择器选中的元素都会生效，例如$(selector).after(node), 如果有多个元素被selector选中了，那么这些元素都会被添加到node节点后面，并且是以移动的方式添加到节点后面的。
-
删除节点：
语法 说明 $(selector).remove() 将selector选中元素删除，与该对象相关的事件绑定，相关数据等都会消失 $(selector).empty() 将selector选中的元素的子节点清空 $(selector).detach([selector]) 将选中的元素从DOM中删除 说明：.detach(),与.remove() 不同的一点是.detach()只是将元素从DOM中移除，但是在jquery对象中任然会保留下来，也就说与该对象绑定的事件，相关数据都会保留下来。
这是为什么呢？在.detach()源码中可以看到
{
detach: function( selector ) {
//跑去调用remove方法
return remove( this, selector, true ); //注意第三个参数传递的值为true
}
}
function remove(elem, selector, keepData) {
//由于第三个参数中传递了true，所以并不执行以下代码，即cleanData()不执行，所以数据没被清楚掉
if ( !keepData && node.nodeType === 1 ) {
jQuery.cleanData( getAll( node ) );
}
}
PS：上述源码并不是全部，在IDEA中可以对着方法名按住Ctrl+鼠标单击进入源码查看。
动画效果
- 常用的展示和隐藏
| 方法名 | 说明 |
|---|---|
| $(selector).show([speed], [easing],[fn]) | 以动画的方式显示元素对象 |
| $(selector).hide([speed], [easing],[fn]) | 以动画的方式将元素隐藏 |
| $(selector).toggle([speed], [easing],[fn]) | 以动画的方式：元素显示则隐藏，元素隐藏则显示（翻转） |
参数说明：[] 的意思是可选的意思，即可以不用传递参数也行
speed: 动画展示的速度，可选则为slow，normal，fast，和传递毫秒值
easing：动画展示的方式，可选为swing（即开始和结束慢慢展示，中间快速展示），lineing（即匀速展示）
fn：动画展示完成的回调函数
-
滑块的动画
方法名 方法名 $(selector).slideDown([speed], [easing],[fn]) 向下滑动展示选中对象 $(selector).slideUp([speed], [easing],[fn]) 向上滑动收起选中对象 $(selector).slideToggle([speed], [easing],[fn]) 翻转滑动行为，展示或收起 参数与上面一致
-
淡入和淡出
方法名 方法名 $(selector).fadeIn([speed], [easing],[fn]) 元素淡入 $(selector).fadeOut([speed], [easing],[fn]) 元素淡出 $(selector).fadeToggle([speed], [easing],[fn]) 淡入和淡出转化 $(selector).fadeTo(speed, opacity, easing, fn) 逐渐显示到指定的透明度，opacity为指定的透明度 其他参数与上面一致
243
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
