jQuery$工具和属性

权-

已于 2022-04-20 23:07:40 修改

阅读量333

点赞数

文章标签： jquery

于 2022-04-20 22:50:56 首次发布

本文链接：https://blog.csdn.net/Q_3344/article/details/124309710

版权

jQuery$工具和属性

思维导图

大家可以看看思维导图，把思路理顺，慢慢跟着思维导图一步一步练习。
在这里插入图片描述

工具与属性

1、工具.
1)、 $. e a c h ：遍历出字符串数组 n a m e s 里面的所有元素。 2) 、$ .each：遍历出对象person里面的所有属性。
3)、 $. e a c h ：遍历出对象数组 p e r s o n s 里面的所有对象的所有属性。 4) 、$ .trim：打印出去除前后空格之后字符串str的长度。
5)、 $. t y p e (o b j) ：获取变量 s b 的数据类型。 6) 、$ .isAarray(obj)：判断persons是不是数组。
7)、 $. i s F u n c t i o n (o b j) ：判断 s a 和 s b 是不是函数。 8) 、$ .parseJSON(obj)：解析JSON字符串personJson，然后打印出解析后的对象的name和sex属性。
2、属性.
1)、attr()：获取id为sa的img元素的src属性值。
2)、attr()：动态的给元素a设置href属性(百度)。
3)、removeAttr()：移除“百度”的超链接属性(href)。
4)、addClass()：给元素a标签添加一个sb类名。
5)、removeClass()：删除a标签的sb类名。
6)、prop()：给a标签添加一个name属性。
7)、prop()：完成复选框的全选和取消全选案例。
8)、html()：获取body标签里的所有内容。
9)、text()：获取span标签里的内容。

工具方法

<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<script type="text/javascript" src="js/jquery-3.3.1.js"></script>
	</head>
	<body>
		
	</body>
	<script type="text/javascript">
		$(function(){
			//定义数组[]
			// var srrays=["hgdfq","fegqr","freg"];
			//定义对象{} 键值对
			// var p={"name":"哈哈","sex":"男"};
			//定义对象数组[{}]	
			// var ps=[
			// {"name":"哈哈","sex":"男"},
			// {"name":"嘻嘻","sex":"男"},
			// {"name":"嘿嘿","sex":"男"}
			// ];
			
			//遍历数组
			// $.each(srrays,function(i,v){//参数：下标和值
			// 	console.info(v)
			// });
			
			//遍历对象  键key和值value
			// $.each(p,function(k,v){
			// 	console.info(k+"__"+v);
			// });
			
			//遍历对象数组
			// $.each(ps,function(i,v){ //参数：下标和值	
			// 	// console.info(v.name+"__"+v.sex)	
			// 	//进一步的遍历对象数组里面的每一个对象
			// 	$.each(v,function(k,v){//参数：键和值
			// 		console.info(i+"__"+k+"__"+v)
			// 	});	
			// });
			
			//去两边空格
			// var str=" jfhgth ";
			// console.info($.trim(str).length);
			
			//得到数据类型
			// var a=12;
			// var b=1.1;
			// var c="rjk";
			// var d=true;
			// var e='f';
			// var f=[32,24,5,7];
			// var g={"name":"张三"};
			// console.info("a="+$.type(a))
			// console.info("b="+$.type(b))
			// console.info("c="+$.type(c))
			// console.info("d="+$.type(d))
			// console.info("e="+$.type(e))
			// console.info("f="+$.type(f))
			// console.info("g="+$.type(g))
			
			//判断是不是数组
			// var f=[32,24,5,7];
			// var g={"name":"张三"};
			// console.info($.isArray(f))
			
			//判断是不是函数
			// console.info($.isFunction(f))
			
			// var p='{"name":"哈哈","sex":"男"}';
			//将JSON字符串p转换成js对象或者数组
			// console.info(p);
			// var str=$.parseJSON(p);
			// console.info($.type(str));
			
			var ps='[{"name":"哈哈","sex":"男"},{"name":"嘻嘻","sex":"男"},{"name":"嘿嘿","sex":"男"}]';
			console.info($.type(ps));
			var str=$.parseJSON(ps);
			console.info($.type(str));
		})
	</script>
</html>

JSON

JSON：是一种轻量级的前后台数据交互工具。
JSON技术，数据格式是键值对格式，格式要求非常严谨。
后台：java编写
数据：java对象 Dog da=new Dog();
后台：js编写
数据：var p={“name”:“哈哈”,“sex”:“男”};

属性和CSS样式

<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script type="text/javascript" src="js/jquery-3.3.1.js"></script>
		<style>
			/* 改变后的颜色 */
			.a{
				background-color: aqua;
			}
			/* 恢复颜色 */
			.b{
				background-color: pink;
				}
		</style>
		<script type="text/javascript">
			$(function(){
// 			1.attr():
// 				1.1获取id为sa的img元素的src属性值。
				// var sa=$("#sa").attr("src");
				// console.info(sa);
// 				1.2动态的给a元素设置href属性值。
				// $("a").attr("href","https://www.baidu.com");
// 			2.removeAttr():移除“百度”的超链接属性。
				// $("a").removeAttr("href");
//			3.addClass()：给a标签添加一个sb类名。
				// $("a").addClass("sb");
// 			4.removeClass()：删除a标签的sb类名。
				// $("a").removeClass("sa");
// 			5.prop()：给a标签添加一个name属性。
				//prop:多用于属性值boolean类的属性
				// $("a").prop("name":"hh");
// 			6.案例：全选和取消全选。
				//给全选按钮加事件
				// $("#qx").click(function(){
				// 	var cas=$(".ca");
				// 	$.each(cas,function(i,v){
				// 		$(v).prop("checked",true)
				// 	})
				// });
				//给反选按钮加事件
				// $("#fx").click(function(){
				// 	var cas=$(".ca");
				// 	$.each(cas,function(i,v){
				// 		$(v).prop("checked",false)
				// 	})
				// });
				
// 			7.html()、text()、val()：
				// var ca=$("#da").val();
				// console.info(ca);
// 				7.1通过text()属性获取span标签里的内容。
				// var sa=$("#sa").text();
				// console.info(sa);
//				7.2通过text()重新设置span标签里的内容。
				// $("#sa").text("这是新内容");
// 				7.3通过html()属性获取body标签里的内容。
				// var sa=$("body").html();
				// console.info(sa);
// 			8.案例：使用jQuery属性优化表格隔行换色案例。
				//奇数行，下标为偶数
				$("#js").click(function(){
					$("table tr:even").attr("class","a");
				});
				//偶数行，下标为奇数
				$("#os").click(function(){
					$("table tr:odd").attr("class","b");
				});
			})
		</script>
	</head>
	<body>
		<input type="text" id="da" value="文本框"/>
		<span id="sa"> 
			<h1>嗨！</h1>
			我是span行级标签
			</span><br />
		<img src="img/10.jpeg" id="sa"/>
		<img src="img/9.jpeg" id="sb"/>
		<a class="sa">百度</a><br />
		<div id="da">这是一个超级div</div>
		<table border="1px" width="300px" height="200px" align="center">
			<tr>
				<td>名字<input type="checkbox" class="ca"/></td>
				<td>性别<input type="checkbox" class="ca"/></td>
				<td>年龄<input type="checkbox" class="ca"/></td>
				<td>地址<input type="checkbox" class="ca"/></td>
			</tr>
			<tr>
				<td>张三<input type="checkbox" class="ca"/></td>
				<td>男<input type="checkbox" class="ca"/></td>
				<td>12<input type="checkbox" class="ca"/></td>
				<td>湖南<input type="checkbox" class="ca"/></td>
			</tr>
			<tr>
				<td>李四<input type="checkbox" class="ca"/></td>
				<td>女<input type="checkbox" class="ca"/></td>
				<td>13<input type="checkbox" class="ca"/></td>
				<td>长沙<input type="checkbox" class="ca"/></td>
			</tr>
			<tr>
				<td>王五<input type="checkbox" class="ca"/></td>
				<td>男<input type="checkbox" class="ca"/></td>
				<td>18<input type="checkbox" class="ca"/></td>
				<td>岳阳<input type="checkbox" class="ca"/></td>
			</tr>
			<tr>
				<td>麻子<input type="checkbox" class="ca"/></td>
				<td>女<input type="checkbox" class="ca"/></td>
				<td>19<input type="checkbox" class="ca"/></td>
				<td>邵阳<input type="checkbox" class="ca"/></td>
			</tr>
		</table>
	<center>
		<input type="button" value="奇数行" id="js"/>
		<input type="button" value="偶数行" id="os"/>
	</center>
	</body>
</html>