#笔记#圣思园 JavaWeb 第72讲——jQuery和DOM，查找、插入、删除、复制、替换、包裹节点

1.HTML DOM常见操作

查找节点、插入节点、删除节点、复制节点、替换节点、包裹节点

2.使用jQuery查找节点

程序示例：

运行结果：弹出：hello、2、很好

鼠标放在元素上，会出现元素title属性的值：

使用相同的attr方法，传入两个参数时：

鼠标放在元素上，元素的属性值被修改了：

3.使用jQuery创建，插入节点

首先使用JavaScript创建节点。用户在文本框输入数字后，点击按钮，输入几，就出现几个文本输入框

执行结果：

注意append.child方法，直接在button后面不能用appendChild，因为button没有子元素。

为了使显示出的文本框成为一列，需要进行换行处理：br

执行结果：

使用jQuery实现上述功能

使用jQuery实现插入节点

执行结果：

4.插入节点   apend、prepend、after方法

5.移动节点

运行结果：

6.删除节点   remove、empty（清空元素中的内容）

不带参数remove方法，remove方法返回被删除节点的jQuery对象

运行结果：

带参数的remove方法，删除符合remove方法中参数条件的节点

运行结果：

empty方法，清空内容，但是元素仍存在于页面中

运行结果：

7.实现多个文件上传

JavaScript实现

运行结果：

jQuery实现

8.节点复制

执行结果：

9.替换节点

执行结果：

10.包裹节点

运行结果：

11.对属性操作    attr、removeattr

12.使用attr增加样式    jQuery7.html

注意attr和addClass方法之间的区别：

13.用户登录，获得焦点、失去焦点     jQuery8.html

14.遍历DOM节点树