jQuery $工具方法&属性&CSS

目录

一、工具方法

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

遍历数组

遍历对象

遍历对象数组

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

1.3$.type(obj):拿到数据的类型

1.4$.isArray(obj):判断是否是数组

1.5$.isFunction(obj):判断是否是函数

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

二、jQuery属性

2.1 arrt():获取某个标签属性的值，或者设置某个标签属性的值

2.2 removeArrt():删除某个标签的属性

 2.3 addClass():给某个标签添加class属性值

 2.4 removeClass():删除某个标签的class属性值

 2.5 prop():和attr()类似，区别在于prop用于属性值为Boolean类型的情况，比如全选/取消全选

  2.6 html()、text()、val()的区别

三、jQuery  CSS

3.1 css():设置标签css样式

3.2 位置

offset():相对整个大容器的相对位置

position():相对父容器的相对位置

scrollTop():滚动条到顶部的位置

3.3 尺寸

1.内容尺寸

2.内部尺寸

3.外部尺寸（参数为true，再加上margin）

总结

---

一、工具方法

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

• 遍历数组

<script src="js/jquery-3.5.1.js"></script>
<script>
         //数组
			let arr=[1,2,3,4,5,6,7,8,9,0]
			//对数组求和
			$.each(arr,(a,b)=>{
				//a 下标  b  元素
				console.log("下标",a)
				console.log("元素",b)		
			})
     </script>

• 遍历对象

<script src="js/jquery-3.5.1.js"></script>
<script>
      //对象
			let person={
				name:"张三",
				sex:"男",
				age:19	
			}
			$.each(person,(a,b)=>{
				console.log(a,b)
			})
     </script>

• 遍历对象数组

<script src="js/jquery-3.5.1.js"></script>
<script>
//定义对象数组
     let persons = [{
				name: "张三",
				sex: "男",
				age: 19
			}, {
				name: "张三",
				sex: "男",
				age: 19
			}]
//遍历对象数组
			$.each(persons, (a, b) => {
				$.each(person, function(c, d) {
					console.log(c, d)
				})
			})
     </script>

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

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

注：trim只去两边空格 不去中间空格 如需去全部  可用replaceAll（）替换（replace只去一次）

1.3$.type(obj):拿到数据的类型

<script src="js/jquery-3.5.1.js"></script>
<script>
console.log($.type(1))//number
console.log($.type("aa"))//string
var names=["aa","bb","cc"]
console.log($.type(names))//array
var stu={"name":"张三","age":18}
console.log($.type(stu))//object
</script>

1.4$.isArray(obj):判断是否是数组

<script src="js/jquery-3.5.1.js"></script>
<script>
var names=["aa","bb","cc"]
console.log($.isArray(names))//true
var stu={"name":"张三","age":18}
console.log($.isArray(stu))//false
</script>

1.5$.isFunction(obj):判断是否是函数

<script src="js/jquery-3.5.1.js"></script>
<script>
	//判断是否是函数
	function f1() {}
	let f2 = f1() //undefined
	let f3 = f1 //f3是函数
	console.log($.isFunction(f2)) //false
	console.log($.isFunction(f3)) //true
</script>

注：函数名后面加（）就意味着这个函数已经运行了  得到的是返回值

在不写的情况下是未定义（undefined）所以f2为false

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

<script src="js/jquery-3.5.1.js"></script>
<script>
let str = '{"name":"李四","age":35}' //json
			//拿到学生的名字和年龄
			console.log(str)
			//$.parseJSON 把字符串变成js中的对象
			console.log($.parseJSON(str))
			let stu = $.parseJSON(str)
			console.log(stu.name)
			//将person变成json字符串
	        let person={
				name:"张三",
				sex:"男",
				age:19	
			}
			console.log(JSON.stringify(person))
</script>