jQuery 第二课 操作包装集元素代码

2020-05-24 21:27:03易采站长站整理

$(‘p:last’).html($(‘li’).html());
});
</script>
</head>
<body>
<ul>
<li>First Item</li>
<li>Second Item</li>
<li>Third Item</li>
<li>Forth Item</li>
<li>Fifth Item</li>
</ul>
<p>I am a lonely p.</p>
<p>The UL has <span></span> elements.</p>
<span>Hello jQuery.</span>
<p></p>
</body>
</html>


第一行演示了html和size的用法。按上面的介绍,两个span中的内容都应该会变成5. 第二行演示了not和add的一个用法。最终后四个li和第一个p会变成红色。第三行演示了get的用法,一旦调用get之后,返回值就不是包装元素而是HTML元素,因此可以使用HTML DOM提供的方法设置innerHTML。最后一行还是演示html()的用法,要注意html()返回的是第一个元素的内部内容,但是html(text)会把所有元素的内容都设置成text。 最终的结果如下:


image


9. 这是一大类非常有用的函数,可以根据位置关系筛选元素。































children()返回包装集内元素的子元素(儿子元素,往下多层的不算)
contents()返回包装集的内容的包装集,可能有文本节点(这个包装集有些特殊,下面介绍)
next()包装集元素中不重复的下一个元素。
nextAll()包装集元素中所有的下一个元素。
parent()包装集中元素不重复的父元素的包装集
parents()同上,但是一直向上追溯到文档根元素(不包括根元素)
prev()类似next(),所有不重复的前一个元素
prevAll()类型nextAll(),所有前一个元素
siblings()包装集中所有不重复的兄弟元素。


先看前两个函数的区别,HTML代码还是用上一个例子的,js脚本如下:

$(function() {