JQuery插件作为当前前段开发比用的插件之一，使用率非常之高，下面青岛星网跟大家分享parents() \ clone() \ siblings() \ slice() \ serialize()的使用方法。
JQuery插件之parents() \ clone() \ siblings() \ slice() \ serialize()的使用方法
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>JQuery常用方法</title>
<style type="text/css">
</style>
</head>
<body>
<!-- <div id="div1">aaa
<div id="div2" class="box">bbb</div>
</div> -->
<div class="div1">div</div>
<span class="span1">span</span>
<div class="box"><p>p</p></div>
<h1>h1</h1>
<h2>h2</h2>
<h2>h2</h2>
<em>em</em>
<div><span>span</span>div</div>
<span>span</span>
<span>span</span>
<ul>
<li>0</li>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
</ul>
<form>
<input type="text" name="a" value="1">
<input type="text" name="b" value="2">
<input type="text" name="c" value="3">
</form>
<script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript">
// parents();
$(function(){
/*$("#div2").parents().css("background","blue"); //此时div2的多有的祖先节点都变成了蓝色背景(包括div1，body,html)
$("#div2").parents("#div1").css("background","blue"); //此时加了参数，就是指改变祖先节点div1的背景为蓝色；*/
//closest()方法：
/* $("#div2").closest("div").css("background","red");
//获取最近的指定的祖先节点(包括当前元素自身),必须要写筛选的参数,只能找到一个元素 关键词是最近的，必须要写参数；*/
/* //siblings\nextAll\prevALL()\until()方法：
//siblings() : 找所有的兄弟节点，参数也是筛选功能
//nextAll() : 下面所有的兄弟节点，参数也是筛选功能
//prevAll() : 上面所有的兄弟节点
//Until() : 截止，到某个筛选条件为止（不包含那个筛选条件）；
//$("p").siblings().css("background","green"); // 找所有的兄弟节点，参数也是筛选功能；(找到除了自己以外的其他的节点，参数可选)
//$("p").nextAll("h2").css("background","green"); // 参数可以作为筛选的条件
$("p").parentsUntil("body").css("background","green"); // nextUntil与prevUntil正好相反的用法。parentsUntil则是找到所有的祖先节点*/
/*//clone()方法：可以接收一个参数，作用可以复制之前的操作行为
$('.div1').click(function(){
alert(123);
})
$('.div1').clone(true).appendTo($('.span1')); //如果这里没有true的话，那么添加后的div1是没有点击动作发生的；*/
/*wrap()：包装；
wrapAll():整体包装
wrapInner():内部包装
unwrap():删除包装（删除父级，不包括body）
$(function(){
// $('span').wrapInner('<div>') // 注意这里要有标签
$('span').unwrap(); // unwrap()删除的只是这个被选元素的父元素，并没有删除被选元素父级元素的内容 比如这里例子里面的div内容就还在
})
//slice() 把匹配元素集合缩减为指定的指数范围的子集 .slice(selector,end) end如果省略，则默认取值到集合的最后一位；且这里最后的范围不包含end参数的这个元素
$('li').slice(1,3).css('background','red');
serialize() 数据串联化；*/
//alert($('form').serialize()); //会输出一个字符串 a=1&b=2&c=3;
console.log($('form').serializeArray()); // 返回 JSON 数据结构数据
})
</script>
</body>
</html>
在线QQ：
