三、Jquery 操作 Dom

DOM（document object model） 文档对象模型，一张网页看成是一个文档对象。浏览器在渲染网页节点完毕后，就会创建document对象。

无标题.png

1. 创建节点

    创建节点

使用jquery 创建节点：

• 创建元素节点:$("<元素名称/>") 或者 $("<元素名称>")
• 创建文本节点:$("<元素名称>文本内容")
• 创建属性节点:$("<元素名称 属性名称=‘属性值’>文本内容")

2. 插入节点

• 内部插入 4个方法
  • 内部后面插入 append appendTo
  • 内部前面插入 prepend prependTo
• 外部插入
  • 外部前面插入 before insertBefore
  • 外部后面插入 after insertAfter

3. 删除节点

• 删除元素有remove
• 删元素的内容 empty
• 删元素的属性 removeAttr

4. 查找节点

• 一种方式选择合适的选择器
• 第二种方式使用 jquery 提供的方法 （先定位，然后在找)
  • children([expr]) **** 查找元素节点的儿子元素
  • find([expr]) **** 查询元素节点的具体的子元素
  • next([expr]) **** 查询元素节点的后面紧邻的同辈元素
  • nextall([expr]) 查询元素节点的后面所有的同辈元素
  • prev([expr]) **** 查询元素节点的前面紧邻的同辈元素
  • prevall([expr]) 查询元素节点的前面所有的同辈元素
  • siblings([expr]) **** 找到前后所有同辈元素
  • parent([expr]) **** 查找元素的父元素
  • parents([expr]) 找到元素的所有祖先元素。

5.获取和设置元素节点的文本内容

• text(); 获取文本
• text("内容")；设置

6.获取和设置元素节点的属性

• attr("属性名称"); 获取属性

• attr("属性名称"，“属性值”).设置属性

• prop("属性名称"):获取 官方推荐使用它

7.操作样式 使用了css方法包装了 style对象

设置单个样式：
css(“样式的名称”,"样式的值")
设置多个样式
css({"样式的名称1":"样式名称1的值","样式的名称2":"样式名称2的值"...})

技巧：样式中名称出现有中划线，然后把中划线去掉，中划线后面的单词首写字母变大写。
eg:background-color ----- backgroundColor

• 作业：使用jquery 操作 dom 完成 动态添加一个table表，然后提供指定删除table表的每一行 tr，提供添加 行 tr