jQuery_02

最新推荐文章于 2024-10-06 20:16:20 发布

T279liujie

最新推荐文章于 2024-10-06 20:16:20 发布

阅读量747

点赞数

分类专栏： java 文章标签： java

本文链接：https://blog.csdn.net/T279liujie/article/details/123598652

版权

java 专栏收录该内容

15 篇文章 0 订阅

订阅专栏

课堂代码

<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};
               //                $.each(stu,function(j,v){
               //                    console.info(v);
               // })
               //便利数组
               //                var names=["欧阳钦","欧阳建敏","欧阳俊雄","欧阳老狗"];
               //                $.each(names,function(i,n){
               //                    console.info(n);
               //                })
               //便利对象数组
               //                var stus=[{"name":"大牛逼","age":38},{"name":"小牛逼","age":18}];
               //                $(stus,function(i,s){
               //                    console.info(i,s);
               //                })

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

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

               //1.4 1.5
               // $.isFunction(); 判断是否是函数
               // $.isArray(); 判断是否是数组

               //1.6 $.parseJSON() 对象字符串转成对象
               //                var stuStr='{"name":"牛逼","age":38}';
               //                var stu= $.parseJSON(stuStr);
               //                // console.info(stu.name,stu.age);
               //                $.each(stu,function(k,v){
               //                    console.info(v);
               //                })

               //定义对象数组字符串
               //                var stusStr='[{"name":"大牛逼","age":38},{"name":"小牛逼","age":18}]';
               //                var stus=$.parseJSON(stusStr);
               //                $.each(stus,function(i,n){
               //                    $.each(n,function(j,v){
               //                        console.info(v);
               //                    })
               //                })

//二,属性和css

//拿值
// console.info($("#aa").attr("src"))

               //设值
               //            $("#aa").attr("src","img/login.gif")
               //            $("#aa").attr("width","500px")

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

//2.3 动态增加央视
// $("#aa").addClass("xx");

//2.4 removeClass()
// $("#aa").removeClass("xx");

               //prop 和 attr 的区别
//                $("#ok").click(function() {
//
//                    $(".abc").prop("checked", true)
//
//                })
//                $("#nook").click(function() {
//                    $(".abc").prop("checked", false)
//                })

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

               //CSS
               //1.设置值
               // $("p").css("background","rad")
           })
       </script>
   </head>
   <body>
       <img src="img/backbg.jpg" width="300px" id="aa">
       <input type="button" id="ok" value="全选" />
       <input type="button" id="nook" value="取消全选" />
       <input type="checkbox" class="abc" value="植物大战僵尸" />植物大战僵尸
       <input type="checkbox" class="abc" value="植物大战僵尸" />植物大战僵尸
       <input type="checkbox" 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>

作业

<title>作业一</title>
       <script src="js/jquery-3.3.1.js" type="text/javascript" charset="utf-8"></script>
       <script type="text/javascript">
           $(function() {
               var qx=$("#aa");
               var cs=$(".bb");
               qx.click(function() {
                   if (qx.prop("checked") == true) {
                       cs.prop("checked", true)
                   } else {
                       cs.prop("checked", false)
                   }
               })
               cs.click(function(){
                   var f=true;
                   $.each(cs,function(i,c){
                       .checked){

                       if(!c
                           f=false;
                       }
                   })
                   qx.prop("checked",f);
               })

           })
       </script>
   </head>
   <body>
       <input type="checkbox" id="aa" />全选
       <input type="checkbox" class="bb" />
       <input type="checkbox" class="bb" />
       <input type="checkbox" class="bb" />
   </body>
</html>