jQuery slice();wrapInner();map();
很想学习jQuery,希望自己每天学习一点点,慢慢积累,能提高自己。
今天看了三个方法,即:slice();wrapInner();map();都特别容易记,主要是会用。
1.首先来说一下slice()方法,选中所有匹配的元素,并对指定的参数进行设置。下面可以看一下实例:
<script type="text/javascript" src="jquery-1.7.2.min.js"></script>
<script type="text/javascript" >
$(document).ready(function(){
$("p").slice(0,2).wrapInner("<b></b>")
})
</script>
body部分:
<p>This is a paragraph.</p>
<p>This is a paragraph.</p>
<p>This is a paragraph.</p>
<p>This is a paragraph.</p>
结果:
<p>This is a paragraph.</p>
<p>This is a paragraph.</p>
<p>This is a paragraph.</p>
<p>This is a paragraph.</p>
上面slice()里面显示两个参数,0,2 即开始参数和末尾参数;开始参数index从零算起,但不包含0。如果参数是2,4,则就不包含2,选中便是3、4两个段落。
当然slice()参数也可以是一个,当slice(2)时,则选中的则是2以后的所有段落。即:3、4、5、6……
当slice(-2)时,则选中的便是-2以后的所有段落。即:-3、-4、-5、-6……
还有一种情况,当slice(2,-2)时,即:开始为正数,末尾为负数时,则选中的将是除1、2、-1、-2以外的段落。
值得注意的是:slice()参数不可两个同为负数,或者第一个参数为负数,否则看不到效果。
2.我们来看一下wrapInner()方法,这个方法上面已经和slice配合使用了,它主要是把所选中的元素包裹一起,然后给设定样式等。再看个例子:
<script type="text/javaScript">
$(document).ready(function(){
$("buton").click(function(){
$("p").wrapInner("<b></b>")
});
});
</script>
body部分:
<p>This is a paragraph.</p>
<p>This is a paragraph.</p>
<button>加粗段落中的文本</button>
结果:
<p>This is a paragraph.</p>
<p>This is a paragraph.</p>
<button>加粗段落中的文本</button>
3.最后来看一下map()方法,它是把一组元素,这些元素可包含:值、属性或者css样式,将其建立起一个列表。请看实例:
<script type="text/javascript" src="jquery-1.7.2.min.js"></script>
<script type="text/javaScript">
$(p).append($("input").map(function(){
return $(this).val();
}).get().join(", "))
</script>
body部分:
<p>Value: </p>
<form>
<input type="text" name="name" value="John"/>
<input type="text" name="password" value="password"/>
<input type="text" name="url" value="http://w3school.com.cn/"/>
</form>
结果:
Value: John, password, http://w3school.com.cn/
为了自己更好的记忆,所有写了下自己的片面认识,还请路过高手多多指点哦。明日见!!

浙公网安备 33010602011771号