jQuery02：$工具&属性&CSS

一、$工具方法

<title>jQuery02</title>
        <!-- 引入外部js -->
        <script src="js/jquery-3.3.1.js" type="text/javascript" charset="utf-8"></script>
        <!-- 另起一个script块 -->
        <script type="text/javascript">
        //$工具方法
        //1.1 $.each 遍历对象 数组
        //定义对象
        var stu={"name":"张三","age":38};
        //遍历对象 k指索引  v指元素
         $.each(stu,function(k,v){
            console.info(k，v);
        }) 

效果图：

       console.info(stu.name,stu.age);

效果图：

 //定义数组
        var names = ["张三","李四","王麻子","林林"];
        //遍历数组
        /* $.each(names,function(i,n){
            console.info(n);
        }) */
        //定义对象数组 [{}]
        var stus = [{"name":"张大三","age":38},{"name":"张小三","age":39}];
        //遍历对象数组
        $.each(stus,function(i,stu){
            //console.info(stu.name,stu.age);
            $.each(stu,function(a,b){
                console.info(b);
            })
        })

 效果图：

 //1.2 $.trim 去除前后空格 
        var str = "   zking  ";
        alert(str.length);
        console.info($.trim(str).length);

 效果图：

 

 //1.3 $.type(obj)  得到变量的数据类型
        var str = "aa";
        console.info($.type(str));

 效果图：

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

var stu={"name":"张三","age":38};
 var stus = [{"name":"张大三","age":38},{"name":"张小三","age":39}];
  console.info($.isArray(stu));

效果图：

 //1.5 $.isFunction()  判断是否是函数
        var stus = [{"name":"张大三","age":38},{"name":"张小三","age":39}];
        console.info($.isFunction(stus));

效果同上图

console.info($.isFunction(myf));
        
        function myf(){
            alert(123);
        }

效果图：

注意：在判断是否是函数的括号里只需写方法名即可判断，若写方法名及其括号则为调用函数

 //1.6 $.parseJSON() 将json格式的字符串-->js的对象或者数组

// json格式的字符串-->js对象
        var stuStr = '{"name":"张三","age":38}';
        //console.info($.type(stuStr));string
        var stu = $.parseJSON(stuStr);
        console.info($.type(stu));//object 

//将json格式的字符串-->js的对象数组
        var stusStr = '[{"name":"张大三","age":38},{"name":"张小三","age":39}]';
        //console.info($.type(stusStr));string
        var stus = $.parseJSON(stusStr);
        //console.info($.type(stus));array

知识归纳：

1.$.each()：遍历数组、对象、对象数组中的数据

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

3.$.type(obj)：得到数据的类型

4.$.isArray(obj)：判断是否是数组

5.$.isFunction(obj)：判断是否是函数

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

二 jQuery属性和CSS

//2.1 attr() 拿属性值和设置属性值
                var mpath = $("#aa").attr("src");//拿值
                console.info(mpath);

效果图：

 

$("#aa").attr("src","img/动漫男头.jpeg");//设值

效果图：

 //2.2  removeAttr()  移除某个属性对应属性值
          $("#aa").removeAttr("src");//无图片

//2.3 addClass()  增加样式值
         $("#aa").addClass("xx");

 //2.4 removeClass() 删除某个标签属性值
       $("#aa").removeClass("xx");//class仍然在 值会被移除掉（可在检查-->元素中查看）

//2.5 prop() 和attr类似  prop与attr的区别
                //给img标签增加name值
                //$("#aa").attr("name","abc");
                //$("#aa").prop("name","abc");
                
                //全选功能
                $("#ok").click(function(){
                    $(".aaa").prop("checked",true);
                })
                
                $("#nook").click(function(){
                    $(".aaa").prop("checked",false);
                })
                注意:在为Boolean时 attr会进入之前的状态 但是prop不会

                //attr和addClass的区别
                //attr:会覆盖之前的样式
                //addClass:会前调用原来的样式 再调用加的样式（样式叠加）

//2.6 val()  拿值 设值
                //var aa = $("#bb").val();//拿值
                //console.info(aa); 
                $("#cc").val("你好，世界");//设值
       效果图：

   

 //2.7 html() 和text() 的区别
                var a = $("p").html();//会拿到子标签
                console.info(a);
                var b = $("p").text();//不会拿到子标签 只会打印纯文本
                console.info(b);

 效果图：

知识归纳：

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

2.removeAttr()：删除某个标签属性

3.addClass()：给某个标签添加class属性值

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

5.prop():和attr()类似，区别在于prop用于属性值为Boolean类型的情况，比如多选

6.html():获取某一个标签体内容（注意：该标签体中可以包含子标签）

7.text()：获取某一个标签体内容(注意：该标签体不能包含子标签)

8.val()：主要用户获取/设置输入框的值

//优化隔行换色
                $("table tr:even").addClass("cc");
                $("table tr:odd").addClass("dd");

 效果图：

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

 效果图：

注意： rgb分别指red(红色) green（绿色） blue（蓝色）这三种原色 其他颜色均为此三色所调配，调配数值为（1-255）