加入收藏 | 设为首页 | 会员中心 | 我要投稿 咸宁站长网 （https://www.0715zz.cn/）- 文字识别、智能机器人、媒体智能、低代码、运维!
当前位置： 首页 > 站长资讯 > 传媒 > 正文

jQuery学习第二课：操作包装集元素

发布时间：2018-09-13 19:32:19 所属栏目：传媒 来源：站长网
导读：上文介绍了利用$函数筛选页面上的元素和替代onload事件。$函数还有一个作用，当它的参数是一个HTML片段的时候，它返回的是包含这个HTML元素的包装集。例如： html xmlns=http://www.w3.org/1999/xhtml head title jQuery Wrapper - Liehuo.net/title scrip

上文介绍了利用$函数筛选页面上的元素和替代onload事件。$函数还有一个作用，当它的参数是一个HTML片段的时候，它返回的是包含这个HTML元素的包装集。例如：

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>jQuery Wrapper - Liehuo.net</title>
<script type="text/javascript" src="jquery-1.3.2.js"></script>
<script type="text/javascript">
$(function() {
$("<p>I am a red line.</p>").css("color", "Red").appendTo("#foo");
});
</script>
</head>
<body>
<div id="foo">
</div>
</body>
</html>

$创造了一个p元素的包装元素，这个包装元素和用上文提到的选择符选到的元素是一样的。同样也可以调用jQuery的一些方法，最后用appendTo（以后介绍）把这个元素移动到div里。最终结果是：

image

下面介绍对包装集操作的函数。

1. html(),html(text). 第一个函数返回包装集第一个元素内部的html，第二个函数将包装集中的所有元素的内部html设置为text。

2.size()。返回包装集包含的元素。

3.get(),get(n)。第一个函数将包装集合内的HTML元素以javascript数组的形式返回，第二个元素返回第n个HTML元素。

4.index(elem). 返回传入的HTML元素elem在包装集中的位置。如果不在包装集中，则返回-1。

5.add(s),add(elem),add(array). add函数用于向包装集中添加元素。如果是选择器，则添加所有被选中的元素，如果是HTML片段，则根据此片段创建HTML元素并添加此元素；如果是HTML元素或者HTML元素的数组，则直接添加。

6. not(expression),filter(expression). 这两个函数是用来筛选包装集的元素的。expression可以是一个字符串（选择符），或者是html元素或者元素数组。not函数除去符合选择符的元素或者包含在数组中的元素。filter则相反，留下符合选择符的元素或者包含在数组中的元素。

7.slice(begin,end) 这个函数返回的是一个新建的包装集，内容是原包装集从第begin到第end个元素。end省略则表示最大长度。

先来看几个例子。

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>jQuery Wrapper - Liehuo.net</title>
<script type="text/javascript" src="jquery-1.3.2.js"></script>
<script type="text/javascript">
$(function() {
$('span').html($('li').size());
$('li').not('li:first').add('p:first').css('color', 'Red');
$('li').get(0).innerHTML = "First Special Item";
$('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>

（编辑：咸宁站长网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!
    相关内容
      推荐文章
        站长推荐
        热点阅读

          【免责声明】本站内容转载自互联网，其发布内容言论不代表本站观点，如果其链接、内容的侵犯您的权益，烦请提交相关链接至邮箱bqsm@foxmail.com我们将及时予以处理。

          建议您使用1920×1080分辨率、谷歌浏览器Google Chrome、Microsoft Edge以获得本站的出色浏览效果

          Copygight © 2017-2023 https://www.0715zz.cn/ All Rights Reserved. 咸宁站长网