zoukankan      html  css  js  c++  java
  • jQuery操作css样式、属性、动画、节点

    css样式操作:

      1、设置单个样式: css(name, value)

      2、设置多个样式:css(obj)

      3、获取样式:css(name)

    <!DOCTYPE html>
    <html lang="zh-CN">
    <head>
      <meta charset="UTF-8">
      <title>Title</title>
    </head>
    <body>
    
    <ul>
      <li>高圆圆</li>
      <li>周二珂</li>
      <li>冯提莫</li>
      <li>郑爽</li>
    </ul>
    
    <script src="jquery-1.12.4.js"></script>
    <script>
      
      $(function () {
        
        
        //css(name, value)
        //修改单个样式
        //name:样式名 value:样式值
        /*
        $("li")
          .css("backgroundColor", "pink")
          .css("color", "red")
          .css("fontSize", "32px");
        */
        
        //css(obj)
        //修改多个样式
        /*
        $("li").css({
          backgroundColor:"pink",
          color: "red",
          fontSize:"32px",
          border: "1px solid black"
        });
        */
        //获取样式
        //css(name)
        //name:想要获取的样式
        $("li").eq(0).css("fontSize", "20px");
        $("li").eq(1).css("fontSize", "21px");
        $("li").eq(2).css("fontSize", "22px");
        $("li").eq(3).css("fontSize", "23px");
        
        //A:20  b:21  c:22   d:23  e:16  f:[20, 21, 22, 23]
        
        
        //隐式迭代:
          // 设置操作的时候:会给jq内部的所有对象都设置上相同的值。
          // 获取的时候:只会返回第一个元素对应的值。
        console.log($("li").css("fontSize"));//16px
      
      
      });
      
    </script>
    </body>
    </html>

    class样式操作:

      1、添加类

        addClass(name)

      2、移除类

        removeClass(name)

      3、判断类

        hasClass(name)

      4、切换

        toggleClass(name)

    <!DOCTYPE html>
    <html lang="zh-CN">
    <head>
      <meta charset="UTF-8">
      <title>Title</title>
      <style>
        li.basic {
          background-color: pink;
          font-size: 32px;
          color: red;
        }
        
        .bigger {
          font-size: 40px;
        }
      </style>
    </head>
    <body>
    <input type="button" value="添加basic类" >
    <input type="button" value="添加bigger类">
    <input type="button" value="移除bigger类">
    <input type="button" value="判断bigger类">
    <input type="button" value="切换类">
    <ul>
      <li class="aa bb cc dd">1</li>
      <li class="aa bb cc dd">2</li>
      <li class="aa bb cc dd">3</li>
      <li class="aa bb cc dd">4</li>
    </ul>
    
    
    <script src="jquery-1.12.4.js"></script>
    <script>
      $(function () {
        
        $("input").eq(0).click(function () {
          
          // 添加一个类
          $("li").addClass("basic");
        });
      
        $("input").eq(1).click(function () {
          $("li").addClass("bigger");
        });
        
        
        $("input").eq(2).click(function () {
          
          //移除一个类
          $("li").removeClass("bigger");
        });
        
        //判断类
        $("input").eq(3).click(function () {
        
          //移除一个类
          console.log($("li").hasClass("bigger"));;
        });
      
      
        $("input").eq(4).click(function () {
        
          //判断li有没有basic类,如果有,就移除他,如果没有,添加他
          //toggle
          $("li").toggleClass("basic");
        });
      });
    </script>
    </body>
    </html>

    操作属性

      1、attr

        设置单个属性

        设置多个属性

        获取属性

      2、prop

        对于布尔类型的属性:disabled,selected,checked,只能用prop

      3、移除某个属性

        removeAttr(name)

    <!DOCTYPE html>
    <html lang="zh-CN">
    <head>
      <meta charset="UTF-8">
      <title>Title</title>
    </head>
    <body>
    
    <!--样式:在style里面写的,用css来操作。-->
    <!--属性:在里面里面写的,用attr方法操作。-->
    <img src="04.gif" alt="突破了" title="对对对">
    
    <script src="jquery-1.12.4.js"></script>
    <script>
      $(function () {
        
        
        //用法和css一样
        //设置单个属性
        //attr(name, value)
        //$("img").attr("alt", "图破了");
        //$("img").attr("title", "错错错错");
        
        //设置多个属性
        /*$("img").attr({
          alt:"图破了",
          title:"错错错",
          aa:"bb"
        })*/
      
      
        console.log($("img").attr("alt"));
      
      });
    </script>
    
    </body>
    </html>
    <!DOCTYPE html>
    <html lang="zh-CN">
    <head>
      <meta charset="UTF-8">
      <title>Title</title>
    </head>
    <body>
    
    
    <input type="button" value="选中">
    <input type="button" value="不选中">
    <input type="checkbox" id="ck">
    
    <script src="jquery-1.12.4.js"></script>
    <script>
      
      
      //对于布尔类型的属性,不要attr方法,应该用prop方法 prop用法跟attr方法一样。
      $(function () {
        $("input").eq(0).click(function () {
          $("#ck").prop("checked", true);
        });
      
        $("input").eq(1).click(function () {
          $("#ck").prop("checked", false);
        });
      });
    </script>
    
    
    </body>
    </html>

    动画

      1、三组基本动画

      show/hide  slideDown/slideUp/slideToggle  fadeIn/fadeOut/fadeToggle

      2、自定义动画

      animate(prop, [speed], [swing/linear], [callback])

      3、停止动画

      stop

    <!DOCTYPE html>
    <html lang="zh-CN">
    <head>
      <meta charset="UTF-8">
      <title>Title</title>
      <style>
        div {
          width: 400px;
          height: 400px;
          background-color: pink;
          display: none;
        }
      </style>
    </head>
    <body>
    <input type="button" value="显示">
    <input type="button" value="隐藏">
    
    <div></div>
    
    <script src="jquery-1.12.4.js"></script>
    <script>
      $(function () {
        
        $("input").eq(0).click(function () {
          
          //show不传参数,没有动画效果
          //$("div").show();
          
          //show(speed)
          //speed:动画的持续时间  可以是毫秒值 还可以是固定字符串
          //fast:200ms   normal:400ms   slow:600
          //$("div").show("ddd");
        
          // show([speed], [callback])
          $("div").show(1000, function () {
            console.log("哈哈,动画执行完成啦");
          })
          
        });
        
        
        $("input").eq(1).click(function () {
          $("div").hide();
        })
        
      });
    </script>
    </body>
    </html>
    <!DOCTYPE html>
    <html lang="zh-CN">
    <head>
      <meta charset="UTF-8">
      <title>Title</title>
      <style>
        div {
          width: 100px;
          height: 100px;
          background-color: pink;
          position: absolute;
        }
        #box2 {
          background-color: blue;
          margin-top: 150px;
        }
        
        #box3 {
          background-color: yellowgreen;
          margin-top: 300px;
        }
      </style>
    </head>
    <body>
    <input type="button" value="开始">
    <input type="button" value="结束">
    <div id="box1"></div>
    <div id="box2"></div>
    <div id="box3"></div>
    
    <script src="jquery-1.12.4.js"></script>
    <script>
      $(function () {
        $("input").eq(0).click(function () {
          
          //第一个参数:对象,里面可以传需要动画的样式
          //第二个参数:speed 动画的执行时间
          //第三个参数:动画的执行效果
          //第四个参数:回调函数
          $("#box1").animate({left:800}, 8000);
          
          //swing:秋千 摇摆
          $("#box2").animate({left:800}, 8000, "swing");
          
          //linear:线性 匀速
          $("#box3").animate({left:800}, 8000, "linear", function () {
            console.log("hahaha");
          });
        })
      });
    </script>
    </body>
    </html>
    <!DOCTYPE html>
    <html lang="zh-CN">
    <head>
      <meta charset="UTF-8">
      <title>Title</title>
      <style>
        div {
          width: 100px;
          height: 100px;
          background-color: pink;
          position: absolute;
        }
      </style>
    </head>
    <body>
    <input type="button" value="按钮" id="btn">
    <div></div>
    
    <script src="jquery-1.12.4.js"></script>
    <script>
      $(function () {
        $("#btn").click(function () {
          
          //把这些动画存储到一个动画队列里面
          $("div").animate({left:800})
            .animate({top:400})
            .animate({300,height:300})
            .animate({top:0})
            .animate({left:0})
            .animate({100,height:100})
        })
      });
    </script>
    </body>
    </html>
    <!DOCTYPE html>
    <html lang="zh-CN">
    <head>
      <meta charset="UTF-8">
      <title>Title</title>
      <style>
        div {
          width: 400px;
          height: 400px;
          background-color: pink;
          display: none;
        }
      </style>
    </head>
    <body>
    <input type="button" value="开始">
    <input type="button" value="结束">
    <div></div>
    
    <script src="jquery-1.12.4.js"></script>
    <script>
      $(function () {
        $("input").eq(0).click(function () {
          $("div").slideDown(4000).slideUp(4000);
        });
        
        
        $("input").eq(1).click(function () {
          //stop:停止当前正在执行的动画
          //clearQueue:是否清除动画队列 true  false
          //jumpToEnd:是否跳转到当前动画的最终效果 true false
          
          
          //.stop().animate();
          $("div").stop(true, true);
        })
      });
    </script>
    </body>
    </html>

    操作节点:

      1、创建节点:$("<span></span>")

      2、添加节点: append  appendTo  prepend  prependTo  after  before

      3、清空内容: empty

      4、删除节点: remove

      5、克隆节点: clone

    <!DOCTYPE html>
    <html lang="zh-CN">
    <head>
      <meta charset="UTF-8">
      <title>Title</title>
      <style>
        div {
          width: 400px;
          height: 400px;
          background-color: pink;
        }
      </style>
    </head>
    <body>
    <!--<a href="http://web.itcast.cn" target="_blank">传智大前端</a>-->
    <div id="box"></div>
    
    
    <script src="jquery-1.12.4.js"></script>
    <script>
      $(function () {
    //    var box = document.getElementById("box");
    //
    //    var a = document.createElement("a");
    //    box.appendChild(a);
    //    a.setAttribute("href", "http://web.itcast.cn");
    //    a.setAttribute("target", "_blank");
    //    a.innerHTML = "传智大前端";
        
        $("#box").append('<a href="http://web.itcast.cn" target="_blank">传智大前端</a>');
        
      });
    </script>
    </body>
    </html>
    <!DOCTYPE html>
    <html lang="zh-CN">
    <head>
      <meta charset="UTF-8">
      <title>Title</title>
      <style>
        div {
          width: 400px;
          height: 400px;
          background-color: pink;
        }
      </style>
    </head>
    <body>
    
    <div id="box">
      我是内容
    </div>
    
    <p>我是外面的p元素</p>
    
    <script src="jquery-1.12.4.js"></script>
    <script>
      $(function () {
        
        
    //    //创建jq对象
    //    var $li = $('<a href="http://web.itcast.cn" target="_blank">传智大前端</a>');
    //    console.log($li);
    //
    //
    //    $("div").append('<a href="http://web.itcast.cn" target="_blank">传智大前端</a>');
        
        //添加到子元素的最后面
        //$("div").append($("p"));
        //$("p").appendTo($("div"));
        
        //$("div").prepend($("p"));
        //$("p").prependTo($("div"));
        
    //    $('div').after($("p"));
    //    $('div').before($("p"));
        
        
      });
    </script>
    
    </body>
    </html>
    <!DOCTYPE html>
    <html lang="zh-CN">
    <head>
      <meta charset="UTF-8">
      <title>Title</title>
      <style>
        div {
          width: 400px;
          height: 400px;
          background-color: pink;
        }
      </style>
    </head>
    <body>
    
    <div>
      <p>1111</p>
      <p>2222</p>
    </div>
    
    <p class='des'>我是外面的p元素</p>
    
    
    <script src="jquery-1.12.4.js"></script>
    <script>
      $(function () {
        
        
        $(".des").click(function () {
          alert("hehe");
        })
        
        //可以清空一个元素的内容
        
        //内存泄露:
        //$("div").html("");
        //清理门户()
        //$("div").empty();
        
        //
        //$("div").remove();
      
      
        
        //false:不传参数也是深度复制,不会复制事件
        //true:也是深复制,会复制事件
        $(".des").clone(true).appendTo("div");
      });
    </script>
    </body>
    </html>
  • 相关阅读:
    Django:重定向
    Django:使用get_template、render实现读取数据并传递数据
    Django:读入html中的数据
    Django:urls配置路由地址
    Django:基础知识-创建模块
    HTMLTestRunner美化
    python2 selenium
    Jmeter检查点
    Jmeter集合点
    jmeter的三种参数化方式
  • 原文地址:https://www.cnblogs.com/cuilichao/p/9815888.html
Copyright © 2011-2022 走看看