jquery基础之操作节点对象

最新推荐文章于 2023-04-15 11:29:18 发布

瑟瑟发抖的萌新学徒

最新推荐文章于 2023-04-15 11:29:18 发布

阅读量292

点赞数

文章标签： jquery javascript 前端

本文链接：https://blog.csdn.net/m0_56420338/article/details/129845778

版权

jquery操作节点（元素）对象

捕获-DOM操作，获取内容，值

         获取内容：1.text（）获取元素的文本内容
                      2.html（）获取元素的文档内容
                      3.val（）获取元素的value属性
                      4.attr（）获取元素自定义的DOm属性(声明出来的就能获取)
                      5.prop（）获取元素的固有属性（无论声明不声明都能获取）

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<script src="js/jquery-3.6.4.js" type="text/javascript" charset="utf-8"></script>
	<script type="text/javascript">
		$(function(){
			 			
			 console.log("文本内容："+$("div-1").text())
			 console.log("文档内容："+$("div-1").html())
			 $("#btn1").click(function(){
			 	console.log($("#input-1").val())
			 })
			 console.log($("#input-1").attr("name"))
			  console.log($("#input-1").attr("disabled"))
			   console.log($("#input-1").prop("value"))
			     console.log("attr获取："+$("#input-1").attr("abc"))
			   console.log("prop获取abc："+$("#input-1").prop("abc"))
		})
	</script>
	<body>
		<div id="div-1">
			<p id="pid" style="color: red;">红色段落</p>
		</div>
		<button id="btn1">打印文本框内容</button>
		<input type="text" name="user" id="input-1" abc="abc"/>
	</body>
</html>

设置-DOM操作，设置内容，值

        1.text("文本内容")设置文本内容
       2.html("文档内容")设置文档内容
       3.val("value值")   设置表单控件的值
       4attr("属性名","属性值")设置自定义属性
          5.prop("属性名"，"属性值")设置固有属性

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script src="js/jquery-3.6.4.js" type="text/javascript" charset="utf-8"></script>
	<script type="text/javascript">
		$(function(){
			
		$("#btn1").click(function(){
			$("p").text("<p style='color:red;'>红色文字</p>")
		})
		$("#btn2").click(function(){
			$("p").html("<p style='color:red;'>红色文字</p>")
		})
		$("#btn3").click(function(){
			$("#input-1").val("20")
		})
		$("#btn4").click(function(){
			$("#p1").attr("abc",123)
		})
		$("#btn5").click(function(){
			$("#ckbox").prop("checked",true)
		})
		})
	</script>
	</head>
	<body>
		<p>段落</p>
		<button id="btn1">点击设置文本内容</button>
		<button id="btn2">点击设置文档内容</button> <br />
		<input type="text" name="user" id="input-1" /> <br />
		<button id="btn3">点击设置文本框内容</button>
		<p id="p1">段落二</p>
		<button id="btn4">点击设置属性abc为123</button>
		<input type="checkbox" id="ckbox" />
		<button id="btn5">点击选中</button>
	</body>
</html>

练习实现计算器

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script src="js/jquery-3.6.4.js" type="text/javascript" charset="utf-8"></script>
	<script type="text/javascript">
		$(function(){
			//实现计算器工程
			var input='';
			var s=0;
			$("button").click(function(){
				s=$(this).text()
			console.log(s);
			if(s!="ac"&&s!="="){
				$("#inp1").val(input+=s)
			}else if(s=="ac"){
				input=''
				$("#inp1").val(" ")
			}else{
				input=$("#inp1").val()
				if(input!=''){
					$("#inp1").val(eval(input))
				}
			}
			})
			
		})
	</script>
	<style type="text/css">
		button{
			width: 50px;
			height: 70px;
		}
		input{
			width: 220px;
		}
	</style>
	</head>
	<body>
		<input type="text"  id="inp1"  /><br />
		<table border="1" whidth="200px" height="300px">
			<tr>
			<td><button >7</button></td>
			<td><button >8</button></td>
			<td><button >9</button></td>
			<td><button >+</button></td>
			</tr>
			<tr>
			<td><button >4</button></td>
			<td><button >5</button></td>
			<td><button >6</button></td>
			<td><button >-</button></td>
			</tr>
			<tr>
			<td><button >1</button></td>
			<td><button >2</button></td>
			<td><button >3</button></td>
			<td><button >*</button></td>
			</tr>
			<tr>
			<td><button >ac</button></td>
			<td><button >0</button></td>
			<td><button >=</button></td>
			<td><button >/</button></td>
			</tr>
		</table>
	</body>
</html>

添加元素

1.在元素内部添加子元素
append（）元素内部结尾处追加
prepend()在元素首部插入

2.在元素外部添加同级元素
* after()在元素之后插入
* before()在元素之前插入

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script src="js/jquery-3.6.4.js" type="text/javascript" charset="utf-8"></script>
	<script type="text/javascript">
		$(function(){
		
			$("#btn1").click(function(){
				var element1="<span style='color:green;'>尾部内容1</span>"
				var element2="<span style='color:blue;'>尾部内容2</span>"
//				$("p").append("<span style='color:red;'>尾部内容</span>")
			//可以一次追加多个元素，元素之间用，隔开
			$("#pid").append(element1,element2)
			})
			$("#btn2").click(function(){
				$("p").prepend("<span style='color:red;'>首部内容</span>")
			})
			$("#btn3").click(function(){
				$("p").before("<span style='color:red;'>前内容</span>")
			})
			$("#btn4").click(function(){
				$("p").after("<span style='color:red;'>后内容</span>")
			})
		})
	</script>
	</head>
	<body>
		<p id="pid">段落内容</p>
		<button id="btn1">点击尾部追加内容</button>
		<button id="btn2">点击首部追加内容</button>
		<button id="btn3">点击在p前添加内容</button>
		<button id="btn4">点击在p后添加内容</button>
	</body>
</html>

删除元素

1.remove（）删除被选元素及其子元素
另一种用法：可以接收一个参数，允许对被删除的元素进行过滤，参数可以是任何jquery选择器语法
$("p").remove(".pp")删除所有含有class属性是pp的元素

2.empty（）从被选元素中删除子元素

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script src="js/jquery-3.6.4.js" type="text/javascript" charset="utf-8"></script>
	<script type="text/javascript">
		$(function(){
			
			$("#btn1").click(function(){
				$("#div-1").remove()
			})
			$("#btn2").click(function(){
				$("#div-1").empty()
			})
			$("#btn3").click(function(){
//				$(".pp").remove() 删除所有class属性为pp的元素
//$("p.pp").remove()		删除p元素中所有class属性为pp的元素
			$("p").remove(".pp")
			})
		})
	</script>
	</head>
	<body>
		<div id="div-1" style="border: 1px solid #000000;width: 150px;height: 150px;">
			<p class="pp">1段</p>
			<p class="pp">2段</p>
			<p>3段</p>
		</div>
		<button id="btn1">点击删除div及其子元素</button>
		<button id="btn2">点击清空div</button>
		<button id="btn3">点击删除pp</button>
	</body>
</html>

操作css类

1.addClass（）向被选元素添加一个或多个类

2.removeClass（）向被选元素删除一个或多个类

3.toggleClass（）对被选元素的类进行添加、删除的操作

4.css（）设置或获取样式

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script src="js/jquery-3.6.4.js" type="text/javascript" charset="utf-8"></script>
	<script type="text/javascript">
		
		$(function(){
			$("#btn1").click(function(){
//			多个类中间用空格隔开
			$("div:first").addClass("important blue")
		})
		$("#btn2").click(function(){
//			多个类中间用空格隔开
			$("div:first").removeClass("important blue")
		})
		$("#btn3").click(function(){
//			多个类中间用空格隔开
			$("div:last").toggleClass("important blue")
		})
		})
		
	</script>
	
	<style type="text/css">
		.important{
			font-weight: bold;
			font-size: xx-large;
		}
		.blue{
			color: blue;
		}
	</style>
	</head>
	<body>
		<div>这是一些文本</div>
		<div>这是一些文本</div>
		<button id="btn1">点击向第一个div添加类</button>
		<button id="btn2">点击向第一个div移除</button>
		<button id="btn3">点击向第2个div添加或移除</button>
	</body>
</html>

css（）

1.只填写一个参数，参数为样式名时，获取样式的值
* $("#p1").css("color")获取id属性为p1的元素文字颜色是什么。

2.传入两个参数，第一个样式名，第二个样式值

3.传入多组样式名样式值，可以同时为元素添加多个样式

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script src="js/jquery-3.6.4.js" type="text/javascript" charset="utf-8"></script>
	<script type="text/javascript">
		
		$(function(){
			$("#btn1").click(function(){
				alert($("p:first").css("background-color"))
			})
			$("#btn2").click(function(){
				$("p:eq(1)").css("background-color","yellow")
			})
			$("#btn3").click(function(){
				$("p:eq(2)").css({"backgroundColor":"gray","fontSize":"30px"})
			})
		})
	</script>
	</head>
	<body>
		<p style="background-color: red;">这是第一个段落</p>
		<p style="background-color: blue;">这是第二个段落</p>
		<p style="background-color: green;">这是第三个段落</p>
		<button id="btn1">点击获取第一个段落的背景颜色</button>
		<button id="btn2">点击将第二个段落的背景颜色设置为黄色</button>
		<button id="btn3">点击将第三个段落的背景颜色设置为灰色并且将文字大小改为30px</button>
		
	</body>
</html>

盒模型尺寸

                     1.width()
                   2.height()
                   元素自身宽高
                   3.innerWidth()
                   4.innerHeight()
                   元素内填充+自身的宽高
                   5.outerWidth()
                   6outerHeight()
                   元素边框+内填充+自身的宽高
                   7.outerWidth(true)
                   8.outerHeight(true)
                   元素外填充+元素边框+内填充+自身的宽高

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<script src="js/jquery-3.6.4.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			
			$(function() {
				$("#btn1").click(function() {
					var ptxt = "";
					ptxt += "div的width:" + $("#div1").width() + "<br\>"
					ptxt += "div的height:" + $("#div1").height() + "<br\>"
					ptxt += "div的innerwidth:" + $("#div1").innerWidth() + "<br\>"
					ptxt += "div的innerheight:" + $("#div1").innerHeight() + "<br\>"
					ptxt += "div的outwidth:" + $("#div1").outerWidth() + "<br\>"
					ptxt += "div的outheight:" + $("#div1").outerHeight() + "<br\>"
					ptxt += "div的outwidth:true" + $("#div1").outerWidth(true) + "<br\>"
					ptxt += "div的outheight:true" + $("#div1").outerHeight(true) + "<br\>"
					$("p").html(ptxt)
				})
			})
		</script>
		<style type="text/css">
			#div1 {
				border: 5px solid blue;
				background-color: aqua;
				width: 300px;
				height: 100px;
				/*内填充可以设置四个方向的內填充，方向为上右下左*/
				padding: 20px 10px 40px 30px;
				/*外填充可以设置四个方向的值,方向与内填充相同*/
				margin: 10px 50px 20px 100px;
			}
		</style>
	</head>

	<body>
		<div id="div1"></div>
		<button id="btn1">点击获取宽高</button>
		<p></p>
	</body>

</html>

瑟瑟发抖的萌新学徒

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jquery基础之操作节点对象

捕获-DOM操作，获取内容，值获取内容：1.text（）获取元素的文本内容2.html（）获取元素的文档内容3.val（）获取元素的value属性4.attr（）获取元素自定义的DOm属性(声明出来的就能获取)5.prop（）获取元素的固有属性（无论声明不声明都能获取）设置-DOM操作，设置内容，值1.text("文本内容")设置文本内容2.html("文档内容")设置文档内容3.val("value值") 设置表单控件的值。
复制链接

扫一扫