jQuery02:$工具方法$属性css

xx-03

于 2022-03-19 23:49:01 发布

阅读量54

点赞数 1

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

本文链接：https://blog.csdn.net/weixin_65736978/article/details/123605765

版权

jQuery 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
   <head>
       <meta charset="utf-8" />
       <title>jQuery02:$工具方法$属性css</title>
       <script src="js/jquery-3.3.1.js" type="text/javascript">
   <script type="text/javascript">
           $(function(){
               //$工具方法
               //1.1$.each()遍历数组,对象的数据
               //定义对象{}
               // var stu={"name":"牛逼","age":38};
               //遍历对象 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":38},{"name":"小牛逼","age":18}];
               //遍历对象数组
               // $.each(stus,function(1,s){
                   // console.info(s.name,s.age);方式一
                   // $.each(s,function(k,v){//方式二
                       // console.info(v);
                   // })
               // })
               //1.2 $.trim() 除前后空格
               //var str="zking";
               //console .info($.trim(str).length);

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

               // 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":18}];
               // console.info($.isArray(stus));

               //1.6 $.aprseJSon() 解析json格式的字符串--->js的数组/对象
               // var stuStr='{"name:牛逼","age":38}';
               // console.info($.type(stuStr));
               //--->对象
               // var stu=$.parseJSON(stuStr);
               // console.info($.type(stuStr));
               // console.info(stu.name,stu.age);
               // $.each(stu,function(k,v){
                   // console.info(v);
               // })
               //定义对象数组的字符串
               // var stus=[{"name":"大牛逼","age":38},{"name":"小牛逼","age":18}];
               // 转成js对象数组
               // console.info($.type(stuStr));
               // var stus=$.parseJSON(stusStr);
               //console.info($.type(stus));
               //遍历对象数组
               // $.each(stus,function(a,b){
                   // console.info(b.name,b.age)
               // })

               //二,属性和css
               //2.1 attr()拿值
               // var mpath=$("#aa").attr("width");
               // console.info(mapth);

               // $("#aa").attr("scr","img/1.jpg");
               // $("#aa").attr("width","200px");

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

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

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

           //案例3：优化表格隔行换色
           $("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("嗨害嗨");

           //CSS
           //1.设置值
           $("p").css("background","rgba(255,0,0,0.5)");//单属性
           // $("p").css("background"："red","color":pink"");//多属性

           //2.拿值
           var a =$("p").css("background");
           console.info(a);



           })
           function myf(){
               alert(123);
           }
       </script>
   </head>
   <body>
       <input type="text" id="wc" />
       <p>哇靠<span>55555555555</span></p>
       <img src="../../Html/Html_02/html02/img/10.jpg" width="300px" id="aa" class=yy />
       <input type="button" id="ok" value="全选" />
       <input type="button" id="nook" value="取消全选" />
       <input type="checkbox" class="abc" value="1" />1
       <input type="checkbox" class="abc" value="2" />2
       <input type="checkbox" class="abc" value="3" />3
       <pre>




       </pre>
       <table border="1px" width="50%">
           <tr><td> </td></tr>
           <tr><td> </td></tr>
           <tr><td> </td></tr>
           <tr><td> </td></tr>
           <tr><td> </td></tr>
       </table>
   </body>
</html>