JavaScript之jQuery-3 jQuery操作DOM(查询、样式操作、遍历节点、创建插入删除、替换、复制)

一、jQuery操作DOM - 查询

html操作

- html(): 读取或修改节点的HTML内容，类似于JavaScript中的innerHTML属性

文本操作

- text(): 读取或修改节点的文本内容，类似于JavaScript中的textContent属性

值操作

- val(): 读取或修改节点的value属性值，类似于 JavaScript 中的value值

属性操作

- attr(): 读取或者修改节点的属性

- removeAttr(): 删除节点的属性

二、jQuery操作DOM - 样式操作

样式操作

- attr("class","")              获取和设置

- addClass("")                  追加样式

- removeClass("")               移除样式

- removeClass()                 移除所有样式

- toggleClass("")               切换样式

- hasClass("")                  是否有某个样式

- css("")                       读取css的值

- css("","")                    设置多个样式

三、jQuery操作DOM - 遍历节点

遍历节点

- children()/children(selector)  只考虑直接子节点

- next()/next(selector)          下一个兄弟节点

- prev()/prev(selector)          上一个兄弟节点

- siblings()/siblings(selector)  其他兄弟

- find(selector)                 查找满足选择器的所有后代

- parent()                       父节点(没有选择器)

四、jQuery操作DOM - 创建、插入、删除

创建 DOM 节点

- jQuery 使用 $()工厂函数来创建节点，向$()工厂函数传递的 HTML 代码字符串

- jQuery 允许通过 HTML 代码字符串直接创建元素节点、文本节点及属性节点

插入 DOM 节点

- 内部插入节点

- append()                  作为最后一个子节点添加进来

- prepend()                 作为第一个子节点添加进来

- 外部插入节点

- after()                   作为下一个兄弟节点添加进来

- before()                  作为上一个兄弟节点添加进来

删除 DOM 节点

- remove()                       只考虑直接子节点

- remove(selector)               按选择器定位后删除

- empty()                        清空节点

五、jQuery操作DOM - 替换

替换 DOM 节点

- replaceWith():                 将所有匹配的元素替换为指定的 HTML 或 DOM 元素

- replaceAll():                  颠倒了的replaceWith()方法

六、jQuery操作DOM - 复制

复制 DOM 节点

- clone()

- clone(true):                   复制的节点也具有行为(事件处理)

总结：本章内容主要介绍了 jQuery操作DOM(查询、样式操作、遍历节点、创建插入删除、替换、复制)