JQuery学习4（DOM操作）

最新推荐文章于 2024-05-16 04:04:41 发布

herryone123

最新推荐文章于 2024-05-16 04:04:41 发布

阅读量374

点赞数

分类专栏： Web前端

本文链接：https://blog.csdn.net/kenjianqi1647/article/details/105310879

版权

Web前端专栏收录该内容

19 篇文章 2 订阅

订阅专栏

1、创建节点

（1）创建元素

JavcaScript创建元素的方法通过document.createElement("tagName")方法实现，若要把创建的元素添加到文档中，还要调用appendChild()方法实现。

window.onload=function(){  //页面初始化函数
    var div=document.createElement("div");//创建div元素
    document.body.appendChild(div);//把创建的div元素添加到DOM文档树中
}

jquery使用构造函数$()创建元素对象，然后使用append()方法将创建的元素添加到文档中。

$(function(){    //页面初始化函数
    var $div=$("<div></div>");//创建div对象
    $("body").append($div);//把创建的div对象添加到文档中
})

（2）创建文本

JavcaScript创建文本节点的方法通过document.createTextNode(data)方法实现，若要把创建的元素添加到文档中，还要调用appendChild()方法实现。

jquery创建文本节点直接把文字字符串添加到元素标记字符串中，然后用append()等方法把它们添加到DOM文档中。

应用举例：JavcaScript实现创建元素节点和文本

<head>
<meta charset="utf-8">
<title>无标题文档</title>
	<link type="text/css" rel="stylesheet" href="style.css">
	<script type="text/javascript">
		window.onload=function()
		{
			var div=document.createElement("div");//创建div元素
			var txt=document.createTextNode("DOM");//创建文本节点
			div.appendChild(txt);//将文本节点添加到元素节点
	        document.body.appendChild(div);//将元素节点添加到DOM文档
		};
	</script>
</head>

<body>
	
</body>

jquery实现创建元素节点和文本:

<head>
<meta charset="utf-8">
<title>无标题文档</title>
	<style type="text/css">

	</style>
	<link type="text/css" rel="stylesheet" href="style.css">
	<script src="jquery/jquery-3.4.1.js" type="text/javascript"></script>
	<script type="text/javascript">
		$(
			function(){   //界面始化函数
				var $div=$("<div>DOM</div>");//创建元素节点，同时插入文本
				$("body").append($div);//将元素节点插入到DOM文档中
			}
		)
	</script>
	
</head>

<body>
	
</body>

（3）创建属性

JavaScript实现需要单独为元素设置属性，而jQuery能够直接把元素、文本和属性混在一起以HTML字符串的形式进行传递。

应用举例：

JavaScript方式：

<script type="text/javascript">
		window.onload=function()
		{
			var div=document.createElement("div");//创建div元素
			var txt=document.createTextNode("DOM");//创建文本节点
			div.appendChild(txt);//将文本节点添加到元素节点
	        document.body.appendChild(div);//将元素节点添加到DOM文档
			div.style.color="red";//设置div属性
		};
	</script>

jquery实现方式：

<script type="text/javascript">
		$(
			function(){   //界面始化函数
				var $div=$("<div style='color:#F00'>DOM</div>");//创建元素节点，同时插入文本 注意属性里面用单引号
				$("body").append($div);//将元素节点插入到DOM文档中
				
			}
		)
	</script>

2、插入节点-内部插入

（1）JavaScript方式：使用appendChild()和insertBefore()在元素内插入节点内容。

将指定元素插入到节点的尾部。

nodeObject.appendChild(newchild)

nodeObject为节点对象，newchild表示要插入的子节点。

将指定元素插入到节点前面。

insertBefore(newchild,refchild)

（2）jquery定义了4个方法

1）append()用法

<head>
<meta charset="utf-8">
<title>无标题文档</title>
	<style type="text/css">

	</style>
	<link type="text/css" rel="stylesheet" href="style.css">
	<script src="jquery/jquery-3.4.1.js" type="text/javascript"></script>
	<script type="text/javascript">
		$(
			function(){   //界面始化函数
				$(".test").append('<p>参数四</p>');//append（）方法把参数指定的内容插入到最后面
			}
		)
	</script>
	
</head>

<body>
	<div class="test">
		<p>参数一</p>
		<p>参数二</p>
		<p>参数三</p>
	</div>	
</body>

2）appendTo()用法将匹配的元素插入到目标元素的最后面。

<script type="text/javascript">
		$(
			function(){   //界面始化函数
				$('<p>参数四</p>').appendTo(".test");
			}
		)
	</script>

3）prepend()方法将参数指定的内容插入到指定节点最前面。

<script type="text/javascript">
		$(
			function(){   //界面始化函数
				$(".test").prepend('<p>参数四</p>');
			}
		)
</script>

3、插入节点-外部插入

（1）after()

该方法能够根据设置参数在每一个匹配的元素后面插入内容。

after(content)

content表示一个元素、HTML字符串或jquery对象。

<head>
<meta charset="utf-8">
<title>无标题文档</title>
	<style type="text/css">

	</style>
	<link type="text/css" rel="stylesheet" href="style.css">
	<script src="jquery/jquery-3.4.1.js" type="text/javascript"></script>
	<script type="text/javascript">
		$(
			function(){   //界面始化函数
				$("li img").after($("li img").attr("src"));//获取每个图片的src值，并追加到元素之后
			}
		)
	</script>
	<style>
		li{float: left;}
		li img{height: 200px}
	</style>
</head>

<body>
	<ul class="mytest">
		<li><img src="image/表情.jpg"</li>
		<li><img src="image/小兔子.jpg"</li>
	</ul>
</body>

（2）insertAfter()

该方法与after()方法功能相同，用法相反。

（3）before（）该方法为每个匹配的元素之前插入内容。

4、删除节点

（1）JavaScript方式：使用removeChild()方法删除指定的节点及其所包含的所有子节点。

（2）jquery

5、操作属性

（1）设置属性

JavaScript方式：使用setAttibute()方法设置属性

elementNode.setAttribute(name,value)

elementNode表示元素节点，name表示设置的属性名，value表示要设置的属性值。

jquery方式

1）prop()

该方法能够为匹配的元素设置一个或更多属性。

prop(propertyName,value)

应用举例：设置checked属性

<head>
<meta charset="utf-8">
<title>无标题文档</title>
	<style type="text/css">

	</style>
	<link type="text/css" rel="stylesheet" href="style.css">
	<script src="jquery/jquery-3.4.1.js" type="text/javascript"></script>
	<script type="text/javascript">
		$(
			function(){   //界面始化函数
				$("input[checked='checked']").prop({disable:true});
			}
		)
	</script>

</head>

<body>
	<input type="checkbox" checked="checked">
	<input type="checkbox">
	<input type="checkbox">
</body>

（2）访问属性

JavaScript方式：使用getAttibute()方法访问属性。

elementNode.getAttribute(name)

elementNode表示元节点对象，name表示属性的名称。

jquery方式：prop()方法

prop(propertyName)

propertyName为要读取的属性名称。

（3）删除属性

JavaScript方式：使用removeAttribute()方法删除指定属性。

elementNode.removeAttribute(name)

jquery方式：removeProp()方法删除prop（）方法设置的属性

removeProp(propertyName)

herryone123

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JQuery学习4（DOM操作）

1、创建节点（1）创建元素JavcaScript创建元素的方法通过document.createElement("tagName")方法实现，若要把创建的元素添加到文档中，还要调用appendChild()方法实现。window.onload=function(){ //页面初始化函数 var div=document.createElement("div");//创建di...
复制链接

扫一扫

专栏目录