开发者社区> 余二五> 正文
阿里云
为了无法计算的价值
打开APP
阿里云APP内打开

jQuery 学习系列笔记(三)(续)

简介:
+关注继续查看

接着上一篇继续...

三、设置元素内容

针对通过修改元素的HTML方法来达到修改元素内容,jQuery提供了多种方法来实现。

1、替换HTML或文本内容

html() 获取匹配集里第一个元素的HTML内容。返回第一个已匹配元素的HTML内容。返回值与访问那个元素的innerHTML属性所获得的内容一致。

这个应该不用解释了,我们都学习了那么多方法了。

html(text) 把传入的HTML片段设置为所有匹配元素的内容。返回包装集。
text (字符串)将被设置为元素内容的HTML片段

另外也可以只获取或设置元素的文本内容。

text() 把包装集里元素的所有文本内容连接起来,并返回字符串作为命令的结果。返回连接而成的字符串。

举个例子:有如下HTML片段。

1
2
3
4
5
6
<ulid="theList">
  <li>One</li>
  <li>Two</li>
  <li>Three</li>
  <li>Four</li>
</ul>
1
var text = $("#theList").text();

则text的结果是OneTwoThreeFour。

text(content) 把所有已包装元素的文本内容设置为已传递值。如果已传递文本包含尖括号(<和>),则这些字符被替换为等价的HTML实体。返回包装集。
content (字符串)将要设置到已包装元素里的文本内容。任何尖括号字符将被转义为HTML实体。

需要说明的是,无论用html()还是text()都是对原先内容的覆盖,所以使用前必须确认好。

2、移动和复制元素

append(content) 把传入的HTML片段或元素追加到所有已匹配元素的内容之后。返回包装集。
content (字符串|元素|对象)将被追加到包装集各元素的一个字符串、元素或包装集。

举例说明

1
$("p").append("<b>some text</b>");

这句比较简单,就是表示在所有<p>元素后面追加新的HTML片段。下面是稍稍复杂的用法。

1
$("p.sugar").append($("a.ant"));

这表示什么呢?在带有类.sugar的所有<p>元素后面追加带有类ant的链接。这里的追加有点说道。如果append里的是单一元素,那么将该元素从原来的位置上删除掉,移动到新的父元素下。如果是多个元素,即是一个内容大于等于1的集合,那么在原来位置保留的情况下,会在新的父元素下追加集合中的副本。

前者可以理解为移动操作,后者则是复制操作。

如果不想追加整个包装集,也可以单独追加一个特定的DOM元素。如:

1
2
var toAppend = $("a.ant")[0];
$("p.sugar").append(toAppend);

这种情况下对于追加的toAppend是所谓的移动还是复制,要取决于$("p.sugar")的元素数量(注意:与上面的例子不同,上面是取决于追加元素的数量)。如果匹配一个元素进行移动操作。多个,则进行复制操作。

还有更简单的方法:

appendTo(target) 把包装集里所有元素移动到指定目标的内容的末尾。返回包装集。
target (字符串|元素)一个包含jQuery选择器的字符串,或一个DOM元素。包装集各元素将追加到target所指定的那个位置。

同样的,如果target只匹配一个元素,则是移动,如果是多个元素,则是复制。

再介绍几个工作方式类似于append和appendTo的方法。

prepend()和prependTo()表示在目标元素的内容之前插入源元素,而不是之后。

before()和insertBefore()表示在目标元素之前插入元素,而不是在目标元素的第一个子元素之前。

after()和insertAfter()表示目标元素之后插入元素,而不是在目标元素的最后一个子元素之后。

3、包裹元素

什么叫包裹元素呢?妹的,看书读文字把我都搞成浆糊了还没弄明白所谓的包裹元素,又没有例子是弄哪样?我才不会这么不负责任。

wrap(wrapper) 把匹配集各元素用已传递HTML标签或已传递元素的克隆副本分别包裹起来
wrapper (字符串|元素)用于包裹匹配集各元素的元素开始和结束标签或者一个将被克隆且用作包裹器的元素

举个例子

1
$("a.surprise").wrap("<div class='hello'></div>");

上面的例子就是对应紫色的部分,把页面上所有带有类surprise的链接外面套层带有类hello的<div>标签。

最后页面上的情况可能就是这样的。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
...
<a class="surprise"> one</a>
<a class="surprise"> two</a>
<a class="surprise"> three</a>
...
转换后
...
<div class="hello">
    <a class="surprise"> one</a>
</div>
<div class="hello">
    <a class="surprise"> two</a>
</div>
<div class="hello">
    <a class="surprise"> three</a>
</div>
...

另一种形式呢?举个例子,用页面上第一个<div>元素的克隆副本分别包裹各链接

1
$("a.surprise").wrap($("div:first")[0]);

就是这个样子啦。包装后的结果就是页面上第一个<div>元素是什么样子的,包裹在各链接上的<div>就是什么样子的。

有的时候我们不想包裹匹配集里的元素,而想包裹元素的内容。那么就用下面的方法。

wrapInner(wrapper) 用已传递元素的克隆副本或已传递HTML标签,把匹配集各元素的内容(包括文本节点)分别包裹起来。
wrapper 同上

对于包裹,说实话我真没用过,不过据说是会经常用到,我写的jQuery代码也太少了,哈哈。

4、删除元素

remove() 从页面DOM里删除包装集里所有元素。返回包装集。

需要说明的是从DOM里删除的元素仍然被该包装集引用着,所以可以进一步用其他 jQuery命令去操作。如appendTo()、insertBefore()等类似命令。

empty() 清空匹配集里所有DOM元素的内容。返回包装集。

5、克隆元素

clone(copyHandlers) 创建包装集里元素的副本,并返回包含这些副本的新包装集。返回新建的包装集。
copyHandlers (布尔型)如果为true,复制事件处理程序;如果为false或省略,则不复制事件处理程序。

通常情况下都是我们克隆完一个包装集之后都是利用jQuery命令把其附加到DOM中的某个地方。

四、处理表单元素值

对于表单元素,我们最常见的操作是:存取表单元素值。

val() 返回匹配集里第一个元素的value特性。如果是多选元素,则返回所有选中项的数组。返回已获取的值或值数组

对于这个命令我们有几个需要注意的地方

(1)如果包装集里第一个元素不是表单元素,就会抛出javascript错误。

(2)不会区分复选框和单选按钮的选中或非选中状态,而是返回复选框或单选按钮的value特性值,不管其选中与否。

对于单选按钮,val虽然看起来有点鸡肋,但是如果我们结合上jQuery选择器之后,结果就不一样了,举个例子:如果想获取一组包含名为radioGroup的单选按钮组中选中按钮的值,那么我们可以这样。

1
$("[name=radioGroup]:checked").val();

这样可以很好的达到效果。但是对于复选框的话,我们就要想别的办法了。

val(value) 把传入的值设置为所有已匹配表单元素的值。
value 一个字符串,用于设置包装集里各表单元素的value属性值。

同样,这个方法也有局限性,就是不能把多个值设置到多选列表中去。另一种重载变体

val(values) 导致包装集里任何复选框、单选按钮或<select>元素的选项变为已选中(checked)或已选择(selected)状态,只要它们的值和已传递值数组的任何一个值相匹配。
values 一个值数组,用于确定哪些元素将被选中或选择。

举例说明:把页面上所有<input>和<select>元素,只要它们的值里和输入字符串ironman、superman、spiderman中任何一个相匹配。那么如果匹配的是复选框或单选按钮将变为已选中状态,如果是<select>则变为已选择状态。

1
$("input, select").val(['ironman','superman','spiderman']);



其实到目前为止,我们就已经能用jQuery做许多事情了,不过这些都是比较“隐蔽”的,如果想来些效果的话,那我们还得接下来的学习。




关于jQuery的学习系列笔记我写的会比较简洁,更注重的是快速上手使用,当然,非常重要的知识点我还是会专门指出的。

PS:欢迎留言交流,24小时内必有回复。










本文转自 我不会抽烟 51CTO博客,原文链接:http://blog.51cto.com/zhouhongyu1989/1404433,如需转载请自行联系原作者

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
Dynatable – 基于 HTML5 & jQuery 的交互表格插件
  Dynatable 一款有趣的,语义化,交互式的表格插件,使用 jQuery,HTML5 和 JSON 实现。Dynatable 的目的是提供一种简单的、可扩展的 API,能够轻松的浏览和操作大规模的数据集。
1227 0
43个多图片轮转jquery插件
在网页设计中,在一个有限的空间中让用户可以通过左右滚动的方式来浏览多张图片,是我们常用到的一种控件。下面我们将为您介绍43个多图片轮换播放jQuery教程和插件。 1. rCarousel 2.
1120 0
jQuery Unveil – 另一款非常轻量的延迟加载插件
  jQuery Unveil 是一款轻量的延迟加载插件,支持提供用于视网膜显示设备的高分辨率图像。这个插件非常有用,它能提高长网页中图像的加载性能,因为视口以外的图像(可见部分网页)将不会被加载,直到用户滚动到它们所在的区域。
695 0
星级评分jquery插件
星级评分jquery插件 分享几个星型评级插件   1)jRating 是一个非常灵活的jQuery插件用于快速创建一个Ajax星型投票系统。
748 0
【精心挑选】10款基于 jQuery 的图片360度旋转插件
  之前的文章向大家分享了实现网站功能的各种优秀的 jQuery 插件,今天这篇文章向大家推荐10款基于 jQuery 的图片360度旋转插件,同时还有非常详细的制作教程可以学习和参考。图片旋转展示是一种非常有趣的技术,通过把多张图片合并在一起让你可以实现360度浏览,这种效果常用于旅游网站或者酒店网站,用于展示风景或者房间的内景。
1062 0
jquery插件整理篇(七)表格插件
(1)Flexigrid Flexigrid是一个类似于Ext Gird,但基于jQuery开发的Grid。它具有的功能包括:可以调整列宽,合并列标题,分页,排序,显示/隐藏表格等。Flexigrid显示的数据能够通过Ajax获取或者从一个普通的表格转换。
899 0
推荐18款非常棒的 jQuery 表格插件
  我们一般都是用HTML表格来显示结构化数据,如今有很多的 jQuery 表格插件可以帮助我们更好的组织和控制表格数据,增强表格的功能和操作。今天要与大家分享的是18个非常优秀的 jQuery 表格插件,有用到朋友可以参考一下。
1344 0
+关注
20376
文章
0
问答
文章排行榜
最热
最新
相关电子书
更多
低代码开发师(初级)实战教程
立即下载
阿里巴巴DevOps 最佳实践手册
立即下载
冬季实战营第三期:MySQL数据库进阶实战
立即下载