jQuery$工具方法&属性&CSS

Hilo Everybody wellcome to my channel！

今天Lion带大家来学习jQuery的$工具方法以及一些常用属性和CSS（jQuery02）

首先大家先来瞧瞧我们今天的思维导图：

今天的内容主要分为三部分：

一、$工具方法：

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

代码展示：

遍历对象：

             var stu={"name":"炎帝","age":38};//定义一个对象
             //遍历对象
             $.each(stu,function(k,v){
                console.info(v);
             })

遍历数组：

             var names=["aaa","bbb","ccc","ddd"];//定义一个数组
             //遍历数组
             $.each(names,function(i,n){
                 console.info(i,n);
             })

遍历对象数组：（对象数组实际上就是一个数组哦）

             //定义对象数组
             var stus=[{"name":"颜大弟","age":12},{"name":"颜小弟","age":10}];
             //遍历对象数组
             $.each(stus,function(i,stu){
                 $.each(stu,function(k,v){
                     console.info(v);
                 })
             })

注：$each()使我们用来遍历的方法所有会经常用到的大家要记牢哦！

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

这个就简单一点了，在我们编码是会出现不小心加空格的情况，所以$.trim()就能帮我们有效的自动的去除左右两边的空格。

代码展示：

             var str='     zking    ';
             console.info(str.length);--未去除空格  长度为8
             console.info($.trim(str).length);--去除空格  长度为5

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

在我们想要测试或者得到某些数据的数据类型时用到$.type()

代码展示：

            var str=123;
            var stu={"name":"炎帝","age":38};
            var names=["aaa","bbb","ccc","ddd"];
            var stus=[{"name":"颜大弟","age":12},{"name":"颜小弟","age":10}];
            console.info($.type(str));--number
            console.info($.type(stu));--Object
            console.info($.type(names));--array
            console.info($.type(stus));--array

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

这个判断的返回类型是Boolean类型

代码展示：

             var stu={"name":"炎帝","age":38};
             var names=["aaa","bbb","ccc","ddd"];
             console.info($.isArray(stu));--false
             console.info($.isArray(names));--true

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

在判断是否是函数时要注意在$.isFunction()方法中括号中的函数不用加括号，加了括号意思就是调用函数了

代码展示：

            var names=["aaa","bbb","ccc","ddd"];
            function aa(){
                             alert(1);
            }
            console.info(($.isFunction(names)));--false
            console.info(($.isFunction(aa)));--true//注：在aa后面不加括号

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

这个是重点！！！

在我们搭建网站时，服务器后端拿到的可能是一个字符串，但是我们又需要遍历这个字符串，但是字符串是无法遍历的，所以我们应该用$.parseJSON()将其解析为js对象或者数组进行遍历。

代码展示：

            var stuStr='{"name":"炎帝","age":38}';
            console.info($.type(stuStr));--string
            
            var stu=$.parseJSON(stuStr);//将Json格式的字符串转化为对象
            console.info($.type(stu));--Object
             console.info(stu.name,stu.age);
             $.each(stu,function(k,v){
                 console.info(k);
             })
            
            var stus='[{"name":"颜大弟","age":12},{"name":"颜小弟","age":10}]';
            var nam=$.parseJSON(stus);
            console.info($.type(nam))--array
             //遍历对象数组
             $.each(nam,function(i,n){
                 console.info(n);
             })

好了关于$工具方法就常用的几个介绍到这里，接下来Lion带大家来熟悉一下jQuery的属性吧！

二、jQuery属性：

也许大家会疑问jQuery属性是用来干嘛的呢？其实啊我们一般说jQuery属性大多数用于页面标签的运用，比如增加一个标签，或者增加一个标签的属性……都可以用jQuery属性。

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

代码展示：

                var s= $("#aa").attr("src");--aa为img图片
                console.info(s);
                //给某个属性赋值
                $("#aa").attr("src","1.jpg");

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

代码展示：

                        $("#aa").removeAttr("width");--移除width属性

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

代码展示：

                $("#aa").addClass("xx");--xx为class样式

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

代码展示：

                     $("#aa").removeAttr("width");

2.5prop()：获取某个标签属性的值，或者设置某个标签属性的值

一般我们在使用复选框实现全选功能时会选择使用prop()而不是attr()

因为：attr会纪录选中状态而达不到我们想要实现的效果，而prop不会。

同样是设置属性值：

代码展示：

            //prop()和attr()的区别
                $("#aa").attr("name","abc");
                $("#aa").prop("name","abc");

案例1：全选功能

代码展示：

        <input type="checkbox" value="aaa"  class="q"/>aaa
        <input type="checkbox" value="bbb"  class="q"/>bbb
        <input type="checkbox" value="ccc"  class="q"/>ccc
        <input type="checkbox" value="ddd"  class="q"/>ddd
        <input type="button" name="" id="ok" value="全选" />
        <input type="button" name="" id="nook" value="取消全选" />

//全选功能
                // $("#ok").click(function(){
                //     $(".q").prop("checked","checked");
                // })
                
                // $("#nook").click(function(){
                //     $(".q").prop("checked",false);
                // })

2.6val()：设置或者返回表单字段的值

代码展示：

                //拿值
                var str=$("#bb").val();
                console.info(str);//控制台打印str的内容
                //赋值
                $("#bb").val("asd");

2.7html():设置或者返回所选元素的内容（包括HTML标记）

在htm()括号中防字符串即可实现赋值功能！！！

代码展示：

                    <p>qwrety<span>123</p>
                    var a=$("p").html();//会拿到子标签
                    console.info(a);--qwerty<span>123

2.8text():设置或者返回所选元素的文本内容

代码展示：

                    <p>qwrety<span>123</p>                    
                    var b =$("p").text();//不会拿到子标签 只会打印内容
                    console.info(b);--qwerty123

注：.html和.text的区别：

.html()会拿到对应的子标签，但是.text()不会,它只会获得内容！

关于jQuery的常用属性，Lion就介绍到这里,想要继续学习的伙伴可以关注Lion继续跟进最新的动态也可也自主学习登录jQuery官网进行查询****（网址在上一博客有提到大家可以去关注哦）

三、CSS：

关于CSS，Lion在上一篇博客的选择器中有提到怎样去使用选择器获得对象然后设置CSS，但是在这里Lion就不在多说，今日风分享的CSS方面的内容就在下一篇继续和大家分享啦！（真的不是Lion偷懒，是Lion想帮大家整理好了再分享给大家！！！求关注以便继续更新啊）

以上就是今天的内容啦，我们今天分享了jQuery的$工具方法和jQuery的属性。希望对大家有所帮助!

到这里这次的分享就结束了，欢迎各位继续关注Lion，我们下次再见！

欢迎各位大能多多指导，Lion必将继续努力！