jQuery-02

最新推荐文章于 2024-06-12 11:59:04 发布

昂761

最新推荐文章于 2024-06-12 11:59:04 发布

阅读量943

点赞数

文章标签： java

本文链接：https://blog.csdn.net/weixin_65088316/article/details/123599209

版权

<!DOCTYPE html>
<html>
   <head>
       <meta charset="utf-8">
       <title></title>
       <style tyoe="text/css">
           .xx{
               border:solid red 5px;
           }
           .aaa{
               background-color:#00FFFF;
           }
           .bbb{
               background-color:#FE6400;
           }
       </style>
       <script src="js/jquery-3.3.1.js" charset="utf-8" type="text/javascript" ></script>
       <script type="text/javascript">
           $(function(){
               //1.$工具方法
               //1.1 $.each()遍历数组. 对象的数据
               //定义对象{}
               // var stu={"name":"牛逼","age":18,
               // };
               // 遍历对象
               // console.info(stu.name,stu.age);
//                $.each(stu,function(k,v){
//                    console.info(v);
//                })

// 定义数组
//                var names=["欧阳小钦","欧阳建敏","欧阳俊雄","欧阳老狗"];
// // 遍历数组
//                $.each(names,function(i,n){下标,元素
//                    console.info(n);
//                })
//
// 1.1 //定义对象数组[{},{}]
// var stus=[{"name":"大牛逼","age":38},{"name":"小牛逼","age":18}];
//                //遍历对象数组
//
//                $.each(stus,function(i,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 stus=[{"name":"大牛逼","age":38},{"name":"小牛逼","age":18}];
// var stu={"name":"牛逼","age":18,
// };
// var str=1.5;
// console.info($.type(str));

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

           // 1.6$.parseJSON() 解析json格式的字符串--->js的数组/对象
           // 定义对象字符串
           // var stuStr='{"name":"牛逼","age":18,}';
// 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":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);
// })

// 2属性和CSS
// 2.attr()拿值和设值
// 1.拿值:attr("name","abc);

// $("#ok").click(function(){
// $(".abc").attr("checked",true);
// })
//
// $("#nook").click(function(){
// $(".abc").attr("checked",false);
// })

// attr("checked","bc)
}

// 案例3:优化表格隔行换色
// $("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.7val 设值拿值
// 拿文本框的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" id="wc"/>
       <img src="img/dd_culture_4.jpg" width="300px" id="aa" class="yy"/>
       <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" value="你妈大战你爸"/>你妈大战你爸</br>
       
       
       <input type="checkbox" class="bc" value="1" id="qx"/>1
       <input type="checkbox" class="bc" value="2"/ id="qxqx">2
       <input type="checkbox" class="bc" value="3"/>3
       <table border="1px" width="50%">
           <tr>
               <td>&nbsp</td>
               <td>&nbsp</td>
           </tr>
           <tr>
               <td>&nbsp</td>
               <td>&nbsp</td>
           </tr>
           <tr>
               <td>&nbsp</td>
               <td>&nbsp</td>
           </tr>
           <tr>
               <td>&nbsp</td>
               <td&nbsp</td>
           </tr>
           <tr>
               <td>&nbsp</td>
               <td>&nbsp</td>
           </tr>
           <tr>
               <td>&nbsp</td>
               <td>&nbsp</td>
           </tr>

       <pre>>



       </pre>
   </body>
</html>

---------------------------------------------------作业1---------------------------------------------------

昂761

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jQuery-02

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style tyoe="text/css"> .xx{ border:solid red 5px; } .aaa{...
复制链接

扫一扫