jQuery的三种$()

$号是jQuery“类”的一个别称，$()构造了一个jQuery对象。

$()可以是$(expresion)

即css选择器、Xpath或html元素，也就是通过上述表达式来匹配目标元素。
比如：$(“a”)构造的这个对象，是用CSS选择器构建了一个jQuery对象——它选择了所有的<a/>这个标签。如：

$("a").click(function(){...})`

就是在点击页面上的任何一个链接时的触发事件。确切地说，就是jQuery用<a/>这个标签构建了一个对象$("a")，函数click()是这个jQuery对象的一个（事件）方法。

$("<div><p>Hello</p></div>").appendTo("body");

$()中的是一个字符串，用这样一段字串构建了jQuery对象，然后向<body/>中添加这一字串。

$()可以是$(element)

即一个特定的DOM元素。如常用的DOM对象有document、location、form等。如这样一行代码：

$(document).find("div>p").html()); 

$()中的document是一个DOM元素，即在全文寻找带<p>的<div>元素，并显示<p>中的内容。

$()可以是$(function)

即一个函数，它是$(document).ready()的一个速记方式。如常见的形式是这样的：

$(document).ready(function(){ 
alert("Hello world!"); 
}); 

可变形作：

$(function(){ 
alert("Hello world!"); 
}); 

对于选择HTML文档中的elements，jQuery有两种方法：

1. 如$("div>ul a")，它的意思是div标签中的ul标签中的a标签
   不过，$('div>ul')和$('div ul')是有区别的，
   
   • $('div>ul')是<div>的直接后代里找<ul>；
   • $('div ul')是在<div>的所有后代里找<ul>。
2. 用jQuery对象的几个方法（如方法find()、each()等）
   $("#orderedlist).find("li")就像 $("#orderedlist li"). each()一样迭代了所有的li，而表达式中的#表示HTML中的ID，如上例中的#orderedlist就表示ID为orderedlist所在的标签”。

---

1. $('div>ul')和$('div ul')是有区别的，
   $('div>ul')是<div>的直接后代里找<ul>；而$('div ul')是在<div>的所有后代里找<ul>。
   所以，$('#sId>li')所选择的是id为sId的所有<li>孩子节点，即使这个<li>的后代还有<li>也不是它所找的范围（所找到的DOM对象，只是它本级的DOM对象。）。而$('#sId li:not(.horizontal)')，就是指类名sId里面的所有li的子孙中没有horizontal类的所有元素。——这里的not()是一个negation pseudo class.

2. XPath选择器
   如：选择所有带有title 属性的链接，我们会这样写：$('a[@title]')
[]里带@，说明[]里的是元素的属性；是个属性选择器
   []里没@，说明[]里的是元素的子孙。
   $('ul li')和$('ul[li]')虽然返回的都是一个jQuery数组，但两者的含义正好相反。前者是要找<ul>下所有<li>子孙，而后者却是在找所有子孙为<li>的<ul>数组。
   在XPath中，要找一个“以…开头”的属性，用^=，如找一个name属性是以mail开头的input元素，就用
   $('input[@name^="mail"]')
   要找一个“以…结尾”的属性，要用$=
   要找一个“不头不尾”的属性，用*=

3. 不属于上述的CSS和XPath的选择器，就是自定义的选择器了，用:表示，这里要用的就是:first，:last，:parent ，:hidden，:visible，:odd，:even，:not('xxx')，:eq(0)（始于0)，:nth(n），:gt(0)，:lt(0)，:contains("xxx")
   如：$('tr:not([th]):even')意为<tr>元素的子孙中不含<th>的所有子孙的偶数项

4. 要直接访问DOM元素，可用get(0)的方法，如
   $('#myelement').get(0)，也可缩写成$('#myelement')[0]

---

基本选择器

基本选择器	-
$("#id")	ID选择器
$("div")	元素选择器
$(".classname")	类选择器
$(".classname,.classname1,#id1")	组合选择器

层次选择器

层次选择器	-
$("#id>.classname")	子元素选择器
$("#id.classname")	后代元素选择器
$("#id+.classname")	紧邻下一个元素选择器
$("#id~.classname")	兄弟元素选择器

过滤选择器

过滤选择器	-
$("li:first")	第一个li
$("li:last")	最后一个li
$("li:even")	挑选下标为偶数的li
$("li:odd")	挑选下标为奇数的li
$("li:eq(4)")	下标等于4的li
$("li:gt(2)")	下标大于2的li
$("li:lt(2)")	下标小于2的li
$("li:not(#runoob)")	挑选除id=”runoob”以外的所有li
内容过滤选择器	-
$("div:contains('Runob')")	包含Runob文本的元素
$("td:empty")	不包含子元素或者文本的空元素
$("div:has(selector)")	含有选择器所匹配的元素
$("td:parent")	含有子元素或者文本的元素
可见性过滤选择器
$("li:hidden")	匹配所有不可见元素，或type为hidden的元素
$("li:visible")	匹配所有可见元素
属性过滤选择器
$("div[id]")	所有含有id属性的div元素
$("div[id='123']")	id属性值为123的div元素
$("div[id!='123']")	id属性值不等于123的div元素
$("div[id^='qq']")	id属性值以qq开头的div元素
$("div[id$=’zz’]”)`	id属性值以zz结尾的div元素
$("div[id*='bb']")	id属性值包含bb的div元素
$("input[id][name$='man']")	多属性选过滤，同时满足两个属性的条件的元素
状态过滤选择器
$("input:enabled")	匹配可用的input
$("input:disabled")	匹配不可用的input
$("input:checked")	匹配选中的input
$("option:selected")	匹配选中的option

表单选择器

表单选择器	-
$(":input")	匹配所有input,textarea,select和button元素
$(":text")	所有的单行文本框，$(":text")等价于$("[type=text]")，推荐使用$("input:text")效率更高，下同
$(":password")	所有密码框
$(":radio")	所有单选按钮
$(":checkbox")	所有复选框
$(":submit")	所有提交按钮
$(":reset")	所有重置按钮
$(":button")	所有button按钮
$(":file")	所有文件域