[jQuery]jQuery学习笔记(三) – 操作DOM

操作DOM

要想把JavaScript的威力真正发挥出来,还得学会修改文档本身。

学习内容:

  • 利用DOM提供的借口修改文档;
  • 在网页中根据需要创建元素和文本;
  • 移动或删除元素;
  • 通过添加、删除或修改它们的属性来实现文档内容的变换。

操作属性

之前所学到的.addClass()和.removeClass()方法实际上是在操作DOM中的className属性,而.toggleClass()方法能够交替地添加和移除类。

操作非类属性的方法.attr()

当我们要修改一些其他属性,比如id,rel,title属性时,jQuery提供了.attr()和removeAttr()方法。还有.css()方法修改多个CSS属性。

如我们可以修改rel属性的值为external:

也可以同时修改多个属性:

取得的值还有可能是个函数返回值,也就是匿名函数:

每次触发值回调,都会给它传入两个参数(index,oldValue)。第一个是一个整数,表示迭代次数,我们在此利用这个值为第一个链接生成的ID是wikilink-0,为第二个连接生成的ID是wikilink-1,以此类推。代码中并没有用到第二个参数,这个参数保存的是修改之前属性的值。

取得文档内容的函数.text()

我们可以在链接title中的learn more 后面加入 about xxx,而这个xxx来自于选中的文字,我们可以这样改:

通过.prop()方法取得和设置DOM属性

直接上代码:

通过.val()方法获取表单中的值

直接上代码:

插入新元素的方法

我们来写一个回到顶部的代码:

第2行,我们生成一段“<a href=”#top”>back to top</a>”的代码,然后把它加到“div.chapter p”这个<p>标签外部的后面。

第3行,我们生成一段“<a id=”top”></a>”的代码,然后把它加到<body>标签内部的最前面去。

这样一来,当我们点击新生成的“back to top”链接时,会自动跳到id为top的位置,也就是整个页面最上方(prependTo()插入在body内最上方)。

  • insertBefore()在现有元素外部、之前添加内容
  • prependTo()在现有元素内部、之前添加内容
  • appendTo()在现有元素内部、之后添加内容
  • insertAfter()在现有元素外部、之后添加内容

移动元素的方法

依旧是依靠前文的方法进行移动元素。

直接通过$()选中元素然然后调用insertBefore()等方法就可以实现移动了。

包装移动后的元素

文中的例子是将一些文字从原文中拿出去放到最下面作为脚注。

这里解释一下,首先先生成<ol>,一个无序列表,放在#footer前面。

然后针对每一个注脚,在第7行中,向文字前加入一个指向注脚ID的超链接;第8行,将注脚放入之前所生成的无序列表中。

第9行,将其包装进一个<li>标签中,同时指定标签的ID。

.clone()复制元素

在通过$()函数选中元素后,可以调用.clone()函数生成一个副本。这个副本在生成之后没有放置在文档中的任何一个位置,需要使用前文的插入新元素时用的方法来决定放置的位置。

如:

实现内容替换的.html() .find()方法,清除HTML标签的.text()方法

若是要直接用新的HTML代替旧的内容,则可以用.html()方法。

首先,用.find()方法找到<span class=”drop”>元素,对这些元素进行操作,然后通过调用.end()方法重新返回<span class=”drop”>元素集合。在此期间,我们调用.html()把相应的内容改成了省略号(使用的是相应的HTML实体)。

在调用.html()而不传递参数的情况下,这个方法返回匹配的元素中的HTML标记。而传入参数后,元素的内容将会被传入的HTML替换掉。这里传入的HTML必须是有效的。

用.text()方法取得匹配元素的内容时,它会自动清除HTML标签,即所有的HTML的标签都将被忽略。而在通过它设置内容时,诸如<这样的特殊字符,都会被转换成等价的HTML实体。

总结归纳

  1. 要在HTML中创建新元素,使用$()函数。
  2. 要在每个匹配的元素中插入新元素,使用:
    • .append()
    • .appendTo()
    • .prepend()
    • .prependTo()
  3. 要在每个匹配的元素相邻的位置上插入新元素,使用:
    • .after()
    • .insertAfter()
    • .before()
    • .insertBefore()
  4. 要在每个匹配的元素外部插入新元素,使用:
    • .wrap()
    • .wrapAll()
    • .wrapInner()
  5. 要用新元素或文本替换每个匹配的元素,使用:
    • .html()
    • .text()
    • .replaceAll()
    • .replaceWith()
  6. 要移除每个匹配的元素中的元素,使用:
    • .empty()
  7. 要从文档中移除每个匹配的元素及其后代元素,但不实际删除它们,使用:
    • .remove()
    • .detach()