jquery操作DOM对象

通过传入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
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值