jQuery.02.工具、属性

最新推荐文章于 2022-04-15 23:48:51 发布

Champion_me

最新推荐文章于 2022-04-15 23:48:51 发布

阅读量509

点赞数 5

文章标签： javascript 前端 json

本文链接：https://blog.csdn.net/Champion_me/article/details/123562572

版权

一、jQuery工具方法

jQuery中的工具
1.$.each():遍历数组、对象、对象数组中的数据
2.$.trim():去除字符串两边的空格
3.$.type(obj):得到数据的类型
4.$.isArray(obj):判断是否是数组
5.$.isFunction(obj):判断师是否是函数
6.$.parseJSON(obj):解析json字符串转化为js对象/数组

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
	<script src="js/jquery-3.5.1.js"></script>
	<script>
		
		//$.each():遍历数组、对象、对象数组中的数据
		//数组
		let arr=[1,2,3,4,5,6,7,8,9,0]
		
		//对数组求和
		$.each(arr,(a,b)=>{
			//a是下标 
			//b是元素
			console.log("下标",a)
			console.log("元素",b)
		})
		
		
		
		//对象
		let person={
			name:"张三",
			sex:"女",
			age:101
		}
		//使用$遍历对象数据
		$.each(person,(a,b)=>{
			//a是属性名   b是属性值
			console.log(a,b)
		})
		 
		
		//$.trim():去除字符串两边的空格
		console.log($.trim(" abc ").length)
		//replace只去一次      replaceAll去多次
		console.log(" a b c ".replaceAll(" ","").length)
		
		
		//$.type(obj):得到数据的类型
		//arr是数组   person是对象   array数组
		console.log(typeof arr)//array(object)
		console.log(typeof person)//object
		console.log($.type(arr))//array(object)
		
		
		//$.isArray(obj):判断是否是数组
		console.log($.isArray(arr))//true
		
		
		//$.isFunction(obj):判断师是否是函数
		function f1(){}
		console.log($.isFunction(f1))//true
		/**1.
		 * function f1(){}
		let f2=f1
		//f2是什么？是函数
		 */
		/**2.
		 * function f1(){}
		 * //f2是什么?是(undefined)未定义
		 */
		
		
		//java 的序列化和反序列化
		//序列化（将对象变成文件）
		//反序列化（将文件变成对象）
		
		//反序列化
		//$.parseJSON(obj):解析json字符串转化为js对象/数组
		//json是一段文字，string
		//json就是字符串的对象
		let str='{"name":"sb","age":23 }'//json
		//拿到学生的名字和年龄
		console.log(str)
		//$.parseJSON 把字符串变成js中的对象
		let stu=$.parseJSON(str)
		console.log(stu.name,stu.age)
		
		
		//将person变成json字符串
		console.log(JSON.stringify(person))
		
	</script>
	</body>
</html>

二、jQuery属性

1.attr():获取某个标签属性的值，或设置某个标签属性的值
2.removeAttr():删除某个标签属性
3.addClass():给某个标签添加class属性值
4.removeClass():删除某个标签class属性值
5.prop():和attr()类似；区别在于prop用于属性值为Boolean的情况，比如多选
6.html():获取某一个标签体内容（注意：该标签中可以包含子标签）
7.text():获取某一个标签体内容（注意：该标签体不能包含子标签）
8.val():主要用户获取/设置输入框的信息

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			.aa{
				color: red;
				background: blue;
			}
		</style>
	</head>
	<body>
		<!-- href是标签上的值 -->
		<a href="https://www.baidu.com">点我</a>
		<button onclick="fn01()">点我更改</button>
		<button onclick="fn02()">点我移除</button>
		<button onclick="fn03()">点我添加class</button>
		<button onclick="fn04()">点我移除class</button>
		<script src="js/jquery-3.5.1.js"></script>
		<div>
			<input onclick="$(':checkbox').prop('checked',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>
		<div>
			<input onclick="fn06(this.checked)" type="checkbox">
			<input type="checkbox">
			<input type="checkbox">
			<input type="checkbox">
			<input type="checkbox">
			<input type="checkbox">
			<input type="checkbox">
		</div>
		<div id="d1">
			
		</div>
		<input type="text" id="n1" value="" />
		
		<script>
			//1.attr():获取某个标签属性的值，或设置某个标签属性的值
			function fn01(){
				//使用jQuery修改标签属性的值
				$("a").attr("href","https://cn.bing.com")
			}
			
			//2.removeAttr():删除某个标签属性
			function fn02(){
				//使用jQuery删除标签属性的值
				$("a").removeAttr("href")
			}
			
			//3.addClass():给某个标签添加class属性值
			// 4.removeClass():删除某个标签class属性值
			function fn03(){
				$("a").addClass("aa")
			}
			function fn04(){
				$("a").removeClass("aa")
			}
			
			//5.prop():和attr()类似；区别在于prop用于属性值
			//为Boolean的情况，比如多选
			
			function fn06(status){
				$(":checkbox").prop("checked",status)
			}
			//拿到大于0的所有的多选框
			//在js里面是onclick 在jQuery所有的on去掉
			$(":checkbox:gt(0)").click(function(){
				//this是js对象
				let status=this.checked
				if(!status){
					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)
			})
			
			
			// 6.html():获取某一个标签体内容（注意：该标签中可以包含子标签）
			$("#d1").html()//读取
			$("#d1").html("<b>你好 世界</b>")//修改
			
			// 7.text():获取某一个标签体内容（注意：该标签体不能包含子标签）
			$("#d1").text("<b>你好 世界</b>")
			
			// 8.val():主要用户获取/设置输入框的信息
			$("#n1").val()//读取
			$("#n1").val("abc")
			
			
			//如果需要同时修改多个样式的值，建议直接使用 addClass
			$("#d1").css({
				color:"red",
				background:"blue"
			})
			

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