jQuery 基础知识

[eyasliu]

jQuery && $

在jquery中， $ 变量是 jQuery 变量的简写

jQuery === $  // true

$ 方法

• $ 方法接收一个包含 CSS 选择器的字符串，然后用这个字符串去匹配一组元素
• $ 方法接收原始 HTML 标记字符串，动态创建由 jQuery 对象包装的 DOM 元素。同时设置一系列的属性、事件等
• $ 方法接收一个函数作为参数，绑定一个在DOM文档载入完成后执行的函数。$(document).ready()的简写

事件

事件的触发会有三个阶段，捕获，处于目标，冒泡

• 捕获：事件由最上层元素接收，然后逐步向更具体的元素传播
• 处于目标：在最具体的元素中触发
• 冒泡：事件开始时，由最具体的元素接收，然后逐步向上传播

捕获阶段不会触发事件，事件会在处于目标阶段开始，逐渐冒泡触发

事件绑定

// 使用通用事件名作为函数
$('button').click(function(event){
  // event 为事件对象
})

// 使用 bind 或者on
$('button').bind('click', function(event){})
$('button').on('click', function(event){})

// 使用 on 事件委托
$('body').on('click', 'button', function(event){})

阻止冒泡

事件处理函数有一参数 event，在该函数中调用event.stopPropagation() 可阻止事件冒泡

$('button').click(function(event){
  event.stopPropagation()
})

扩展

$.fn是指jquery的命名空间，加上fn上的方法及属性，会对jquery实例每一个有效。

扩展为了不污染全局变量，应使用立即执行函数包裹

(function($, document, window){
  $.fn.myExtention = function(){
    // extendsion code
    // ...
  }
})(jQuery, document, window)