JQuery对DOM节点的操作

最新推荐文章于 2020-09-25 11:18:37 发布

洋哥在线写BUG

最新推荐文章于 2020-09-25 11:18:37 发布

阅读量301

点赞数

分类专栏： Layui和vue等前端知识点文章标签： JQuery对DOM的操作

本文链接：https://blog.youkuaiyun.com/Cui6023056/article/details/103398277

版权

Layui和vue等前端知识点专栏收录该内容

9 篇文章

订阅专栏

本文详细介绍了JQuery对DOM的各种操作，包括样式设置、内容与Value属性操作、节点操作等。通过实例展示了如何添加和移除样式、操作输入框内容、添加与删除节点以及替换和复制节点等操作。

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

JQuery对DOM的操作

本章我记录一下本人在我经理的视频中整理了一些对DOM的操作
JQuery中对DOM的操作可分为:
1：样式操作；2：内容及Value属性值操作 3：节点操作 4：节点属性操作 5：节点遍历

对样式的操作

1：使用css添加边框:

$("img").css({"border":"3px solid #CC99FF","opacity":"0.9"});

2：追加样式、移除样式

$("img").addClass("class名称")//添加样式
$("img").removeClass("class名称")//去除样式
$("li").hover(function(){//样式切换
					$(this).toggleClass("show");
				});

内容及Value属性的操作

1：我们来看下对输入框的默认字体显示
JQuery代码

$(function(){
				$("[type=text]").focus(function(){//光标移到标签上
					var name = $(this).val();//获取文本框的内容
					if(name == "请输入账号"){
						$(this).val("");
					}
				});
				$("[type=text]").blur(function(){//光标移除
					var name = $(this).val();//获取文本框的内容
					if(name == ""){
						$(this).val("请输入账号");
					}
				});
			});

效果就不显示了:

<body>
		<input type="text" value="请输入账号" />
		<input type="button" value="登录" />
	</body>

节点操作

我写了一个无序列表，一下操作都可以直接复制

<style>
			li{
				list-style: none;
			}
		</style>
<script>
		$(function(){
			var show02 = $("<ul>你看这是啥</ul>")
		});
</script>
		<ul>
			<li>去成华道</li>
			<li>走二仙桥</li>
			<li>你去不去</li>
			<li>怎么去？</li>
			<li>买俩窝窝头</li>
			<li>一个够吗?</li>
		</ul>

1：添加子节点(后置)

				$("ul").append(show);//在ul的最后面添加
				$(show).appendTo($("ul"));//在ul的最后面添加(加到ul里)

2：前置插入节点

				$("ul").prepend(show);//在ul的最前面添加
				$(show).prependTo("ul");//把show添加到ul的最前面

3：插入同辈节点(后置)

			var show02 = $("<ul>你看这是啥</ul>")
				$("ul").after(show02);//把show02添加到ul的后面 注意和append的区别
				$(show02).insertAfter("ul");//把show02添加入ul的后面

4：//删除、清空节点

				$("ul  li:eq(1)").remove();//删除整个节点
				$("ul  li:eq(1)").detach();//删除整个节点，保留元素的绑定事件
				$("ul  li:eq(1)").empty();//清空节点的内容

5：替换节点

			$("ul li:eq(2)").replaceWith(show02);//一起使用前面的dom节点消失，然后执行后面的替换节点
			$(show02).replaceAll("ul li:eq(3)");

6:复制节点

		$("ul li:eq(1)").clone(true).appendTo("ul");//复制ul的li下标为1的标签内容，复制到ul的后面！！！注意一定要写true

7：获取和设置节点的属性

			var ig = $(<img src = 'img/special.jpg' alt = '这是一个图片'/>)
				$("ul").append(ig);//在ul后面添加图片
				$("img").attr({"height":"100","width":"50"});//设置图片的宽高
				$("img").removeAttr("width");//去除图片的宽