JQuery学习日记 (1)---------jQuery简介 && jQuery选择器（总）

简介

• jQuery 就是通过 jQuery($()) 包装对象后产生的对象
• jQuery 对象是独有的，若一个对象是jQuery 对象，则它可使用 jQuery 里的方法，如$("#persontab").html()
• jQuery 对象无法使用 DOM 中的任何方法，同样，DOM对象也不可以是使用 jQUery 里的任何方法
• 约定：如果获取的是jQuery 对象，则要在变量前加上 $
• var $variable = jQuery对象
  var variable = DOM 对象

---

jQuery 与 DOM 的转换

1、jQuery 对象是一个数组对象，可以通过 [index] 的方式得到一个DOM对象

var $cr = $("#cr");
var cr = $cr[0];

2、使用 jQuery 中的 get(index) 方法得到相应的 DOM 对象

var $cr = $("#cr");
var cr = $cr.get(0);

3、对于一个 DOM 对象，只需要用 $() 把 DOM　对象包装起来

var cr = document.getElementById("cr");
var $cr = $(cr);

---

选择器

1. 基本选择器
   （1）#id

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

(2)element

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

(3).class

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

(4) *

//找到每一个元素
$("*")

3. 层级选择器
   (1)ancestor descendant
   在给定的祖先元素下匹配所有的后代元素

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

(2)parent > child
在给定的父元素下匹配所有的子元素

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

(3)prev + next
匹配所有紧接在 prev 元素后的 next 元素

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

(4)prev ~ siblings
匹配 prev 元素之后的所有 siblings 元素

找到所有与表单同辈的 input 元素
$("form ~ input")

4. 过滤选择器
   (1):first
   获取第一个元素

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

(2):last()
获取最后个元素

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

(3):not(selector)
去除所有与给定选择器匹配的元素

查找所有未选中的 input 元素
$("input:not(:checked)")

(4):even
匹配所有索引值为偶数的元素，从 0 开始计数

查找表格的1、3、5...行（即索引值0、2、4...）
$("tr:even")

(5):odd
匹配所有索引值为奇数的元素，从 0 开始计数

查找表格的2、4、6行（即索引值1、3、5...）
$("tr:odd")

(6):eq(index)
匹配一个给定索引值的元素
(从 0 开始计数)

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

(7):gt(index)
匹配所有大于给定索引值的元素

查找第二第三行，即索引值是1和2，也就是比0大
$("tr:gt(0)")

(8):lt(index)
匹配所有小于给定索引值的元素

查找第一第二行，即索引值是0和1，也就是比2小
$("tr:lt(2)")

(9):header
匹配如 h1, h2, h3之类的标题元素

给页面内所有标题加上背景色
$(":header").css("background", "#EEE");

(10):animated
匹配所有正在执行动画效果的元素

只有对不在执行动画效果的元素执行一个动画特效
<button id="run">Run</button><div></div>

5. 内容选择器
   (1):contains(text)
   匹配包含给定文本的元素

查找所有包含 "John" 的 div 元素
$("div:contains('John')")

(2):empty
匹配所有不包含子元素或者文本的空元素

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

(3):has(selector)
匹配含有选择器所匹配的元素的元素

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

(4):parent
匹配含有子元素或者文本的元素

查找所有含有子元素或者文本的 td 元素
$("td:parent")

6. 可见性选择器
   (1):hidden
   匹配所有不可见元素，或者type为hidden的元素

查找隐藏的 tr
$("tr:hidden")

(2):visible
匹配所有的可见元素

查找所有可见的 tr 元素
$("tr:visible")

7. 属性选择器
   (1)[attribute]
   匹配包含给定属性的元素。注意，在jQuery 1.3中，前导的@符号已经被废除！如果想要兼容最新版本，只需要简单去掉@符号即可。

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

(2)[attribute=value]
匹配给定的属性是某个特定值的元素

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

(3)[attribute!=value]
匹配所有不含有指定的属性，或者属性不等于特定值的元素。

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

(4)[attribute^=value]
匹配给定的属性是以某些值开始的元素

查找所有 name 以 'news' 开始的 input 元素
$("input[name^='news']")

(5)[attribute$=value]
匹配给定的属性是以某些值结尾的元素

查找所有 name 以 'letter' 结尾的 input 元素
$("input[name$='letter']")

(6)[attribute*=value]
匹配给定的属性是以包含某些值的元素

查找所有 name 包含 'man' 的 input 元素
$("input[name*='man']")

(7)[selector1][selector2][selectorN]
复合属性选择器，需要同时满足多个条件时使用。

找到所有含有 id 属性，并且它的 name 属性是以 man 结尾的
$("input[id][name$='man']")

8. 子元素选择器
   (1):nth-child
   匹配其父元素下的第N个子或奇偶元素
   ‘:eq(index)’ 只匹配一个元素，而这个将为每一个父元素匹配子元素。:nth-child从1开始的，而:eq()是从0算起的！

在每个 ul 查找第 2 个li
$("ul li:nth-child(2)")

(2):first-child
匹配第一个子元素

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

(3):last-child
匹配最后一个子元素

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

(4):only-child

如果某个元素是父元素中唯一的子元素，那将会被匹配

如果父元素中含有其他元素，那将不会被匹配。

在 ul 中查找是唯一子元素的 li
$("ul li:only-child")

9. 表单选择器

(1):input
匹配所有 input, textarea, select 和 button 元素

查找所有的input元素，下面这些元素都会被匹配到。
$(":input")

(2):text
匹配所有的单行文本框

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

(3):password
匹配所有密码框

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

(4):radio
匹配所有单选按钮

查找所有单选按钮
$(":radio")

(5):checkbox
匹配所有复选框

查找所有复选框
$(":checkbox")

(6):submit
匹配所有提交按钮

查找所有提交按钮
$(":submit")

(7):image
匹配所有图像域

匹配所有图像域
$(":image")

(8):reset
匹配所有重置按钮

查找所有重置按钮
$(":reset")

(9):button
匹配所有按钮

查找所有按钮.
$(":button")

(10):file
匹配所有文件域

查找所有文件域
$(":file")

(11):hidden
匹配所有不可见元素，或者type为hidden的元素

查找隐藏的 tr
$("tr:hidden")

11. 表单对象属性
    (1):enabled
    匹配所有可用元素

查找所有可用的input元素
$("input:enabled")

(2):disabled
匹配所有不可用元素

查找所有不可用的input元素
$("input:disabled")

(3):checked
匹配所有选中的被选中元素(复选框、单选框等，不包括select中的option)

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

(4):selected
匹配所有选中的option元素

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