
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();