【无标题】

最新推荐文章于 2024-01-18 23:25:36 发布

nncwww

最新推荐文章于 2024-01-18 23:25:36 发布

阅读量50

点赞数

分类专栏： jQuery 文章标签： jquery

本文链接：https://blog.csdn.net/nncwww/article/details/123605743

版权

jQuery 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

本文详细介绍了jQuery中的$工具方法，包括$.each遍历数组和对象、$trim去除空格、$.type判断数据类型、$.isFunction和$.isArray判断函数与数组，以及CSS属性操作如attr(), removeAttr(), addClass(), removeClass(), prop()和html/text/val()的使用实例。

摘要由CSDN通过智能技术生成

<!DOCTYPE html>
<html>
   <head>
       <meta charset="utf-8" />
       <title>jQuery02:$工具方法&属性css</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(){
               //1 $工具方法
//                //1.1$.each()遍历数组,对象的数据
//                //定义对象
//                var stu ={"name":"小欧","age":22};
//                //遍历对象 Map
//                // 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":22},{"name":"小欧阳欧","age":22}];
           //遍历对象数组
//            $.each(stus,function(i,s){
//                    // console.info(s.name,s.age);方式一
//                    $.each(s,function(k,v){//方式二
//                        console.info(v);
//                    })
//                })
       //1.2$trim()去除前后空格
               // var str =" aking "
       // console.info($.trim(str).length);

               //1.3$.type得到数据类型
               // var stus =[{"name":"小欧","age":22},{"name":"小欧阳欧","age":22}];
               // var str =1.5;
               // console.info($.type(str));
               // console.info($.type(stus));

       //1.4 isFunction判断是否是函数
               // var stu ={"name":"小欧","age":22};
               // console.info($.isFunction(stu));

               //1.5$.isArray() 判断是否是数组
               // var stus =[{"name":"小欧","age":22},{"name":"小欧阳欧","age":22}];
               // var stu ={"name":"小欧","age":22};
               // console.info($.isArray(stus));

       //1.6$.parseJSON() 解析json格式的字符串--->js的小组/对象
               // var stuStr='["name":小胖,"age":21]';
           // 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":22},{"name":"小欧阳欧","age":22}]';
       //转换js对象数组
               // console.info($.type(stuStr))
           var stus=$.parseJSON(stusStr);
       //遍历对象数组
//                $.each(stus,function(a,b){
//                    console.info(b.name,b.age)
//                })

               //二属性和Css
//2.1 alert拿值取值
// var mpath= $("#aa").attr("width")
       // console.info(mpath);

               //设值
//                $("#aa").attr("src","img/1.jpg");
//                $("#aa").atte("width","200px");

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

               //2.3 addClass 动态增加样式
// $("#aa").addClass("xx"); //样式的叠加
               // $("#aa").attr("class","xx");//样式的替换

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

               //2.5 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.6html()和text9的区别
               // vae a = $("p").html();//会包含子标签
// console.info(a);
               // var b =$("p").text();//自会打印纯文本/
               // console.info(b);

       // 2.7val() 拿值设置
               //拿文本框我value值
               // var a =$("#wc").val();
               // console.info(a);
               //赋值
               // $("#wc").val("hhh");


               //css
               //1.设置值
               // $("p").css("backgrounp","red(111,11,111)");//单属性
               // $("p").css({"backgrounp":"yellow","color":"red"})//多属性
               //拿值
               var a = $("p").css("bckgrounp");
       console .info(a);
       })
       function myf(){
           alert(123);
       }

</script>
   </head>
   <body>
       <input type="text" value="舔狗" id="wc"/>
       <p>太可怜了吧你们<span>三个</span> </p>
       <img src="img/2.jpg" width="300px" id="aa" class="yy"/>
   <pre>





       </pre>
       <input type="button" value="全选" id="ok"/>

   <input type="button" value="取消全选" id="nook"/>
       <input type="checkbox" checked="checked" class="abc" value="打篮球" />打篮球
       <input type="checkbox" checked="checked" class="abc" value="听音乐" />听音乐
       <input type="checkbox" checked="checked" class="abc" value="干饭" />干饭
   <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>
       </table>
       <pre>












       </pre>


   </body>
</html>