jQuery节点

Posted 2020-09-15 小南蛮

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了jQuery节点相关的知识，希望对你有一定的参考价值。

1.查找节点

　　查找节点：查找元素节点：通过 jQuery 选择器完成。

　　查找属性节点：查找到所需要的元素之后, 可以调用 jQuery 对象的 attr() 方法来获取、设置各种属性值。

示例：

<table id="tbl" border="1" width="500">…</table>
<script>
    var width = $("# tbl").attr("width");
    $(“# tbl”).attr("border", "5");
</script>

2.创建节点

　　创建节点：使用 jQuery 的工厂函数：$(html) 会根据传入的 html 标记字符串创建一个 DOM 对象, 并把这个 DOM 对象包装成一个 jQuery 对象返回。

$("Hello JQuery");

　　注：动态创建的新元素节点不会被自动添加到文档中，而是需要使用其他方法将其插入到文档中；

当创建单个元素时，需注意闭合标签和使用标准的 XHTML 格式。不能使用 $(“”)

3.创建节点和插入节点示例

创建一个 p 元素： var newP = $("Oriental Lore");

　　将创建的newP元素插入到ID为#chapter的元素之后： newP.insertAfter("#chapter");

　　将创建的newP元素插入到body元素里： newP.appendTo("body");

4.删除节点

　　remove()：从 DOM 中删除所有匹配的元素，传入的参数用于根据 jQuery 表达式来筛选元素，这个方法的返回值是一个指向已被删除的节点的引用。

　　empty()：清空节点 – 清空元素内的所有节点。

5.替换节点

　 replaceWith()：将所有匹配的元素都替换为指定的 HTML 或 DOM 元素。

　　replaceAll()：颠倒了的 replaceWith() 方法。

　　注: 若在替换之前, 已经在元素上绑定了事件, 替换后原先绑定的事件会与原先的元素一起消失。

6.包裹节点

　　wrap()：将指定节点用其他标记包裹起来，该方法对于需要在文档中插入额外的结构化标记非常有用，而且不会破坏原始文档的语义。

　　wrapAll()：将所有匹配的元素用一个元素来包裹，而 wrap() 方法是将所有的元素进行单独包裹。

　　wrapInner()：将每一个匹配的元素的子内容(包括文本节点)用其他结构化标记包裹起来。

7.属性操作

　　attr()：获取、设置html元素属性。当为该方法传递一个参数时，即为获取指定属性；当为该方法传递两个参数时, 即为设置指定属性的值； jQuery 中有很多方法都是一个函数实现获取和设置，如：html()，text()，val()，height()，width()，css() 等。 removeAttr()：删除指定元素的指定属性。

8.样式操作

　　获取和设置 class：class 是元素的样式属性，所以获取和设置 class 都可以使用 attr() 方法来完成。

　　　　追加样式：addClass()

　　　　移除样式：removeClass()

　　　　切换样式：toggleClass()

　　　　判断是否含有某个样式：hasClass()

9.设置和获取 HTML, 文本和值

　　读取和设置某个元素中的 HTML 内容：html()，该不能用于 XML 文档。

　　读取和设置某个元素中的文本内容：text()，该方法既可以用于 HTML 也可以用于 XML 文档。

　　读取和设置某个元素中的值：val()，该方法类似 JS 中的 value 属性。对于文本框，下拉列表框，单选框该方法可返回元素的值(多选框只能返回第一个值)；如果为多选下拉列表框，则返回一个包含所有选择值的数组。

10.遍历节点方法

　　取得匹配元素的所有子元素集合：children() 该方法只考虑子元素而不考虑任何后代元素。