jQuery02

最新推荐文章于 2024-07-22 15:13:59 发布

YL-IP.man

最新推荐文章于 2024-07-22 15:13:59 发布

阅读量806

点赞数

文章标签： jquery javascript java

本文链接：https://blog.csdn.net/qq_65186994/article/details/123599543

版权

<!DOCTYPE html>
<html>
   <head>
       <meta charset="utf-8" />
       <title></title>
       <style type="text/css">
           .xx{
               border: solid aqua 5px;

           }
           .aaa{
               background: #00FFFF;
           }
           .bbb{
               background-color: cornflowerblue;
           }

       </style>

   <script src="js/jquery-3.3.1.js" type="text/javascript" charset="utf-8"></script>
   <script type="text/javascript">
       $(function(){
           //一$工具方法
           //1.1$each()遍历数组.对象的数据
           //定义对象{}
           //var stu={"name":"牛逼","age":28};
           //遍历对象
           // 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(i);
           //})
           //定义对象数组 [{},{}]
           //var stus=[{"name":"牛逼","age":28},{"name":"马牛逼","age":58}];
           //遍历对象数组
           //$.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 names=["欧阳钦","欧阳建敏","欧阳俊雄","欧阳老狗"];
           //var stus=[{"name":"牛逼","age":28},{"name":"马牛逼","age":58}];
           //var stu={"name":"牛逼","age":28};
           //console.info($.type(stus));

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


           //1.6 parseJSON()解析json格式的字符串-->js的数组/对象
           //定义对象字符串
           // var stustr='{"name":"nb","age":14}';
           // 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(k,v);
//            })
           //定义对象数组的字符串
           //var stustr='[{"name":"牛逼","age":28},{"name":"马牛逼","age":58}]';
           //转成js对象数组
           // console.info($.type(stustr));
           //var stu= $.parseJSON(stustr);
           // console.info($.type(stu));
           //遍历对象数组
           //$.each(stu,function(k,v){
               //console.info(v.name,v.age);
           //})

           //二属性和css

           //2.1 attr() 拿值设值
           //var mpath= $("#aa").attr("src");
           //console.info(mpath);//拿值

           //设置值
           //$("#aa").attr("src","img/2.jpg")
           //$("#aa").attr("width","200px")

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

           // 2.3 addClass 动态增加样式叠加
           //$("#aa").addClass("xx");

           //会覆盖原有的class
           //$("#aa").attr("class","xx");


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

           // 2.5 prop() 给图片增加name值 prop适合使用在boolean类型时候
//            $("#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.7val() 拿值设值
//            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" name="" id="wc" value="" />
       <p>还好吧，<span>感觉还行</span>不是很好</p>
       <img src="img/1.jpg" width="300px" id="aa" class="yy">
       <hr >
   <input type="button" name="" id="ok" value="全选" />
   <input type="button" name="" id="nook" value="取消全选" /><br>
   <input type="checkbox" class="abc" name="" id="" value="植物大战僵尸" />植物大战僵尸
   <input type="checkbox" class="abc" name="" id="" value="打篮球" />打篮球
   <input type="checkbox" class="abc" name="" id="" value="干饭" />干饭
   <table border="1px" cellspacing="" cellpadding="" width="50px">
       <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>

YL-IP.man

关注

0
点赞
踩
0

收藏

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

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

扫一扫

jQuery02

“相关推荐”对你有帮助么？