jQuery 中的 DOM 操作-查找节点

最新推荐文章于 2023-05-14 10:57:27 发布

_noname

最新推荐文章于 2023-05-14 10:57:27 发布

阅读量1.6k

点赞数

分类专栏： web 文章标签： jquery dom

本文链接：https://blog.csdn.net/williamfan21c/article/details/54262059

版权

web 专栏收录该内容

59 篇文章 0 订阅

订阅专栏

•DOM(Document Object Model—文档对象模型)：一种与浏览器,平台,语言无关的接口,使用该接口可以轻松地访问页面中所有的标准组件

•DOM 操作的分类:

–DOMCore: DOM Core 并不专属于 JavaScript,任何一种支持 DOM的程序设计语言都可以使用它. 它的用途并非仅限于处理网页, 也可以用来处理任何一种是用标记语言编写出来的文档, 例如: XML

–HTMLDOM: 使用 JavaScript和 DOM为 HTML文件编写脚本时,　有许多专属于 HTML-DOM的属性

–CSS-DOM:针对于 CSS操作,在 JavaScript中,CSS-DOM 主要用于获取和设置 style对象的各种属性

•查找节点:

–查找属性节点:通过 jQuery 选择器完成.

–操作属性节点:查找到所需要的元素之后,可以调用 jQuery 对象的attr()方法来获取它的各种属性值

–操作文本节点：通过 text()方法

<!DOCTYPE html>
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
		<title>Untitled Document</title>
		
		<script type="text/javascript" src="js/jquery-1.7.2.js"></script>
		<script type="text/javascript">
			
			//测试使用 jQuery 操作文本节点, 属性节点. 
			//及查找元素节点
			
			$(function(){
				//1. 操作文本节点: 通过 jQuery 对象的 text() 方法
				alert($("#bj").text());
				$("#bj").text("hi");
				
				//2. 操作属性节点: 通过 jQuery 对象的 attr() 方法. 
				//注: 直接操作 value 属性值可以使用更便捷的 val() 方法. 
				alert($(":text[name='username']").attr("value"));
				$(":text[name='username']").attr("value", "world");
				
			})
		
		</script>
		
	</head>
	<body>
		<p>你喜欢哪个城市?</p>
		<ul id="city"><li id="bj" name="BeiJing">北京</li>
			<li>上海</li>
			<li id="dj">东京</li>
			<li id="se">首尔</li>
		</ul>
		
		<br><br>
		<p>你喜欢哪款单机游戏?</p>
		<ul id="game">
			<li id="rl">红警</li>
			<li>实况</li>
			<li>极品飞车</li>
			<li>魔兽</li>
		</ul>
		
		<br><br>
		gender: 
			<input type="radio" name="gender" value="male"/>Male
			<input type="radio" name="gender" value="female"/>Female
	
		<br><br>
		name: <input type="text" name="username" value="hello"/>
		
	</body>
</html>

<!DOCTYPE html>
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
		<title>Untitled Document</title>
		<script type="text/javascript" src="js/jquery-1.7.2.js"></script>
		<script type="text/javascript">
			$(function(){
				//1. 点击所有的 p 节点, 能够弹出其对应的文本内容
				/*
				1. jQuery 对象可以进行隐式迭代: $("p").click(function(){...});
				为选取的所有的 p 节点都添加了 click 响应函数. jQuery 对象本身就是一个 
				DOM 对象的数组
				2. 在响应函数中, this 是一个 DOM 对象. 若想使用 jQuery 对象的方法
				需要把其包装为 jQuery 对象: 使用 $() 把 this 包起来. 
				3. text() 方法时一个读写的方法: 不加任何参数, 读取文本值; 加参数为
				属性节点添加文本值(文本节点) (和 text() 类似的方法: attr(), val())
				*/
				$("p").click(function(){
					alert($(this).text());
					$(this).text("^^" + $(this).text());
					//alert(this.firstChild.nodeValue);
				});
				
				//2. 使第一个 table 隔行变色
				$("table:first tr:even").css("background", "#ffaacc");
				
				//3. 点击 button, 弹出 checkbox 被选中的个数
				$("button").click(function(){
					alert($(":checkbox:checked").length);
				});
			});
		</script>
	</head>
	<body>
		<p>段落1</p>
		<p>段落2</p>
		<p>段落3</p>
		
		<table>
			<tr>
				<td>第一行</td><td>第一行</td>
			</tr>
			<tr>
				<td>第一行</td><td>第一行</td>
			</tr>
			<tr>
				<td>第一行</td><td>第一行</td>
			</tr>
			<tr>
				<td>第一行</td><td>第一行</td>
			</tr>
			<tr>
				<td>第一行</td><td>第一行</td>
			</tr>
			<tr>
				<td>第一行</td><td>第一行</td>
			</tr>
		</table>
		<br>
		<hr>
		<br>
		<table>
			<tr>
				<td>第一行</td><td>第一行</td>
			</tr>
			<tr>
				<td>第一行</td><td>第一行</td>
			</tr>
			<tr>
				<td>第一行</td><td>第一行</td>
			</tr>
			<tr>
				<td>第一行</td><td>第一行</td>
			</tr>
			<tr>
				<td>第一行</td><td>第一行</td>
			</tr>
			<tr>
				<td>第一行</td><td>第一行</td>
			</tr>
		</table>
		
		<input type="checkbox" name="test" />
		<input type="checkbox" name="test" />
		<input type="checkbox" name="test" />
		<input type="checkbox" name="test" />
		<input type="checkbox" name="test" />
		<input type="checkbox" name="test" />
		<button>您选中的个数</button>
	</body>
</html>

_noname

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jQuery 中的 DOM 操作-查找节点

•DOM(Document Object Model—文档对象模型)：一种与浏览器,平台,语言无关的接口,使用该接口可以轻松地访问页面中所有的标准组件•DOM 操作的分类:–DOMCore: DOM Core 并不专属于 JavaScript,任何一种支持 DOM的程序设计语言都可以使用它. 它的用途并非仅限于处理网页, 也可以用来处理任何一种是用标记语言编写出来的文档, 例如: XML
复制链接

扫一扫