jquery操作DOM对象

最新推荐文章于 2023-11-16 11:32:00 发布
最新推荐文章于 2023-11-16 11:32:00 发布
阅读量489 收藏
点赞数
分类专栏： js 文章标签： jquery javascript 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qx020814/article/details/126027520
版权

通过传入id、class、标签名获取DOM对象：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="../jQuery3.6.0.js"></script>
		<style>
			.c{
				color: red;
			}
		</style>
		<script>
			$(function() {
				$("h2").click(function() {
					this.style.color="red";
				});
			});
		</script>
	</head>
	<body>
		<h2>标题标题标题标题标题标题</h2>
	</body>
</html>

给DOM对象添加、删除类css样式：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<title></title>
		<script src="../jQuery3.6.0.js"></script>
		<style>
			.c1{
				color: red;
			}
		</style>
		<script>
			$(function(){
				$("#p1").click(function(){
					// $("#p1").addClass("c1");
					// $("#p1").removeClass("c1");
					$("#p1").removeClass();
				});
			});
		</script>
	</head>
	<body>
		<p id="p1" class="c1">
			123654789
		</p>
	</body>
</html>

删除类时传入类名参数，有参则删除指定样式，无参删除全部样式

 更改DOM类容：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<title></title>
		<script src="../jQuery3.6.0.js"></script>
		<script>
			$(function() {
				$("#an1").click(function() {
					$("#div1").html("<img src='../img/3.png'/>");
					// $("#div1").text("你是个屁！");
				});
			});
		</script>
	</head>
	<body>
		<div id="div1">
			我是你爹
		</div>

		<input type="button" value="添加图片" id="an1" />
	</body>
</html>

html方法相当于js的innerHTML方法

text方法相当于js的 innerTEXT方法

 jquery获取文本内容对的运用：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<title></title>
		<script src="../jQuery3.6.0.js"></script>
		<script>
			$(function() {
				//focus:点击文本框时
				$("#text1").focus(function() {
					var t = $(this).val();
					if (t == "xxx@163.com") {
						$(this).val("");
					}
				});
				//blur：离开文本框时
				$("#text1").blur(function() {
					var t = $(this).val();
					if (t == "") {
						$(this).val("xxx@163.com");
					}
				});
			});
		</script>
	</head>
	<body>
		邮箱:<input type="text" id="text1" value="xxx@163.com" /><br />
		密码:<input type="text" id="text2" />
		<p>
			<input type="button" value="登录">
			<a href="#">忘记密码</a>
		</p>
	</body>
</html>

判断文本框是否有过更新输入值，

给定用户默认格式

改变DOM元素值：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<title></title>
		<script src="../jQuery3.6.0.js"></script>
		<script>
			$(function() {
				//attr:attr("属性","属性值")
				var img = new Array();
				img[0] = "../img/3.png";
				img[1] = "../img/t1.png";
				img[2] = "../img/t2.png";
				img[3] = "../img/ys.png";
				$("img").attr("src", function() {
					var i = Math.ceil(Math.random() * 3);
					return img[i];
				});
				$("img").attr("width", "100px");
			});
		</script>
	</head>
	<body>
		<img src="../img/3.png" />
	</body>
</html>

上面的代码时随机获取1-4的图片作为背景

通过attr方法改变DOM的属性值

第一个参数为：属性名称

第二个参数为：该属性值

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<title></title>
		<script src="../jQuery3.6.0.js"></script>
		<script>
			$(function() {
				$("#data").blur(function() {
					if ($(this).val() != "") {
						var $t = $("<li>" + $(this).val() + "</li>");
						$t.appendTo($("ul"));
						$(this).val("");

					}
				});
			});
		</script>
	</head>
	<body>
		<ul id="ul1">
			<li>戒烟——————李某</li>
			<li>李白——————李某</li>
			<li>哦买噶——————李某</li>
		</ul>
		<input type="text" id="data" />
	</body>
</html>

获取输入框的值，通过appendTO方法添加到指定的容器中

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<title></title>
		<script src="../jQuery3.6.0.js"></script>
		<script>
			$(function(){
				$("h2").click(function(){
					var ul=$("<ul></ul>");
					var li1=$("<li>我是你爹</>")
					var li2=$("<li>我是你爹的爹</>")
					var li3=$("<li>我是你爹的爹的爹</>")
					ul.append(li1);
					ul.append(li2);
					ul.append(li3);
					$(this).after(ul);
				});
			});
		</script>
	</head>
	<body>
		<h2>点击添加</h2>
	</body>
</html>

还可以添加父类容器 

替换DOM类容：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<title></title>
		<script src="../jQuery3.6.0.js"></script>
		<script>
			$(function() {
				//:first:第一个
				//+:下一个，或者next()方法
				$("#tj").click(function() {
				var li="<li>"+$("#txt").val()+"</li>";
				$("ul li:first+").replaceWith(li);//选中第二个
				});
			});
		</script>
	</head>
	<body>
		<ul>
			<li>大河乡东流</li>
			<li>黄河滚滚</li>
			<li>长江幽幽</li>
			<li>我是你爹</li>
		</ul>
		<label>
			<input type="text" id="txt" />
			<input type="button" value="替换" id="tj" />
		</label>
	</body>
</html>

获取输入框类容，选中DOM对象

通过replaceWith方法替换掉指定DOM

 遍历DOM元素

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<title></title>
		<script src="../jQuery3.6.0.js"></script>
		<script>
			$(function() {
				$("#img1").click(function() {
					$(this).clone(true).appendTo("#p1")
				});
				$("#s").click(function() {
					$("ul li:first").remove();
				});
				$("#tianjia").click(function() {
					$("img").each(function(index, element) {
						$(element).css("border", "1px solid red");
						$(element).attr("title", "第" + (index + 1) + "张");
					})
				});
			});
		</script>
	</head>
	<body>
		<p id="p1">
			<img src="../img/3.png" id="img1" />
		</p>
		<ul>
			<li>1</li>
			<li>2</li>
			<li>3</li>
			<li>4</li>

		</ul>
		<input type="button" id="s" value="删除" />
		<p>
			<img src="../img/3.png" />&nbsp;&nbsp;
			<img src="../img/3.png" />
		</p>
		<input type="button" value="添加边框" id="tianjia" />
	</body>
</html>

 使用each方法可以遍历获取到的DOM元素

参数一：下标，从0开始

参数二：对象名

类似于JAVA的加强for循环

int[]arr={1,2,3};

for(int i:arr){

...........

}

菜汪在路上
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
jQuery
爱笑的boy的博客
03-28 2676
jQuery 1.官方文档 https://www.w3school.com.cn/jquery/index.asp https://jquery.cuishifeng.cn/ 2.JQuery 是什么? 1.基本介绍 1.jQuery 是一个快速的，简洁的 javaScript 库，使用户能更方便地处理 HTML,css,dom… 2.提供方法、events、选择器，并且方便地为网站提供 AJAX 交互 3.其宗旨是—WRITE LESS,DO MORE,写更少的代码,做更多的事情. 4.jQuery
JQuery笔记-通过tag、class、id获取指定的dom
IT1995的博客
02-07 3607
如下面这个dom： 从上面观察，这个a，上面是一个div其中的class是down。 通过： $("div .down a") #或 $("div.down a") 打印后，发现这个list就一个，如果要点击就是这样的。 $("div.down a")[0].click(); #或 $("div. down a")[0].click(); 介绍下其他的元素选择： $("p") 选取 <p> 元素。 $("p.intro") 选取所有 class="intro" 的 &lt
jQuery根据ID、CLASS、等获取对象
热门推荐
Cactus
08-01 12万+
jQuery根据ID、CLASS、等获取对象 Jquery是继prototype之后又一个优秀的Javascrīpt框架。它是轻量级的js库(压缩后只有21k) ， 它兼容CSS3，还兼容各种浏览器 （IE 6.0+, FF 1.5+, Safari 2.0+, Opera
jQuery选择器中id和class的使用
lnx0307的专栏
10-05 1814
webrx-title $(document).ready(function(e) {     $('div[id]').css('font-size','100px');   //根据给定的ID匹配一个元素。     $('div[class=aa]').html('1111111111111111');  //替换class内容     $('div[class^=nav-]'
AJAX手写JQuery实现根据ID来获取DOM元素------AJAX
最新发布
春风若有怜花意，可否许我再少年
11-16 153
AJAX手写JQuery实现根据ID来获取DOM元素------AJAX
jQuery对象与DOM对象之间的相互转换
12-04
- 当需要使用jQuery提供的链式操作和便捷的DOM操作，如`append`、`remove`等时，则需将DOM对象转换为jQuery对象。 总的来说，熟练掌握jQuery对象与DOM对象之间的转换，能够使你在处理JavaScript项目时更加得心应手...
jquery对象与DOM对象转化
12-03
在实际开发中，理解并掌握这两种类型的对象转换是非常重要的，因为jQuery提供了一些方便的方法，如动画效果、事件处理等，而原生DOM对象在某些情况下可能更高效，比如在处理大型数据集或者执行性能敏感的操作时。...
jQuery Dom元素操作技巧
12-29
Dom是Document Object Model的缩写，意思是文档对象模型。DOM是一种与浏览器、平台、语言无关的接口，使用该接口可以轻松访问页面中所有的标准组件。DOM操作可以分为三个方面即DOM Core(核心)、HTM-DOM和CSS-DOM。 ...
jQuery对象和DOM对象相互转化
12-04
DOM对象就是Javascript固有的一些对象操作。DOM对象能使用Javascript固有的方法，但是不能使用jQuery里的方法。例如：document.getElementById(“img”).src=”test.jpg”;这里的document.getElementById(“img”)...
jquery对象和DOM对象的任意相互转换
10-22
例如，如果需要使用jQuery不支持的特定DOM操作，可以先将jQuery对象转换为DOM对象；反之，如果DOM对象需要利用jQuery的便利性，可以将其转换为jQuery对象。 在实际应用中，jQuery对象与DOM对象的转换有助于优化代码...
jQuery选择器部分知识点总结
weixin_51051051的博客
09-28 256
一、jQuery选择器的优势 1、使用CSS选择器时，开发人员需要考虑主流浏览器是否支持某些选择器，而在jQuery中，开发人员则可以放心的使用jQuery选择器而无需考虑浏览器是否支持这些选择器。 2、使用getElementById()和getElementByTagName()函数获取页面中不存在的元素时会报错，但是使用jQuery获取网页中不存在的元素时不会报错。 注意：$("#tt")获取的是对象，即使网页中没有此元素。 所以当要用jQuery检测某个元素在网页中是否存在的时候使用如下代码: 1
操纵DOM之---attr 获取与设置属性的值
天下无敌庞成勇
11-16 4478
在使用JavaScript编写网页代码的过程中，多数时间都在操纵DOM，比如Ajax返回json数据、动态地向DOM添加显示节点或者是动态地更改页面上元素的CSS和属性等。DOM的全称是Document Object Model，即文档对象模型，是一种与浏览器、平台和语言无关的接口，它可以让用户代码访问任何浏览器中呈现的元素，可以将DOM看作是网页呈现的一种标准。attr 获取与设置属性的值 要
jQuery选择器&基本操作
m0_62168050的博客
07-11 2517
jQuery选择器&基本操作
jQuery通过id属性来获取元素，通过.addClass()方法来添加class.
qq_37499398的博客
05-23 1万+
Target Elements by ID Using jQuery你还可以根据id属性来获取元素首先用$("#target3")来选择id为target3的button元素。注意，就像CSS一样，在id的名字前加上 #。 然后使用jQuery的.addClass()方法来添加 animated和fadeOutclass.例如：下面的代码就是给id为target6的button元素添加fade o...
jQuery选择器
蔚然成风
05-18 888
jQuery选择器 基础选择器 Basics 1.根据标签名进行选择 var input_query=$("input"); 2.根据id值选取 var text11_query=$("#text11"); 3.根据class值进行选取 var text11_query=$(".text11"); 4.同时选择多个符合条件的JQuery包装集用,号分隔条件 var text_query=$("#text11,.text12"); 5.选择所有DOM元素 var all_query=$("*");
jquery 通过相同id获取多个dom标签
卡夫卡
11-26 1万+
在html中，可以为每个标签都定义一个id，且这个id是唯一的，其实不管是html，还是java,设计表，id都是唯一的，它代表了当前指定的唯一 的主键，通过它可以获取它指定的元素。 如果html中定义了多个相同id,例如：<input type="text" id="tag"/> <input type="text" id="tag"/> <input type="text" id="tag"/
jquery 用ID取某个元素下的某个ID元素
哈哈__哈哈的专栏
01-07 673
  &lt;html&gt; &lt;head&gt;&lt;script type="text/javascript" src="jquery-1.7.2.min.js"&gt;&lt;/script&gt;&lt;/head&gt; &lt;body&gt; &lt;div id="div_1"&gt; &lt
jQuery——DOM对象和jQuery对象
@一只躺平的猪@的博客
07-25 222
1.获取对象 由原生js获取到的对象为DOM对象 var div = document.querySelector('div'); 由$获取到的对象为jQuery对象 $('div') 2. 两者区别 DOM对象和jQuery对象的方法和属性不能混合使用 //隐藏div元素 var div_dom = document.querySelector('div'); div_dom.hide(); //正确写法：div_dom.style.diaplay = 'none';...
jquery对象和dom元素的转换
HN.yz@ssg
12-06 9307
jquery对象转成dom对象： 1. $("#id名")[0]  //id选择器 $(function() { //通过id选择器获取jquery对象 var tx=$("#tx"); //转成dom对象 var domObj=tx[0]; }) 2.$("#id名").get(0)   //id选择器 $(function() { //转成dom对象
理解jQuery对象与DOM对象的区别
而jQuery对象是jQuery库对DOM对象的封装，提供了更加简便的API来操作DOM。 jQuery对象和DOM对象之间的主要区别在于： 1. **创建方式**： - DOM对象是通过JavaScript原生方法创建的，如`document.getElementById('...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值