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

Posted 2020-07-03

一、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(查询、样式操作、遍历节点、创建插入删除、替换、复制)

本文出自 “会飞的蚂蚁” 博客，谢绝转载！