jQuery02($工具&属性&CSS)

最新推荐文章于 2024-09-09 09:35:48 发布

清晨喂

最新推荐文章于 2024-09-09 09:35:48 发布

阅读量134

点赞数 1

文章标签： javascript css 前端

本文链接：https://blog.csdn.net/m0_63772104/article/details/123564944

版权

工具方法

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

<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>

2.遍历对对象

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

3。遍历对象数组

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

$.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>

$.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>

效果:
在这里插入图片描述
$.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>

$.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>

$.parseJSON(obj):将字符串转换为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>

属性

1.attr()
获得某个标签属性的值or设置某个标签属性的值
2.removeAttr
删除某个标签属性
3.addClass()
给某个标签添加class属性值
4.removeClass()
删除某个标签class属性值
5.prop()
和attr类似
6.html()
获得某一比标签的签体内容(可包含子标签)
7.text()
获得某一个标签的签体内容(不可包含子标签)
8.val()
主要用户获取/设置输入框的值

css

1.css():设置标签的css样式
设置样式值:css(“样式名”)
设置单个样式:css(“样式名”，“样式值”)
设置多个样式:css({“样式名”:“样式值”，“样式名”:“样式值”})
2.位置
offset()
相对整个大容器的相对位置

<script src="js/jquery-3.5.1.js" type="text/javascript"></script>
	<body>
		<p>Hello</p><p>2nd Paragraph</p>
        <script src="js/jquery-3.5.1.js" type="text/javascript"></script>
		<script type="text/javascript">
			//无参数
			var p = $("p:last");
			var offset = p.offset();
			p.html( "left: " + offset.left + ", top: " + offset.top );
			//有参数
			$("p:last").offset({ top: 10, left: 50 });
		</script>
	</body>
</html>

position()
相对父容器的相对位置
3.尺寸
内容尺寸
width():容器宽
height():容器高
内部尺寸
innerWidth():width+padding
innerHeight:height+padding
外部尺寸(注意参数为true,再加上margin)
outerWidth():width+padding+border
outerHerHeight():height+padding+border

好了，以上就是关于jQuery的$工具方法&属性&CSS的一些内容，下期见

清晨喂

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jQuery02($工具&属性&CSS)

工具方法$.each():遍历数组、对象、对象数组中的数据1.遍历数组<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
复制链接

扫一扫