jQuery节点

Posted 小南蛮

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 对象返回。

     $("<p id=‘a’>Hello JQuery</p>");

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

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


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

  创建一个 p 元素: var newP = $("<p>Oriental Lore</p>");

  将创建的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() 该方法只考虑子元素而不考虑任何后代元素。

  取得匹配元素后面紧邻的同辈元素的集合(但集合中只有一个元素):next()

  取得匹配元素前面紧邻的同辈元素的集合(但集合中只有一个元素):prev()

  取得匹配元素前后所有的同辈元素:siblings()


 

以上是关于jQuery节点的主要内容,如果未能解决你的问题,请参考以下文章

Visual Studio 2012-2019的130多个jQuery代码片段。

markdown 在WordPress中使用jQuery代码片段

使用 NodeJS 和 JSDOM/jQuery 从代码片段构建 PHP 页面

很实用的JQuery代码片段(转)

jQuery高级Ajax

几个有用的JavaScript/jQuery代码片段(转)