jQuery 用户指引

简介

jQuery 采用 UglifyJS 压缩。

实践策略

请为复杂的 jQuery 的选择器添加注释，方便后续维护。jQuery 的每个方法都对集合操作，从而省去循环结构。

选择器

jQuery 选择器函数 jQuery() 或 $() 返回类似元素数组对象，可用 $("#id").length 的值判断元素是否存在。选择器含特殊字符时，如：#, ., [, ( 等，用 \\ 转义。

内容选择器

属性选择器

子元素选择器

表单选择器

DOM 操作

jQuery 选择器返回的变量，一般在变量名前加 $ 前缀，通过 [index] 或 .get(index) 可转为 DOM 对象，DOM 对象可用 $() 转为 jQuery 对象。

设置表格偶数行背景色 

// jQuery 代码
$("#id tr:even").css("background-color", "#888");

// JavaScript 代码
var table = document.getElementById("id");         // 根据 id 获取 table 元素
var tbody = item.getElementsByTagName("tbody")[0]; // 获取表格的第一个 tbody 元素
var trs = tbody.getElementsByTagName("tr");        // 获取 tbody 元素下的所有 tr 元素
for(var i=0;i < trs.length;i++){           // 循环 tr 元素
  if(i%2==0){                              // 取模 (取余数.比如 0%2=0 , 1%2=1 , 2%2=0 , 3%2=1)
    trs[i].style.backgroundColor = "#888"; // 改变符合条件的 tr 元素的背景色
  }
}

按钮交替行为

$(":button").toggle(function(){

}, function(){

});

常用代码

模版

// 加载 DOM 后再执行。
$(document).ready(function(){

});

$(function(){

});

调试

jQuery.fn // 查看 jQuery 版本。

$ 变量冲突

引入多个使用 $ 变量的 JS 库，或多个版本 jQuery 时，jQuery 可以用 noConflict() 解决冲突

// 放弃 $ 变量，转而使用 $jQuery。
$jQuery = jQuery.noConflict();