jQuery$工具方法及其属性

---目录---

1.jQuery工具方法；

2.jQuery属性；

3.jQuery隔行换色案例；

4.jQuery全选功能案例；

一、$工具方法

1.1 我们来看看用$工具方法【$.each()】如何遍历数组、对象、以及对象数组中的数据？

第一步我们需要定义几个对象、数组以及对象数组；

后面代码如下：

      <!--第一步：引入jQuery类库--><script src="js/jquery-3.3.1.js" type="text/javascript" charset="utf-8"></script><!-- 另起一个js --><script type="text/javascript">工具方法$.each():$(function(){//自动调用//1.1 $.each 遍历对象、数组//定义一个对象var stu = {"name":"颜忠祺","age":18};//遍历此对象$.each(stu,function(i,n){//i指下标/n指元素alert(n);})//利用控制台打印一下console.info(stu.name,stu.age);//可以直接用对象点出值//定义一个数组var names=["颜忠祺","邓正威","刘好","王思梦"];//遍历数组$.each(names,function(i,n){console.info(i,n);})//定义对象数组var stus = [{"name":"颜忠祺","age":18},{"name":"邓正威","age":19}];$.each(stus,function(i,stu){//方式1//console.info(stu.name,stus.age);//方式2$.each(stu,function(i,n){console.info(n);})})})</script>

1.2 用【$.trim()】去除字符串两边的空格；

<script type="text/javascript">//定义一个字符串var str = "   leaf   ";console.info($.trim(str).length);//通过打印字符串长度来测试
</script>

1.3 用【$.type()】得到数据的类型；

<script type="text/javascript">//定义一个数据var str = "Leaf";console.info($.type(str));//打印测试
</script>

1.4 用【$.isAttay()】判断是否是否是数组？

<script type="text/javascript">//定义一个数组var names=["颜忠祺","邓正威","刘好","王思梦"];console.info($.isArray(names));//打印测试
</script>

1.5 用【$.isFunction()】判断是否是函数？

注：这里要注意代入函数的时候不要带括号！

<script type="text/javascript">//定义一个数组var names=["颜忠祺","邓正威","刘好","王思梦"];//定义一个函数function myf(){alert(Leaf);}console.info($.isFunction(myf));//测试打印
</script>

1.6 用【$.parseJSON()】把json字符串转换为js对象/数组；

（这里敲重点噢！）

<script type="text/javascript">//先定义一个对象var stuStr='{"name":"颜忠祺","age":18}';//数据类型console.info($.type(stuStr));//测试是json字符串//转为数组var stu = $.parseJSON(stuStr);//json格式的字符串--->js数组//遍历$.each(stu,function(i,n){console.info(n);//打印测试})
</script>

二、jQuery属性

2.1 【attr()】：拿到/设置--->标签的值；

<script type="text/javascript">//拿值var tp = $("#aa").attr("src");console.info(tp);//打印测试//给某个属性设置值$("#aa").attr("src","img/1.jpg");$("#aa").attr("width","300px");
</script>//身体部分
<body><!--定义一个图片--><img src="img/1.jpg" id="aa">
</body>

2.2 【removeAttr()】：删除某个标签属性；

<script type="text/javascript">//移除//$("#aa").removeAttr("width");
</script>

2.3 【addClass()】：给标签添加class属性值；

<script type="text/javascript">//增加样式$("#aa").addClass("ss");
</script>

案例一：使用jQuery优化隔行换色：

1.设定头部样式表；

2.设置表格；

3.使用【addClass()】属性；

<!--头部样式表-->
<style type="text/css">.dh{background-color: #FFC0CB;}.sh{background-color: aquamarine;}
</style><script type="text/javascript">$("table tr:even").addClass("dh");$("table tr:odd").addClass("sh");
</script><!--身体部分-->
<h4>表格隔行换色</h4><table border="1px" width="50%"><tr><td>&nbsp;</td><td>&nbsp;</td></tr><tr><td>&nbsp;</td><td>&nbsp;</td></tr><tr><td>&nbsp;</td><td>&nbsp;</td></tr><tr><td>&nbsp;</td><td>&nbsp;</td></tr><tr><td>&nbsp;</td><td>&nbsp;</td></tr></table>

2.4 【removeClass()】：删除某个标签Class样式值；

注：只移除值，Class依然在！

<script type="text/javascript">//删除样式值$("#aa").removeClass("ss");//Class依然在
</script>

2.5 【prop()】与【attr()】的区别？

区别就是在于prop()多用于boolean类型的情况；

例如：全选/取消全选；

代码运用对比：

<script type="text/javascript">//给img添加name值$("#aa").attr("name","leaf");$("#aa").prop("name","leaf");
</script>

2.6 【attr()】和【addClass()】的区别？

attr()是样式的替换；

addClass()是样式的叠加；

案例一：全选功能的实现：

1.给按钮添加点击事件；

2.给各个复选框设置class值；

3.用prop()设置选中；

<script type="text/javascript">//点击事件$("#ok").click(function(){$(".aaa").prop("checked",true);//设置选中})//点击事件$("#nook").click(function(){$(".aaa").prop("checked",false);//设置选中})
</script>

2.7 用【val()】拿值/设值；

<script type="text/javascript">//拿值var str = $("#bb").val();console.info(str);//打印测试 //设值$("#bb").val("Leaf");
</script>

2.8 【html()】和【text()】的区别？

text()--->返回纯文本内容；

html()--->返回文本内容包括其所选HTML标签；

代码如下：

<script type="text/javascript">var a = $("p").html();//拿所有属性//打印测试console.info(a);var b = $("p").text();//只拿纯文本//打印测试console.info(b);
</script>

三、附上思维导图：

三、好啦，今天的jQuery学习分享就到这啦，喜欢的可以关注以后一起学习噢~

我是小超，后期还会有更多的jQuery知识以及小案例分享学习，不要错过哦！

一起加油！！！