jQuery02($工具&属性&css)

小阿飞_

已于 2023-02-05 16:59:59 修改

阅读量749

点赞数 6

分类专栏： jQuery 文章标签： css jquery javascript

于 2022-03-16 01:22:10 首次发布

本文链接：https://blog.csdn.net/yifei_345678/article/details/123515742

版权

jQuery 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

jquery工具方法

jquery属性

jquery中的CSS

正文内容

jquery工具方法

jquery就是升级+简化的js

例如：jquery中的遍历数组比使用for循环和foreach更简洁方便

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

<!DOCTYPE html>
<html>
	<head></head>
	<body>
		 <script src="./js/jquery-3.5.1.js"></script>
		 <script type="text/javascript">
			//定义数组
		 	var arr=[1,2,3,4]
			// $.each相当于foreach,jquery中方法都省去前面的关键字
			$.each(arr,(a/*下标*/,b/*元素*/)=>{
				console.log('下标'+a,'元素'+b)
			})
		    //定义对象
			var person={
				name:'张三',
				sex:'男',
				age:21
			}
			// 使用$遍历对象数据
			$.each(person,(a/*属性名*/,b/*属性值*/)=>{
				console.log(a,b)
			})
		 </script>
	</body>
</html>

运行如下：

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

        // 去掉一个空格(从第一个空格开始数)
			console.log(' a b c '.replace(' ','').length)//6
		// 去所有空格
			console.log(' a b c '.replaceAll(' ','').length)//3

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

           // $.type相当于typeof
		    console.log(typeof arr)//arr是数组array(也是object)
			console.log(typeof person)//person是对象object
			console.log($.type(arr))//array
			console.log($.type(person))//object

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

$isArray(arr)

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

$isFunction(fn1)

补充：

// 函数一定有返回值，未写返回值就是undefined
		function f1(){}
		var f2=f1()//undefined，加上()就是得到函数运行后的返回值
		var f3=f1//是函数
		console.log($.isFunction(f2))
		console.log($.isFunction(f3))

Java：

序列化：对象-->文件
反序列化：对象<--文件

jquery:

json是一段字符串，就是string,如：{'对象'}

$parseJOSON(obj)：将json字符串转换为js对象/数组(反序列化)

        // 外'内""'
		var str='{"name":"李四","sex":"女"}'//用途：将对象变成字符串发送出去
		// 拿到发送过来的对象的属性值
		console.log(str)//string类型：黑色
		// $.parseJSON(字符串):将字符串变成js中的对象(反序列化)
		console.log($.parseJSON(str))//对象object
		var stu=$.parseJSON(str)
		// 拿到对象中的属性值
		console.log(stu.name,stu.sex)

运行如下：

JOSON.stringify(obj)：将对象转成字符串(序列化)

console.log(JSON.stringify(person))

jquery属性

attr('标签中的属性','修改后的值'):获取某个标签的属性、设置某个标签属性的值

removeAttr('要删除的属性'):删除某个标签属性

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

removeClass:删除某个标签class属性值

prop()和attr()类似,但是prop用于值为Boolean类型时,比如多选框的状态

prop()控制js中的属性,attr是标签属性,标签上的属性可以使用attr但是js中的属性不可以使用attr

html():获取某一个标签内容,该标签中可以包含子标签

text():获取某一个标签内容,该标签中不可以包含子标签

val():主要用于获取/设置输入框的值

一起调用一下叭：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			.aa{
				color: red;
				background-color: blue;
			}
			#d3{
				width: 200px;
				height: 200px;
				background-color: #0000FF;
			}
		</style>
	</head>
	<body>
		<a href="https://www.baidu.com/">跳转网页</a>
		<button type="button" onclick="f1()">点我更改网址</button>
		<button type="button" onclick="f2()">点我删除网址</button>
		<button type="button" onclick="f3()">点我添加class属性</button>
		<button type="button" onclick="f4()">点我移除class属性</button>
		<div>
        <!--多选功能-->
		<!-- $(':checkbox'拿到页面所有多选框 prop()控制js中的属性,用于值为Boolean类型时-->
			<!-- checked属性不是标签中的 this.checked自己的状态:true/false-->
			<!-- js($)和jquery(this)对象不可互换,方法不互通,但是可以结合在一起使用 -->
			<!-- 也可以调用函数不过要拿到的是多选框类型的输入框:$(':checkbox') -->
		<input onclick="$(':checkbox').prop('checked',this.checked)" type="checkbox"/>
			<input type="checkbox"/>
			<input type="checkbox"/>
			<input type="checkbox"/>
		</div>
		<b id='d1'>哈哈</b>
		<input value="嘿嘿😁" id="d2"/>
		<div id="d3"></div>
		<script src="./js/jquery-3.5.1.js"></script>
		<script type="text/javascript">
		// attr('标签中的属性','修改后的值'):获取某个标签的属性、设置某个标签属性的值
		function f1(){
			// 使用jquery修改标签属性的值
$('a').attr('href','https://blog.csdn.net/yifei_345678?spm=1019.2139.3001.5343')
		}
		// removeAttr('要删除的属性'):删除某个标签属性
		function f2(){
			$('a').removeAttr('href')
		}
		// addClass:给某个标签添加class属性值
		function f3(){
			$('a').addClass('aa')
		}
		// removeClass:删除某个标签class属性值
		function f4(){
			$('a').removeClass('aa')
		}	
		$("#d1").html()//当不填就是读取
		$("#d1").html('<i>你好</i>')//填了值就是修改
		$("#d1").text('<i>你好</i>')//不识别标签
		// val():主要用于获取/设置输入框的值
		$("#d2").val()//当不填就是读取
		$("#d2").val('abc')//填了值就是修改
		</script>		
	</body>
</html>

部分运行结果如下：

点击第三个按钮：

点击第0个多选框后：

但是这样写的多选框功能还不是很完善

要想实现真正意义上的多选框，可以这样写：

// 多选框功能：
		// 1，取消多选
		// 拿到>0的所有多选框(.click $中点出的方法都去掉前面的关键字)
		// 给>0的所有多选框设置函数
		$(':checkbox:gt(0)').click(function (){
			// this就是>0的所有多选框,直接使用它自带的属性
			var status=this.checked;
			if(!status){//为false
				// $(':checkbox').eq[0]:选中第0个多选框
				// $是jquery,且值为Boolean类型,可以使用prop
				// return中断代码
				// 1，>0的所有多选框有取消全选时,给第0个多选框设置未选中状态
				return $(':checkbox').eq(0).prop('checked',status)
			}
			// 2，>0的所有多选框全选中时,给第0个多选框设置选中状态
			// $(":checkbox:gt(0)")拿到>0的所有多选框，使用$.each(要遍历的,(a,b)=>{操作})遍历这些多选框
			var f=true
			$.each($(":checkbox:gt(0)"),(a,b/*元素*/)=>{
				// console.log(b)$.each()可以拿到所遍历的元素
				f=f&&b.checked//有一个为假就返回false
			})
			// 给第0个多选框设置选中状态
			$(':checkbox').eq(0).prop('checked',f)
		})

jquery中的CSS

上面的方法都可以通过查阅jQuery官方API文档来查询，学习，这里就不过多展示了

感谢阅读 ^_^

小阿飞_

关注

6
点赞
踩
0

收藏

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

jquery工具方法jquery就是升级+简化的js例如：jquery中的遍历数组比使用for循环和foreach更简洁方便$each()：遍历数组，对象，对象数组中的数据<!DOCTYPE html><html> <head></head> <body> <script src="./js/jquery-3.5.1.js"></script> <script type="text/
复制链接

扫一扫

专栏目录