jQuery2-CSDN博客

本文链接：https://blog.csdn.net/T279zhengyiming/article/details/123615047

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />

       <title></title>
       <style type="text/css">
           .xx {
               border: :solid red 5px;
           }

           .aaa {
               background-color: #FF0000;
           }

           .bbb {
               background-color: aqua;
           }
       </style>
       <script src="js/jquery-3.3.1.js" type="text/javascript" charset="utf-8"></script>
       <script type="text/javascript">
           $(function() {
               一、$工具方法
               var stu={"name":"牛逼","age":38};
               //遍历对象
               //console.info(stu.name,stu.age);
               $.each(stu,function(k,v){
                   console.info(v);
               })

               var names=["欧阳钦","欧阳建民","欧阳俊雄","牛逼"]
               $.each(names,function(n){
                   console.info(n);
               })

               定义对象数组
               var stus = '[{"name": "牛逼","age": 38}, {"name": "小牛逼", "age": 38}]';
                   $.each(stus,function(){
                       console.info(s.name,s.age);
                   })
                   $.each(s,function(){
                       console.info(v);
                   })

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

                   1.3$.type() 得到数据类型
                   var stu={"name":"牛逼","age":38};
                   var stus=[{"name":"牛逼","age":38},{"name":"牛逼","age":38}];
                   var str=1.5;
                   Console.info($.type(stus));

                   1.4$.isfunction 判断是否是函数
                   var stu={"name":"牛逼","age":38};
                   console.info($.isFunction(stu));
                   console.info($.isFunction(myf));

                   1.5$.isarray() 判断是否是数组
                   var stu={"name":"牛逼","age":38};
                   var stus=[{"name":"牛逼","age":38},{"name":"牛逼","age":38}];
                   console.info($.isArray(stus));

                   1.6 $.parseJSON()解析json格式的字符串
                   var stustr='{"name":"牛逼","age":38}';
                   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":38},"name":"牛逼","age":38]'
                   console.info($.type(stusstr));
                   var stus=$.parseJSON(stusstr);
                   //遍历对象数组
                   $.each(stus,function(l,k){
                       console.info(k.name,k.age);
                   }）

                   二、属性和css
                   2.1 attr()拿值设值
                   var mpath=$("#aa").attr("str");
                   console.info(mpath);
                   $("#aa").attr("src","../");
                   $("#aa").attr("width","200px");

                   2.2 removeattr() 移除属性值
                   $("#aa").remove("src");
                   $("#aa").removeAttr("xx");
                   $("#aa").addClass("xx");//样式的叠加
                   $("#aa").attr("class","xx");//样式的替换

2.4removeClass() 删除对应样式
$("#aa").remove("xx");

                   给图片增加name值
                   $("#aa").attr("name","abc");
                   $("#aa").prop("name","abc");

                   $("#aa").prop()
                   $("#nook").click(function(){
                       $(".abc").prop("checked",true);
                   })
                   $("#nook").click(function){
                   $(".abc").prop("checed",false);
                   })

                   案例三:优化表格隔行换色
                           $("table tr:even").addClass("aaa");
                           $("table tr:odd").addClass("bbb");

                           //2.6html()和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("嘿嘿嘿");

                   css
                   1.设置值
                   $("p").css("background", "red");
               $("P").css("background": "yellow", "color": "red");
               //2.拿值
               var a = $("p").css("background");
               console.info(a);

})

           function myf() {
               alert(123);
           }
       </script>
   </head>
   <body>
       <input type="text" value="王" id="wc" />
       <p>心疼他们三个一·秒钟</p>
       <img src="img/微信图片_20220317213844.jpg" width="300px" id="aa" />
       <input type="button" id="ok" value="全选" />
       <input type="button" id="ok" value="取消全选" />
       <input type="checkbox" checked"=checked" class="abc" value="植物大战僵尸" />植物大战僵尸
       <input type="checkbox" class="abc" value="王者龙耀" />王者龙耀
       <input type="checkbox" class="abc" value="和平经营" />和平经营
   </body>
</html>