jQuery User Guide

jQuery 用户指引

简介

jQuery 采用 UglifyJS 压缩。

实践策略

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

选择器

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

jQuery 说明
$("#id_1, #id_2") ID 为 id_1 和 id_2 的元素
$(":animated") 执行动画的元素
$(":header") header 元素,如 h1, h2, etc
$(":focus") 当前获取焦点的元素
$("#id ~ div") ID 为 id 的元素之后的所有同级元素
$("#id").nextAll("div") ID 为 id 的元素之后的所有同级元素
$("#id").siblings("div") ID 为 id 的元素的所有同级元素,含 ID 为 id 的元素之前的元素
$("ul li:gt(0):not(:last)") 第 2 个起,去除最后一个的所有列表元素

内容选择器

jQuery 说明
$("div:contains(text)") 含 text 文本的元素
$("div:empty") 空 div 元素
$("div:has('.class')") 有 class css 名的 div
$("div:parent") 含子元素或文本的 div
$("ul li").filter(":contains(text)") 所有列表元素中含 text 文本的元素

属性选择器

jQuery 说明
$("a[id^=link]") ID 以 link 开始的超链接
$("a[id$=link]") ID 以 link 结束的超链接
$("a[id*=link]") ID 含有 link 的超链接
$("a[title][id|=link") 有 title 属性且 ID 为 link 或 link- 开头的超链接
$("#id").is(":checked") 单选、多选、下拉框是否选中
$("#id").is(":visible") 元素是否可见

子元素选择器

jQuery 说明
$("table tr:nth-child(even)" 表格偶数行
$("table tr:nth-child(3n+1)" 表格第一行及其后每隔 3 行的那一行
$("ul li").find("span") 所有列表元素内含有的 span 元素

表单选择器

jQuery 说明
$(":input") 任何 <input>, <textarea>, <select> 等元素
$(":disabled") 已禁用的元素
$(":text") 文本框
$(":radio") 单选按钮
$(":select") 下拉列表

DOM 操作

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

jQuery 说明
$("#id").html() 根据元素 ID 获取 HTML 内容
$("#id").text() 获取或设置元素文本
$("input").val("value") 设置 input 元素(文本框、单/复选框、等)的值为 value
$("#id").click(function(){ return false; }) 单击事件,添加至超链接时注意控制浏览器跳转
$("div:hidden").show() 显示隐藏的 div 元素

设置表格偶数行背景色 

// 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();
Author: njun
njun's picture
Updated: 2019/10/05