jQuery2-动画、事件绑定、属性、位置

最新推荐文章于 2021-08-14 09:40:47 发布

咩有猫腻.

最新推荐文章于 2021-08-14 09:40:47 发布

阅读量118

点赞数

分类专栏： demo

本文链接：https://blog.csdn.net/DcTbnk/article/details/106714835

版权

demo 专栏收录该内容

15 篇文章 0 订阅

订阅专栏

jQuery动画：************************************************************
.stop()    停止当前动画，执行下次动画
.stop(true)   停止当前动画，清空动画序列
.stop(true,true)    立即完成当前动画，清空动画序列
.finish()   立即完成所有动画
事件绑定:************************************************************
.on('事件',function(){})  可以事件委托
.bind('事件',function(){})    不可以事件委托
两个事件绑定都可以添加多个事件
$('div').on('mouseover,mouseout',function(){})
.one('事件',function(){})  事件处理函数只执行一次
.trigger('事件')   模拟事件触发，匹配的事件会立即触发
$('div').on('click',function(){console.log(aa)})
$('div').trigger('click')
.hover(fn,fn)  移入移出事件
如果只有一个函数，则移入移出都会触发
两个函数，移入触发第一个，移出触发第二个
事件对象;
e.currentTarget：在事件冒泡阶段中的当前dom元素(绑定事件的元素)
e.target:最初触发事件的dom元素，经常用于事件委托(触发事件的元素)
属性:************************************************************
.html()   不加内容是获取，加内容是写入
.text()    同上
.val()    同上，用于表单元素
.css({width:"200px",height:"200px"})
.addClass()
.removeClass()
.prop(‘checked’)   适合布尔属性的获取
.attr()     适合除了布尔元素的获取
.prop('checked',true)   属性的设定
.attr('index',1)
位置：************************************************************
.offset()    距离页面
$('div').offset().left/top
.position()     距离定位父级
$('div').position().left/top

动画

<style>
      div {
        width: 300px;
        height: 300px;
        background: red;
      }
    </style>
  </head>
  <body>
    <!-- html -->
    <input type="button" value="停止" />
    <div></div>

    <!-- js -->
    <script src="jquery.js"></script>
    <script>
      $(function () {
        //animate()  stop()
        $("div").delay(5000).animate({ width: "500px" }, 2000);
        $("div").animate({ height: "500px" }, 2000);

        $("input").click(function () {
          // $("div").stop(); //停止当前动画，执行下次动画
          // $("div").stop(true);//停止当前动画，清空动画序列
          $("div").stop(true, true);//立即完成当前动画，清空动画序列
          // $("div").finish(); //立即完成所有动画
        });
      });
    </script>
  </body>

事件绑定

<style>
      #outer {
        width: 200px;
        height: 200px;
        background: red;
      }
      #inner {
        width: 100px;
        height: 100px;
        background: blue;
      }
    </style>
  </head>
  <body>
    <!-- html -->
    <input type="button" value="test" />
    <ul>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
    </ul>

    <div id="outer">
      <div id="inner"></div>
    </div>

    <!-- js -->
    <script src="jquery.js"></script>
    <script>
      $(function () {
        // 点击
        $("input").on("click", function () {
          console.log("aa");
        });
         $("input").bind("click mouseover", function () {
          console.log("aa");
        });
        // 删除
        $("input").off();
          $("input").unbind();//移除所有事件
        $("input").unbind("click");//移除某个事件（click）
        //支持事件委托
        $("ul").on("click", "li", function () {
          console.log($(this).index());
        });
        //不支持
        $("ul").bind("click", "li", function () {
          console.log($(this));
        });
        $("ul").append("<li>6</li>");
        //one 事件处理函数只执行一次
        $("input").one("click", function () {
          console.log("aa");
        });
        //trigger 模拟事件触发
        $("input").on("click", function () {
          console.log("aa");
        });
        $("input").trigger("click");
        //hover 移入移出  一个模仿悬停事件（鼠标移动到一个对象上面及移出这个对象）的方法。
         $("input").hover(
          function () {
            console.log("mouseover");
          },
          function () {
            console.log("mouseout");
          }
        );

        $("#inner").click(function (e) {
          console.log(e.target);            //   <div id="inner"></div>  最初触发事件的DOM元素。这是注册事件时的对象，或者它的子元素。通常用于比较 event.target 和 this 来确定事件是不是由于冒泡而触发的。经常用于事件冒泡时处理事件委托。
          console.log(e.currentTarget);     //   <div id="inner"></div> 在事件冒泡阶段中的当前DOM元素
          console.log("inner");             //  inner
          e.stopPropagation();              //  防止事件冒泡到DOM树上，也就是不触发的任何前辈元素上的事件处理函数。
        });
        $("#outer").click(function (e) {
          console.log(e.target);            //   <div id="outer"></div>
          console.log(e.currentTarget);     //   <div id="outer"></div>
          console.log("outer");             //   outer
        });
      });
    </script>

属性

<body>
    <!-- html -->
    <div class="test" data-id="1001" abc="abc"></div>
    <input type="text" />
    <input type="checkbox" />
    <ul>
      <li>
        <input type="checkbox" />
      </li>
      <li>
        <input type="checkbox" />
      </li>
      <li>
        <input type="checkbox" />
      </li>
    </ul>

    <!-- js -->
    <script src="jquery.js"></script>
    <script>
      $(function () {
        $("div").css({ width: "500px", height: "300px", background: "red" });

        $("div").html("<p>duanluo</p>");
        $("div").text("<p>duanluo</p>");
        $("[type=text]").val("<p>111</p>");

        $("ul").attr("class", "test");
        $("ul").attr("class", "test test1");

        $("ul").addClass("test");
        $("ul").addClass("test1");
        $("ul").removeClass("test");

        console.log($("div").attr("class"));
        console.log($("div").attr("data-id"));
        console.log($("div").attr("abc"));
        console.log($("input").attr("checked"));

        console.log($("div").prop("class"));
        console.log($("div").prop("data-id"));
        console.log($("div").prop("abc"));
        console.log($("input").prop("checked"));

        $("input").click(function () {
          console.log($("input").prop("checked"));
          console.log($("input").attr("checked"));
        });

        $("input:first").click(function () {
          $("li input").prop("checked", $(this).prop("checked"));
        });
        $("li input").click(function () {
          if ($("li input:checked").length === $("li input").length) {
            $("input:first").prop("checked", true);
          } else {
            $("input:first").prop("checked", false);
          }
        });
      });
    </script>
  </body>

位置

<style>
      body {
        height: 2000px;
      }
      #outer {
        position: relative;
        padding: 10px;
        border: 10px solid #ceceee;
        margin: 100px;
        width: 200px;
        height: 200px;
        background-color: red;
      }
      #inner {
        width: 100px;
        height: 100px;
        background-color: blue;
      }
    </style>
  </head>
  <body>
    <!-- html -->
    <div id="outer">
      <div id="inner"></div>
    </div>

    <!-- js -->
    <script src="jquery.js"></script>
    <script>
      $(function(){
        //offset() 距离页面
        console.log($("#outer").offset().left);      // 108
        console.log($("#outer").offset().top);       // 100

        console.log($("#inner").offset().left);      // 128
        console.log($("#inner").offset().top);       // 120

        //position() 距离定位父级
        console.log($("#inner").position().left);    // 10
        console.log($("#inner").position().top);     // 10

        console.log(
          $("#outer").width(),                 // 200  纯宽、不包含内边距、外边距
          $("#outer").innerWidth(),            // 220  宽加内边距
          $("#outer").outerWidth()             // 240  宽加内边距和外边距
        );

        $("#outer").width("1000px");
      });
    </script>

咩有猫腻.

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jQuery2-动画、事件绑定、属性、位置

动画<style> div { width: 300px; height: 300px; background: red; } </style> </head> <body>  <input type="button" value="停止" /> <div></div>
复制链接

扫一扫