jQuery基础知识

最新推荐文章于 2024-07-10 03:40:33 发布

日暮途远丨

最新推荐文章于 2024-07-10 03:40:33 发布

阅读量117

点赞数

本文链接：https://blog.csdn.net/weixin_51721670/article/details/111568455

版权

jQuery笔记

1.为什么要使用Query

轻量级的框架，大小不到30kb

强大的选择器，出色的DOM操作的封装

可靠的事件处理机制(jQuery在处理事件绑定的时候相当的可靠）

出色的浏览器的兼容性

支持链式操作，隐式迭代，行为层和结构层的分离，还支持丰富的插件

2.json对象

倒包

<script src="./js/jquery-3.1.1.js" type="text/javascript" charset="utf-8"></script>

前后端的数据交互方式分两种：
1.json格式，轻量级，以键值对形式存在，学习成本低，使用简单方便，在前端中有json对象，后端需要使用第三方的支持
2.xml格式

1.一个json对象相当于一个用户对象，如果是有多个用户对象就意味着有多个json对象，问题是多个json对象如何存储

let userJsonsArr = [
				{"id":1,"uname":"haha","password":"12345","sex":"男"},
				{"id":2,"uname":"xixi","password":"admin","sex":"女"},
				{"id":3,"uname":"heihei","password":"root","sex":"男"}
			];
			for(let i=0;i<userJsonsArr.length;i++){
				console.log(userJsonsArr[i].uname)
			}
			
			console.log("--------");

2.后台返回的数据不一定只有一种类型，例如：返回用户及其对应的订单信息

let userOrdersJson = {
				"code":200,
				"msg":"success",
				"data":[
					{
						"user":{"id":2,"username":"张飞","sex":"男"},
						"order":[
							{"orderId":"32as4d5aasd45sd","orderCreateTime":"2020-12-19"},
							{"orderId":"32as4d5aasd45sd","orderCreateTime":"2020-12-20"}
						]
					},
					{
						"user":{"id":1,"username":"李逵","sex":"男"},
						"order":[
							{"orderId":"32as4d5aasd45sd","orderCreateTime":"2020-12-17"},
							{"orderId":"32as4d5aasd45sd","orderCreateTime":"2020-12-18"}
						]
					}
				]
			}
			console.log(userOrdersJson.data[1].order[0].orderId)

3.遍历 each()

each() 函数就像是 Java 里的一个 Iterator，它允许你遍历一个元素集合。你可以传一个函数给 each() 方法，被调用的 jQuery 对象会在其每个元素上执行传入的函数。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
			//$.each() 用于遍历集合对象，例如：数组、json对象等
			let arr = ["haha","hehe"];
			$.each(arr,function(index,val){
				console.log(index,val);
			})
			
			let json = {"name":"小黑","age":13}
			$.each(json,function(key,val){
				console.log(key,val);
			})
		</script>
	</body>
</html>

4.js对象与jQuery对象之间的转换

js对象不能使用jQuery中的任何属性及方法，同理jQuery对象不能使用js中的任务方法及属性

1.js对象转jquery $(js对象)

let btn = document.getElementsByTagName('button')[0];
			console.log(btn.innerHTML);
			console.log($(btn).html())

2.jquery对象转js对象方法：1.下标 2.get(index)

console.log($('button').html())
			console.log($('button')[1].innerHTML);
			console.log($('button').get(1).innerHTML)

5.jQuery对象和java之间的转换

1.Java中不存在json对象，所以，前台在进行json数据传输时，需要将其转换为json字符串

let json = {"name":"张飞","age":12};
			let jsonStr = JSON.stringify(json);
			console.log(typeof json,json.name,typeof jsonStr,jsonStr.name);

2.后台向前台传递数据的时候，传递的是一个json字符串，前台需要转换为json对象使用

let jsonObj = JSON.parse(jsonStr);
			console.log(jsonObj.name);

6.修改、获取元素样式

<style type="text/css">
			.btn{
				width: 120px;
				font-size: 18px;
			}
		</style>
	</head>
	<body>
		<button style="color: red;" class="btn">change css</button>
		<script src="./js/jquery-3.1.1.js"></script>
		<script>
			/* 
				获取样式：
					单个样式：css(key)
					多个样式：css([key,key,...])
			 */
			console.log($('button').css('color'));
			console.log($('button').css(['color','width']));
			//获取复合样式
			console.log($('button').css('font-size'),$('button').css('fontSize'));
			
			//修改单个样式css(key,value)
			$('button').css('color','darkblue');
			//修改多个样式css({key:val,key:val,...})
			$('button').css({
				"font-size":"14px",
				"border":"none"
			})

7.jQuery的属性操作

获取属性：
attr()：常用于常规属性的使用，也可以用于获取自定义属性的值，主要用这个
prop()：常用于可简写属性值的获取，无法获取自定义属性值

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<input type="text" class="inCls" disabled default="haha">
		<script src="./js/jquery-3.1.1.js"></script>
		<script>
			console.log("attr获取属性值",$('input').attr("class"),$('input').attr("disabled"),$('input').attr("default"));
			console.log("prop获取属性值",$('input').prop("class"),$('input').prop("disabled"),$('input').prop("default"));
		</script>
	</body>
</html>