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节点树