jQuery替代JavaScript的DOM对象操作

最新推荐文章于 2024-07-26 11:41:15 发布

weixin_30586085

最新推荐文章于 2024-07-26 11:41:15 发布

阅读量44

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/zhaotao11/p/9987952.html

版权

<!DOCTYPE html>
<html>
   <head>
       <meta charset="UTF-8">
       <title></title>
       <script src="jquery-3.3.1.js"></script>                   
   </head>
   <body>
       <div id="asd" class"1"></div>
       <div class="a"></div>
       <div></div>
       <input type="text" id="zxc" value="aaa">
       <div class="zxc">收齐1</div>
       <div class="zxc">收齐2</div>
       <div class="zxc">收齐3</div>
       <div class="zxc">收齐4</div>
       <div class="zxc">收齐5</div>
       <div class="zxc">收齐6</div>
       <div class="zxc">收齐7</div>
       <div class="zxc">收齐8</div>
       <input onClick="aaa()" type="button" value="aaa">
       <input onClick="vvv()" type="button" value="vvv">
       <input onClick="ccc()" type="button" value="ccc">
   </body>
   <script>
       $("#A")           /*id选择器*/
       $(".a")           /*class选择器*/
       $("div")       /*标签选择器*/
       $("[属性名='属性值']")
       $("input:checkbox[name='qwer']:checked")
       $("#asd").html();       /*获取全部内容*/
       $("#asd").html("asd");   /*改变全部内容*/
       $("#asd").text();       /*获取文本内容*/
       $("#asd").text("asd");   /*改变文本内容*/
       $("#zxc").val();       /*获取value值*/
       $("#zxc").val("123");   /*改变value值*/
       $("#asd").attr("bs","123");/*增加更改属性的值*/
       $("#asd").attr("class");/*获取属性的值*/
       $("#asd").removeAttr("class");/*删除属性的值*/
       $("#asd").css("width"); /*获取样式*/
       $("#asd").css("width","800px");    /*改变样式 */
       $("#asd").css("background-color","red"); /*书写方式和CSS一样*/
       $(".zxc").html("123");       /*全部赋值和改样式*/
       $(".zxc").css("display","none");
       var a = $(".zxc");           /*给第一个赋值*/
       var b = a.eq(0).html("123");
       $("#asd").hide();       /*隐藏*/
       $("#asd").show();       /*显示*/
                                                       /*部分动画效果*/
       function aaa(){
           $("#asd").fadeOut(2000);       /*淡出*/
       }
       function vvv(){
           $("#asd").fadeIn(2000);           /*淡入*/
       }
       function ccc(){
           $("#asd").fadeToggle(2000);       /*淡入淡出一个按钮控制*/
       }
       function aaa(){
           $("#asd").fadeTo(2000,0.4);       /*到多少透明度停止*/
       }


       function aaa(){
           $("#asd").slideDown();           /*下滑*/
       }
       function vvv(){
           $("#asd").slideUp();           /*上滑*/
       }
       function ccc(){
           $("#asd").slideToggle();        /*一个按钮控制滑动*/
       }


       function aaa(){
           $("#asd").animate({               /*变形动画*/
               "width":'250px',
               "height":'100px',
               "opacity":'0.3',
               "margin-left": "300px"
           });
       }
   </script>
</html>

转载于:https://www.cnblogs.com/zhaotao11/p/9987952.html

weixin_30586085

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jQuery替代JavaScript的DOM对象操作

<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <script src="jquery-3.3.1.js"></script> &...
复制链接

扫一扫