jQuery学习笔记（一）
JQuery官方网站是www.//jquery.com/。可以下载最新版的JQuery文件。
JQuery的代码风格
JQuery库中 $是 JQuery 的一种简写 $("#foo") 与 jQuery("#foo") 等价
链式操作风格，行为和内容分离。
JQuery对象和DOM对象
- DOM对象
var domObj = document.getElementById("id");//获得DOM对象
var ObjHTML = domObj.innerHTML; //使用Javascript 中的属性---innerHTML
- jQuery对象
jquery对象就是通过jquery包装DOM对象后产生的对象。
$("#foo").html(); //获取id为foo的元素内的 html 代码。
var $variable = jQuery对象
var variable = DOM对象
- JQuery对象转成DOM对象
1.
var $cr = $("#cr"); //jquery对象
var cr = $cr[0]; //DOM对象
alert(cr.checked) //检测这个checkedbox是否被选中了
2.
var $cr = $("#cr"); //jquery对象
var cr = $cr.get(0); //DOM对象
alert（cr.checked）//检测这个checkbox是否被选中了
- DOM对象转成jQuery对象
var cr = document.getElementById("cr"); //DOM对象
var $cr = $(cr); //jQuery对象
jQuery选择器 （jQuery 选择器大全）
CSS选择器找到元素后是添加样式，而jquery选择器找到元素后是添加行为
- 基本选择器
通过元素id、class和标签名等来查找DOM元素。
| 选择器 | 描述 | 返回 | 示例 |
| #id | 根据给定的id匹配一个元素 | 单个元素 | $("#test")选取id为test的元素 |
| .class | 根据给定的类名匹配元素 | 集合元素 | $(".test")选取所有class为test的元素 |
| element | 根据给定的元素名匹配元素 | 集合元素 | $("p")选取所有的<p>元素 |
| * | 匹配所有元素 | 集合元素 | $("*")选取所有元素 |
|
selector1,selector2,.... selectorN |
将每个选择器匹配到的元素合并后 一起返回 |
集合元素 |
$("div,span,p,myClass")选取所有<div>,<span> 和拥有class为myClass的<p>标签的一组元素 |
- 层次选择器
| 选择器 | 描述 | 返回 | 示例 |
| $("ancestor descendant") | 选取ancestor元素里的所有descendant（后代）元素 | 集合元素 | $("div span")选取<div>里所有的<span>元素 |
| $("parent>child") |
选取parent元素下的child（子）元素， 与$("ancestor descendant")有区别， $("ancestor descendant")选择的是后代元素 |
集合元素 |
$("div>span")选取<div>元素下元素名是 <span>的子元素 |
| $("prev+next") | 选取紧接在prev元素后的next元素 | 集合元素 |
$(".one+div")选取class为one的 下一个<div>同辈元素 |
| $("prev~siblings") | 选取prev元素之后的所有siblings元素 | 集合元素 |
$("#two~div")选取id为two的元素后面的 所有<div>同辈元素 |
- 过滤选择器
通过特定的过滤规则筛选出所需的DOM元素，与CSS中伪类选择器语法相同都以（：）开头。
根据不同过滤规则分为基本过滤、内容过滤、可见性过滤、属性过滤、子元素过滤、表单对象属性过滤选择器。
1.基本过滤选择器
| 选择器 | 描述 | 返回 | 示例 |
| :first | 选取第一个元素 | 单个元素 |
$("tr:first")返回所有tr元素的第一个tr元素， 它仍然被保存在集合中 |
| :last | 选取最后一个元素 | 单个元素 |
$("tr:last")返回所有tr元素的最后一个tr元素， 它仍然被保存在集合中 |
| :not（selector） | 去除所有与给定选择器匹配的元素 | 集合元素 |
$("input:not(.myClass)")选取class不是 myClass的<input>元素 |
| :even |
选取所有元素中偶数的元素, 索引从0开始 |
集合元素 | $("input:even")选取索引是偶数的<input>元素 |
| :odd |
选取所有元素中奇数的元素， 索引从0开始 |
集合元素 | $("input:odd")选取索引是奇数的<input>元素 |
| :eq(index) |
选取指定索引的元素， 索引从0开始 |
集合元素 | $("input:eq(1)")选取索引等于1的<input>元素 |
| :gt(index) |
选取索引大于index的元素， 索引从0开始 |
集合元素 |
$("input:gt(1)")选取索引大于1的<input>元素 （*大于1，而不包括1） |
| :lt(index) |
选取索引小于index的元素， 索引从0开始 |
集合元素 |
$("input:li(1)")选取索引小于1的<input>元素 （*小于1，而不包括1） |
| :header | 选取所有的标题元素，如h1、h2等 | 集合元素 | $(":header")选取网页中所有的<h1>.<h2>... |
| :animated | 选取当前正在执行的所有动画元素 | 集合元素 | $("div:animated")选取正在执行动画的<div>元素 |
| :focus | 选取当前获取焦点的元素 | 集合元素 | $(‘:focus’)选取当前获取焦点的元素 |
2.内容过滤选择器
| 选择器 | 描述 | 返回 | 示例 |
| :contains(text) | 选取包含text文本内容的元素 | 集合元素 | $("div:contains('我')")选取含有文本“我“的<div>元素 |
| :empty | 选取不包含子元素或者文本节点的空元素 | 集合元素 |
$("div：empty")选取不包含子元素（包括文本元素） <div>空元素 |
| :has(sselector) | 选取含有选择器所匹配的元素的元素 | 集合元素 |
$("div:has(p)")选取含有<p>元素的 <div>元素 |
| :parent | 选取含有子元素或文本节点的元素 | 集合元素 |
$("div:parent")选取拥有子元素（包括文本元素） 的<div>元素 |
3.可见性过滤选择器
| 选择器 | 描述 | 返回 | 示例 |
| :hidden |
选取所有不可见元素 | 集合元素 |
$(":hidden"）选取所有不可见的元素。包括<input type="hidden"/>, <div style="display:none;">和<div style="visibility:hidden;">等 元素。如果只想选取<input>元素，可以使用$(”input:hidden“) |
| :visiable |
选择所有可见元素 | 集合元素 |
$("div:visible")选取所有可见的<div>元素 |
4.属性过滤选择器
| 选择器 | 描述 | 返回 | 示例 |
| [attribute] | 选取拥有此属性的元素 | 集合元素 |
$("div[id]")选取拥有属性id的元素 |
| [attribute=value] | 选取指定属性值为value的所有元素 | 集合元素 |
$("div[title=test]")选取属性title为”test“的<div>元素 |
| [attribute!=value] | 选取属性值不为value的所有元素 | 集合元素 |
$("div[title！=test]")选取属性title不等于”test“的<div>元素 （没有属性title的<div元素也会被选取>） |
| [attribute^=value] | 选取属性值以value开始的所有元素 | 集合元素 | $("div[title^=test]")选取属性title以”test“为开头的<div>元素 |
| [attribute$=value] | 选取属性值以value结束的所有元素 | 集合元素 | $("div[title$=test]")选取属性title以”test“为结束的<div>元素 |
| [attribute*=value] | 选取属性值包含value的所有元素 | 集合元素 | $("div[title*=test]")选取属性title含有”test“的<div>元素 |
| [attribute|=value] |
选取属性等于给定字符串或以该字符串为前缀 （该字符串后跟一个连字符”_“）的元素 |
集合元素 |
$("div[title|=”en“]")选取属性title等于en或以en为前缀 （该字符串后跟一个连字符‘_’）的元素 |
| [attribute~=value] | 选取属性用空格分隔的值中包含一个给定值的元素 | 集合元素 |
$("div[title~="uk"]")选取属性title用空格分隔的值中包含 字符uk的<div>元素 |
|
[attribute 1][attribute 2] [attribute N] |
用属性选择器合并成一个复合属性选择器 ，满足多个条件。每选择一次，缩小一次范围 |
集合元素 |
$("div[id][title$='test']")选取属性id,并且属性”test“以“test” 结束的<div>元素 |
5.子元素过滤器
| 选择器 | 描述 | 返回 | 示例 |
|
:nth-child (index/even/ odd/equation) |
选取索引为index的元素、索引为偶数的元素、索引为奇数的元素 | 集合元素 |
:eq(index)只匹配一个元素，而:nth-child将为每一个父元素匹配子元素，并且 :nth-child（index）中index从1开始，而:eq(index)从0开始 |
| :first-child |
选取每个父元素的第一个子元素 |
集合元素 |
:first只返回单个元素，而:first-child选择符将为每个 父元素匹配第一个子元素 （ex：$("ul li:first-child");选取每个<ul>中第一个<li>元素） |
| :last-child | 选取每个父元素的最后一个子元素 | 集合元素 |
:last只返回单个元素，而:last-child选择符将为每个 父元素匹配最后一个子元素 （ex：$("ul li:last-child");选取每个<ul>中最后一个<li>元素） |
| :only-child |
如果某个元素是它父元素中惟一的子元素， 那么将会被匹配。如果父元素中含有其他元素，则不会被匹配 |
集合元素 | $("ul li:only-child")在<ul>中选取是惟一子元素的<li>元素 |
// :nth-child()选择器
a) nth-child(even/odd)：能选取每个父元素下的索引值为偶(奇)数的元素。
b) nth-child(2)：能选取每个父元素下的索引值为 2 的元素。
c) nth-child(3n)：能选取每个父元素下的索引值是 3 的倍数的元素。 (n从1开始)
d) nth-child(3n + 1)：能选取每个父元素下的索引值是 3n + 1的元素。(n从1开始)
6.表单对象属性过滤选择器
| 选择器 | 描述 | 返回 | 示例 |
| :enable | 选取所有可用元素 | 集合元素 | $("#form1:enabled");选取id为“form1”的表单内所有可用元素 |
| :disabled | 选取所有不可用元素 | 集合元素 | $("#form2:dissabled");选取id为“form2”的表单内所有不可用元素 |
| :checked | 选取所有被选中的元素（单选框，复选框） | 集合元素 | $("input:checked");选取所有被选中的<input>元素 |
| :selected | 选取所有被选中的选项元素（下拉列表） | 集合元素 | $("selecct option:selected");选取所有被选中的选项元素 |
- 表单选择器
a) “:input”，选取所有<input>、<textarea>、<select >和<button>元素。
b) “:text”，选取所有的文本框元素。
c) “:password”，选取所有的密码框元素。
d) “:radio”，选取所有的单选框元素。
e) “:checkbox”，选取所有的多选框元素。
f) “:submit”，选取所有的提交按钮元素。
g) “:image”，选取所有的图像按钮元素。
h) “:reset”，选取所有重置按钮元素。
i) “:button”，选取所有按钮元素。
j) “:file”，选取所有文件上传域元素。
k) “:hidden”，选取所有不可见元素。
