zoukankan      html  css  js  c++  java
  • jQuery学习笔记(三)

    jQuery中的事件

    页面加载

    原生DOM中的事件具有页面加载的内容onload事件,在jQuery中同样提供了对应的内容ready()函数。

    ready与onload之间的区别:

    onloadready
    没有简写方式 具有简写方式
    当HTML页面所有内容加载完毕后才执行onload 当DOM节点加载完毕后就执行ready
    一个HTML页面只能编写一个onload 一个HTML页面允许同时编写多个ready

    ready()的编写方式:

    • $(document).ready(function(){});
    • $().ready(function(){});
    • $(function(){});
     1 <!DOCTYPE html>
     2 <html lang="en">
     3 <head>
     4     <meta charset="UTF-8">
     5     <title>onload事件机制</title>
     6       <script src="js库/jquery-1.11.3.js"></script>    
     7       <script>
     8           /*
     9         window.onload = function(){
    10             var user = document.getElementById("user");
    11         }*/
    12         /*$(document).ready(function(){
    13             console.log($("#user").val());
    14         });*/
    15         /*$().ready(function(){
    16             console.log($("#user").val());
    17         });*/
    18         $(function(){
    19             console.log($("#user").val());
    20         });
    21       </script>
    22 </head>
    23 <body>
    24       <input type="text" id="user" value="张无忌">    
    25 </body>
    26 </html>

    事件绑定

    jQuery中提供了事件绑定与解绑机制,类似于原生DOM中的addEventListener()方法。

    jQuery的事件绑定:

    • 单事件绑定
     1 <!DOCTYPE html>
     2 <html lang="en">
     3 <head>
     4     <meta charset="UTF-8">
     5     <title>012_实现伸缩二级菜单</title>
     6     <script src="js库/jquery-1.11.3.js"></script>
     7     <style>
     8         li {
     9             list-style: none;
    10         }
    11 
    12         li span {
    13             padding-left: 20px;
    14             cursor: pointer;
    15         }
    16 
    17         .open {
    18             background: url("img/minus.png") no-repeat center left;
    19         }
    20 
    21         .closed {
    22             background: url("img/add.png") no-repeat center left;
    23         }
    24 
    25         .show {
    26             display: block;
    27         }
    28 
    29         .hide {
    30             display: none;
    31         }
    32     </style>
    33 </head>
    34 <body>
    35     <ul class="tree">
    36         <li>
    37             <span class="open">考勤管理</span>
    38             <ul class="show">
    39                 <li>日常考勤</li>
    40                 <li>请假申请</li>
    41                 <li>加班/出差</li>
    42             </ul>
    43         </li>
    44         <li>
    45             <span class="closed">信息中心</span>
    46             <ul class="hide">
    47                 <li>通知公告</li>
    48                 <li>公司新闻</li>
    49                 <li>规章制度</li>
    50             </ul>
    51         </li>
    52         <li>
    53             <span class="closed">协同办公</span>
    54             <ul class="hide">
    55                 <li>公文流转</li>
    56                 <li>文件中心</li>
    57                 <li>内部邮件</li>
    58                 <li>即时通信</li>
    59                 <li>短信提醒</li>
    60             </ul>
    61         </li>
    62     </ul>
    63 
    64     <script>
    65         $("span").click(function(){
    66             if($(this).hasClass("open")){
    67                 $(this).attr("class", "closed");
    68                 $(this).next().attr("class", "hide");
    69             }else{
    70                 $(this).attr("class", "open");
    71                 $(this).next().attr("class", "show");
    72             }
    73         });
    74     </script>
    75 </body>
    76 </html>
    • 多事件绑定
     1 <!DOCTYPE html>
     2 <html>
     3 <head>
     4     <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
     5     <title>015_图片提示</title>
     6     <!--   引入jQuery -->
     7     <script src="js库/jquery-1.11.3.js" type="text/javascript"></script>
     8     <style type="text/css">
     9         body {
    10             margin: 0;
    11             padding: 40px;
    12             background: #fff;
    13             font: 80% Arial, Helvetica, sans-serif;
    14             color: #555;
    15             line-height: 180%;
    16         }
    17 
    18         img {
    19             border: none;
    20         }
    21 
    22         ul, li {
    23             margin: 0;
    24             padding: 0;
    25         }
    26 
    27         li {
    28             list-style: none;
    29             float: left;
    30             display: inline;
    31             margin-right: 10px;
    32             border: 1px solid #AAAAAA;
    33         }
    34 
    35         /* tooltip */
    36         #tooltip {
    37             position: absolute;
    38             border: 1px solid #ccc;
    39             background: #333;
    40             padding: 2px;
    41             display: none;
    42             color: #fff;
    43         }
    44     </style>
    45 </head>
    46 <body>
    47     <h3>有效果:</h3>
    48     <ul>
    49         <li><a href="img/apple_1_bigger.jpg" class="tooltip" title="苹果 iPod"><img src="img/apple_1.jpg" alt="苹果 iPod"/></a></li>
    50         <li><a href="img/apple_2_bigger.jpg" class="tooltip" title="苹果 iPod nano"><img src="img/apple_2.jpg" alt="苹果 iPod nano"/></a></li>
    51         <li><a href="img/apple_3_bigger.jpg" class="tooltip" title="苹果 iPhone"><img src="img/apple_3.jpg" alt="苹果 iPhone"/></a></li>
    52         <li><a href="img/apple_4_bigger.jpg" class="tooltip" title="苹果 Mac"><img src="img/apple_4.jpg" alt="苹果 Mac"/></a>
    53         </li>
    54     </ul>
    55     <script type="text/javascript">
    56         var x = 10, y = 20, title;
    57         $("ul>li>a[class=tooltip]").mouseover(function(event){
    58             title = this.title;
    59             this.title = '';
    60             // 获取大图片的文件路径
    61             var src = this.href;
    62             // 创建用于显示大图片的元素
    63             var $div = $("<div id='tooltip'><img src='" + src + "'><br>" + title + "</div>");
    64             // 添加到页面中
    65             $("body").append($div);
    66             // 调整位置 -- 鼠标坐标值
    67             $("#tooltip").css({
    68                 "top": event.pageY + y,
    69                 "left": event.pageX + x
    70             }).show();
    71         }).mousemove(function(event){
    72              $("#tooltip").css({
    73                 "top": event.pageY + y,
    74                 "left": event.pageX + x
    75             });
    76         }).mouseout(function(){
    77             this.title = title;
    78             $("#tooltip").remove();     
    79         });
    80     </script>
    81 </body>
    82 </html>

    事件对象

    什么是事件对象

    事件是一种JavaScript结构,它会在元素获得处理事件的机会时被传递给被调用的事件处理程序。这个对象中包含与事件相关的信息,也提供了可以影响事件在DOM中传递进程的一些方法。

    事件对象的常用属性

    • srcElement/target : 事件源对象
    • eventPhase : 事件所处的传播阶段
    • clientX/offsetX/pageX/screenX/x:事件发生的X坐标
    • clientY/offsetY/pageY/screenY/y:事件发生的Y坐标
    • which/keyCode/charCode : 键盘事件中按下的按键
    • button:鼠标哪个按键被按下了
    • cancelBubble :是否取消事件冒泡
    • returnValue : 是否阻止事件默认行为

    阻止默认行为

    所谓默认行为,就是指页面中默认具有的一些行为,例如表单提交、连接跳转等效果。

    • event.preventDefault();
    • return false;

    与其他JS库共存

    • 第一种方式
       1 /*
       2   * 先引入其他JS库,后引入jQuery
       3   * * "$"符号属于其他JS库
       4   * 解决冲突
       5   * * jQuery中 - "$"符号指代jQuery
       6   * * jQuery中不再使用"$"符号
       7   */
       8 jQuery(document).ready(function(){
       9     console.log("this is ready.");
      10 });
    • 第二种方式
      1 jQuery(document).ready(function($){
      2     // 在当前函数中使用"$"符号 - jQuery
      3 });
      4 // "$"符号 - 其他JS库
    • 第三种方式
      1 (function($){
      2     // "$"符号 - jQuery
      3 })(jQuery);
      4 // "$"符号 - 其他JS库
    • 第四种方式
      jQuery.noConflict();
      jQuery(function($){
          console.log($("p").text());
      });
    • 第五种方式
      1 jQuery.noConflict();
      2 (function($){
      3     console.log($("p").text());
      4 })(jQuery);
  • 相关阅读:
    架构师考试回顾
    精通 WPF UI Virtualization
    疑难杂症之Web客户端无法登录
    CDTray, 打开,关闭光驱的系统托盘程序
    原来Queryable是这样实现的..
    jQuery.Excel, 使用Ctrl+方向键/Home/End在input表格中移动
    nGoodPersonCards++
    C#数据库数据导入导出系列之三 数据库导出到Excel下
    调用webservice时提示对操作的回复消息正文进行反序列化时出错&&Web service 超过了最大请求长度
    ASP.NET网络映射驱动器无权限访问的解决方案(转)
  • 原文地址:https://www.cnblogs.com/xlb-happymoment/p/6746097.html
Copyright © 2011-2022 走看看