jQuery—$工具方法&属性&CSS

1.思维导图

首先大家先看看思维导图，先把思路理顺一下

2.jQuery的$工具方法与使用

2.1$工具

1. $.each：遍历出字符串数组names里面的所有元素。
2. $.each：遍历出对象person里面的所有属性。
3. $.each：遍历出对象数组persons里面的所有对象的所有属性。
4. $.trim：打印出去除前后空格之后字符串str的长度。
5. $.type(obj)：获取变量sb的数据类型。
6. $.isAarray(obj)：判断persons是不是数组。
7. $.isFunction(obj)：判断sa和sb是不是函数。
8. $.parseJSON(obj)：解析JSON字符串personJson，然后打印出解析后的对象的name和sex属性。

2.2$工具的使用方法

以下代码都是使用方法注释里打了它们的意思

$(function(){
			//定义数组[]
			var arrays=["sd","aa","da","eqda"];
			//定义对象{"键":"值"}键值对,键一定要用双引号包裹，值：如果是数值类型则不需要双引号，字符串需要双引号。
			var p={"name":"张三","sex":"男","age":18};
			//定义对象数组
			var ps=[
				{"name":"张三","sex":"男","age":18},
				{"name":"李四","sex":"男","age":18},
				{"name":"王五","sex":"男","age":18},
				];
			
			//遍历数组：下标和值
			$.each(arrays,function(i,v){//参数：下标和值
				console.info(i+"__"+v);
			})
			
			//遍历对象:键key     和   值value
			$.each(p,function(k,v){
				console.info(k+"__"+v);
			})
			
			//遍历对象数组
			$.each(ps,function(i,v){//参数：下标和值
				console.info(v.name+"__"+v.age);
			// 	//进一步的遍历对象数组里面的每个对象
				$.each(v,function(k,v){//参数：键和值
					console.info(i+"__"+k+"__"+v);
				})
			})
			
			//获取对象长度
			var str=" asbhaj ";
			console.info($.trim(str).length);  //trim()去除两边字符串的空格
			
			//得到数据的类型$.type(obj)
			var a=12;
			var b=12.2;
			var c="dafa";
			var d=true;
			var e='da';
			var f=[2213,332,545,1,22];
			var g={"name":"王五","sex":"男","age":18};
			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=[123,231,646];
			var g={"name":"李四"};
			//判断是否是数组$.isArray(obj)
			console.info($.isArray(g));
			
			//判断是否是函数$.isFunction(obj)
			// 这里写一个函数
			function da(){
				
			}
			console.info($.isfunction(da));
			
			//解析json字符串转换为js对象/数组$.parseJSON(obj)
			 var g={"name":"王五","sex":"男","age":18};
			 //将JSON字符串，g转换成js对象或者数组
			 console.info(g);
			 var str1=$.parseJSON(g);
			 console.info("str1__"+$.type(str1));
			var ps ='[{"name":"张三","sex":"男","age":18},{"name":"李四","sex":"男","age":18},{"name":"王五","sex":"男","age":18},]';
				console.info($.type(ps));
				var str2=$.parseJSON(ps);
				console.info("str2__"+$.type(str2));
		})
	</script>

3.jQuery属性和CSS

3.1属性

1. attr()：获取id为sa的img元素的src属性值。
   

2. removeAttr()：移除“百度”的超链接属性(href)。

3. addClass()：给元素a标签添加一个sb类名。

4. removeClass()：删除a标签的sb类名。

5. prop()：给a标签添加一个name属性。

6. prop()：完成复选框的全选和取消全选案例。

7. html()：获取body标签里的所有内容。

8. text()：获取span标签里的内容。

3.2属性的使用方法CSS

属性的使用方法全部代码里面,注释里面有意思最后一道题是加了CSS代码的

<script type="text/javascript" src="js/jquery-3.3.1.js"></script>
		<style type="text/css">
		/* 这个是最后一个案例的css */
		/* 奇数行颜色 */
			.a{
				background-color: green;
			}
			/* 偶数行颜色 */
			.b{
				background-color: yellow;
			}
		</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("sb");
				 
				// 			5.prop()：给a标签添加一个name属性。
				//prop:多用于属性值为boolean类的属性
				 $("a").prop("name","na");
				 $("a").attr("href","https://www.baidu.com/");
				 
				// 			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=$("#sp").text();
				 console.info(sa);
				 
								//7.2通过text()重新设置span标签里的内容。
				 $("#sp").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="sp">
			<h1>嗨！</h1>我是span行级标签
		</span><br />
		<img src="img/10.jpeg" id="sa" />
		<img src="img/9.jpeg" id="sb" />
		<a href="http://www.baidu.com" 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" />
			<input type="button" value="全选" id="qx" />
			<input type="button" value="反选" id="fx" />
		</center>
	</body>