jQuery语法与事件

我会带着你远行 2022-06-14 07:54 191阅读 0赞

jQuery 网站上提供了两种方式的发布文件。一种是内容经过压缩的文件；另一种是原始文件。前者文件中不包含代码注释以及代码运行过程中不需要的空白字符，它适合于生产环境(正式使用的环境)中使用，可以减少文件加载所需时间。后者文件中包含详细的代码注释，适合于开发和测试环境中使用。

### **jQuery语法：** ###

基础语法：`$(selector).action()`  
美元符号定义jQuery  
选择符(selector)“查询”和“查找”HTML元素  
jQuery的action()执行对元素的操作  
例如：

$(this).hide()隐藏当前元素
    $("p").hide()隐藏所有段落

**`$ ：美元符是 jQuery 核心函数 jQuery 的一个别名，在 JavaScript 中“$”是一个合法的函数名。`**

## **jQurey事件** ##

### 1、jQurey事件： ###

### 常用事件方法： ###

### **绑定事件** ###

### **解除绑定事件** ###

bind 方法的语法是：  
**event** ：要处理的事件的名称。该名称不需要加前缀 on。

**handler** ：事件监听器，即对浏览器事件进行处理的函数。这通常是一个匿名函数。在 event 参数所表示的事件被触发后，jQuery 会调用这个函数（即回调），并向该函数传入一个 jQuery 自定义的事件对象。该事件对象是 jQuery 根据原始的浏览器事件对象创建的。jQuery 这么做是通过一个”中立”的事件对象来规避不同的浏览器所提供的同一个事件的事件对象的属性不同的问题。这使得我们可以用同样的代码处理事件，而不必关心不同浏览器所提供的原始事件对象的差异。

**data** ：表示需要在事件触发后传递给事件监听器的额外数据。它是作为 jQuery 事件对象的 data 属性传递给事件监听器的。

$(document).ready(function () { 
       // $("#clickMeBtn").click(function () { 
       // alert("hello")
       // });
    
        $("#clickMeBtn").bind("click",clickHandler1);
        $("#clickMeBtn").bind("click",clickHandler2);
        $("#clickMeBtn").unbind("click",clickHandler1);
    });
    
    function clickHandler1(e) { 
        console.log("clickHandler1")
    }
    function clickHandler2(e) { 
        console.log("clickHandler2")
    }

### **事件的目标** ###

### **事件的冒泡** ###

$(document).ready(function () { 
       $("body").bind("click",bodyHandler);
       $("div").bind("click",divHandler1);
        $("div").bind("click",divHandler2);
    });
    
    function bodyHandler(event) { 
        conlog(event)
    }
    function divHandler1(event) { 
        conlog(event)
       event.stopPropagation();
     // event.stopImmediatePropagation();
    }
    
    function divHandler2(event) { 
        conlog(event)
    }
    
    //有些浏览器不支持console，可用这种方法来实现调用
    function conlog(event) { 
        console.log(event);
    }

### **自定义事件** ###

$(document).ready(function () { 
       $("#ClickMeBtn") .click(function () { 
           var e = jQuery.Event("MyEvent");
           $("#ClickMeBtn").trigger(e);
       });
    
       $("#ClickMeBtn").bind("MyEvent",function (event) { 
           console.log(event)
       })
    });

### **参考资料** ###

**[jQuery 实验教程][jQuery]**

[jQuery]: https://www.ibm.com/developerworks/cn/web/1311_huangwh_jqueryhandson/index.html