应用实例
表单选择器应用实例
需求:网页中所有的p元素添加onclick事件,当点击文字时,弹窗显示段落的内容
p-onclick
我是段落1
我是段落2
我是段落3
需求:使一个特定的表格隔行变色
表格隔行变色
第一个表格
1
1
2
2
3
3
4
4
5
5
6
6
第二个表格
1
1
2
2
3
3
4
4
5
5
6
6
jQuery 设置内容和属性 (w3school.com.cn)
查找属性节点:找到所需要的元素之后,可以调用jQuery对象的attr()方法来获取它的各种属性值。
$(selector).attr(attribute)
参数 | 描述 |
---|---|
attribute | 规定要获取其值的属性。 |
$(selector).attr(attribute,value)
参数 | 描述 |
---|---|
attribute | 规定属性的名称。 |
value | 规定属性的值。 |
应用实例
操作节点的属性
创建节点介绍
$(html标签);
会根据传入的html标记字符串创建一个jQuery对象并返回$("")
或者$("")
。但不能使用$("")
或者$("")
第1组方法(内部插入法)
append(content):向每个匹配的元素的内部的结尾处追加内容
举例: A.append(B)
(1)A,B都需要是jquery对象(2)表示把B对象插入到A对象内部的结尾处(3)结果是B对象成为了A对象最后一个子元素/子节点,如
appendTo(content):向每个匹配的元素追加到指定的元素中的内部结尾处
举例:A.appendTo(B)
(1)A,B都需要是jquery对象(2)表示把A对象插入到B对象内部的结尾处(3)结果是A对象成为了B对象的最后一个子元素/子节点,如
prepend(content):向每个匹配的元素的内部的开始处插入内容
举例:A.prepend(B)
(1)A,B都需要是jquery对象(2)表示把B对象插入到A对象内部的开始处(3)结果是B对象成为了A对象的第一个子元素/子节点,如
prependTo(content):向每个匹配的元素插入到指定的元素内部的
举例:A.prependTo(B)
(1)A,B都需要是jquery对象(2)表示把A对象插入到B对象内部的开始处(3)结果是A对象成为了B对象的第一个子元素/子节点,如
内部插入法是在元素内插入内容(该内容变成该元素的子元素或节点)
第2组方法(外部插入法)
after(content):在每个匹配的元素之后插入内容
举例说明 A.after(B)
(1) A,B都是jquery对象 (2) 表示B对象插入到A对象后面 (3) 结果是B成为A的兄弟节点,B在A后面,如
before(content):在每个匹配的元素之前插入内容
举例 A.before(B)
(1)A, B都是jquery对象(2) 表示B对象插入到A对象前面 (3) 结果是B成为A的兄弟节点,并且在A的前面,如
insertAfter(content):把所有匹配的元素插入到另一个指定的元素元素集合的后面
举例说明 A.insertAfter(B)
(1) A, B都是jquery对象 (2) 表示把A对象插入到B对象的后面 (3) 结果:A成为B的后一个兄弟节点,如
insertBefore(content) :把所有匹配的元素插入到另一个指定的元素元素集合的前面
举例 A.insertBefore(B)
(1) A, B都是jquery对象 (2) 表示把A对象插入到B对象的前面 (3) 结果是 A成为B的前一个兄弟,如
外部插入法是在元素的外面插入内容(其内容变成元素的兄弟节点)
注意: 以上方法不但能将新的 DOM 元素插入到文档中, 也能对原有的 DOM 元素进行移动(可以完成很多需求)
应用实例1
创建节点-应用实例
- 北京
- 上海
- 吉林
- 绵阳
应用案例2-以上方法不但能将新的 DOM 元素插入到文档中, 也能对原有的DOM元素进行移动
移动节点
您喜欢的城市:
- 北京
- 上海
- 天津
您爱好的游戏:
- 反恐
- 传奇
应用实例
删除节点-应用实例
您喜欢的城市:
- 北京
- 上海
- 天津
您爱好的游戏:
- 反恐
- 传奇
Hello
how are you?
Hello, Person and person
参与评论
手机查看
返回顶部