jQuery(一)

jQuery

什么是 jQuery？

jQuery是一个JavaScript 函数库，是一个轻量级的“写得少，做的多”的 JavaScript 库。
jQuery 库包含以下功能：

• HTML 元素选取
• HTML 元素操作
• CSS 操作
• HTML 事件函数
• JavaScript 特效和动画
• HTML DOM 遍历和修改
• AJAX
• Utilities

jQuery 的优势

• 轻量级的 JS 库
• 强大的选择器
• 出色的 DOM 操作及封装
• 可靠地事件处理机制
• 完善的 AJAX
• 不污染顶级变量
• 出色的浏览器兼容性
• 链式操作方法
• 隐式迭代
• 行为层和结构层的分离

核心函数

1. jQuery([selector[, context]])
概述：这个函数接收一个包含 CSS 选择器的字符串，然后用这个字符串去匹配一组元素。

• selector：用来查找的字符串。
• context：作为待查找的 DOM 元素集、文档或 jQuery 对象。

// 找到所有 p 元素，并且这些元素都必须是 div 元素的子元素。
$("div > p");
// 设置页面背景色。
$(document.body).css("background", "black");
// 隐藏一个表单中所有元素。
$(myForm.elements).hide();
// 在文档的第一个表单中，查找所有的单选按钮。
$("input:radio", document.forms[0]);
// 在一个由 AJAX 返回的 XML 文档中，查找所有的 div 元素。
$("div", xml.responseXML);

2. jQuery(html[, ownerDocument])
概述：根据提供的原始 HTML 标记字符串，动态创建由 jQuery 对象包装的 DOM 元素。同时设置一系列的属性、事件等。

• html：用于动态创建 DOM 元素的 HTML 标记字符串。
• ownerDocument：创建 DOM 元素所在的文档。

// 动态创建一个 div 元素（以及其中的所有内容），并将它追加到 body 元素中。
$("<div><p>Hello</p></div>").appendTo("body");
// 创建一个 <input> 元素必须同时设定 type 属性。
$("<input>").attr("type", "checkbox");
// 动态创建一个 div 元素（以及其中的所有内容），并将它追加到 body 元素中。
$("<div>", {
  "class": "test",
  text: "Click me!",
  click: function(){
    $(this).toggleClass("test");
  }
}).appendTo("body");
// 创建一个 <input> 元素，同时设定 type 属性、属性值，以及一些事件。
$("<input>", {
  type: "text",
  val: "Test",
  focusin: function() {
    $(this).addClass("active");
  },
  focusout: function() {
    $(this).removeClass("active");
  }
}).appendTo("form");

3. jQuery(callback)
概述：$(document).ready() 的简写。

• callback：当 DOM 加载完成后要执行的函数。

// 当 DOM 加载完成后，执行其中的函数。
$(function(){
  // 文档就绪
});
// 使用 $(document).ready() 的简写，同时内部的 jQuery 代码依然使用 $ 作为别名，而不管全局的 $ 为何。
jQuery(function($) {
  // 你可以在这里继续使用$作为别名...
});

对象访问

1. 遍历 each(callback)
概述：以每一个匹配的元素作为上下文来执行一个函数。

• callback：对于每个匹配的元素所要执行的函数。

// 迭代多个图像，并设置它们的 src 属性。
$("img").each(function(i){
  this.src = "test" + i + ".jpg";
});
// 如果你想得到 jQuery 对象，可以使用 $(this) 函数。
$("img").each(function(){
  $(this).toggleClass("example");
});

2. 获取 get([index])
概述：取得其中一个匹配的元素。

• index：取得第 index 个位置上的元素。
• get()：取得所有匹配的 DOM 元素集合。

// 取得第 index 个位置上的元素
$("img").get(0);

3. 索引 index([selector | element])
概述：搜索匹配的元素，并返回相应元素的索引值，从 0 开始计数。

• index()：查找元素的索引值。
• selector：一个选择器，代表一个 jQuery 对象，将会从这个对象中查找元素。
• element：获得 index 位置的元素。可以是 DOM 元素或 jQuery 选择器。

// 传递一个 DOM 对象，返回这个对象在原先集合中的索引位置
$('li').index(document.getElementById('bar'));
// 传递一个 jQuery 对象
$('li').index($('#bar'));
// 传递一组 jQuery 对象，返回这个对象中第一个元素在原先集合中的索引位置
$('li').index($('li:gt(0)'));
// 传递一个选择器，返回#bar 在所有 li 中的索引位置
$('#bar').index('li');
// 不传递参数，返回这个元素在同辈中的索引位置。
$('#bar').index();

基本选择器

1. ID 选择器 #id
概述：根据给定的 ID 匹配一个元素。

$("#myDiv"); // 查找 ID 为"myDiv"的元素。

2. 元素选择器 element
概述：根据给定的元素标签名匹配所有元素。

$("div"); // 查找一个 DIV 元素。

3. 类选择器 .class
概述：根据给定的 css 类名匹配元素。

$(".myClass"); // 查找所有类是 "myClass" 的元素。

层级选择器

1. 祖先后代选择器 ancestor descendant
概述：在给定的祖先元素下匹配所有的后代元素。

$("form input"); // 找到表单中所有的 input 元素

2. 直接后代选择器 parent > child
概述：在给定的父元素下匹配所有的子元素。

$("form > input"); // 匹配表单中所有的子级 input 元素。

3. 相邻之后选择器 prev + next
概述：匹配所有紧接在 prev 元素后的 next 元素。

$("label + input"); // 匹配所有跟在 label 后面的 input 元素

4. 同父兄弟选择器 prev ~ siblings
概述：匹配 prev 元素之后的所有 siblings 元素。

$("div ~ p"); 找到所有与 div 同辈的段落元素

属性选择器

1. 属性名 [attribute]

$("div[id]"); // 查找所有含有 id 属性的 div 元素

2. 属性值 [attribute=value]
概述：匹配给定的属性是某个特定值的元素。

// 查找所有 name 属性是 newsletter 的 input 元素
$("input[name='newsletter']").attr("checked", true);

基本选择器

1. 首元素筛选 :first
概述：获取第一个元素

$('li:first'); // 获取匹配的第一个元素

2. 尾元素筛选 :last
概述：获取最后个元素。

$('li:last'); // 获取匹配的最后个元素

3. 相等筛选 :eq
概述：匹配一个给定索引值的元素，从 0 开始计数。

$("tr:eq(1)"); // 查找第二行

内容

1. 内容空白 :empty
概述：匹配所有不包含子元素或者文本的空元素。

$("td:empty"); // 查找所有不包含子元素或者文本的空元素

2. 元素包含 :has(selector)
概述：匹配含有选择器所匹配的元素的元素。

// 给所有包含 p 元素的 div 元素添加一个 text 类
$("div:has(p)").addClass("test");

子元素

1. 子元素首位 :first-child
概述：匹配所给选择器( :之前的选择器)的第一个子元素。

$("ul li:first-child"); // 在每个 ul 中查找第一个 li

2. 子元素末位 :last-child
概述：匹配最后一个子元素

$("ul li:last-child"); // 在每个 ul 中查找最后一个 li

3. 子元素指定位 :nth-child(n | even | odd | formula)
概述：匹配其父元素下的第 N 个子或奇偶元素，从 1 开始计数。

• n：匹配子元素序号
• even：匹配所有偶数元素
• odd：匹配所有奇数元素
• formula：匹配特殊公式所有元素

$("ul li:nth-child(2)"); // 在每个 ul 查找第 2 个 li
$("ul li:nth-child(even)"); // 在每个 ul 查找偶数个 li
$("ul li:nth-child(odd)"); // 在每个 ul 查找奇数个 li
$("ul li:nth-child(2n + 1)"); // 在每个 ul 查找奇数个 li

4. 子元素类型指定个 :nth-of-type(n | even | odd | formula)
概述：选择同属于一个父元素之下，并且标签名相同的子元素中的第 n 个，从 1 开始计数。

• n：匹配子元素序号
• even：匹配所有偶数元素
• odd：匹配所有奇数元素
• formula：匹配特殊公式所有元素

// 查找每个 span，这个 span 是其所有兄弟 span 元素中的第二个元素。
$("span:nth-of-type(2)");

表单

1. 文本 :text
概述：匹配所有的单行文本框。

$(":text"); // 查找所有文本框

2. 密码 :password
概述：匹配所有密码框。

$(":password"); // 查找所有密码框

表单对象属性

1. 勾选 :checked
概述：匹配所有选中的被选中元素(复选框、单选框等，select 中的 option，但是下拉框中的 option 的勾选我们推荐使用 :selected)。

$("input:checked"); // 查找所有选中的框元素。

2. 选中 :selected
概述：匹配所有选中的 option 元素。

$("select option:selected"); // 查找所有选中的选项元素。

属性

1. 属性 attr(name | properties | key[, value | fn])
概述：设置或返回被选元素的属性值。

• name：属性名称
• properties：作为属性的“名/值对”对象
• key, vlalue：属性名称，属性值
• key, function (index, attr) {}：属性名称，返回属性值函数（当前元素索引值，原来属性值）

// 返回文档中所有图像的 src 属性值。
$("img").attr("src"); 
// 为所有图像设置 src 和 alt 属性。
$("img").attr({src: "test.jpg", alt: "Test Image"});
// 为所有图像设置 src 属性。
$("img").attr("src", "test.jpg"); 
// 把 src 属性的值设置为 title 属性的值。
$("img").attr("title", function() { return this.src; }); 

2. 属性 prop(name | properties | key[, value | fn])
概述：获取在匹配的元素集中的第一个元素的属性值。内置属性的 DOM 元素或 window 对象删除某些属性，浏览器可能会产生错误。jQuery 第一次分配 undefined 值的属性，而忽略了浏览器生成的任何错误。

• name：属性名称
• properties：作为属性的“名/值对”对象
• key, vlalue：属性名称，属性值
• key, function (index, attr) {}：属性名称，返回属性值函数（当前元素索引值，原来属性值）

// 选中复选框为 true，没选中为 false
$("input[type='checkbox']").prop("checked");
// 禁用页面上的所有复选框。
$("input[type='checkbox']").prop({
  disabled: true
});
// 禁用和选中所有页面上的复选框。
$("input[type='checkbox']").prop("disabled", true);
$("input[type='checkbox']").prop("checked", true);
// 通过函数来设置所有页面上的复选框被选中。
$("input[type='checkbox']").prop("checked", function(i, val) {
  return !val;
});

CSS 类

1. 添加 addClass(class | fn)
概述：为每个匹配的元素添加指定的类名。

// 为匹配的元素加上 'selected' 类
$("p").addClass("selected");
$("p").addClass("selected1 selected2");
// 给 li 加上不同的 class
$('ul li:last').addClass(function() {
  return 'item-' + $(this).index();
});

2. 移除 removeClass([class | fn])
概述：从所有匹配的元素中删除全部或者指定的类。

$("p").removeClass(); // 删除匹配元素的所有类
$("p").removeClass("selected"); // 从匹配的元素中删除 'selected' 类
// 删除最后一个元素上与前面重复的 class
$('li:last').removeClass(function() {
  return $(this).prev().attr('class');
}); 

3. 切换 toggleClass(class | fn[, sw])
概述：如果存在（不存在）就删除（添加）一个类。
switch：用于决定元素是否包含 class 的布尔值。

$("p").toggleClass("selected"); // 为匹配的元素切换 'selected' 类
// 每点击三下切换 'highlight' 类
var count = 0;
$("p").click(function(){
  $(this).toggleClass("highlight", count++ % 3 == 0);
});

HTML 代码/文本/值

1. 内容 html([val | fn])
概述：取得第一个匹配元素的 html 内容。

$('p').html(); // 返回 p 元素的内容。
$("p").html("Hello <b>world</b>!"); // 设置所有 p 元素的内容
$("p").html(function(n){
  return "这个 p 元素的 index 是：" + n;
}); // 使用函数来设置所有匹配元素的内容。

2. 文本 text([val | fn])
概述：取得所有匹配元素的内容。

$('p').text(); // 返回 p 元素的文本内容。
$("p").text("Hello world!"); // 设置所有 p 元素的文本内容
$("p").text(function(n){
  return "这个 p 元素的 index 是：" + n;
}); // 使用函数来设置所有匹配元素的文本内容。

3. 值 val([val | fn | arr])
概述：获得匹配元素的当前值。

$("input").val(); // 获取文本框中的值。
$("input").val("hello world!"); // 设定文本框的值。
$("input").val(["check2", "radio1"]); // 设置复选和单选的值。

过滤

1. 计数 eq(index | -index)
概述：获取当前链式操作中第 N 个 jQuery 对象，计数从 0 开始。

$("p").eq(1); // 获取匹配的第二个元素
$("p").eq(-2); // 获取匹配的倒数第二个元素

2. 首位 first()
概述：获取第一个元素。

$('li').first(); // 获取匹配的第一个元素

3. 末位 last()
概述：获取最后个元素。

$('li').last(); // 获取匹配的最后个元素

4. 过滤 filter(expr | object | element | fn)
概述：筛选出与指定表达式匹配的元素集合。

• expr：字符串值，包含供匹配当前元素集合的选择器表达式。
• object：现有的 jQuery 对象，以匹配当前的元素。
• element：一个用于匹配元素的 DOM 元素。
• function：一个函数用来作为测试元素的集合。

$("p").filter(".selected"); // 保留带有 selected 类的元素
$("p").filter(".selected, :first"); // 保留第一个以及带有 select 类的元素
// 保留子元素中不含有 ol 的元素。
$("p").filter(function(index) {
  return $("ol", this).length == 0;
});

5. 映射 map(callback)
概述：将一组元素转换成其他数组。

// 获取列表中内容数组
$('li').map(function() {
  return $(this).html();
}); 

查找

1. 子元素集 children([expr])
概述：取得一个包含匹配的元素集合中每一个元素的所有子元素的元素集合。

$("div").children(); // 查找 DIV 中的每个子元素。
$("div").children(".selected"); // 在每个 div 中查找 .selected 的类。

2. 最近上级 closest(expr | object | element)
概述：从元素本身开始，逐级向上级元素匹配，并返回最先匹配的元素。

$("li:first").closest("div"); // 查找列表项最近的上层 div 元素

3. 查找 find(expr | object | element)
概述：搜索所有与指定表达式匹配的元素。

// 从所有的段落开始，进一步搜索下面的 span 元素。与$("p span")相同。
$("p").find("span"); 

4. 相邻之后 next([expr])
概述：取得一个包含匹配的元素集合中每一个元素紧邻的后面同辈元素的元素集合。

$("p").next(); // 找到每个段落的后面紧邻的同辈元素。
// 找到每个段落的后面紧邻的同辈元素中类名为 selected 的元素。
$("p").next(".selected"); 

5. 相邻之前 prev([expr])
概述：取得一个包含匹配的元素集合中每一个元素紧邻的前一个同辈元素的元素集合。

$("p").prev(); // 找到每个段落紧邻的前一个同辈元素。
// 找到每个段落紧邻的前一个同辈元素中类名为 selected 的元素。
$("p").prev(".selected");

6. 同级兄弟 siblings([expr])
概述：取得一个包含匹配的元素集合中每一个元素的所有唯一同辈元素的元素集合。

$("div").siblings(); // 找到每个 div 的所有同辈元素。
// 找到每个 div 的所有同辈元素中带有类名为 selected 的元素。
$("div").siblings(".selected"); 

7. 直接父级 parent([expr])
概述：取得一个包含着所有匹配元素的唯一父元素的元素集合。

$("p").parent(); // 查找每个段落的父元素。
$("p").parent(".selected"); // 查找段落的父元素中每个类名为 selected 的父元素。