jQuery$工具方法&属性

一、$工具方法

1.1$.each()遍历数组,对象的数组

1. 定义数组
2. 遍历对象
3. 遍历数组对象

1.2$.trim()去除前后空格

1.3$.type()得到数据类型

1.4 $.isFunction() 判断是否是函数

1.5 $.isARRAY() 判断是否是数组

 1.6 $,parseJSON() 解析json格式的字符串-->js的数组/对象

二,属性和css

2.1 attr() 拿值 设值

2.2 removeAttr() 移除属性值

2.3addClass() 动态增加样式

2.4 removeClass() 删除对应样式

2.5 prop和attr的区别 prop适合用于属性只是boolean类型的时候

2.6 html()和text()的区别

css
            1.设置值

总结 

---

一、工具方法

• 遍历对象

  <script src="js/jquery-3.3.1.js" type="text/javascript" charset="utf-8"></script>
  		<script type="text/javascript">
  			$(function(){
  				一、$工具方法
  				1.1$.each()遍历数组,对象的数组
  				// 定义对象{}
                   var stu={"name":"花花","age":"38"};
  				 遍历对象
  				 console.info(stu.name,stu.age);
  				 $.each(stu,function(k,v){//key,value
  					 console.info(v);
  				 })

• 遍历数组

<script src="js/jquery-3.3.1.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
//定义数组[]
				var names=["欧阳小琴","欧阳建明","欧阳俊雄","欧阳老狗"]
		        // 遍历数组
				$.each(names,function(i,n){//下标,元素
					console.info(n);
				})

• 遍历对象数组

<script src="js/jquery-3.3.1.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">

// 定义对象数组[{}，{}]
				var stus=[{"name":"花中花","age":"38"},{"name":"花儿花","age":"8"}]
				// 遍历对象数组
				$.each(stus,function(i,s){
					console.info(s.name,s.age);//方式一
					$.each(stus,function(k,v){
						console.info(v);//方式二
					})
				})
</script>

                            1.2$.trim()去除前后空格

<script src="js/jquery-3.3.1.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
var str="  zking  ";
console.info($.trim(str).length);

                  1.3$.type()得到数据类型

<script src="js/jquery-3.3.1.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">             
               var str="aa";
				var stus=[{"name":"花中花","age":"38"},{"name":"花儿花","age":"8"}]
				var str=1.5;
				console.info($.type(stus));

               

   1.4 $.isFunction() 判断是否是函数

​
<script src="js/jquery-3.3.1.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
                   var stu={"name":"花中花","age":"38"};
				   console.info($.isFunction(stu));
				   console.info($.isFunction(myf()));

​</script>

                    1.5 $.isARRAY() 判断是否是数组

<script src="js/jquery-3.3.1.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
                   var stu={"name":"花中花","age":"38"};
				   var stus=[{"name":"花中花","age":"38"},{"name":"花儿花","age":"8"}]
                   console.info($.isArray(stu));

                   1.6 $,parseJSON() 解析json格式的字符串-->js的数组/对象

<script src="js/jquery-3.3.1.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
                   // 定义对象字符串
				   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);
				   })
				   // 定义对象数组的字符串
				   var stuse='[{"name":"花中花","age":"38"},{"name":"花儿花","age":"8"}]'
					// 转成js对象数组
					// console.info($.type(stus));
					var stus=$.parseJSON(stuse);
					// console.info($.type(stus));
					$.each(stus,function(k,v){
						console.info(v.name,v.age);
					})
			

 2.1 attr() 拿值 设值

​<script src="js/jquery-3.3.1.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
var mpath=$("#aa").attr('src');
				console.info(mpath);
				
				// 设值
				$("#aa").attr("src","img/返回%20(2).png");
				$("#aa").attr("width","200px");

​

                2.2 removeAttr() 移除属性值

<script src="js/jquery-3.3.1.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">           
                $("#aa").removeAttr("src");
				$("#aa").removeAttr("width");

                2.3addClass() 动态增加样式

	<script src="js/jquery-3.3.1.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">              
                $("#aa").addClass("xx");样式的叠加
				$("#aa").attr("class","xx"); 样式的替换

                prop和attr的区别 prop适合用于属性只是boolean类型的时候

                 $("#aa").sttr("name","abc");
		        $("#aa").prop("name","abc");
				$("#ok").click(function(){
					$(".abc").attr("checked",true);
				})
				$("#nook").click(function(){
					$(".abc").attr("checked",false);
				})

        2.6 html()和text()的区别

<script src="js/jquery-3.3.1.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
		var a=$("p").html();//会包含子标签
		console.info(a);
		var b=$("p").text();//只会打印纯文本
		console.info(b);

            2.7 val() 拿值 设置

<script src="js/jquery-3.3.1.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
//拿文本框的value值
			var a=$("#wc").val();
			console.info(a);
			//赋值
			$("#wc").val("呵呵呵");
</script>

今天的分享到此结束，有问题可以评论区留言，哈哈哈哈  下次见哦~