JQuery全部详细笔记-下
JQuery全部详细笔记-下
jQuery 的 DOM 操作
查找节点, 修改属性
查找属性节点: 查找到所需要的元素之后, 可以调用 jQuery 对象的 attr() 方法来获取它的各种属性值
应用实例
操作节点的属性
创建节点
● 创建节点介绍
1.创建节点: 使用 jQuery 的工厂函数 $(): $(html标签); 会根据传入的 html 标记字符串创建一个 jQuery 对象, 并返回.
2.动态创建的新元素节点不会被自动添加到文档中, 而是需要使用其他方法将其插入到文档中;
3.当创建单个元素时, 需注意闭合标签和使用标准的 XHTML 格式.
例如创建一个
元素, 可以使用 $("
") 或 $(""), 但不能使用 $("") 或 $("
")
4.创建文本节点就是在创建元素节点时直接把文本内容写出来; 创建属性节点也是在创建元素节点时一起创建
● 第 1 组方法(内部插入法)
1.append(content) :向每个匹配的元素的内部的结尾处追加内容, 举例 A.append(B)
(1) A, B 都是jquery对象,
(2) 表示把B对象插入到A对象内部的结尾处
(3) 结果是: B对象成为A对象的子元素/节点
2.appendTo(content) :将每个匹配的元素追加到指定的元素中的内部结尾处 , 举例A.appendTo(B)
解读
(1) A, B都是jquery对象
(2) 表示把 A对象 插入到B对象内部结尾处
(3)结果是 A对象成为B对象的子元素/节点
3.prepend(content):向每个匹配的元素的内部的开始处插入内容, 举例说明 A.prepend(B)
解读
(1) A, B都是jquery对象,
(2) 表示把B对象插入到A对象内部的开始处,
(3) 结果 B成为A的子元素/节点
4.prependTo(content) :将每个匹配的元素插入到指定的元素内部的, 举例说明A.prependTo(B)
解读
(1) A, B都是jquery对象
(2) 表示把A对象插入到B对象内部的开始处
(3) 结果 A成为B的子元素/节点
5.说明: 内部插入法是在 元素内插入内容(该内容变成该元素的子元素或节点)
● 第 2 组方法(外部插入法)
1.after(content) :在每个匹配的元素之后插入内容 , 举例说明 A.after(B)
解读
(1) A,B都是jquery对象
(2) 表示B对象插入到A对象后面
(3) 结果:B成为A的兄弟节点
2.before(content):在每个匹配的元素之前插入内容, 举例 A.before(B)
解读
(1)A, B都是jquery对象
(2) 表示B对象插入到A对象前面
(3) 结果是 B成为A的兄弟节点，并且在A的前面
3.insertAfter(content):把所有匹配的元素插入到另一个、指定的元素元素集合的后面 , 举例说明 A.insertAfter(B)
解读(1) A, B都是jquery对象
(2) 表示把A对象插入到B对象的后面
(3) 结果：A成为B的后一个兄弟节点
4.insertBefore(content) :把所有匹配的元素插入到另一个、指定的元素元素集合的前面,举例 A.insertBefore(B),
解读 (1) A, B都是jquery对象
(2) 表示把A对象插入到B对象的前面
(3) 结果是 A成为B的前一个兄弟
5.说明: 外部插入法是在元素的外面插入内容(其内容变成元素的兄弟节点)
6. 注意: 以上方法不但能将新的 DOM 元素插入到文档中, 也能对原有的 DOM 元素进行移动(可以完成很多需求.).
创建节点-应用实例之添加
创建节点-应用实例
- 北京
- 上海
- 吉林
- 绵阳
创建节点-应用实例之移动
移动节点
您喜欢的城市:
- 北京
- 上海
- 天津
您爱好的游戏:
- 反恐
- 传奇
删除节点
● 删除节点介绍
remove(): 从 DOM 中删除所有匹配的元素, 传入的参数用于根据 jQuery 表达式来筛选元素.
当某个节点用 remove() 方法删除后, 该节点所包含的所有后代节点将被同时删除. 这个方法的返回值是一个指向已被删除的节点的引用.
empty(): 清空节点 – 清空元素中的所有后代节点(不包含属性节点)
应用实例
删除节点-应用实例
您喜欢的城市:
- 北京
- 上海
- 天津
您爱好的游戏:
- 反恐
- 传奇
Hello
how are you?
Hello, Person and person
复制节点
● 复制节点介绍
1、clone(): 克隆匹配的 DOM 元素, 返回值为克隆后的副本. 但此时复制的新节点不具有任何行为.
2、clone(true): 复制元素的同时也复制元素中的的事件
段落
//克隆节点，不克隆事件
$("button").clone().appendTo("p");
//克隆节点，克隆事件
$("button").clone(true).appendTo("p");
● 复制节点-应用实例
1. clone(): 克隆匹配的 DOM 元素, 返回值为克隆后的副本. 但此时复制的新节点不具有任何行为.
2. clone(true): 复制元素的同时也复制元素中的的事件
复制节点-应用实例
///
段落1
段落2
段落3
段落4
段落5
替换节点
● 替换节点介绍
1.replaceWith(): 将所有匹配的元素都替换为指定的 HTML 或 DOM/juqery 元素
A.placeWith(B)
2.replaceAll(): 颠倒了的 replaceWith() 方法 B.replaceAll(A)
3.注意: 若在替换之前, 已经在元素上绑定了事件, 替换后原先绑定的事件会与原先的元素一起消失
段落
方式一
$("p").replaceWith("");
方式二
$("").replaceAll("p");
● 替换节点-应用实例
替换节点-应用实例
节点替换
Hello
jquery
World
属性操作
● 属性操作介绍/参考文档讲解即可
1.attr(): 获取属性和设置属性
2.attr()传递一个参数时, 即为某元素的获取指定属性
3.attr()传递两个参数时, 即为某元素设置指定属性的值
4.jQuery 中有很多方法都是一个函数实现获取和设置. 如: attr(), html(), text(), val(),height(), width(), css() 等,
5.removeAttr(): 删除指定元素的指定属性
样式操作
● 样式操作介绍
1.获取 class 和设置 class : class 是元素的一个属性, 所以获取 class 和设置 class 都可以使用 attr() 方法来完成.
2.追加样式: addClass()
3.移除样式: removeClass() --- 从匹配的元素中删除全部或指定的 class
4.切换样式: toggleClass() --- 控制样式上的重复切换.如果类名存在则删除它, 如果类名不存在则添加它.
5.判断是否含有某个样式: hasClass() --- 判断元素中是否含有某个 class, 如果有, 则返回true; 否则返回 false
应用实例
样式
first
second
获取 HTML, 文本和值
● 基本介绍
1、设置或返回所选元素的内容（包括 HTML 标记）: html()
2、读取和设置某个元素中的文本内容: text(). 该方法既可以用于 HTML 也可以用于 XML文档.
3、读取和设置某个元素中的值: val() --- 该方法类似 JavaScript 中的 value 属性. 对于文本框, 下拉列表框, 单选框该方法可返回元素的值
val()代码演示
val()
常用遍历节点方法
● 常用遍历节点方法
1、取得匹配元素的所有子元素组成的集合: children(). 该方法只考虑子元素而不考虑任何后代元素.
2、取得匹配元素后面的同辈元素的集合:next()/nextAll();
3、取得匹配元素前面的同辈元素的集合:prev()/prevAll();
4、取得匹配元素前后所有的同辈元素: siblings().
5、获取指定的第几个元素: nextAll().eq(index).
6、对获取到的同辈元素进行过滤 nextAll().filter("标签").
常用遍历节点方法-应用实例
常用遍历节点方法-应用实例
ccccccc
ccccccc
XXXXXXXXX one
XXXXXXXXX two
XXXXXXXXX three
XXXXXXXXX four
tttttttttt
aaaaaaa
bbbbbb
hello, pp
CSS-DOM 操作
● CSS-DOM 操作说明
1、获取和设置元素的样式属性: css().
2、获取和设置元素透明度: opacity 属性.
3、获取和设置元素高度, 宽度: height(), width(). 在设置值时, 若只传递数字, 则默认单位是 px. 如需要使用其他单位则需传递一个字符串, 例如 $("p:first").height("2em");.
4、获取元素在当前视窗中的相对位移: offset(). 其返回对象包含了两个属性: top, left. 该方法只对可见元素有效.
css-dom操作应用实例
css-dom操作
hello,world~
多选框应用-综合课堂练习
● 需求说明：如图
1、点击->把左边选中的移动到右边.
2、点击==> 把左边全部移动到右边.
3、双击左边或者右边的某个选项，将其自动移动到另外一边.
思路：(1) 绑定事件 (2) 选择对应的对象 (3) 插入[内部插入/外部插入.
多选框应用
jQuery 中的事件 -- 加载 DOM
1. 说明：在页面加载完毕后, 浏览器会通过 JavaScript 为 DOM 元素添加事件.
2. 在常规的 JavaScript 代码中, 通常使用 window.onload 方法,window.onload = function(){}
3. 在 jQuery 中使用$(document).ready() 方法
如图所示
全部综合代码
列一
对多选框进行操作, 输出选中的多选框的个数并且把选中爱好的 名称显示
对多选框进行操作
对多选框进行操作
篮球
足球
网球
排球
列二
根据图片完成要求
根据给出的示意图，完成相应的功能
复选1
复选2
复选3
复选4
单选1
单选2
单选3
列三
根据给出的示意图，完成相应的功能
根据给出的示意图，完成相应的功能. homework03.html
列四
使用 JQuery 实现动态添加用户效果
使用 JQuery 实现动态添加用户效果
添加用户:
姓名:
email:
电话:
姓名
email
电话
Tom
[email protected]
5000
Delete
Jerry
[email protected]
8000
Delete