jQuery02

最新推荐文章于 2022-05-31 17:21:19 发布

「已注销」

最新推荐文章于 2022-05-31 17:21:19 发布

阅读量927

点赞数 3

文章标签： jquery

本文链接：https://blog.csdn.net/qq_64164870/article/details/123583708

版权

1.$工具方法

$.each()：遍历数据，对象，对象数组中的数据

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

$type(obj)：得到数据类型

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

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

$.parseJSON(obj)：JSON字符串转换为js对象/数组

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<script src="js/jquery-3.5.1.js"></script>

	<body>
		<script>
			//数组
			let arr = [1, 2, 3, 4, 5, 6, 7, 8, 9, 0]
			//对数组求和
			$.each(arr, (a, b) => {
				console.log("下标", a)
				console.log("元素", b)
			})
			//对象
			let person = {
				name: "小明",
				sex: "男",
				age: 19
			}
			//使用$遍历对象数据
			$.each(person, (a /*属性名*/ , b /*属性值*/ ) => {
				console.log(a, b)
			})

			//去空格
			console.log($.trim(" abc ").length) //去除两边空白
			console.log(" a b c ".replaceAll(" ", "").length) //去除全部空白

			//数据类型
			console.log($.type(person)) //"object"
			console.log($.type(true)) //"boolean"
			console.log($.type(3)) //"number"

			//是否是数组
			let arra = [1, 2, 3, 4, 5, 6, 7, 8, 9, 0]
			let ar = 1
			console.log($.isArray(arra)) //"true"
			console.log($.isArray(ar)) //"false"

			//是否是函数
			function fn1() {}

			let f2 = fn1() //undefined 未定义
			let f3 = fn1 //是函数

			console.log($.isFunction(f2)) //"false"
			console.log($.isFunction(f3)) //"true"

			//json字符串转换为js对象/数组
			//json是一段文字，String
			//json就是字符串的对象
			let stu ='{"name": "xx","age": 19}'
			//$.parseJSON 把字符串变成js中的对象
			let str=$.parseJSON(stu)
			//拿到名字跟年龄
			console.log(str.name,str.age)
			
			//将person变成json字符串
			console.log(JSON.stringify(person))
		</script>
	</body>
</html>

jQuery属性和CSS

1.属性

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

removeAttr()：删除某个标签属性

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

removeClass()：删除某个标签class属性值

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

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

text()；获取某一个标签体内容（该标签体不能包含子标签）

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

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
		.aa{
		color: yellow;
			background: lawngreen;
		}
		</style>
	</head>
	<body>
	<script src="js/jquery-3.5.1.js"></script>
		<!--href是标签上的属性-->
		<a href="https://www.baidu.com">点我</a>
		<button onclick="fn1()">点击更改</button>
		<button onclick="fn2()">点击移除</button>
		<button onclick="fn3()">点击添加class</button>
		<button onclick="fn4()">点击移除class</button>
		<div>
		<input onclick="fn5(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">
		<input type="checkbox">
		<input type="checkbox">
		<input type="checkbox">

		</div>
		<div id="d1"></div>
		<input type="text" id="n1">
		<script>
		function fn1(){
			//使用jQuery修改标签属性的值
			$("a").attr("href","https://cn.bing.com")
		}
		function fn2(){
			//使用jQuery删除标签属性的值
			$("a").removeAttr("href")
		}
		function fn3(){
			//使用jQuery给标签添加class属性的值
			$("a").addClass("aa")
		}
		function fn4(){
			//使用jQuery删除标签class属性的值
			$("a").removeClass("aa")
		}
		function fn5(status){
			$(":checkbox").prop("checked",status)
			
		}
		//拿到大于0的所有的多选框
		$(":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)
		})
		
	
		$("#d1").html()//读取
		$("#d1").html("<b>hello world</b>")//修改
		
		$("#n1").val()//读取
		$("#n1").val("abc")//读取
		

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

2.CSS

CSS()：设置标签的CSS样式

		//如果需要同时修改多个样式的值 建议直接使用addClass
		$("#d1").css({
			color:"red",
			background:"blue"
		})

尺寸

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<script src="js/jquery-3.5.1.js"></script>
		
		<p> 你好! </p>
		<script>
		//容器高
		$("p").height(200);
        //容器宽
	    $("p").width(200);
		
		//获取第一段落内部区域高度。
	//	var p = $("p:first");
	//	$("p:last").text( "innerHeight:" + p.innerHeight() );
	
		//获取第一段落内部区域宽度。
	//	var p = $("p:first");
	//	$("p:last").text( "innerWidth:" + p.innerWidth() );
		
		var p = $("p:first");
		$("p:last").text( "outerHeight:" + p.outerHeight() + " , outerHeight(true):" + p.outerHeight(true) );
	
	//var p = $("p:first");
	//$("p:last").text( "outerWidth:" + p.outerWidth() + " , outerWidth(true):" + p.outerWidth(true) );
		</script>
	</body>
</html>

「已注销」

关注

3
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jQuery02

1.$工具方法$.each()：遍历数据，对象，对象数组中的数据$.trim()：去除字符串两边的空格$type(obj)：得到数据类型$.isArray(obj)：判断是否是数组$.isFunction(obj)：判断是否是函数$.parseJSON(obj)：JSON字符串转换为js对象/数组<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title&
复制链接

扫一扫