jQuery学习记录四

最新推荐文章于 2024-01-20 21:49:50 发布

毋十三

最新推荐文章于 2024-01-20 21:49:50 发布

阅读量148

点赞数

本文链接：https://blog.csdn.net/qq_34117624/article/details/83106022

版权

元素的事件绑定

*如果是先创建元素,再为这个子元素绑定事件, 后面再创建的子元素,没有事件

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>title</title>
  <style>
    div{
      width: 300px;
      height: 200px;
      background-color: green;
    }
    p{
      width: 100px;
      height: 30px;
      background-color: red;
      cursor: pointer;
    }
  </style>
  <script src="jquery-1.12.1.js"></script>
  <script>
    //点击按钮为div中添加一个子元素,并且子元素有点击的事件
    $(function () {
      //第一个按钮
      $("#btn").click(function () {
        $("<p>这是一个p</p>").appendTo($("#dv"));
        //先创建,后绑定的事件是可以用的
//        $("p").click(function () {
//          alert("哈哈");
//        });

        //同上
//        $("p").bind("click",function () {
//          alert("哈哈");
//        });

        $("#dv").delegate("p","click",function () {
          alert("哈哈");
        });
      });

      $("#btn2").click(function () {
        后添加的----->没有绑定效果的
        $("<p>这是一个p2</p>").appendTo($("#dv"));
      });
    });
  </script>
</head>
<body>
<input type="button" value="绑定事件" id="btn"/>
<input type="button" value="绑定事件" id="btn2"/>
<div id="dv"></div>

</body>
</html>

有一种绑定事件的方式：同delegate() 父元素点击，为子元素添加点击事件

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>title</title>
  <style>
    div{
      width: 300px;
      height: 200px;
      background-color: green;
    }
    p{
      width: 100px;
      height: 30px;
      background-color: red;
      cursor: pointer;
    }
    </style>
  <script src="jquery-1.12.1.js"></script>
  <script>
    $(function () {
      //点击按钮为div绑定事件

      //此时on和delegate的作用是一样的,但是参数的顺序是不一样
      $("#btn").click(function () {
        $("<p>这是一个p</p>").appendTo($("#dv"));
        //和delegate是一样,都是在为子元素绑定事件
        $("#dv").on("click","p",function () {
          alert("p被点击了");
        });
      });
    });
  </script>
</head>
<body>
<input type="button" value="绑定事件" id="btn"/>
<input type="button" value="绑定事件" id="btn2"/>
<div id="dv"></div>
</body>
</html>

不同绑定事件的区别

    * 对象.事件名字(事件处理函数);--->普通的写法
    * 对象.bind(参数1,参数2);---->参数1:事件的名字,参数2:事件处理函数
    * 前两种方式只能为存在的元素绑定事件,后添加的元素没有事件
    *
    * 下面的两种方式,可以为存在的元素绑定事件,后添加的元素也有事件
    * 对象.delegate("选择器","事件名字",事件处理函数);
    * 父级元素调用方法,代理子级元素绑定事件
    * 对象.on("事件名字","选择器",事件处理函数);
    * 父级元素调用方法,代理子级元素绑定事件
    *
    * 因为delegate方法中是调用的on的方法
    * 所以,以后直接用on就可以了

解除绑定的方法

      //用什么方式绑定事件,最好用对应的方式解绑事件
      //bind括号中写什么事件的名字就会把这个事件解绑,会把这个元素的这个点击的多个事件都会解绑
      //对象.click()这种方式添加的事件也可以使用unbind解绑
      //括号中没有任何参数,此时该元素的所有的事件全部解绑
      //同时解绑多个事件---每个事件的名字中间用空格即可

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>title</title>
  <style>
    div{
      width: 300px;
      height: 200px;
      background-color: green;
    }
    p{
      width: 100px;
      height: 30px;
      background-color: red;
      cursor: pointer;
    }
  </style>
  <script src="jquery-1.12.1.js"></script>
  <script>
    $(function () {
      //第一个按钮为div绑定事件
      $("#btn").click(function () {
//        //div的点击事件
        $("#dv").bind("click",function () {
          console.log("div被点了");
        }).bind("click",function () {
          console.log("div点第二个点击");
        });
        //鼠标进入
        $("#dv").bind("mouseenter",function () {
          $(this).css("backgroundColor","blue");
        });
        //鼠标离开
        $("#dv").bind("mouseleave",function () {
          $(this).css("backgroundColor","yellow");
        });

//        $("#dv").click(function () {
//          console.log("哈哈");
//        });


      });
      //第二个按钮为div解绑事件
      $("#btn2").click(function () {
        //解绑的是点击事件,所有的点击事件全部移除
        //$("#dv").unbind("click");
        //括号中没有任何参数,此时该元素的所有的事件全部解绑
        //$("#dv").unbind();
        //同时解绑多个事件
        //$("#dv").unbind("mouseenter mouseleave");
      });
    });
  </script>
</head>
<body>
<input type="button" value="绑定事件" id="btn"/>
<input type="button" value="解绑事件" id="btn2"/>
<div id="dv"></div>

</body>
</html>

通过delegate()绑定事件的解绑方法

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>title</title>
  <style>
    div{
      width: 300px;
      height: 200px;
      background-color: green;
    }
    p{
      width: 100px;
      height: 30px;
      background-color: red;
      cursor: pointer;
    }
  </style>
  <script src="jquery-1.12.1.js"></script>
  <script>
    $(function () {
      //delegate绑定事件对应的方式的解绑方式

      //点击第一个按钮,div有自己的点击事件,有鼠标进入和鼠标离开事件
      //同时为p绑定点击事件

      $("#btn").click(function () {
        //为div绑定事件
        $("#dv").click(function () {
          console.log("div被点了");
        }).mouseenter(function () {
          console.log("鼠标进来了");
        }).mouseleave(function () {
          console.log("鼠标离开了");
        });
        //在div中创建一个p,同时绑定点击事件
        $("<p>这是一个p</p>").appendTo($("#dv"));
        //为p绑定事件
        $("#dv").delegate("p","click",function () {
          console.log("啊~p被点了");
        });
        $("#dv").delegate("p","mouseenter",function () {
          console.log("p的鼠标进入");
        });
      });
      //第二个按钮解绑事件
      $("#btn2").click(function () {
        //p的点击事件没有了,移除了p的所有的事件
        //$("#dv").undelegate();
        //移除的是p的点击事件
        $("#dv").undelegate("p","click");
        //可以移除多个事件,但是每个事件之间用空格隔开
        $("#dv").undelegate("p","click mouseenter");
      });
    });
  </script>
</head>
<body>
<input type="button" value="绑定事件" id="btn"/>
<input type="button" value="解绑事件" id="btn2"/>
<div id="dv">

</div>

</body>
</html>

案例：为表格动态添加一行

*JavaScript代码都很简单，尤其加了jQuery之后，HTML和CSS不熟看起来困难。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>title</title>
    <link rel="stylesheet" href="checkDemo.css">
    <script src="jquery-1.12.2.js"></script>
    <script>
        $(function () {
            /*添加框的显示与隐藏*/
            $('#j_btnAddData').click(function () {
                $('#j_formAdd').show();
                $('#j_mask').show();
            });
            function closeKuang() {
                $('#j_formAdd').hide();
                $('#j_mask').hide();
            }
            $('#j_hideFormAdd').click(function () {
                closeKuang();
            });
            /*添加行操作的实现*/
            $('#j_btnAdd').click(function () {
                var j_txtLesson=$('#j_txtLesson');
                var j_txtBelSch=$('#j_txtBelSch');
                $('<tr><td>'+j_txtLesson.val()+'</td><td>'+j_txtBelSch.val()+'</td><td><a href="#">GET</a></td></tr>').appendTo($('#j_tb'));
                closeKuang();
                j_txtLesson.val("");
                j_txtBelSch.val("这就是命");
            });
            /*点击get移除一个*/
            $('#j_tb').on('click','.get',function () {
                $(this).parent().parent().remove();
            });
        });
    </script>
</head>
<body>
<div class="wrap">
    <div>
        <input type="button" value="添加数据" id="j_btnAddData" class="btnAdd">
    </div>
    <table>
        <thead>
            <tr>
                <th>课程名称</th>
                <th>所属学院</th>
                <th>已学会</th>
            </tr>
        </thead>
        <tbody id="j_tb">
            <tr>
                <td>JavaScript</td>
                <td>前端移动开发</td>
                <td><a href="javascript:;" class="get">GET</a></td>
            </tr>
            ...多个行...
        </tbody>
    </table>
</div>
<div id="j_mask" class="mask"></div>
<div id="j_formAdd" class="form-add">
    <div class="form-add-title">
        <span>添加数据</span>
        <div id="j_hideFormAdd">x</div>
    </div>
    <div class="form-item">
        <label class="lb" for="j_txtLesson">课程名称：</label>
        <input class="txt" type="text" id="j_txtLesson" placeholder="请输入课程名称">
    </div>
    <div class="form-item">
        <label class="lb" for="j_txtBelSch">所属学院：</label>
        <input class="txt" type="text" id="j_txtBelSch" value="传智播客-前端与移动开发学院">
    </div>
    <div class="form-submit">
        <input type="button" value="添加" id="j_btnAdd">
    </div>
</div>
</body>
</html>

事件冒泡现象，以及事件冒泡的阻止方法

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>title</title>
  <style>
    #dv1 {
      width: 300px;
      height: 200px;
      background-color: red;
    }

    #dv2 {
      width: 250px;
      height: 150px;
      background-color: green;
    }

    #dv3 {
      width: 200px;
      height: 100px;
      background-color: blue;
    }
  </style>
  <script src="jquery-1.12.1.js"></script>
  <script>
    $(function () {
      $("#dv1").click(function () {
        //为什么是undefined
        //对象.id----->DOM中的
        console.log($(this).attr("id"));
      });
      $("#dv2").click(function () {
        console.log($(this).attr("id"));
      });
      $("#dv3").click(function () {
        console.log($(this).attr("id"));
        return false;
      });
    });

//    document.getElementById("btn").onclick=function (e) {
//      e.stopPropagation();
//      window.event.cancelBubble=true;
//    };
  </script>
</head>
<body>

<div id="dv1">
  <div id="dv2">
    <div id="dv3">

    </div>
  </div>
</div>
</body>
</html>

时间的触发

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>title</title>
  <script src="jquery-1.12.1.js"></script>
  <script>
    $(function () {
      //文本框添加获取焦点的事件
      $("#txt").focus(function () {
        console.log("我的获取焦点的事件触发了");
        //设置当前元素的下一个兄弟元素中显示一个提示信息
        $(this).next("span").text("文本框获取焦点了");
      });

      //按钮的点及事件
      $("#btn").click(function () {
        //调用文本框的获取焦点的事件---第一种方式让别的元素的事件触发
        //对象.事件名字();
        //$("#txt").focus();
        //第二种触发事件的方式
        //$("#txt").trigger("focus");//触发的意思
        //这种方式可以触发该事件,但是,不能触发浏览器的默认的行为(就是文本无法获得焦点)
        $("#txt").triggerHandler("focus");
      });
    });
  </script>
</head>
<body>
<input type="button" value="我也要触发文本框的获取焦点的事件" id="btn"/>
<input type="text" value="" id="txt" /><span id="sp"></span>

</body>
</html>

事件的参数对象

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>title</title>
  <style>
    div{
      width: 300px;
      height: 200px;
      background-color: red;
    }
  </style>
  <script src="jquery-1.12.1.js"></script>
  <script>
    $(function () {
      //事件参数对象
      $("#dv").mousedown(function (e) {
        console.log(arguments.length);  1
        console.log(e);
        //获取的是鼠标的按键的值
        console.log(e.button);    0
      });
    });
  </script>
</head>
<body>
<div id="dv"></div>
</body>
</html>

键盘状态的获取

*注：先按下键盘在按鼠标，不然事件触发过早

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>title</title>
  <style>
    div{
      width: 200px;
      height: 100px;
      background-color: red;
    }
  </style>
  <script src="jquery-1.12.1.js"></script>
  <script>
    $(function () {
      $(document).mousedown(function (e) {
        //判断用户按下鼠标的时候,有没有按下alt键
       //console.log(e.altKey);
        if(e.altKey){
          //用户按下了alt键的同时也按下鼠标了
          console.log("按下了alt键,鼠标也按下了");
        }else if(e.shiftKey){
          //用户按下了shift键,同时按下鼠标
          console.log("按下了shift键,鼠标也按下了");
        }else if(e.ctrlKey){
          //用户按下了ctrl键,同时按下鼠标
          console.log("按下了ctrl键,鼠标也按下了");
        }else{
          console.log("用户按下了鼠标");
        }
      });
    });
  </script>
</head>
<body>
<div id="dv"></div>
</body>
</html>

案例：点击键盘修改背景颜色

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>title</title>
  <style>
    div{
      width: 800px;
      height: 600px;
      background-color: gray;
      background-color: ;
    }
  </style>
  <script src="jquery-1.12.1.js"></script>
  <script>
    $(function () {
      //用户在页面按键,可以改变div的背景颜色
      $(document).keydown(function (e) {
        switch (e.keyCode){
          case 65:$("#dv").css("backgroundColor","red");break;
          case 66:$("#dv").css("backgroundColor","green");break;
          case 67:$("#dv").css("backgroundColor","blue");break;
          case 68:$("#dv").css("backgroundColor","orange");break;
          case 69:$("#dv").css("backgroundColor","yellow");break;
          case 70:$("#dv").css("backgroundColor","deeppink");break;
          case 71:$("#dv").css("backgroundColor","hotpink");break;
          case 72:$("#dv").css("backgroundColor","oranged");break;
          case 73:$("#dv").css("backgroundColor","black");break;
          case 74:$("#dv").css("backgroundColor","white");break;
          case 75:$("#dv").css("backgroundColor","yellowgreen");break;
        }
      });
    });
  </script>
</head>
<body>
<div id="dv"></div>
</body>
</html>

链式编程的原理

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>title</title>
  <script src="jquery-1.12.1.js">
  </script>
  <script>
//    $(function () {
//      //为按钮注册点击事件
//      $("#btn").click(function () {
//        //$(this).val("哈哈").val("嘎嘎");
//        //console.log( );
//
//        //对象.方法();调用,如果返回来的还是对象,那么可以继续的调用方法
//      });
//    });


    function Person(age) {
      this.age=age;
      this.sayHi=function (txt) {
        if(txt){
          console.log("您好啊:"+txt);
          return this;
        }else{
          console.log("您好啊");
        }
      };
      this.eat=function () {
        console.log("中午就吃了一个馒头和咸菜");
        return this;
      };
    }
    //对象
     var per=new Person(10);
     per.sayHi("嘎嘎").eat();
    //per.sayHi().eat().sayHi().eat().eat().sayHi();
    //console.log();



    //方法();----获取这个值,如果.方法(值)--->当前的对象
    //val();---返回的是value属性的值, val("fdds");---当前的对象
  </script>
</head>
<body>
<input type="button" value="显示效果" id="btn"/>
</body>
</html>

案例：评分


<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>五角星评分案例</title>
  <style>
    * {
      padding: 0;
      margin: 0;
    }

    .comment {
      font-size: 40px;
      color: yellow;
    }

    .comment li {
      float: left;
    }

    ul {
      list-style: none;
    }
  </style>
  <script src="jquery-1.12.1.js"></script>
  <script>

    $(function () {
      //获取所有的li标签
      $(".comment>li").mouseenter(function () {//进入
        //当前的li是实心的五角星,前面的li也都是实现的五角星,鼠标后面的li是空心的五角星
        $(this).text("★").prevAll("li").text("★").end().nextAll("li").text("☆");
      }).click(function () {//点击
        //做一个记录
        //点哪个li就为这个li添加一个自定义属性,作为标识,但是其他的li中的这个自定义属性要删除
        $(this).attr("index","1").siblings("li").removeAttr("index");
      }).mouseleave(function () {//离开
        //鼠标离开的时候,获取那个带有index自定义属性的li,然后,改变这个li中的五角星,同时前面的五角星也都是实心的,同时后面的五角星都是空心
        //先干掉所有的li中的实心的五角星
        $(".comment>li").text("☆");
        $(".comment>li[index=1]").text("★").prevAll("li").text("★");
      });
    });
  </script>
</head>

<body>
<ul class="comment">
  <li>☆</li>
  <li>☆</li>
  <li>☆</li>
  <li>☆</li>
  <li>☆</li>
</ul>
</body>

</html>

each()的使用

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>title</title>
  <style>
    *{
      margin: 0;
      padding: 0;
    }
    ul{
      list-style-type: none;
    }
    li{
      width: 100px;
      height: 100px;
      background-color: green;
      margin-right: 10px;
      float: left;
    }
  </style>
  <script src="jquery-1.12.1.js"></script>
  <script>
    //隐式迭代---内部帮助我们循环遍历做操作

    //每个元素做不同的操作的时候
    //each方法,帮助我们遍历jQuery的对象

    $(function () {
      //获取所有的li,针对每个li的透明进行设置
      $("#uu>li").each(function (index,ele) {
        //参数1:索引,参数2:对象
        //console.log(arguments[0]+"===="+arguments[1]);
        //每个li的透明度不一样
        var opacity=(index+1)/10;
        $(ele).css("opacity",opacity);
      });
    });

    //each方法就是用来遍历jQuery对象的,但是,里面的每个对象最开始都是DOM对象,如果想要使用jQuery的方法,需要把DOM对象转jQuery对象

  </script>
</head>
<body>
<ul id="uu">
  <li>1</li>
  <li>2</li>
</ul>

</body>
</html>

自定义$与jQuery的$冲突问题

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>title</title>
  <script>
    //一个html文件引入了多个的js文件库,每个js库中的顶级对象可能都是$
    //1.js  $.eat();
    //2.js  $.sayHi();


  </script>
  <script src="jquery-1.12.1.js"></script>
  <script>

    //    var $=10;//普通的变量,10
    //    console.log($);
    //    //页面加载
    //    $(function () {               $ is not a function
    //      $("#btn").click(function () {
    //        console.log("小苏好猥琐哦");
    //      });
    //    });


    // /var $=10;//普通的变量,10
    //console.log($);            打印出10
    页面加载
    //jQuery(function () {       只能通过这种方式进行调用
    //  jQuery("#btn").click(function () {
    //    console.log("小苏好猥琐哦");
    //  });
    //});

    var fdsfdsf = $.noConflict();//把$的权利给了xy了,$就可以作为其他的用法出现在代码中
    var $ = 10;//普通的变量,10
    console.log($);
    //页面加载
    fdsfdsf(function () {
      fdsfdsf("#btn").click(function () {
        console.log("小苏好猥琐哦");
      });
    });


  </script>
</head>
<body>
<input type="button" value="按钮" id="btn"/>

</body>
</html>

包装集:把很多的DOM的对象进行包装或者是封装---->jQuery对象
//jQuery对象---->DOM对象--->jQuery对象[0]--->获取到这个对象

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>title</title>
  <script src="jquery-1.12.1.js"></script>
  <script>
//    $(function () {
//      $("p")[0].innerText="哈哈";
//    });


    //包装集  ----->length属性

    //jQuery中如何判断这个元素是否存在,就是通过包装集的length属性来测试的


    //是通过这个对象.length属性不等于0的方式来判断

//    $(function () {
//      if($("#btn").length!=0){
//        console.log("存在");
//      }else{
//        console.log("不存在");
//      }
//    });


  </script>
</head>
<body>
<input type="button" value="按钮" id="btn"/>
<p>1</p>
<p>2</p>
<p>3</p>
</body>
</html>

案例：点击按钮只创建一个p标签

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>title</title>
  <style>
    div{
      width: 200px;
      height: 100px;
      background-color: red;
    }
  </style>
  <script src="jquery-1.12.1.js"></script>
  <script>
    $(function () {
      $("#btn").click(function () {
        if($("#p1").length==0){
          //点击按钮,只创建一个p标签,在div中
          $("<p id='p1'>这是一个p</p>").appendTo($("#dv"));
        }

      });
    });
  </script>
</head>
<body>
<input type="button" value="创建一个p" id="btn"/>
<div id="dv"></div>

</body>
</html>

几个属性介绍

    //innerWidth()/innerHeight()   方法返回元素的宽度/高度（包括内边距）。
    //outerWidth()/outerHeight() 方法返回元素的宽度/高度（包括内边距和边框）。
    //outerWidth(true)/outerHeight(true) 方法返回元素的宽度/高度（包括内边距、边框和外边距）。

插件的使用：别人写好的拿来改改。。。

事件参数对象

//e.target这个属性得到的是触发该事件的目标对象,此时是一个DOM对象
//e.currentTarget这个属性得到的是触发该事件的当前的对象
//e.delegateTarget这个属性得到的是代理的这个对象

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>title</title>
  <style>
    div{
      width: 300px;
      height: 200px;
      background-color: yellow;
    }
    p{
      width: 100px;
      height: 30px;
      background-color: pink;
    }
  </style>
  <script src="jquery-1.12.1.js"></script>
  <script>


    //e.target这个属性得到的是触发该事件的目标对象,此时是一个DOM对象
    //e.currentTarget这个属性得到的是触发该事件的当前的对象
    //e.delegateTarget这个属性得到的是代理的这个对象

//    $(function () {
//      //事件参数对象
//      $("#dv").click(function (e) {
//        //console.log("哈哈");
//        //得到是触发该事件的目标对象
//        console.log("div被点了");
//        //console.log($(e.target).attr("id"));
//      });
//
//      $("p").click(function (e) {
//        console.log("p被点击了");
//        //return false;
//      });
//    });


    $(function () {
      console.log(window);

      $("#dv").click(function (e) {
        console.log("div被点了");
        //console.log($(e.currentTarget).attr("id"));
        //console.log(e);

        console.log(e.screenX+"===="+e.screenY);
      });

      $("p").click(function (e) {
       console.log("p被点了");
      });
    });
  </script>
</head>
<body>
<input type="button" value="显示效果" id="btn"/>
<div id="dv">
  <p id="p1">这是一个p</p>
</div>

</body>
</html>

jQuery UI的使用

前提：下载了jQuery UI，并将jquery-ui-1.12.1.custom这个文件夹复制到项目中，里边有一个index.html文件有各种特效

    //1.引入 jQuery UI 的css文件
    //2 引入jquery的js文件
    //3 引入jQuery UI 的js文件
    //4 查找和复制UI 中的某个功能的所有的代码(html,css,js)
    //5 测试和使用

比如：我想做一个tab特效，打开index.html文件找到对应的特效，F12→点击要查看开发工具最左边的框框箭头→复制查看的内容标题（有很多方式如类样式...源码中一般通过注释分开了，所以可以通过这种方式来找HTML源码，只要找到就可以了）如：tab→查看网页源代码→ctrl+f，将标题内容复制进去进行查找。将HTML和部分JavaScript复制到HTML文件中。ok

*注：js代码一般要在$(function(){});之中