jquery获取特定li里的属性值

转载

云端筑梦大师 2024-10-30 11:20:26

文章标签 jquery获取特定li里的属性值 jquery 前端 javascript jQuery 文章分类 jQuery 前端开发

一、思维导图

一、jQuery的$工具方法

二、jQuery属性和CSS

一、思维导图

我是小陽，欢迎大家来看我的文章。我们先看一下思维导图来理一下思路，然后在进入方法讲解

一、jQuery的$工具方法

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

对象：

//定义对象
				var stu={"name":"张小凡","age":38};
				//遍历对象
				/* $.each(stu,function(k,v){
					console.info(v);
				}) */
				console.info(stu.name,stu.age);

结果如下：

jquery获取特定li里的属性值_jquery获取特定li里的属性值

两种遍历都是可以运行的

数组：

//定义数组
				 var names=["张小凡","张大凡","白大纯","沈以诚","白小纯"];
				//遍历数组
				$.each(names,function(i,n){
					console.info(n);
				})

结果如下：

jquery获取特定li里的属性值_jquery_02

对象数组：

//定义对象数组[{}]
				var stus=[{"name":"张小凡","age":30},{"name":"白小纯","age":20}];
				//遍历对象数组
				$.each(stus, function(i, stu) {
					// console.info(stu.name,stu.age);
					$.each(stu, function(a, b) {
						console.info(b);
					})
				})

结果如下：

jquery获取特定li里的属性值_javascript_03

由此可见$.each 遍历对象、数组 {一个键对应一个值，用:隔开，键与键之间用','隔开}

1.2 $.trim 去除前后空格

var str="   abc   ";
				// alert(str.length);
				console.info($.trim(str).length);

结果：

jquery获取特定li里的属性值_javascript_04

1.3 $.type(obj) 得到变量的数据类型

var str =12.6;//number
			var stu={"name":"张小凡","age":38};//object
			var stus=[{"name":"张小凡","age":30},{"name":"张大凡","age":38}];//array
			console.info($.type(stus));

结果如下：

jquery获取特定li里的属性值_前端_05

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

var stu={"name":"白小纯","age":20};//false
				var stus=[{"name":"白小纯","age":25},{"name":"白大纯","age":30}];//true
				console.info($.isArray(stus));

结果如下：

jquery获取特定li里的属性值_jquery_06

1.5 $isFunction()判断是否是函数

注意：这里要代入函数的时候带括号为false，不带为true

var stus=[{"name":"张小凡","age":16},{"name":"张大凡","age":20}];
				// console.info($.isFunction(myf));//true
				console.info($.isFunction(myf()));//false 
				function myf(){
					alert(1);
				}

结果为：false;

1.6 $.parseJSON()将json格式的字符串-->js的对象或者数组（这里是重点！）

var stus='{"name":"张小凡","age":19}';
				console.info($.type(stus));//string
				var stu = $.parseJSON(stus);//not available
				console.info($.type(stu));//object		 json格式的字符串-->js对象
				//遍历
				console.info(stu.name,stu.age);
				 $.each(stu,function(k,v){
					console.info(v);
				})

结果如下：

jquery获取特定li里的属性值_javascript_07

将json格式的字符串-->js的对象数组（这里是重点！）

var stusStr = '[{"name":"张小凡","age":38},{"name":"白小纯","age":39}]';
				console.info($.type(stusStr));//string
				var stus = $.parseJSON(stusStr);
				console.info($.type(stus));//array
				
				//遍历
				$.each(stus,function(a,b){
					// console.info(b.name,b.age);
					$.each(b,function(k,v){
						console.info(v);
					})
				})

结果入下：

jquery获取特定li里的属性值_jquery获取特定li里的属性值_08

二、jQuery属性和CSS

2.1 attr() 拿属性值和设置属性值

<head>
		<meta charset="utf-8">
		<title></title>
		<!-- 引入jQuery类库 -->
		<script src="js/jquery-3.3.1.js" type="text/javascript" charset="utf-8"></script>
		<!-- 另起一个script块 -->
		<script type="text/javascript">
			$(function() { //相当于window.onload
			//2.1 attr() 拿属性值和设置属性值
			var mpath = $("#aa").attr("src");//拿值
			console.info(mpath);
			//给某个属性设置值
			$("#aa").attr("src","img/5.jpg");//设值
			$("#aa").attr("width","100px");
			
			})
		</script>
	</head>
	<body>
		<img src="img/1.png" width="200px" id="aa">
	</body>

2.3 addClass() 增加样式值

<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			.xx {
				border: 1px solid red;
			}
			</style>
		<!-- 引入jQuery类库 -->
		<script src="js/jquery-3.3.1.js" type="text/javascript" charset="utf-8"></script>
		<!-- 另起一个script块 -->
		<script type="text/javascript">
			$(function() { //相当于window.onload
			//2.3 addClass()  增加样式值
			$("#aa").addClass("xx");
			
			})
		</script>
	</head>
	<body>
		<img src="img/1.png" width="200px" id="aa">
	</body>

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

<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			.xx {
				border: 1px solid red;
			}
			</style>
		<!-- 引入jQuery类库 -->
		<script src="js/jquery-3.3.1.js" type="text/javascript" charset="utf-8"></script>
		<!-- 另起一个script块 -->
		<script type="text/javascript">
			$(function() { //相当于window.onload
			//2.3 addClass()  增加样式值
			$("#aa").removeClass("xx");//class仍然在 值会被移除掉
			})
		</script>
	</head>
	<body>
		<img src="img/1.png" width="200px" id="aa">
	</body>

2.5 prop() 和attr类似 prop与attr的区别

<head>
		<meta charset="utf-8">
		<title></title>
		<!-- 引入jQuery类库 -->
		<script src="js/jquery-3.3.1.js" type="text/javascript" charset="utf-8"></script>
		<!-- 另起一个script块 -->
		<script type="text/javascript">
			$(function() { //相当于window.onload
			//2.5 prop() 和attr类似  prop与attr的区别
			//给img标签增加name值
			$("#aa").attr("name","abc");
			$("#aa").prop("name","abc");
			$("#ok").click(function(){
				$(".aaa").prop("checked",true);
			})
			
			$("#nook").click(function(){
				$(".aaa").prop("checked",false);
			}) 
			//注意:在为Boolean时 attr会进入之前的状态 但是prop不会
			//attr和addClass的区别
			//attr:会覆盖之前的样式
			//addClass:会前调用原来的样式 再调用加的样式
			})
		</script>
	</head>
	<body>
		<img src="img/1.png" width="200px" id="aa">
		<input type="checkbox" class="aaa" value="凡人修仙传" />凡人修仙传
		<input type="checkbox" class="aaa" value="写CSDN" />写CSDN
		<input type="checkbox" class="aaa" value="喜欢玩手机" />喜欢玩手机
		<input type="button" value="全选" id="ok" />
		<input type="button" value="取消全选" id="nook" /><br />
	</body>

2.6 val() 拿值设值

<head>
		<meta charset="utf-8">
		<title></title>
		<!-- 引入jQuery类库 -->
		<script src="js/jquery-3.3.1.js" type="text/javascript" charset="utf-8"></script>
		<!-- 另起一个script块 -->
		<script type="text/javascript">
			$(function() { //相当于window.onload
			//2.6 val()  拿值 设值
			var aa = $("#bb").val();//拿值
			console.info(aa);
			$("#cc").val("你好，世界");//设值
			})
		</script>
	</head>
	<body>
		<input type="text" id="bb" value="你好" />
		<input type="text" id="cc" />
	</body>

结果如下：

jquery获取特定li里的属性值_jquery_09

2.7 html() 和text() 的区别

<head>
		<meta charset="utf-8">
		<title></title>
		<!-- 引入jQuery类库 -->
		<script src="js/jquery-3.3.1.js" type="text/javascript" charset="utf-8"></script>
		<!-- 另起一个script块 -->
		<script type="text/javascript">
			$(function() { //相当于window.onload
			//2.7 html() 和text() 的区别
			var a = $("p").html();//会拿到子标签
			console.info(a);
			var b = $("p").text();//不会拿到子标签 只会打印纯文本
			console.info(b);
			})
		</script>
	</head>
	<body>
		<p>张小凡和<span>白小纯</span>的修仙故事</p>
	</body>

如图：

jquery获取特定li里的属性值_jquery获取特定li里的属性值_10

优化隔行换色：

.使用[addClass()]属性；

<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			.cc {
				background-color: azure;
			}
		
			.dd {
				background-color: beige;
			}
		</style>
		<!-- 引入jQuery类库 -->
		<script src="js/jquery-3.3.1.js" type="text/javascript" charset="utf-8"></script>
		<!-- 另起一个script块 -->
		<script type="text/javascript">
			$(function() { //相当于window.onload
			//优化隔行换色
			$("table tr:even").addClass("cc");
			$("table tr:odd").addClass("dd");
			})
		</script>
	</head>
	<body>
		<table border="1px" width="50%">
			<tr>
				<td> </td>
				<td> </td>
			</tr>
			<tr>
				<td> </td>
				<td> </td>
			</tr>
			<tr>
				<td> </td>
				<td> </td>
			</tr>
			<tr>
				<td> </td>
				<td> </td>
			</tr>
			<tr>
				<td> </td>
				<td> </td>
			</tr>
		</table>
	</body>

如图：

jquery获取特定li里的属性值_jquery获取特定li里的属性值_11