jQuery（$工具&属性&CSS）

最新推荐文章于 2022-05-13 20:34:50 发布

菲仔yo

最新推荐文章于 2022-05-13 20:34:50 发布

阅读量398

点赞数 5

分类专栏： jQuery 文章标签： safari 前端

本文链接：https://blog.csdn.net/m0_67331668/article/details/123552199

版权

jQuery 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

一、$工具方法

案例：

1.$each():遍历数组、对象、对象数组中的数据

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<script src="js/jquery-3.5.1.js"></script>
		<script >
			
			//数组
			let arr=[1,2,3,4,5,6,7,8,9]
			
			//对数组求和
			$.each(arr,(a/*下标*/,b/*元素*/)=>{
				console.log(a,b)
			})
			/**   js
			for(le i of arr){
				
			}
			**/
			
			//对象
			let person={
				name:"张三",
				sex:"女",
				age:101
			}
			//使用$遍历对象数据
			$.each(person,(a/*属性名*/,b/*属性值*/)=>{
				console.log(a,b)
			})
			
		</script>
	</body>
</html>

2.去空格

<body>
		<script src="js/jquery-3.5.1.js"></script>
		<script >
			//去空格
			console.log($.trim("abc").length)
			console.log(" a b c".replaceAll(" ","").length)
		</script>
</body>

3.$.type：得到数据类型（相当于 type of）

<body>
		<script src="js/jquery-3.5.1.js"></script>
		<script >
			console.log(typeof arr) //array(也属于object)
			console.log(typeof person) //object
			console.log($.type(arr)) //array
		</script>
</body>

4.$.isArray(obj)：判断是不是数据

<body>
		<script src="js/jquery-3.5.1.js"></script>
		<script >
			console.log($.isArray(arr)) //判断是不是数组
		</script>
</body>

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

<body>
		<script src="js/jquery-3.5.1.js"></script>
		<script >
			function f1() {}
			let f2 = f1() //f2是undefined
			let f3 = f1 //f3是函数

			console.log($.isFunction(f2)) //false
			console.log($.isFunction(f3)) //true
		</script>
</body>

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

<body>
		<script src="js/jquery-3.5.1.js"></script>
		<script >
			//序列化和反序列化
			//  序列化（将对象变成文件）
			//  反序列化（将文件变成对象）

			//json是一段文字，string
			//json就是字符串的对象

			let str = '{"name":"sb","age":23}' //json

			//拿到学生的名字和年龄
			//$.parseJSON  把字符串变成js中的对象
			let stu = $.parseJSON(str)
			console.log(stu.name, stu.age)

			//将person变成json字符串
			console.log(JSON.stringify(person))
		</script>
</body>

二、jQuery属性和CSS

属性图：

CSS图：

部分案例：

1.attr():获取某个标签属性的值，或设置某个标签属性的值

<body>
		<a href="https://www.baidu.com">点我</a>
		<button onclick="fn01()">点我更改</button>
        <script src="js/jquery-3.5.1.js"></script>
		<script >
			function fn01(){
				//使用jQuery修改标签属性的值
				$("a").attr("href","https://cn.bing.com")
			}
		</script>
</body>

点击前：

点击后：

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

<body>
		<a href="https://www.baidu.com">点我</a>
		<button onclick="fn02()">点我移除</button>
        <script src="js/jquery-3.5.1.js"></script>
		<script >
			function fn02(){
				$("a").removeAttr("href")
			}
		</script>
</body>

点击后：

3.addClass()：给某个标签添加class属性值

<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			.aa{
				color:red;
				background: aliceblue;
			}
		</style>
	</head>
<body>
		<a href="https://www.baidu.com">点我</a>
		<button onclick="fn03()">点我添加class</button>
        <script src="js/jquery-3.5.1.js"></script>
		<script >
			function fn03(){
				$("a").addClass("aa")
			}
		</script>
</body>

点击后：

4.removeClass():删除某个标签class属性值

<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			.aa{
				color:red;
				background: aliceblue;
			}
		</style>
	</head>
<body>
		<a href="https://www.baidu.com">点我</a>
		<button onclick="fn04()">点我移除class</button>
        <script src="js/jquery-3.5.1.js"></script>
		<script >
			function fn04(){
				$("a").removeClass("aa")
			}
		</script>
</body>

点击后：

5.prop()和attr()类似，区别在于prop用于属性值为boolean类型的情况，比如多选

<body>
		<div >
			<input onclick="fn05(this.checked)" type="checkbox" />
			<input type="checkbox" />
			<input type="checkbox" />
			<input type="checkbox" />
			<input type="checkbox" />
			<input type="checkbox" />
			<input type="checkbox" />
			<input type="checkbox" />
		</div>
        <script src="js/jquery-3.5.1.js"></script>
		<script >
			function fn05(status){
				$(":checkbox").prop("checked",status)
			}
		</script>
</body>

拿到大于零的所有多选框：

<body>
        <script src="js/jquery-3.5.1.js"></script>
		<script >
			$(":checkbox:gt(0)").click(function (){
				//this是js对象
				let status=this.checked
				if(!status){//只要状态为false
					return $(":checkbox").eq(0).prop("checked",status)
				}
				//选中了
				let f=true
				$.each($(":checkbox:gt(0)"),(a,b)=>{
					f=f&&b.checked
				})
				$(":checkbox").eq(0).prop("checked",f)
			})
		</script>
</body>

6.html()：获取某一个标签体内容（可以包含子标签）

<body>
		<div id="d1"></div>
        <script src="js/jquery-3.5.1.js"></script>
		<script >
			$("#d1").html()//读取
			$("#d1").html("<b>hello world</b>")//修改
		</script>
</body>

7.text():获取某一个标签体内容（不能包括字标签）

<body>
		<div id="d1"></div>
        <script src="js/jquery-3.5.1.js"></script>
		<script >
		    $("#d1").text("<b>hello world</b>")//修改(文本直接输出)
		</script>
</body>

8.val()：主要用户获取/设置输入框的值

<body>
		<input type="text" id="n1"/>
        <script src="js/jquery-3.5.1.js"></script>
		<script >
		   $("#n1").val()//读取
		    $("#n1").val("abc")//修改
		</script>
</body>

9.class():设置标签的css样式

<body>
		<div id="d1"></div>
        <script src="js/jquery-3.5.1.js"></script>
		<script >
		   //如果需要同时修改多个样式的值,建议直接使用 addClass
			$("#d1").css({
				color:"red",
				background:"blue"
			})
		</script>
</body>

菲仔yo

关注

5
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jQuery（$工具&属性&CSS）

一、$工具方法试例：1.$each():遍历数组、对象、对象数组中的数据<!DOCTYPE html><html lang="en"> <head> <meta charset="utf-8"> <title></title> </head> <body> <script src="js/jquery-3.5.1.js"></script> &.
复制链接

扫一扫