Jquery（二）Dom元素的操作
Jquery（二）Dom元素的操作
- 一、创建DOM元素
- 二、 插入操作
-
- 1.插入 dom 元素
- 2.插入到某元素外作该元素的兄弟节点 方式
- 三、删除操作
-
- 1、obj.detach(‘selector’):
- 2、obj.empty()：
- 3、obj.remove()
- 4、obj.unwrap()
- 四、包裹
-
- 1.wrap
- 2.wrapAll
- 3.wrapInner(htm|element|fnl)
- 4.dom 元素的克隆
- 5.dom 元素的替换
- 五、属性
- 六、class及css操作
-
- 1.class操作
- 2.样式操作
- 七、补充内容
-
- 1.on 方法使用
- 2.off方法使用（解绑，不常用）
- 3.特殊事件绑定方式
- 总结
一、创建DOM元素
使用 jQuery 的工厂函数 $(html); 会根据传入的 html 标记字符串创建一个 jQuery的DOM 对象并返回
注意:
1.动态创建的新元素节点不会被自动添加到文档中, 而是需要使用其他方法将其插入到文档 中 例如 append（）;
2.当创建单个元素时, 需注意闭合标签和使用标准的 XHTML 格式.
例如创建一个元素, 可以使用 $(“
”) 或 $(“”)。
二、 插入操作
1.插入 dom 元素
将指定的或新创建的 jQuery 的 dom 对象插入到指定位置上。按照插入方式的不同，可分为插入到某元素内作为该元素的子节点方式； 1.parent.append(child) :向父元素（parent）加入子元素（child），插入后子元素为父元素的最后一个孩子。
2.child.appendTo(parent) :将子元素（child）插入到父元素（parent）下，插入后子元素为父元素的最后一个孩子。与 append 调用方式相反，功能相同。
3.parent.prepend(child):向父元素（parent）加入子元素（child），插入后子元素为父元素的 第一个孩子。
4.child.prependTo(parent) :将子元素（child）插入到父元素（parent）下，插入后子元素为父 元素的第一个孩子。与 prepend 调用方式相反，功能相同。
注意: parent、child 一般的使用场景都是 jQuery 的 dom 对象。
DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>title>
<script src="js/jquery-1.10.2.min.js">script>
<script type="text/javascript">
function test(){
//使用 jquery 创建 dom 元素$(html)
var img=$('
')
//1.插入到文档中:append 插入到父元素内部的结尾处
$(document.body).append(img);//append 插入到父元素内部的结尾处
//2.插入到文档中:append 插入到父元素内部的结尾处
img.appendTo($(document.body));
//3.往父元素的第一个位置插入
$(document.body).prepend(img);
//4 往父元素的第一个位置插入
img.prependTo($(document.body));
}
script>
head>
<body><button type="button" onclick="test()">点我button> body>
html>
效果展示：
2.插入到某元素外作该元素的兄弟节点 方式
brother.after(obj) :在某个兄弟节点（brother）之后插入目标对象（obj）。
brother.before(content):在某个兄弟节点（brother）之前插入目标对象（obj）。
obj.insertAfter(content):将目标对象（obj）在插入到某个兄弟节点（brother）之后。
obj.insertBefore(content) :将目标对象（obj）在插入到某个兄弟节点（brother）之前。
brother、obj 一般的使用场景都是 jQuery 的 dom 对象。
注意: brother、obj 一般的使用场景都是 jQuery 的 dom 对象
DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>title>
<script src="js/jquery-1.10.2.min.js">script>
<script>
function test(){
$("p").after("hello
");
$("p").before("Hi");
$("!!!!!").insertAfter($("p"));
$("?????").insertBefore($("p"));
}
script>
head>
<body>
<p>I would like to say: p>
<p>I would like to say: p>
<p>I would like to say: p> <button type="button" onclick="test()">点我button>
body>
html>
效果展示：
三、删除操作
1、obj.detach(‘selector’):
从 jQuery 对象（obj）中删除所有匹配选择器(selector)的元素。 示例：$(“p”).detach(“.hello”);
2、obj.empty()：
递归删除 obj （jQuery 对象）的全部子节点。不删除自己。示例： $(“#outerDiv”).empty();
3、obj.remove()
删除 obj （jQuery 对象）以及该对象全部子节点、节点绑定的事件、数据。 示例： $(“#topDiv>p”).remove();
4、obj.unwrap()
删除 obj （jQuery 对象）的父元素，保留自身以及兄弟节点。 示例： $(“#topDiv”).unwrap(); 这个方法将移出元素的父元素。
这能快速取消 .wrap()方法的效果。匹配的元素（以 及他们的同辈元素）会在 DOM 结构上替换他们的父元素。
四、包裹
1.wrap
语法：wrap(html|element|fn) 把所有匹配的每个元素用其他元素的结构化标记包裹起来。
$("p").wrap("");
2.wrapAll
将所有匹配的元素用单个元素包裹起来
$("p").wrapAll("");
3.wrapInner(htm|element|fnl)
将每一个匹配的元素的子内容(包括文本节点)用一个 HTML 结构包裹起来
$(“p”).wrapInner(“”);
4.dom 元素的克隆
clone([Even[,deepEven]]) 创建一个指定的元素集合完全相同的副本。完全相同泛指数据相同，副本指内存地址不同。
5.dom 元素的替换
使用一个元素替换另外一个元素。
obj.replaceAll(‘selector’/dom):使用 obj 替换 dom 对象或 selector 筛选的 dom 对象。（jQuery 的参数建议使用 dom 对象传递）。替换后 obj 被 clone，分别替换目标元素。 obj.replaceWith(‘selector’/dom):与 replaceAll 调用方式相反。
replaceAll(selector):用匹配的元素替换掉所有 selector 匹配到的元素（用obj替换selector，即将所有selector变为obj）
replaceWith(content|fn):将所有匹配的元素替换成指定的 HTML 或 DOM 元素（用content替换obj，即将所有的obj变为content）
包裹知识点综合代码案例：
DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>title>
<script src="js/jquery-1.10.2.min.js" type="text/javascript" charset="utf-8">script>
<script type="text/javascript">
function test() {
$("p").wrap("");
$("h1").wrapAll("");
//把所有段落内的每个子内容加粗
$("h2").wrapInner("");
$("h3").clone().prependTo($("h4"));
$("哈哈哈").replaceAll($("h5"));
}
script>
head>
<body>
<p>刘备p>
<p>关羽p>
<p>张飞p>
<h1>(h1)2222h1>
<h2>(h2)4444h2>
<h3>(h3)6666h3>
<h4>(h4)8888h4>
<h5>(h5)0000h5>
<button type="button" onclick="test()">点我button>
body>
html>
函数运行后代码的改变：
效果展示：
五、属性
六、class及css操作
1.class操作
修改目标元素所使用的样式类。
obj.addClass(‘className’):为目标元素增加样式类（className）。 示例：$(“p”).addClass(“font”);//font 为样式类名
obj.hasClass(‘className’):判断目标元素是否使用指定样式，返回值 boolean。 示例：var boolean =$(“p”).hasClass(“font”);
obj.removeClass(‘className’):删除目标元素对样式类（className）的使用。 示例：`$(“p”).removeClass(“font”); obj.toggleClass(‘className’):反转目标元素对样式类（className）的使用。如果已经使用目标样式则删除，没使用则添加。
2.样式操作
不通过设定样式类而直接修改样式的方式。
obj.css(‘styleName’):获取目标样式的取值。 示例：KaTeX parse error: Expected 'EOF', got '#' at position 3: ('#̲div').css("font…(‘#div’).css(‘color’,‘red’);
obj.css({‘styleName’,’styleValue’,…})：批量设定目标元素的样式值。 示例：$(‘#div’).css({color:‘red’,‘background-color’:‘yellow’});
七、补充内容
1.on 方法使用
on 方法绑定事件和处理函数
语法：$(‘outerSelector’).on(‘eventType’,’childSelector’,data,fun);（等价于在标签里写@eventType=“funtion”）
说明：
outerSelector:外层区域选择器。
eventType：事件类型 如 click，字符类型。
childSelector：内部元素选择器（缺省为外部选择器）。
data：传递给执行函数的参数，封装在 event.data 中。json 类型。
fun：事件处理函数。
2.off方法使用（解绑，不常用）
off 方法解除事件和处理函数
语法：$(‘outerSelector’).off(‘eventType’,’childSelector’,fun);
说明：
outerSelector:外层区域选择器。
eventType：事件类型 如 click，字符类型 。
childSelector：内部元素选择器（缺省外部选择器）。
fun：需要解除的事件处理函数
3.特殊事件绑定方式
为了编写方便，jQuery 定义了特殊事件绑定函数来绑定事件。
$(‘button’).click(function() {}); 等价 $(‘button’).on(‘click’,function() {});
特殊事件绑定的方式为： $(‘selector’).eventType(data,function() {});
selector：选择器。 eventType:函数名，但直接对应事件类型（注意省略 on）。
data：传递给执行函数的参数，封装在 event.data 中。json 类型。
总结
1.表单类型过滤器
1.:input input textarea select button
2:text 单行文本框
3.:password 密码框
4:radio 单选框
5:checkbox 复选框
6.:submit 提交按钮
7.:image 图像域
2.表单状态过滤器
1.:enabled 可用的
2:disabled 禁用的
3.:checked 被选中的
4.:selected 下拉框被选择的
3.内部插入
1.parent.append(obj);
2.obj.appendTo(parent);
3.parent.prepend(obj);
4.obj.prependTo(parent);
4.外部插入
1.brother.after(obj);
2.obj.insertAfter(brother);
3.brother.before(obj);
4.obj.insertBefore(brother);
5.Jquery 操作 dom 元素
1.obj.detach(‘selector’):从 jQuery 对象（obj）中删除所有匹配选择器(selector)的元素。 示例：$(“p”).detach(“.hello”);
2.obj.remove() 删除 obj （jQuery 对象）以及该对象全部子节点、节点绑定的事件、数据 3.obj.empty()： 递归删除 obj （jQuery 对象）的全部子节点。不删除自己. 示例： $(“#outerDiv”).empty();
4.obj.unwrap() 删除 obj （jQuery 对象）的父元素，保留自身以及兄弟节点。 示例： $(“#topDiv”).unwrap(); 这个方法将移出元素的父元素。这能快速取消 .wrap()方法的效果。匹配的元素（以及 他们的同辈元素）会在 DOM 结构上替换他们的父元素。
6.包裹
1.wrap(html|element|fn) 把所有匹配的每个元素用其他元素的结构化标记包裹起来。
2.wrapAll 将所有匹配的元素用单个元素包裹起来
3.wrapInner(htm|element|fnl) 将每一个匹配的元素的子内容(包括文本节点)用一个 HTML 结构包裹起来
7.dom 元素的克隆 clone([Even[,deepEven]]) 创建一个指定的元素集合完全相同的副本。完全相同泛指数据相同，副本指内存地址不同