jQuery02

最新推荐文章于 2022-05-31 17:21:19 发布

weixin_65128149

最新推荐文章于 2022-05-31 17:21:19 发布

阅读量838

点赞数

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

本文链接：https://blog.csdn.net/weixin_65128149/article/details/123591603

版权

jQuery 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
   <head>
       <meta charset="utf-8" />
       <title>jQuery02:$工具方法&属性css</title>
       <style type="text/css">
           .xx {
               border: solid red 5px;
           }

           .aaa {
               background-color: aqua;
           }

           .bbb {
               background-color: #FF0000;
           }
       </style>

               // 一 $工具方法
               //1.1 $.each()遍历数组对象的数据
               //定义对象{}
               // var stu={"name":"牛逼","age":38};
               //遍历对象
               // console.info(stu.name,stu.age);
               //                $.each(stu,function(i,p){//键值
               //                    console.info(p);
               //                })
               //定义数组[]
               // var names=["欧阳小钦","欧阳建敏","欧阳俊雄","欧阳老狗"]
               // $.each(names,function(i,p){
               //    console.info(p);
               // })

               //定义对象数组[{},{}]
               // var stu=[{"name":"大牛逼","age":38},{"name":"小牛逼","age":18}]
               //遍历对象数组
               //            $.each(stu,function(i,p){
               //                // console.info(p.name,p.age);//方式一
               //                $.each(p,function(l,k){//方式二
               //                    console.info(k);
               //                })
               //            })
               //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}]
               // console.info($.type(stus));

               //1.4 $.isFunction() 判断是否是函数
               // var stu={"name":"牛逼","age":38};
               // console.info($.isFunction(myf));
               //1.5 $.isArray() 判断是否是数组
               // var stus=[{"name":"大牛逼","age":38},{"name":"小牛逼","age":18}]
               // console.info($.isArray(stus))

               //1.6 $.parseJSON()解析json格式的字符串转为js的数组/对象
               // 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(i,p){
               //            console.info(p);
               // })

               // var stus='[{"name":"大牛逼","age":38},{"name":"小牛逼","age":18}]';
               // console.info($.type(stus));
               // var stu=$.parseJSON(stus);
               // console.info($.type(stu));
               // $.each(stu,function(i,p){
               //    // console.info(p);
               //
               //    $.each(p,function(l,o){
               //        console.info(o);
               //    })
               // })

               //二. 属性和css
               //2.1 attr()拿值设值
               //拿值获取值
               // var mpath=$("#aa").attr("src");//获取属性值
               // console.info(mpath);
               //设置属性值
               // $("#aa").attr("src","img/2.jpg");
               // $("#aa").attr("width","600px");

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

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

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

               //2.5
               // 给图片增加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()的区别
               //下面案列p是父亲 <span>是儿子 html()包含子标签
               //text()不包子标签
               // var a=$("p").html();
               // console.info(a);
               // var b=$("p").text();
               // console.info(b);

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

               //css
               //1.设置值
               $("p").css("background", "#D79B65"); //单属性
               // $("p").css({"background":"yellow","color":"red"});//多属性
               var a = $("p").css("background");
               console.info(a);
           })

           //            function myf(){
           //                alert(123);
           //            }
       </script>
   </head>
   <body>
       <input type="text" id="wc" />
       <p>心疼他们三个<span>一秒钟</span></p>
       <img src="img/1.jpg" width="300px" 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" 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>
           <tr>
               <td> </td>
               <td> </td>
           </tr>
           <tr>
               <td> </td>
               <td> </td>
           </tr>
       </table>

</body>
</html>

weixin_65128149

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jQuery02

<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title>jQuery02:$工具方法&属性css</title> <style type="text/css"> .xx { border: solid red 5px; ...
复制链接

扫一扫

专栏目录