jQuery02-CFANZ编程社区

<!DOCTYPE html>
<html>
   <head>
       <meta charset="utf-8" />
       <title>jQuery02</title>
       <style type="text/css">
           .xx{
               border: 1px solid;
           }
           .cc{
               background-color: wheat;
           }
           .dd{
               background-color: orange;
           }

       </style>
       <script src="js/jquery-3.3.1.js" type="text/javascript"></script>
       
       <script type="text/javascript">
       $(function(){//相当于window.onlaod

       // 一，$工具方法
       //1.1 $.each 遍历对象数组
       var stu={"name":"哈哈","age":38};
       // 遍历对象
       /* $.each(stu,function(k,v){
           console.info(v);
       }) */
       /* console.info(stu.name,stu.age);
       // 定义数组
       var names=["哦豁","嘿嘿","阿芬","梵高","甄嬛"];
       // 遍历数组
       $.each(names,function(i,n){
           console.info(n);
       }) */
       // 定义数组[{},{}]
       // var stus=[{"name":"哈哈","age":38},{"name":"嘿嘿","age":37}];
       // 遍历对象数组
       /* $.each(stus,function(i,stu){//下标元素
           // console.info(stu.name,stu.age);
           $.each(stu,function(k,v){
               console.info(v);



           })
       }) */

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

       // 1.3 $.type()得到变量的数据类型
       /* var str=21;
       var stu ={"name":"哈哈","age":38}
       var stus=[{"name":"哈哈","age":38},{"name":"嘿嘿","age":37}];
       console.info($type(stu));   */

       // 1.4 $.isArray()判断是否是数组
/*        var stu ={"name":"哈哈","age":38}
       var stus=[{"name":"哈哈","age":38},{"name":"嘿嘿","age":37}];
       console.info(($.isArray(stus));   */

       // 1.5 $.isfunction()判断是否是函数
       // var stus=[{"name":"哈哈","age":38},{"name":"嘿嘿","age":37}];
       // console.info($.isFunction(myf()));


       //$.parseJSDON(obj)将json格式的字符串-->js的对象转为数组
       var stuStr='{"name":"哈哈","age":38}';
       // console.info($.type(stuStr));sting
       var stu=$.parseJSON(stuStr);
       // console.info($.type(stu));
       // console.info(stu.name,stu.age);
/*        $.each(stu,function(k,v){
           console.info(v);
       }) */

       //将json格式的字符串-->js的对象数组
       var stuStr='{"name":"哈哈","age":38},{"name":"嘿嘿","age":37}';
       // console.info($.type(syuStr));
       var stus=$.parseJSON(stuStr);
       // console.info($.type(stus));
       //遍历对象数组stus
       /* $.each(stu,function(k,v){
           console.info(v.name,v.age);
           $.each(b,function(k,v){
               console.info(v);
           })
       }) */

       //二,jQuery属性和CSS
       // 2.1 attr() 拿属性值/设置属性值
       //拿值
       // var mpath=$("#aa").attr("src");//拿值
       // console.info(mpath);
       //给某个属性设置值
       // $("#aa").attr("src","img/57.jpg");
       // $("#aa").attr("width","200px");

       //2.2 removeAttr()移除某个属性对应属性值
       // $("#aa").removeattr("width");

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

       //2.4 removeClass()移除样式值
       // $("#aa").removeClass("xx");//Class任然在

       //用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);
       }) */

       //2.5val()拿值，设置值
       // var aa=$("#bb").value();
       // console.info(aa);

       //赋值
       // $("#bb").val("嘿嘿");

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

       //优化隔行huanse
       // $("table tr:even").addclass("cc");
       // $("table tr:odd").addclass("dd");

       //attr()和addclass的区别
       // $("#aa").attr("class","xyz");//样式的替换
       // $("#aa").addclass("xyz");//样式的叠加

       //CSS
       $("p").css("background","rgb(1,22,122,0)");//键，值单个属性值
       // $("p").css({"backround":"pink","color":"blue"});

       var a=$("p").css("background");
       console.info(a);






       })

       function myf(){
           alert(123);
       }

       </script>

   </head>
   <body>
       <p>张<span >典</span>是傻子</p>
           <img src="img/62.jpg" width="300px" id="aa" class="jk">
           <input type="checkbox" class="aaa" value="欧阳修看美女" />欧阳修看美女
           <input type="checkbox" class="aaa" value="和嘿嘿看美女" />和嘿嘿看美女
           <input type="checkbox" class="aaa" value="嘻嘻嘻看美女" />嘻嘻嘻看美女
           <input type="button" value="全选" id="ok"/>
           <input type="button" value="全部取消" id="nook"/><br/>
           <input type="text" id="bb"/>
           <table border="1px" width="50%">
               <tr>
                   <td> </td>
                   <td> </td>
               </tr>
               <tr>
                   <td> </td>
                   <td> </td>
               </tr>
               <tr>
                   <td> </td>
                   <td> </td>
               </tr>
               <tr>
                   <td> </td>
                   <td> </td>
               </tr>
               <tr>
                   <td> </td>
                   <td> </td>
               </tr>
               <tr>
                   <td> </td>
                   <td> </td>
               </tr>
           </table>
   </body>
</html>