js,jQuery操作节点，获取、设置属性，操作class属性

您所在的位置：网站首页 › jquery获取类名 › js,jQuery操作节点，获取、设置属性，操作class属性

js,jQuery操作节点，获取、设置属性，操作class属性

2023-07-27 12:30| 来源: 网络整理| 查看: 265

1，创建元素节点：

js: document.createElement("div")

jQuery: $("")

2,创建文本节点并添加到某个元素节点：

js: var e1 = document.createTextNode("text content"); // 创建文本节点

var e2 = document.createElement("p"); // 创建元素节点

e2.appendChild(e1);

jQuery: var e3 = $("

text content

");

3,复制节点：

js: var newElement = e3.cloneNode(true);

括号内些true或false，区别：true:克隆整个‘

text content

’ 节点；false: 克隆 ‘

’ ，不克隆里面的文字

jQuery: var newElement2 = $("#e3").clone(true); // 避免id重复

4，插入节点：

js: 节点末尾添加新的子节点：

El.appendChild(newNode); // El 是一个父元素

节点前面添加新的子节点：

El.insertBefore(newNode,targetNode); // targetNode 是父元素中的某个子元素；

jquery: 在匹配元素子节点列表末尾添加子节点：（内部）

$("#el").append("

Hello world

");

把匹配的元素节点添加到目标元素节点内部结尾：（内部）

$("

hello world

").appendTo("#el");

在匹配元素元素子节点列表开头添加内容：（内部）

$("#el").prepend("

hello world

");

把匹配的元素添加到目标元素子节点列表开头：（内部）

$("

hello world

").prependTo("#el");

在匹配元素之前添加目标内容 $('#El').before('

Hello World.

'); 把匹配元素添加到目标元素之前 $('

Hello World.

').insertBefore('#El'); 在匹配元素之后添加目标内容 $('#El').after('

Hello World.

'); 把匹配元素添加到目标元素之后 $('

Hello World.

').insertAfter('#El'); 5，删除节点：

js: el.parentNode.removeChild(el)

jQuery: $("#el").remove()

6，替换节点：

js: el.replaceChild(newNode,oldNode); // oldNode必须是一个真实存在的子节点；

jquery: $("p").replaceWith("

hello world

7，获取、设置元素属性

js: 设置属性： .setAttribute("属性"，“属性值”)

获取属性： .getAttribute("属性")

jquery: 设置属性： .attr("属性"，“值”)

获取属性： .attr("属性")

可以用prop读取dom原生属性：

$("#el").prop("name","hello"); // 赋值

$("#el").prop("name"); // 取值

8，操作元素的class属性： JS:

var ele = document.getElementByClassName("test")

方法一，直接赋值，会覆盖原有的值：ele.className = "test1"

方法二：利用className为字符串的属性，可以在原有的class属性后面添加或删除class；

ele.className += " test2"; // 记得加空格；

方法三：利用classList 属性的add(),remove()方法添加或者删除属性值：

ele.classList.add("test3"); ele.classList.remove("test");

jQuery:

$("span").addClass(“test1 test2")；// addClass() 添加类属性值

$("span").removeClass("test1"); // removeClass() 删除类属性值

$("span").toggleClass("test3"); // 切换类属性值；点击一次添加类属性值，再点击一次删除类属性值；

【本文地址】

js,jQuery操作节点，获取、设置属性，操作class属性

js,jQuery操作节点，获取、设置属性，操作class属性

今日新闻

推荐新闻