Jquery事件汇总、网页入口

<!DOCTYPE html>

<html lang="en">

<head>

   <meta charset="UTF-8">

   <title>Document</title>

   <script type="text/javascript" src="jquery.1.11.1.min.js"></script>

</head>

<body>

  //html

   <select id="s1" size="2" style="width: 400px;height: 200px;">

      <option>1</option>

      <option>2</option>

      <option>3</option>

   </select>

 

   <select id="s2" size="2" style="width: 400px;height: 200px;"></select>

 

 <div class="box">div</div>
 <button class="btn">removeclick</button>

 

   <button id="add">添加</button>

   <button id="del">删去</button>

  

   <script type="text/javascript">

  //Jquery事件有如下

  click、dblclick(双击)、mouseover、mouseout、mousemove、mousedown、

  mouseup、keydown、keyup、focus、blur、change、submit、reset、scroll、on、off、contextmenu(鼠标右键事件)

  

  //例子

        $("#add").click(function(){              //将事件绑定在按钮身上

           var opt = $("#s1 option:selected").clone(true);  // 克隆选中option

           opt.appendTo($("#s2"));            //把 opt 添加到 s2

       });

         $("#del").click(function(){          //删除按钮点击的时候,事件在点击时触发

           var opt = $("#s2 option:selected");

           opt.remove();                 // opt 被移除

       })

  //上面2个函数网页效果如下

 


 

  $(".box").click(function(){

           $(this).css("color","red");

       });

     

       // 绑定事件  (时间类型,事件处理函数)

       $(".box").on("mouseover",function(){

           $(this).css("background-color","green");

          });

           $(".btn").click(function(){

              // off   解除绑定事件        

                  $(".box").off();// 参数为事件类型   解除该类型的事件

           });

 


 

  //网页入口

     $(document).ready(function(){

           //编写代码

           })

      //简写

      $(function(){

           //编写代码

           })

       $().ready(function(){

           //编写代码

           })

  //上面3种方式都是一样的功能,可以根据自己的喜好,选择其中的一种。所有标签加载完自动执行上面函数

     

   //这个也是网页入口,等页面所有标签、图片什么的加载完自动执行这个函数

   window.onload = function(){

      alert("亲,你看到我了");
    }

  

 

   </script>

</body>

</html>

 

posted @ 2019-05-09 21:13  登风360  阅读(279)  评论(0编辑  收藏  举报