关于 : 和 [] 这两个符号的理解

：可以理解为种类的意思，如：p:first，p 的种类为第一个。

[] 很自然的可以理解为属性的意思，如：[href] 选取带有 href 属性的元素。

通过 $(":button") 可以选取所有 type="button" 的 <input> 元素 和 <button> 元素，如果去掉冒号，$("button")只能获取 <button> 元素。

<p id="test1">点进这里测试 <b>button</b></p><p id="test2">点进这里测试 <b>:button</b></p><button>Button 按钮</button><input type="button" value="Input 按钮">

在线实例

1.基本选择器

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

2.层次选择器

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

3.过滤选择器(重点)

$("li:first")  //第一个li$("li:last")   //最后一个li$("li:even")   //挑选下标为偶数的li$("li:odd")   //挑选下标为奇数的li$("li:eq(4)")  //下标等于 4 的li(第五个 li 元素)$("li:gt(2)")  //下标大于 2 的li$("li:lt(2)")  //下标小于 2 的li$("li:not(#facesoho)") //挑选除 id="facesoho" 以外的所有li

3.2内容过滤选择器

$("div:contains('facesoho')")  // 包含 facesoho文本的元素$("td:empty")         //不包含子元素或者文本的空元素$("div:has(selector)")    //含有选择器所匹配的元素$("td:parent")        //含有子元素或者文本的元素

3.3可见性过滤选择器

$("li:hidden")    //匹配所有不可见元素，或type为hidden的元素$("li:visible")   //匹配所有可见元素

3.4属性过滤选择器

$("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']") //多属性选过滤，同时满足两个属性的条件的元素

3.5状态过滤选择器

$("input:enabled")  // 匹配可用的 input$("input:disabled")  // 匹配不可用的 input$("input:checked")  // 匹配选中的 input$("option:selected") // 匹配选中的 option

4.表单选择器

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

对于first()的补充说明:

如果首个元素存在嵌套的情况，有两中情况，会有不同的结果如下：

1.情况一：

<div> <p>我是外面的 div 内容</p> <!-- first()指定对象 --> <div>  <p>我是里面的 div 内容</p> </div></div><div> <p>...</p></div>

$("div p").first(); 指的是 <p> 我是外面的 div 内容 <p>

2.情况二：

<div> <div>  <p>我是里面的 div 内容</p> <!-- first()指定对象 --> </div> <p>我是外面的 div 内容</p></div><div> <p>...</p></div>

$("div p").first(); 指的是 <p> 我是里面的 div 内容 <p>

总结：也就是说，遇到嵌套的情况时优先级是从里到外 ，从前到后。last() 也是同理，顺序是 从里到外，从后到前。

参数可以是个 list:

function afterText(){    var txt1="<b>I </b>";          // 使用 HTML 创建元素    var txt2=$("<i></i>").text("love ");   // 使用 jQuery 创建元素    var txt3=document.createElement("big"); // 使用 DOM 创建元素    txt3.innerHTML="jQuery!";    $("img").after([txt1,txt2,txt3]);     // 在图片后添加文本}