JQuery的学习：DOM操作

最新推荐文章于 2020-08-17 14:14:02 发布

企鹅漫步

最新推荐文章于 2020-08-17 14:14:02 发布

阅读量732

点赞数

CC 4.0 BY-SA版权

分类专栏： JQuery

本文链接：https://blog.youkuaiyun.com/bamboo261/article/details/10994871

JQuery 专栏收录该内容

12 篇文章

订阅专栏

本文深入探讨了前端开发的核心技术，包括HTML、CSS、JavaScript等基础元素的匹配与操作，以及如何通过jQuery实现DOM操作，如添加、删除、替换、复制元素，以及元素的兄弟关系处理和事件处理等高级技巧。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

回顾：

input可以匹配哪些元素？
所有 input, textarea, select 和 button 元素

修改元素样式有几种方法？
css(“样式名”,”样式值”)
attr(“style”,”样式值”)
addClass(“css类”)/removeClass(“css类”);
attr(“class”,” css类”)

JQuery：DOM指的是Document

使用jQuery操作DOM
-添加新元素
-删除元素
-替换元素
-复制元素

创建新元素:
语法：$(“HTML代码”)

例：
$(“<div></div>”) 或者 $(“<div />”)
$(“<div><p>新元素</p></div>”)
注意：
HTML代码中标签必须完整
HTML代码中标签不要使用大写字母

添加儿子：

追加方式：

append: A.append(B) : A+B

appendTo: A.appendTo(B) : B+A :从最后开始插入

prependTo: A.prependTo(B) : B+A :跟appendTo操作一样，只是插入位置是从开头插入

body:

	<input type="button" id="but1" value="添加小儿子"/>
	<input type="button" id="but2" value="添加大儿子"/>
	<table>
		<tr id="tr1"><td>原始数据</td></tr>
	</table>

script:

<script src="js/jquery-1.4.1.js"></script>

<script>

	$(function()
	{
		$("#but1").click(function(){
			//$("<tr><td>新元素</td></tr>").appendTo("table");
			$("table").append("<tr><td><p>小儿子<p></td></tr>");
		});
		
		$("#but2").click(function(){
			$("<tr><td><p>大儿子</p></td></tr>").prependTo("table");
			//$("table").append("<tr><td>新元素</td></tr>");
		});
		
		$("table").css({"border":"1px solid red","width":"80%"});

添加兄弟：

-after ：添加弟弟

-before ：添加哥哥

-insertAfter 类似于 AppendTo ：它比after插入的位置还要靠前

-insertBefore 类似于 AppendTo ：它比before插入的位置还要靠前

body：

	<input type="button" id="but3" value="添加弟弟"/>
	<input type="button" id="but4" value="添加哥哥"/>

script：

		$("#but3").click(function()
		{
			$("table").after("<p>弟弟</p>");
			
			$("<p>小弟</p>").insertAfter("table");
		});	
		
		$("#but4").click(function()
		{
			$("table").before("<p>哥哥</p>");
			$("<p>大哥</p>").insertBefore("table");
		});

输出结果：

小弟

弟弟

.......

大哥

哥哥

删除元素：
-empty()
删除匹配的元素集合中所有的子节点。

-remove()

-detach()

说明：remove / detach所有绑定的事件、附加的数据等不会/都会保留下来。

body:

	<input type="button" id="but5" value="删除Table数据"/>
	<input type="button" id="but6" value="删除第一条数据"/>

script:

		$("#but5").click(function()
		{
			$("table").empty();
		});	
		
		$("#but6").click(function()
		{
			$("table tr:first").remove();
			$("table tr:last").detach();
		});

替换元素：
-replaceWith(content)
将所有匹配的元素替换成指定的HTML或DOM元素。
-replaceAll(selector)
用匹配的元素替换掉所有 selector匹配到的元素。

body:

	<input type="button" id="but7" value="替换元素"/>
	<input type="button" id="but8" value="替换Table p下所有元素"/>

	<table>
		<tr id="tr1"><td>原始数据</td></tr>
		<tr id="tr1"><td><p>模板数据</p></td></tr>
	</table>
	
	<input type="text" id="usName">

style:

<style>
	.imgType{
		width:100%;
		height:200px;
	}
</style>

scritpt:

		$("#but7").click(function()
		{
			// 把 id="tr1" 标签下内容替换成一张图片，并给图片css样式
			$("#tr1").replaceWith("<tr><td><img src='001.jpg' Class='imgType'/></td></tr>");

		});	
		
		$("#but8").click(function()
		{
			$("#usName").replaceAll("table p");

		});

复制元素：
-clone()
克隆匹配的DOM元素并且选中这些克隆的副本。
-clone(true)
克隆匹配的DOM元素以及其所有的事件处理并且选中这些克隆的副本。

body:

	<input type="button" id="but11" value="复制"/>

script:

		$("#but11").click(function()
		{
			var $but = $("#but4").clone(true);
			
			$("#but11").after($but);

		});

上移、下移：

上移：A.prev().before(A) //A.prev() 把A节点移动到上一个节点

下移：A.next().after(A) //A.next() 把A节点移动到下一个节点

body：

	<input type="button" id="but9" value="上移"/>
	
	<input type="button" id="but10" value="下移"/>

script：

		//把<tr id="tr1"><td>原始数据</td></tr>做上下移动操作
		$("#but9").click(function()
		{
			$("#tr1").prev().before($("#tr1"));

		});	

		$("#but10").click(function()
		{
			$("#tr1").next().after($("#tr1"));
		});

hide() 隐藏

show() 显示

		//点击<input type="text" id="usName">后，给text value赋值
		$("#usName").click(function()
		{
			$(this).val('请输入');
		});

事件处理：
-bind(type, [data], fn)
为每个匹配元素的特定事件绑定事件处理函数。

参数类型说明
type String 含有一个或多个事件类型的字符串，比如"click"或"submit"
data (可选) Object 作为event.data属性值传递给事件对象的额外数据对象
fn Function 绑定到每个匹配元素的事件上面的处理函数

script：

$("body").bind('mousemove','TTTTTT',function(event){$("#usName").val('X:'+event.pageX+" Y:"+event.pageY)});
		
$("body").bind('click','TTTTTT',function(event){alert(event.srcElement)});

事件对象：
fn这个参数的回调函数还可以接受一个参数。当这个函数被调用时，一个JavaScript事件对象会作为一个参数传进来。

属性/方法说明
pageX /pageY 鼠标点击时相对于页面的坐标
keyCode /*对于keyup和keydown事件返回被按下的键. 不区分大小写, a和A都返回65.

*/ 对于keypress事件请使用which属性, 因为which属性跨浏览时依然可靠.
which 对于键盘事件, 返回触发事件的键的数字编码. 对于鼠标事件, 返回鼠标按键号(1左,2中,3右).

事件处理：
-one(type, [data], fn)
为每一个匹配元素的特定事件（像click）绑定一个一次性的事件处理函数。
-unbind([type], [fn])
bind()的反向操作，从每一个匹配的元素中删除绑定的事件。
如果没有参数，则删除所有绑定的事件。

body：

	<input type="button" id="but12" value="一次性事件"/>
	<input type="button" id="but13" value="删除事件"/>

scritpt：

		$("#but12").one('click','TTTTTT',function(event){alert(event.data);});
		
		
		$("#but13").click(function(){
			$("body").unbind('click');
		});

事件委托：
-live(type, [data], fn)
给所有匹配的元素附加一个事件处理函数，即使这个元素是以后再添加进来的也有效。
这个方法是基本是的 .bind() 方法的一个变体。使用 .bind() 时，选择器匹配的元素会附加一个事件处理函数，而以后再添加的元素则不会有。为此需要再使用一次 .bind() 才行。

script：

	$("table td>p").live('click',function(){$(this).css({'color':'red'});});

以下是演示代码整合：

<html>
<style>
	.imgType{
		width:100%;
		height:200px;
	}
</style>
<script src="js/jquery-1.4.1.js"></script>

<script>

	$(function()
	{
		$("#but1").click(function(){
			//$("<tr><td>新元素</td></tr>").appendTo("table");
			$("table").append("<tr><td><p>小儿子<p></td></tr>");
		});
		
		$("#but2").click(function(){
			$("<tr><td><p>大儿子</p></td></tr>").prependTo("table");
			//$("table").append("<tr><td>新元素</td></tr>");
		});
		
		$("table").css({"border":"1px solid red","width":"80%"});
		
		$("#but3").click(function()
		{
			$("table").after("<p>弟弟</p>");
			
			$("<p>小弟</p>").insertAfter("table");
		});	
		
		$("#but4").click(function()
		{
			$("table").before("<p>哥哥</p>");
			$("<p>大哥</p>").insertBefore("table");
		});	
		
		$("#but5").click(function()
		{
			$("table").empty();
		});	
		
		$("#but6").click(function()
		{
			$("table tr:first").remove();
			$("table tr:last").detach();
		});	
		
		$("#but7").click(function()
		{
			$("#tr1").replaceWith("<tr><td><img src='001.jpg' Class='imgType'/></td></tr>");

		});	
		
		$("#but8").click(function()
		{
			$("#usName").replaceAll("table p");

		});	
		
		$("#but10").click(function()
		{
			$("#tr1").next().after($("#tr1"));

		});	
		
		$("#but9").click(function()
		{
			$("#tr1").prev().before($("#tr1"));

		});	
		
		$("#but11").click(function()
		{
			var $but = $("#but4").clone(true);
			
			$("#but11").after($but);

		});	

		$("table td>p").live('click',function(){$(this).css({'color':'red'});});
		
		
		//$("#usName").click(function()
		//{
		//	$(this).val('请输入');
		//});
		
		//$("#usName").bind('click','TTTTTT',function(event){$(this).val('清输入..........');alert(event.data);});
		
		$("body").bind('mousemove','TTTTTT',function(event){$("#usName").val('X:'+event.pageX+" Y:"+event.pageY)});
		
		$("body").bind('click','TTTTTT',function(event){alert(event.srcElement)});
		
		
		$("#but12").one('click','TTTTTT',function(event){alert(event.data);});
		
		
		$("#but13").click(function(){
			$("body").unbind('click');
		});
	});

</script>
<body>
	<input type="button" id="but1" value="添加小儿子"/>
	<input type="button" id="but2" value="添加大儿子"/>
	<input type="button" id="but3" value="添加弟弟"/>
	<input type="button" id="but4" value="添加哥哥"/>
	
	<input type="button" id="but5" value="删除Table数据"/>
	<input type="button" id="but6" value="删除第一条数据"/>
	
	<input type="button" id="but7" value="替换元素"/>
	
	<input type="button" id="but8" value="替换元素1"/>
	
	<input type="button" id="but9" value="上移"/>
	
	<input type="button" id="but10" value="下移"/>
	
	<input type="button" id="but11" value="复制"/>
	
	<input type="button" id="but12" value="一次性事件"/>
	
	<input type="button" id="but13" value="删除事件"/>
	<table>
		
		<tr id="tr1"><td>原始数据</td></tr>
		<tr id="tr1"><td><p>模板数据</p></td></tr>
	</table>
	
	<input type="text" id="usName">
	
</body>
</html>