jQuery实战：操作DOM属性与样式

置顶 已于 2025-05-24 18:04:17 修改
阅读量329 收藏
点赞数
分类专栏： 前端 文章标签： jquery
于 2021-08-18 14:23:36 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/Java721/article/details/119779128
版权
这篇博客详细介绍了jQuery在操作DOM方面的各种方法，包括选择器、遍历元素、获取和设置属性、操作样式、内容以及事件处理，如加载事件。通过实例展示了如何使用jQuery高效地进行DOM操作。

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

jQuery操作DOM

Hbuilder官网
jQuery官网
新建项目并引入js文件
在这里插入图片描述

01-jQuery选择器

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>jQuery选择器</title>
	</head>
	<body>
		<h3>jQuery选择器</h3>
		<div id="mydiv1">id选择器<span><p>span中的内容</p></span></div>
		<div id="mydiv2" class="clazz">元素选择器</div>
		<span class="clazz">类选择器</span>
		<input id="inp" type="text" value="我是一个输入框">
		
		<script type="text/javascript" src="js/jquery.min.js"></script>
		<script type="text/javascript">
			console.log("----------id选择器-----------");
			var mydiv1=$("#mydiv1");
			console.log(mydiv1.html()); //等价于DOM:元素.innerHTML
			console.log(mydiv1.text()); //等价于DOM:元素.innerText
			
			var inp=$("#inp");
			console.log(inp.val());
			
			console.log("----------元素选择器-----------");
			var divs=$("div");
			divs.each(function(){
				console.log($(this).index()+"------"+$(this).text());
			});
			
			
			console.log("----------类选择器-----------");
			var el=$(".clazz");
			el.each(function(){
				console.log($(this).text());
			});
			
			
			console.log("-----------通用选择器------------");
			var all=$("*");
			all.each(function(){
				console.log($(this));
			});
			
			console.log("-----------组合选择器------------");
			var el=$("div,span,.clazz");
			el.each(function(){
				console.log($(this).text()+"---------"+$(this).prop("tagName"));
			});
			
			console.log("-----------后代选择器------------");
			var descendant=$("#mydiv1 span p");
			descendant.each(function(){
				console.log($(this).html());
			});
			
		</script>
	</body>
</html>

02-jQuery操DOM的属性-遍历元素

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>jQuery操作元素属性-遍历元素</title>
	</head>
	<body>
		<h3>遍历元素each()</h3>
				<span class="red">jQuery<b>段落</b></span>
				<span class="blue">Java</span>
				<span class="red">CSS</span>
				<span class="blue">Python</span>
				<script type="text/javascript" src="js/jquery.min.js"></script>
				<script type="text/javascript">
					//each()遍历获取到的DOM对象
					$("span").each(function(idx,e){
						console.log(idx+"--->"+$(e).text()+"---->"+$(e).index());
					});
				</script>
	</body>
</html>

03-jQuery操作DOM元素-获取属性

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>jQuery操作元素属性-获取属性</title>
	</head>
	<body>
		<h3>jQuery获取属性</h3>
		<form action="">
			<input type="checkbox" name="ch" checked="checked"/>aa
			<input type="checkbox" name="ch" />bb
		</form>
		<button id="btn" type="button">测试按钮</button>
		<script type="text/javascript" src="js/jquery.min.js"></script>
		<script type="text/javascript">
			//获取属性
			function getAttr(){
				var inp=$("input");
				console.log(inp);
				
				inp.each(function(idx,e){
					console.log(idx,$(e));
					console.log($(e).attr("checked")+"-----"+$(e).prop("checked"));
					console.log($(e).attr("name"));
				});
			}
			
			//绑定事件执行函数
			$("#btn").click(getAttr);
			
		</script>
	</body>
</html>

04-jQuery操作DOM元素-设置元素

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>jQuery操作元素属性-设置属性</title>
	</head>
	<body>
		<h3>设置属性</h3>
		<form action="">
			<input type="checkbox" name="ch" />aa
			<input type="checkbox" name="ch" />bb
		</form>
		<button id="btn" type="button">测试按钮</button>
		<script type="text/javascript" src="js/jquery.min.js"></script>
		<script type="text/javascript" >
			//设置元素
			function setAttr(){
				var inp=$("input");
				inp.each(function(idx,e){
					// $(e).attr("checked","checked");
					// $(e).attr("checked","true");
					// $(e).prop("checked","checked");
					$(e).prop("checked","true");
				});
			}
			
			//绑定事件执行函数
			$("#btn").click(setAttr);
		</script>
	</body>
</html>

05-jQuery操作DOM属性-移除元素

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>jQuery操作DOM-移除元素</title>
	</head>
	<body>
		<h3>移除属性</h3>
		<form action="">
			<input type="checkbox" name="ch" checked="checked"/>aa
			<input type="checkbox" name="ch" checked="checked"/>bb
		</form>
		<button id="btn" type="button">测试按钮</button>
		<script type="text/javascript" src="js/jquery.min.js"></script>
		<script type="text/javascript">
			//移除属性
			function delAttr(){
				var inp =$("input[name='ch']");
				inp.each(function(idx,e){
					$(e).removeAttr("checked");
				});
			}
			$("#btn").click(delAttr);
		</script>
	</body>
</html>

06-jQuery操作DOM元素-操作元素的样式

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>操作元素的样式</title>
		<style type="text/css">
			div{
				width: 200px;
				height: 20px;
			}
			.blue{
				background: blue;
				color: #fff;
				
			}
			.red{
				background: red;
				color: #fff;
			}
		</style>
	</head>
	<body>
		<h3>操作元素样式</h3>
		<div id="blue_div">蓝色</div>
		<div id="red_div">红色</div>
		<button id="add_btn" type="button">添加样式</button>
		<button id="del_btn" type="button">移除样式</button>
		
		<script type="text/javascript" src="js/jquery.min.js"></script>
		<script type="text/javascript">
			//添加样式
			function addAttr(){
				//获取blue_div
				var blue_div=$("#blue_div");
				//直接添加class属性
				blue_div.attr("class","blue");
				// //或者使用style添加属性
				// blue_div.attr("style","background:blue;color:#fff;");
				var red_div=$("#red_div");
				red_div.attr("class","red");
			}
			
			//移除样式
			function delAttr(){
				var blue_div=$("#blue_div");
				blue_div.removeAttr("class");
				
				var red_div=$("#red_div");
				red_div.removeAttr("class");
			}
			
			//第二种 使用指定方法css()
			function addCss(){
				var blue_div=$("#blue_div");
				blue_div.css({
					"background":"blue", 
					"color":"#fff"
				});
			}
			
			function delCss(){
				var blue_div=$("#blue_div");
				// blue_div.css({
				// 	"background":"",
				// 	"color":""
				// });
				
				//移除所有样式
				blue_div.removeAttr("style");
			}
			
			$("#add_btn").click(addCss);
			$("#del_btn").click(delCss)
			
		</script>
	</body>
</html>

07-jQuery操作DOM-操作元素的内容

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>jQuery操作元素内容</title>
	</head>
	<body>
		<h3><span>jQuery[操作元素内容]</span></h3>
		<button id="btn" type="button">测试按钮</button>
		
		<div id="html"><p>div1</p></div>
		<div id="text"><p>div2</p></div>
		
		<input type="text" name="uname" value="jQuery">
		
		<script type="text/javascript" src="js/jquery.min.js"></script>
		<script type="text/javascript">
			$("#btn").click(function(){
				//获取HTML内容包括HTML标签
				console.log($("h3").html()); //等价于DOM：innerHTML
				//获取text内容不包括HTML标签
				console.log($("h3").text());　　//等价于DOM：innerText
				//获取value值
				console.log($("[name=uname]").val()); //等价于DOM：value
				//设置内容
				$("#html").html("<p>使用html设置看不到标签</p>");
				$("#text").text("<p>使用text设置能看到标签</p>");
				$("[name=uname]").val("哈哈哈");
			})
		</script>
	</body>
</html>

08-jQuery操作DOM-创建并添加元素

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>jQuery创建添加元素</title>
		<style type="text/css">
			div{
				width: 200px;
				height: 50px;
			}
			.red{
				background-color: red;
			}
			.yellow{
				background-color: yellow;
			}
			.blue{
				background-color: blue;
			}
		</style>
	</head>
	<body>
		<h3>jQuery添加元素</h3>
		<p>prepend()方法前追加内容</p>
		<p>prependTo()方法前追加内容</p>
		<p>append()方法后追加内容</p>
		<p>appendTo()方法后追加内容</p>
		
		<span class="red"><b>Java</b></span>
		<span class="blue"><b>Python</b></span>
		
		<div class="yellow">
			<span><b>jQuery</b></span>
		</div>
		
		<button type="button" id="btn">测试按钮</button>
		
		<script type="text/javascript" src="js/jquery.min.js"></script>
		<script type="text/javascript">
			var create_span='<span id="myspan" style="width:200px;background-color:black;color:white;">动态创建span</span>';
			//1.prepend()方法前追加内容
			function prependFunc(){
				//在元素内最前面添加指定元素
				$("body").prepend(create_span);
			}
			
			//2.prependTo()方法前添加内容
			function prependToFunc(){
				//将指定元素添加至body 元素最前面	
				$("<b>开头<b/>").prependTo("body");
			}
			
			//3.append()方法后追加内容
			function appendFunc(){
				//在body元素内最后添加指定元素
				$("body").append(create_span);
				//把已存在的元素添加到另一处的时候相当于移动
				$("div").append($(".red"));
			}
			
			//4.append()方法后追加内容
			function appendToFunc(){
				$("<b>末尾<b/>").appendTo("body");
				$(".blue").appendTo($(".yellow"));
			}
			
			//绑定事件执行函数
			$("#btn").click(appendToFunc);
		</script>
	</body>
</html>

09-jQuery操作DOM-删除元素

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>操作DOM-删除元素</title>
		<style type="text/css">
			span{
				color: white;
				padding:10px;
			}
			.red{
				background-color: red;
			}
			.blue{
				background-color: blue;
			}
		</style>
	</head>
	<body>
		<h3>jQuery删除元素</h3>
		<span class="red">jQuery<b>段落</b></span>
		<span class="blue">Python</span>
		<span class="red">Java</span>
		<span class="blue">CSS</span>
		<button type="button" id="btn">测试按钮</button>
		<script type="text/javascript" src="js/jquery.min.js"></script>
		<script type="text/javascript">
			function delElement(){
				//清空元素
				// $("span").empty();
				//删除所选元素或指定元素
				// $("span").remove();
				// //删除span中b元素
				// $("span b").remove();
				//清空样式为red的元元素
				$(".red").empty();
			}
			
			//绑定事件执行函数
			$("#btn").click(delElement);
		</script>
	</body>
</html>

10-jQuery事件-加载事件

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>jQuery加载事件</title>
	</head>
	<body>
		<script type="text/javascript" src="js/jquery.min.js"></script>
		<script type="text/javascript">
			//第一种 优先级最高
			window.onload=function(){
				$("#dv").html("<p>第一种...页面加载完成时调用</p>");
			};
			
			//第二种
			$(document).ready(function(){
				console.log("第二种...页面加载完成时调用");
			});
			//第三种
			$(function(){
				console.log("第三种...页面加载完成时调用");
			});
			//第四种
			function init_page(){
				console.log("第四种...页面加载完成时调用");
			};
			$(init_page);
			$(document).ready(init_page);
		</script>
		
		<div id="dv">
			
		</div>
	</body>
</html>
修改html中meta标签,利用JS或JQuery修改网页title和meta标签的content内容
weixin_36161279的博客
06-05 3261
这篇文章主要为大家详细介绍了利用JS或JQuery修改网页title和meta标签的content内容，具有一定的参考价值，感兴趣的小伙伴们可以参考一下,有需要的朋友可以收藏方便以后借鉴。网页的title和meta标签、content内容是可以通过JQuery和JS来修改的，具体经常见到的就是不少朋友的网站被挂马或者劫持的时候，经常会是这样的情况，本文361模板将分别介绍它们的实现方法。网页met...
jQuery方法大全
whqwyn的博客
11-07 1908
$(“p”).addClass（“active”）； 给P标签添加类名为“active”的样式$(“img”).attr({src:”test.jpg”,alt:”test Image”}); 给某个元素添加属性/值$(“img”).attr(“src”,”test.jpg”); 给某个元素添加属性/值 $(“img”).attr(“title”, function() { return
jquery 获取meta标签的content值
weixin_35704268的博客
02-16 1667
var descStr = $("meta[name='description']").attr("content"); //描述 console.log(descStr)
php获取页面meta,使用jquery获取页面meta属性值
weixin_42126274的博客
03-09 474
meta部分1.使用jquery获取meta的content值var m = $("meta[property=og:url]");alert(m.attr("content"));2.使用javascript获取meta的content值var fbAppIdContent = "";for (var i = 0; i < metaTags.length; i++) {if (metaTa...
jq 获取 meta 元素里面的值
chuncui2576的博客
11-22 1334
需要获取 meta 里面的值， 就是 content 里面的值： <meta name="basepath" id="basepath" content="$!webPath" /> jq两种方式 console.log('test>>>>'+">&g...
jQuery实战：遍历、获取与设置属性
通过这些例子，我们可以看到jQuery如何简化了JavaScript中的DOM操作，使得遍历元素、获取和设置属性变得更为便捷。在实际开发中，`each()`和`attr()`是jQuery中常用的功能，它们极大地提高了代码的可读性和效率。...
jQuery实战：简化JavaScript操作与插件精选
1. **DOM操作**：jQuery简化了对HTML文档的操作，如选择元素、添加/删除类、隐藏/显示元素等。通过ID、类名或属性选择器，开发者可以轻松地找到页面中的特定元素。 2. **事件处理**：jQuery提供了统一的事件处理...
深入理解jQuery：DOM操作与项目实战
- **DOM属性和类操作**：jQuery允许对元素的属性进行操作，例如使用`.attr()`, `.prop()`, `.addClass()`, `.removeClass()`等方法。 - **DOM事件处理**：jQuery封装了事件监听和事件触发的方法，如`.click()`, `....
jQuery进阶：DOM操作、事件处理与动画实战
总结来说，JQuery进阶文档深入讲解了如何通过高级特性高效地管理和操作DOM，包括选择器、样式处理、事件绑定、动画和实用示例，有助于提升开发者的前端交互能力。通过学习和实践，开发者可以更好地驾驭jQuery，实现...
jQuery学习精要：DOM操作与选择器实战
jQuery对象可以方便地操作DOM，但有时需要返回原始的DOM元素。有以下两种转换方式： ```javascript var jquery_obj = $("#id"); // 通过ID获取jQuery对象 var dom_obj = jquery_obj[0]; // 使用数组索引获取DOM对象 ...
jquery设置html title,JQuery或JS修改网页title和meta标签的content内容
weixin_39609887的博客
06-16 1449
修改meta标签的content内容例如网页的meta标签原来是这样写的：那么我们可以用JQuery或JS来修改meta标签的content内容。JQuery实现代码如下：$('meta[property="og:description"]').attr('content',"***");或：$("meta[property='og:description']").attr('content',...
jquery获取meta content或当前位置的值，给当前栏目添加checked状态
qq_17475727的博客
02-24 481
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>判断mate或当前位置的值，给当前栏目添加checked状态</title> <meta name="ColumnName" content="行业新闻" /> <script src="http://libs.baidu.com/jquery/1.7.2/jquery.
jQuery----获取属性和内容
何明洋的编程技术博客
07-02 459
&lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta http-equiv="Content-Type" content="text/html; charset=utf-8"/&gt; &lt;title&gt;&lt;/title&gt; &lt;meta charset="utf-8
爬虫技术 -- 进阶学习（十一）【补充】获取html中meta标签中的content的内容
aijie6150的博客
04-21 1293
上一篇网易新闻页面信息抓取 -- htmlagilitypack搭配scrapysharp中提及了很多如何快速抓取html中的文本的语句， 但是meta标签中的content内容的抓取，没有提及到！ 上网搜索了下，发现很少提及，所以写篇随笔，备忘一下！ 还是在HtmlAgillityPack搭配ScrapySharp的环境下，具体如何配置点击上一篇链接。 例子：<meta ...
获取<meta>中的content标签内容
iteye_12449的博客
02-24 1689
php函数：$tags = get_meta_tags ( 'http://shop.icbuy.com/' ); echo $tags [ 'author' ]; // name echo $tags [ 'keywords' ]; // php documentation echo $tags [ 'description' ]; // a php manual echo $tags [ ...
jQuery框架
匿名攻城狮
11-11 612
一、jQuery简介 jQuery是一个JS的框架(JS的类库)，对传统的JS进行了封装。 使用JQuery可以兼容各种浏览器，方便的处理HTML、Events、动画效果等。方便的为网站提供AJAX交互。 jQuery写法的简单性，易用性大大提升了人们对它的使用。 使用jQuery可以做到，html页面代码和控制的分离，彻底将控制代码放入一个单独的js文件。 使用jQuery需要引入jQuery...
jquery动态修改页面的title、keywords、description以及转义html标签
qq_24247913的博客
11-28 4068
function getDetail(id,that) { $(that).css(“color”,“red”); $(that).siblings().css(“color”,“black”); var data = ‘<?= $data?>’; var data = JSON.parse(data); for(var i=0;i<data.length;i++) { var ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

小蜜蜂127

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值