jQuery02($工具&属性&CSS)

一、工具方法

1.1$.each():遍历数组、对象、对象数组中的数据

遍历数组

<script>
//遍历数组
			 var names=["高冷翔","大傻波","刘清高","甄嬛强","宫锁宁馨"];
			$.each(names,function(i,n){
				console.info(n);
			}) 
</script>

遍历对象

<script>
//遍历对象
			$.each(stu,function(k,v){
				console.info(k,v);
			}) 
		 console.info(stu.name,stu.age);
</script>

遍历对象数组

<script>
//遍历对象数组
			$.each(stus,function(i,stu){
				// console.info(stu.name,stu.age);
 				$.each(stu,function(k,v){
				console.info(v);
					
				})
</script>

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

 		
<script>
        	var str="     zking     ";
			console.info($.trim(str).length);
</script>

1.3$.type(obj):拿到数据的类型

     <script>       
            var str=12;
			var stu={"name":"炎帝","age":38};
			var stus=[{"name":"颜大弟","age":38},{"name":"颜小弟","age":37}];
			console.info($.type(stus));
    </script>

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

         <script>   
            var stu={"name":"炎帝","age":38};
			var stus=[{"name":"颜大弟","age":38},{"name":"颜小弟","age":37}];
			console.info($.isArray(stus));
        </script>

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

<script>
            var stus=[{"name":"颜大弟","age":38},{"name":"颜小弟","age":37}];
			console.info($.isFunction(stus));
</script>

1.6$.parseJSON(obj):解析json字符串转换为js对象/数组

<script>
//json格式的字符串-->js对象
			var stuStr='{"name":"炎帝","age":38}';
			 console.info($.type(stuStr));
			 var stu=$.parseJSON(stuStr);
			 console.info($.type(stu));
			 console.info(stu.name,stu.age);
 			$.each(stu,function(k,v){
 				console.info(v);
 			})
			
			//将json格式的字符串-->js的对象数组
			var stusStr='[{"name":"颜大弟","age":38},{"name":"颜小弟","age":37}]';
			var stus=$.parseJSON(stusStr);
			 console.info($.type(stus));
			//遍历对象数组stus
			$.each(stus,function(k,v){
			 console.info(v.name,v.age);
			$.each(v,function(a,b){
				console.info(b);
			})
		})
</script>

二、jQuery属性

2.1 arrt():获取某个标签属性的值，或者设置某个标签属性的值

<script>
		//	拿值
				var mpath=$("#aa").attr("src");//拿值
				console.info(mpath);
				//给某个属性设置值
				$("#aa").attr("src","img/9.jpg");
				$("#aa").attr("width","200px");
</script>

2.2 removeArrt():删除某个标签的属性

<script>
				$("#aa").removeAttr("width");
</script>

2.3 addClass():增加某个标签的属性

<script>
$("#aa").addClass("xx");
</script>

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

<script>
$("#aa").removeClass("xx");//class仍然在
</script>

2.5 prop():和attr()类似，区别在于prop用于属性值为Boolean类型的情况，比如全选/取消全选

<script>
//给img增加name值
				 $("#aa").attr("name","abc");
				 $("#aa").prop("name","abc");
				
				//注意:在为Boolean时 attr会进入之前的状态 但是prop不会
</script>

2.6 html()、text()、val()的区别

<script>
//2.6 val()拿值 设置值
				//拿值
 				var aa= $("#bb").val();
 				console.info(aa);
				
				 $("#bb").val("嘿嘿");//赋值
				
				
				//2.7  html()和text()
 				var a=$("p").html();//拿到其子标签
 				console.info(a);
 				var b=$("p").text();//不会拿到子标签  只会打印纯文本
 				console.info(b);
</script>

三、jQuery CSS

3.1 css():设置标签css样式

   <script>             
                $("p").css("background","red");//一个键,一个值
				$("p").css({"background":"pink","color":"blue"})//{键:值,键:值} 多个用逗号隔开
				//拿值
				var a = $("p").css("background");
				console.info(a);
</script>