JQuery 操作jquery工具&属性&CSS

客行.

已于 2022-04-30 22:27:12 修改

阅读量764

点赞数 4

文章标签： jquery css javascript

于 2022-03-17 23:47:03 首次发布

本文链接：https://blog.csdn.net/m0_65725031/article/details/123563883

版权

今天我们迎来了JQuery的第二节课，这节课小编主要给大家讲解如何操作jquery工具&属性&CSS，今天的课程内容也非常简单，大家一定要多敲代码，有不懂的在下方评论或者私信，看到了一定会回复大家。

一.JQuery工具方法

1. $.each() 遍历数组

//1.遍历数组 $.each();
		// var 局部变量   let全局变量
		var a=[1,2,3];
		
		$.each(a,function(a,b){
			// a是下标  b是数组中的元素
			console.log(a,b);
		})

2. $.trim() 去除字符串两边的空格

//2.去除字符串两边的空格 $.trim();
		console.log($.trim(" abc "));
		// 想去除中间的空格replaceAll
		console.log("a b c".replaceAll(" ",""));

3.$.type(obj) 得到数据类型

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="jquery-3.5.1.js"></script>
		<style>
		
		</style>
	</head>
	
	<body>
		
		<script>
		// 对象
		let person={
			name:"张三",
			sex:"女",
			age:101
		}
		
		//3.得到数据类型$.type(obj);
		console.log($.type(1));//number类型
		console.log($.type("123"));//String类型
		console.log($.type(a));//array类型(数组)
		console.log($.type(person));//object类型

		</script>

	</body>
</html>

4.$.isArray() 判断是否是一个数组

var a=[1,2,3];
console.log($.isArray(a));

5.$.isFunction() 判断是否是函数

function f1(){
			
		}
		var f2=f1;//f2是一个函数
		var f3=f1();//f3未定义，因为f1()后面带括号意味着被调用了，而被调用后返回未定义
		console.log($.isFunction(f1));
		console.log($.isFunction(f2));
		console.log($.isFunction(f3));

6.$.parseJSON() 解析json字符串转换为js对象/数组

// 6.json是一段文字，string 和序列化 反序列化相似
		// 把对象转成字符串JSON.stringify()
		// 把字符串转成对象$.parseJSON()
		let str='{"name":"嘿嘿","age":21}'
		// 拿到学生的年龄
		console.log($.parseJSON(str));
		
		console.log(JSON.stringify(person));

二.JQuery属性

1.attr() 获取某个标签的属性值

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="jquery-3.5.1.js"></script>	
	</head>
	<body>
		<p title="哈哈">嘻嘻</p>
		<script>
		// .attr() 获取某个标签的属性值
		console.log($("p").attr("title"));
		
		</script>
	</body>
</html>

2.removeAttr() 删除某个标签属性

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="jquery-3.5.1.js"></script>
		
	</head>
	
	
	<body>
		<p title="哈哈"><span>嘻嘻</span></p>
 
		<script>
	
		// 8.removeAttr() 删除某个标签属性
		console.log($("p").removeAttr("title"))

		</script>

	</body>
</html>

3.addClass() 给标签添加class属性

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="jquery-3.5.1.js"></script>
		<style>
		.aa{
			width: 100px;
			height: 100px;
			background: aliceblue;
		}
		</style>
	</head>
	
	<body>
		
		<div></div>

		<script>

		// 9.addClass() 给标签添加class属性
		$("div").addClass("aa");
		
		// 10.removeClass() 删除标签的class属性
		$("div").removeClass("aa");

		</script>

	</body>
</html>

4.removeClass() 删除标签的class属性

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="jquery-3.5.1.js"></script>
		<style>
		.aa{
			width: 100px;
			height: 100px;
			background: aliceblue;
		}
		</style>
	</head>
	<body>
		
		<div class="aa"></div>
	
		<script>
	
		// 10.removeClass() 删除标签的class属性
		$("div").removeClass("aa");
	
		</script>
	
	</body>
</html>

5. prop() prop和attr类似区别在于 prop用于属性值为布尔类型的

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="jquery-3.5.1.js"></script>
	
	</head>
	
	<body>
		<input type="checkbox" onclick="fn01(this.checked)"> 
		<input type="checkbox"> 
		<input type="checkbox"> 
		<input type="checkbox"> 
		<input type="checkbox"> 
		<input type="checkbox"> 
		<input type="checkbox"> 
		
		<script>
		
		//写一个当点击第一个多选框时 所有多选框被选中，当有一个多选框不被选中时
          //第一个多选框也不被选中，当所有的多选框被选中时，第一个全选多选框被选中
		$(":checkbox:gt(0)").click(function(){
		
		     // 拿到真假值
			let status=this.checked;
			
			if(!status){//只要状态为假 全选为假
			// eq直接拿到第几个值
			return $(":checkbox").eq(0).prop("checked",status);
			}
			
			// 当自己被选中
			// 拿到所有大于零的多选框
			let f=true;
			// 遍历大于0的多选框
			$.each($(":checkbox:gt(0)"),(a,b)=>{
				// a 是下标  b 是值
				// 判断多选框是否被选中  
				// 被选中时 f为真 没有被选中时 f为假
				f=f&&b.checked;
			})
			
		    $(":checkbox").eq(0).prop("checked",f)
		})
		</script>
	
	  
	</body>
</html>

6.html() 获取一个标签体的内容(包含标签) 相当于innerHTML

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="jquery-3.5.1.js"></script>
		
	</head>
	
	
	<body>
		<p title="哈哈"><span>嘻嘻</span></p>
		
		<script>
	
        // 11.html() 获取一个标签体的内容(包含标签) 相当于innerHTML
		console.log($("p").html());
		
	
		
		
		</script>
	
	  
	</body>
</html>

7.text() 获取一个标签的内容(不包含标签) 相当于textContent

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="jquery-3.5.1.js"></script>
		
	</head>
	
	
	<body>
		<p title="哈哈"><span>嘻嘻</span></p>
		
		<script>
	
		
		// text() 获取一个标签的内容(不包含标签) 相当于textContent
		console.log($("p").text());
		// 更改标签中的内容
		$("p").text("ixixixii")
		
		</script>
	
	</body>
</html>

8.val 用户获取/设置输入框的值

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="jquery-3.5.1.js"></script>
		
	</head>

	<body>
		
		<!-- <input> -->
		<input>

		<script>

		// 13.val 用户获取/设置输入框的值
		$("input").val("hh")
		

		</script>
	
	</body>
</html>

三.设置css样式

1. 获取样式名 css("样式名")

2.设置样式 css("样式名","样式值")

3.设置多个样式 css({"样式名":"样式值","样式名":"样式值"})

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="jquery-3.5.1.js"></script>
		<style>
	   div{
		   width: 100px;
		   height: 100px;
		   background: #F0F8FF;
	   }
		</style>
	</head>
	<body>
		<!-- 操作css -->
		<span>哈哈哈</span>
		<div></div>
		
		<script>
		// 获取样式名 css("样式名")
		console.log($("span").css("color"));
		
		// 设置样式 css("样式名","样式值")
		$("span").css("color","red")
		
		// 设置多个样式  css({"样式名":"样式值","样式名":"样式值"})
		$("div").css({
			"width": "100px",
			"height": "100px",
			"background": "#F0F8FF",
		})
		</script>
	</body>
</html>

今天的课程到此结束啦，有不懂的在下方评论，或者私信，看到消息会为大家解答的哦。

客行.

关注

4
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JQuery 操作jquery工具&属性&CSS

<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <script src="jquery-3.5.1.js"></script> <style> p{ border :10px solid aliceblue; } </style> </head> .
复制链接

扫一扫