jQuery 工具方法&属性&CSS

<title>jQuery工具方法&属性&CSS</title>
        <style type="text/css">
            .xx{
                border:solid #01BE00 5px;
            }
            .aaa{
                background-color: #333333;
            }
            .bbb{
                background-color: yellow;
            }
            
        </style>
        <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":"23"};
                // 遍历对象
//                 console.info(stu.name,stu.age);
//                                 $.each(stu,function(k,v){//key,value
//                                     console.info(v);
//                                 })

 

                // 定义数组[]
                // var names=["欧阳小强","哈哈哈哈哈","呵呵呵呵","嘻嘻嘻嘻","吼吼"];
                // 遍历数组
//                                 $.each(names,function(i,n){
//                                     console.info(n);
//                                 })
// 

                // 定义对象数组[{}，{}]
//                                 var stus=[{"name":"哈哈哈","age":"23"},{"name":"和哈哈","age":"13"}];
//                                 $.each(stus,function(i,s){
//                                     // console.info(s.name,s.age);方法一
//                                     $.each(s,function(k,v){
//                                         console.info(v);
//                                     })
//                                 })

 

 

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

                // 1.3$.type()得到数据类型
                //                 var stu={"name":"哈哈","age":"23"};
                //                 var stus=[{"name":"哈哈哈","age":"23"},{"name":"和哈哈","age":"13"}];                
                //                 var str=1.5;
                //                 console.info($.type(stus));
                //                 
                // 1.4$.isfunction() 判断是否是函数
//                                 var stu={"name":"哈哈","age":"23"};
//                                 // console.info($.isFunction(stu));
//                                 console.info($.isFunction(myf));

                // 1.5 $.isArray() 判断是否是数组
//                                 var stu={"name":"哈哈","age":"23"};
//                                 var stus=[{"name":"哈哈哈","age":"23"},{"name":"和哈哈","age":"13"}];                
//                                 console.info($.isArray(stus));                

 

                // 1.6 $.parseJSON() 解析json格式的字符串-->jsd 数组/对象
                //                 var stuStr='{"name":"哈哈","age":"23"}';
                //                 // 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 stusStr = '[{"name":"哈哈哈","age":"23"},{"name":"和哈哈","age":"13"}]';
                // 转成对象数组
                // console.info($.type(stusStr));
                // var s=$.parseJSON(stusStr);
                // console.info($.type(s))
                //                 $.each(s,function(a,b){
                //                     console.info(b.name,b.age);
                //                 })

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

                // 设值
//                                 $("#aa").attr("src","img/33.jpg");
//                                 $("#aa").attr("width","300px");

                // 2.2 removeAttr() 移除属性值
                // $("#aa").removeAttr("src");
                // $("#aa").removeAttr("width");

                // 2.3 addClass() 动态增加样式
                // $("#aa").addClass("xx");
                // $("#aa").attr("class","xx");
                
                // removeClass() 删除对应样式
                // $("#aa").removeClass("xx");
                
                
                // prop和attr的区别 属性值是boolean类型的时候
                // 给图片增加name值
                // $("#aa").attr("name","abc");
//                 $("#aa").prop("name","abc");
//                 
//                 $("#ok").click(function(){
//                     $(".abc").prop("checked",true);
//                 })
//                 $("#nook").click(function(){
//                     $(".abc").prop("checked",false);
//                 })
                
                // 优化隔行换色
//                 $("table tr:even").addClass("aaa");
//                 $("table tr:odd").addClass("bbb");
                
                // 2.6 html() 和  text()的 区别
//                 var a=$("p").html();//会包含子标签
//                 console.info(a);
//                 var b=$("p").text();//只会打印纯文本
//                 console.info(b);

 

                // 2.7 val() 拿值
//             var a=$("#wc").val();
//             console.info(a)
                // 赋值
                // $("#wc").val("hhh");
                
                // CSS
                // 1.设置值
                // $("p").css("background","rgb(111,11,1)");//单属性
                // $("p").css({"background":"yellow","color":"red"});//单属性
                
                
                // 拿值
//                 var a=$("p").css("background");
//                 console.info(a);
                
                
            })

            function myf() {
                alert(1212)
            }
        </script>
    </head>
    <body>
        
        <input type="text"  value="哈哈哈" id="wc" />
        
        <p>哈哈哈哈<span>哈哈哈哈哈哈</span></p>
        
        <img src="img/22.jpg" width="200px" id="aa" class="yy"/>
        
            <hr />
        
        <input type="button"  value="全选" id="ok" />
        <input type="button"  value="取消全选" id="nook" />
        <input type="checkbox" class="abc"  value="植物大战僵尸" />植物大战僵尸
        <input type="checkbox" class="abc"  value="哈哈大战僵尸" />哈哈大战僵尸
        <input type="checkbox" class="abc"  value="呵呵大战僵尸" />呵呵大战僵尸
        <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>
        
        <pre>
            
            
            
            
        </pre>
    </body>