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 格式.
例如创建一个<p>元素, 可以使用 $(“<p/>”) 或 $(“<p></p>”)。

二、插入操作

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=$('<img src="img/1.jpg" alt="图片" style="width: 100px;"/>')
				//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("<b>hello</b><hr>"); 
				$("p").before("<b>Hi</b></br>");
				$("<b>!!!!!</b></br>").insertAfter($("p"));
				$("<b>?????</b>").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("<div class='wrap'></div>");
在这里插入图片描述

2.wrapAll

将所有匹配的元素用单个元素包裹起来
$("p").wrapAll("<div class='wrap'></div>");
在这里插入图片描述

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("<div class='wrap'></div>");
				$("h1").wrapAll("<div class='wrap'></div>");
				//把所有段落内的每个子内容加粗
				$("h2").wrapInner("<b></b>");
				$("h3").clone().prependTo($("h4"));
				$("<b>哈哈哈</b>").replaceAll($("h5"));
			}
		</script>
	</head>
	<body>
		<p>刘备</p>
		<p>关羽</p>
		<p>张飞</p> 
		<h1>(h1)2222</h1>
		<h2>(h2)4444</h2>
		<h3>(h3)6666</h3>
		<h4>(h4)8888</h4>
		<h5>(h5)0000</h5>
		<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\dots$ (‘#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]]) 创建一个指定的元素集合完全相同的副本。完全相同泛指数据相同，副本指内存地址不同

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.特殊事件绑定方式

总结

二、插入操作

2.插入到某元素外作该元素的兄弟节点方式