心系少時言 等一不歸人

JSON(JavaScript Object Notation, JS 對象標記) 是一種輕量級的數(shù)據(jù)交換格式。它基于 ECMAScript (w3c制定的js規(guī)范)的一個子集坷虑，采用完全獨立于編程語言的文本格式來存儲和表示數(shù)據(jù)兜材。簡潔和清晰的層次結(jié)構(gòu)使得 JSON 成為理想的數(shù)據(jù)交換語言厢汹。 易于人閱讀和編寫，同時也易于機器解析和生成诱担，并有效地提升網(wǎng)絡(luò)傳輸效率鸡号。

參考源引地址：
https://baike.baidu.com/item/JSON/2462549
http://blog.csdn.net/fengyun14/article/details/8184563
http://blog.csdn.net/feicongcong/article/details/53464763
http://www.ruanyifeng.com/blog/2014/03/undefined-vs-null.html
http://www.w3school.com.cn/jquery/jquery_selectors.asp

JSON 語法規(guī)則

在 JS 語言中，一切都是對象赔癌。因此诞外，任何支持的類型都可以通過 JSON 來表示，例如字符串灾票、數(shù)字峡谊、對象、數(shù)組等刊苍。但是對象和數(shù)組是比較特殊且常用的兩種類型：
對象表示為鍵值對
數(shù)組由逗號分隔
花括號保存對象
方括號保存數(shù)組

變量定義

var a = {};  //定義一個空的json對象
var b = [];  //定義一個空的json數(shù)組
var c = "";  //定義一個空的字符串

JSON 鍵/值對

JSON 鍵值對是用來保存 JS 對象的一種方式既们，和 JS 對象的寫法也大同小異，鍵/值對組合中的鍵名寫在前面并用雙引號 "" 包裹正什，使用冒號 : 分隔啥纸，然后緊接著值：

{"firstName": "John"}   鍵名不待帶引號也可以正確解析，但是不推薦
推薦{"a": "Hello", "b": "World"}
不推薦 {a: 'Hello', b: 'World'}

強調(diào) JSON鍵（屬性）區(qū)分大小寫

var a = {"name" : "John", "Name" : "Lily"};   //name,Name 是兩個不同的鍵

單引號和雙引號

JS中定義字符串變量時埠忘，用單引號或者雙引號的是可以的脾拆，可根據(jù)實際情況具體選擇
如果字符串值是 一串html代碼，或者值里面包含比較多的雙引號莹妒，那么可以使用單引號：

var html = '<div class="infobox" style="width:200px;"></div>';
var word = 'John Say:"where are you going?"';

反之可以使用雙引號:

var a = "Hi,I'm going to school";

如果字符串值里面同時包含單引號和雙引號名船，那么如果使用單引號包裹值，值里面的單引號需要用 \ 轉(zhuǎn)義旨怠，如果使用雙引號包裹渠驼，那么值里面的雙引號需要用 \ 轉(zhuǎn)義

var html = '<div class="infobox" style="width:200px;">Hi,I\'m going to school</div>';
var html2 = "<div class=\"infobox\" style=\"width:200px;\">Hi,I'm going to school</div>"

如果值里面包含\那么需要用兩個\表示

var str = "這段字符串里面含有一個\\字符";
var str2 = "這段字符串里面含有兩個\\\\字符";

字符串中使用變量

如果字符串使用單引號包裹，那么也使用單引號(' + 變量名稱 + ')連接變量

var name="John";
var str1 = '大家好鉴腻！我的名字叫：'+ name +',今天很高興認識大家';
var str2 = '大家好迷扇！我的名字叫'+ name;

如果字符串使用雙引號包裹百揭，那么也使用雙引號("+ 變量名稱 +")連接變量

var name="John";
var str1 = "大家好！我的名字叫："+ name +",今天很高興認識大家";
var str2 = "大家好蜓席！我的名字叫"+ name;

字符串多行展示

var name="John";
//方式1
var html='<div>';
    html+=' <p>';
    html+=' <strong>大家好</strong>';
    html+=' <span>很高興認識大家</span>';
    html+=' </p>';
    html+='</div>';
//方式2
var html1='<div>'
        +'  <p>'
        +'  <strong>大家好</strong>'
        +'  <span>很高興認識大家</span>'
        +'  </p>'
        +'</div>';
//方式3
var html2='<div>'
        +'  <p>'
        +'  <strong>大家好</strong>'
        +'  <span>我的名字叫：'+ name +'器一，很高興認識大家</span>'
        +'  </p>'
        +'</div>';
//方式4
var html3='<div>\
                <p>\
                    <strong>大家好</strong>\
                    <span>很高興認識大家</span>\
                </p>\
            </div>';
//方式5
var html4='<div>\
                <p>\
                    <strong>大家好</strong>\
                    <span>我的名字叫:'+ name +'，很高興認識大家</span>\
                </p>\
            </div>';

JSON 與 JS 對象的關(guān)系

很多人搞不清楚 JSON 和 Js 對象的關(guān)系厨内，甚至連誰是誰都不清楚祈秕。其實，可以這么理解：

JSON 是 JS 對象的字符串表示法雏胃，它使用文本表示一個 JS 對象的信息请毛，本質(zhì)是一個字符串。如：

var obj = {a: 'Hello', b: 'World'}; //這是一個對象瞭亮，注意鍵名也是可以使用引號包裹的
var json = '{"a": "Hello", "b": "World"}'; //這是一個 JSON 字符串方仿，本質(zhì)是一個字符串

JSON 和 JS 對象互轉(zhuǎn)

要實現(xiàn)從對象轉(zhuǎn)換為 JSON 字符串，使用 JSON.stringify() 方法：

var json = JSON.stringify({a: 'Hello', b: 'World'}); //結(jié)果是 '{"a": "Hello", "b": "World"}'

要實現(xiàn)從 JSON 轉(zhuǎn)換為對象统翩，使用 JSON.parse() 方法：

var obj = JSON.parse('{"a": "Hello", "b": "World"}'); //結(jié)果是 {a: 'Hello', b: 'World'}
//jQuery.parseJSON('{"a": "Hello", "b": "World"}'); //同樣效果

常用類型

在 JS 語言中仙蚜，一切都是對象。因此厂汗，任何支持的類型都可以通過 JSON 來表示，例如字符串面徽、數(shù)字、對象匣掸、數(shù)組等趟紊。但是對象和數(shù)組是比較特殊且常用的兩種類型。

對象：對象在 JS 中是使用花括號包裹 {} 起來的內(nèi)容碰酝，數(shù)據(jù)結(jié)構(gòu)為 {key1：value1, key2：value2, ...} 的鍵值對結(jié)構(gòu)霎匈。在面向?qū)ο蟮恼Z言中，key 為對象的屬性送爸，value 為對應(yīng)的值铛嘱。鍵名可以使用整數(shù)和字符串來表示。值的類型可以是任意類型袭厂。

數(shù)組：數(shù)組在 JS 中是方括號 [] 包裹起來的內(nèi)容墨吓，數(shù)據(jù)結(jié)構(gòu)為 ["java", "javascript", "vb", ...] 的索引結(jié)構(gòu)。在 JS 中纹磺，數(shù)組是一種比較特殊的數(shù)據(jù)類型帖烘，它也可以像對象那樣使用鍵值對，但還是索引使用得多橄杨。同樣秘症，值的類型可以是任意類型照卦。

JSON數(shù)據(jù)的常用使用場景

對象賦值與讀取

賦值：
var a = {};
a["id"] = 1;  //數(shù)字賦值
a["name"] = "John";  //字符串賦值
var _school = "北京大學(xué)";
a["school"] = _school;  //字符串變量賦值
//a={"id": 1, "name": "John" ,"school": "北京大學(xué)"};

讀取：
var a = {"id": 1,"name": "John","school": "北京大學(xué)"};
//方式一
var html = "編號："+ a.id +",姓名："+ a.name +",就讀學(xué)校："+ a.school;
//方式二
var html2 = "編號："+ a["id"] +",姓名："+ a["name"] +", 就讀學(xué)校："+ a["school"];
//一個比較復(fù)雜的例子
var a = {
       "id": 1,
       "name": "John",
       "school": "北京大學(xué)",
       "schoolinfo": {
            "title": "北京大學(xué)",
            "address": "中國北京市朝陽區(qū)20號"
        }
      };
var html3 = "編號：" +a.id
        +", 姓名："+ a.name
        +", 就讀學(xué)校："+ a.school
        +"學(xué)校地址："+ a.schoolinfo.address;
var html4 = "編號："+ a["id"]
        +", 姓名："+ a["name"]
        +", 就讀學(xué)校："+ a["school"]
        +", 學(xué)校地址："+ a["schoolinfo"]["address"];

如果一個對象里面的某個鍵（屬性）不存在乡摹，那么會報undefined,所以在不確定鍵是否存在的情況下役耕，需要作undefined驗證

var a = {
  "id": 1,
  "name": "John",
  "school": "北京大學(xué)",
  "schoolinfo": {
        "title": "北京大學(xué)",
        "address": "中國北京市朝陽區(qū)20號"
    }
};
var html = "編號："+ a["id"] +",姓名："+ a["name"] +",就讀學(xué)校："+ a["school"];
if (a["age"] != undefined)
{
      html += ",年齡："+ a["age"];
}
//推薦使用下面方法驗證
if (a["age"] != null)
{
      html += ",年齡："+ a["age"];
}
if (a["schoolinfo"] != null && a["schoolinfo"]["address"] != null){
    html += ",學(xué)校地址："+ a["schoolinfo"]["address"];
}

關(guān)于null和undefined的區(qū)別請參閱下面地址：
http://blog.csdn.net/fengyun14/article/details/8184563
http://blog.csdn.net/feicongcong/article/details/53464763
http://www.ruanyifeng.com/blog/2014/03/undefined-vs-null.html

將一個對象添加到一個數(shù)組(push())

//示例一
var arr = [3,5];
arr.push(1);
arr.push(2);
var s = "你好";
var t = 10;
arr.push(s);
arr.push(t)
//結(jié)果：arr=[3, 5, 1, 2, "你好", 10];
?
//示例二
var arr2 = [{"id": 1,"name": "John"},{"id": 2,"name": "Lily"}];
var user = {"id": 3,"name": "Susan"};
arr2.push(user);
arr2.push({"id": 4,"name": "Zhiyi Wang"});

//結(jié)果：
arr2=[
        {"id": 1, "name": "John"},
        {"id": 2, "name": "Lily"},
        {"id": 3, "name": "Susan"},
        {"id": 4, "name": "Zhiyi Wang"}
    ]

數(shù)組過濾($.grep())

//示例一
var arr = [1, 2, 3, 4, 5];
//過濾出大于3的元素放到新的數(shù)組newarr里面
var newarr = $.grep(arr, function (v) {
    return v > 3;
});
//newarr:[4,5]

//示例二
//過濾出就讀于北京大學(xué)的記錄放到新數(shù)組里面
var students = [
    {"id":1,"name":"John","school":"清華大學(xué)"},
    {"id":2,"name":"Lily","school":"北京大學(xué)"},
    {"id":3,"name":"Susan","school":"上海大學(xué)"},
    {"id":4,"name":"Zhiyi Wang","school":"北京大學(xué)"}
];
var result = $.grep(students, function (v) {
    return v["school"] == "北京大學(xué)";
    //或者 return  v.school == "北京大學(xué)";
});

//結(jié)果：
result = [
  {"id": 2, "name": "Lily", "school": "北京大學(xué)"},
  {"id": 4, "name": "Zhiyi Wang", "school": "北京大學(xué)"}
]

清空一個數(shù)組

var arr = [1,2,3];
//清空方式一
arr = []; //推薦使用
//清空方式二
arr.length = 0;
//清空方式三
arr.splice(0,arr.length); 

查找(indexOf(), lastIndexOf(), $.inArray())

字符串查找
indexOf(): 第一次出現(xiàn)
lastIndexOf(): 最后一次出現(xiàn)

var str = "hello,my name is susan";
//查找 o 第一次出現(xiàn)的位置
var index1 = str.indexOf('o');
//index1 = 4;
//查找 s 最有一次出現(xiàn)的位置
var index2 = str.lastIndexOf("s");
//index2 = 19;

//如果沒有找到，則返回-1;

數(shù)組查找
$.inArray()

var names  =["John", "Lily", "Susan"];
var index = $.inArray("Lily", names);
//index = 1;
var index2 = $.inArray("John", names);
//index2 = 0;//找到了 角標0
var index3 = $.inArray("Zhang", names);
//index3 = -1; 注意：如果沒有找到返回-1聪廉，而非0

數(shù)組合并去重(concat,jQuery.merge,jQuery.unique)

var names1=["John","Lily","Susan"];
var names2=["Zhangli","Lily","Taidi"];

//方式一
var names3=names1.concat(names2);

//方式二
var names4=$.merge(names1,names2); //將names2合并到names1里面
//names4 和 names1 集合是一樣的

//方式三
var names5=[];
for(var i=0;i<names1.length;i++)
{
    names5.push(names1[i]);  
}
for(var i=0;i<names2.length;i++)
{
    names5.push(names2[i]);  
}

//或者
$.each(names1,function(i,v){
    names5.push(v)
});
$.each(names2,function(i,v){
    names5.push(v)
});

//去重
$.unique(names3);  //此時的names3已經(jīng)去重復(fù)了,無需賦值給某個變量

數(shù)組轉(zhuǎn)化為字符串(join)

var student = [1,2,3,4];
var str = student.join(",");
//str = "1, 2, 3, 4";

注意：一般此方法用于數(shù)字數(shù)組轉(zhuǎn)字符串瞬痘，如果是字符串數(shù)組有逗號，可能會有問題

將數(shù)組數(shù)據(jù)輸出到html表格(for, $.each())

html代碼：
<html>
<body>
    <div id="dataview"></div>
</body>
</html>

json數(shù)據(jù)：
var students=[
    {"id":1,"name":"John","school":"清華大學(xué)"},
    {"id":2,"name":"Lily","school":"北京大學(xué)"},
    {"id":3,"name":"Susan","school":"上海大學(xué)"},
    {"id":4,"name":"Zhiyi Wang","school":"北京大學(xué)"}
];
將stucents里面的數(shù)據(jù)顯示到div[id='dataview']里面

js代碼：
方法一
var html = '<table>';
html += '<tr>\
            <td>ID</td>\
            <td>姓名</td>\
            <td>學(xué)校</td>\
        </tr>';
for(var i = 0; i < students.length; i++)
{
    var item = students[i];
    html += '<tr>'
            +'<td>'+ item["id"] +'</td>'
            +'<td>'+ item["name"] +'</td>'
            +'<td>'+ item["school"] +'</td>'
        +'</tr>';
}
html += '</table>';
$("#dataview").html(html);

//或者
var html2 = '<table>';
html2 += '<tr>\
            <td>ID</td>\
            <td>姓名</td>\
            <td>學(xué)校</td>\
        </tr>';
$.each(students,function(index,item){
    html2 += '<tr>'
            +'<td>'+ item["id"] +'</td>'
            +'<td>'+ item["name"] +'</td>'
            +'<td>'+ item["school"] +'</td>'
        +'</tr>';
});
html2 += '</table>';
$("#dataview").html(html2);

方法二
var table=$('<table></table>');
var header=$('<tr>\
            <td>ID</td>\
            <td>姓名</td>\
            <td>學(xué)校</td>\
        </tr>');
table.append(header);
for(var i=0;i<students.length;i++)
{
  var item = students[i];
  var tr=$('<tr>'
            +'<td>'+item["id"]+'</td>'
            +'<td>'+item["name"]+'</td>'
            +'<td>'+item["school"]+'</td>'
        +'</tr>');
    table.append(tr);
}
$("#dataview").append(table);//此段代碼也可以放置再第1行后面

//或者
var table2=$('<table></table>');
var header2=$('<tr>\
            <td>ID</td>\
            <td>姓名</td>\
            <td>學(xué)校</td>\
        </tr>');
header2.append(header2);
$.each(students,function(index,item){
     var tr=$('<tr>'
            +'<td>'+item["id"]+'</td>'
            +'<td>'+item["name"]+'</td>'
            +'<td>'+item["school"]+'</td>'
        +'</tr>');
    table2.append(tr);
})
$("#dataview").append(table2); 

遍歷JSON對象所有鍵值（所有屬性和值）

var a = {Id: 0, Title: "kuujia soft", AddDate: "2017-08-05"};
var str = "";
for(var key in a){
    str += key + ":" + a[key] + "<br />";
}

將JSON對象值輸出到form表單

json數(shù)據(jù)：
var data={"id":1,"name":"John","school":"清華大學(xué)","sex":"男"}

普通用法

html代碼：
<form>
  <div>
    <label>編號</label>
    <input type="text" id="userid" />
  </div>
  <div>
    <label>姓名</label>
    <input type="text" id="username" />
  </div>
  <div>
    <label>性別</label>
    <select id="usersex">
      <option value="男">男</option>
      <option value="女">女</option>
    </select>
  </div>
  <div>
    <label>就讀學(xué)校</label>
    <input type="text" id="gotoschool" />
  </div>
</form>


表單賦值：
$("#userid").val(data.id);
//或者$("#userid").val(data["id"]);
$("#username").val(data.name);
//或者$("#username").val(data["name"]);
$("#usersex").val(data.sex);
//或者$("#usersex").val(data["sex"]);
$("#gotoschool").val(data.school);
//或者$("#gotoschool").val(data["school"]);

進階用法

html代碼：
<!--為需要賦值的DOM增加一個自定義屬性 field,值為json對象的鍵(屬性)名-->
<form>
  <div>
    <label>編號</label>
    <input type="text" field="id" />
  </div>
  <div>
    <label>姓名</label>
    <input type="text" field="name" />
  </div>
  <div>
    <label>性別</label>
    <select field="sex">
      <option value="男">男</option>
      <option value="女">女</option>
    </select>
  </div>
  <div>
    <label>就讀學(xué)校</label>
    <input type="text" field="school" />
  </div>
</form>


表單賦值：
//方式一
for(var key in data)
{
    $("input[field='"+key+"'],select[field='"+key+"']").val(data[key]);      
}
//方式二
$("input[field],select[field]").each(function(){
    var field=$(this).attr("field");
    if(field!=null&&data[field]!=null)
    {
        $(this).val(data[field]);
    }
});

從form表單獲取值到JSON對象

普通用法

html代碼：
<form>
  <div>
    <label>編號</label>
    <input type="text" id="userid" />
  </div>
  <div>
    <label>姓名</label>
    <input type="text" id="username" />
  </div>
  <div>
    <label>性別</label>
    <select id="usersex">
      <option value="男">男</option>
      <option value="女">女</option>
    </select>
  </div>
  <div>
    <label>就讀學(xué)校</label>
    <input type="text" id="gotoschool" />
  </div>
</form>


js獲取表單值到j(luò)son對象里面：
var data={};
data["id"]=$("#userid").val();
data["name"]=$("#username").val();
data["sex"]=$("#usersex").val();
data["school"]=$("#gotoschool").val();

進階用法

html代碼：
<!--為需要賦值的DOM增加一個自定義屬性 field,值為json對象的鍵(屬性)名-->
<form>
  <div>
    <label>編號</label>
    <input type="text" field="id" />
  </div>
  <div>
    <label>姓名</label>
    <input type="text" field="name" />
  </div>
  <div>
    <label>性別</label>
    <select field="sex">
      <option value="男">男</option>
      <option value="女">女</option>
    </select>
  </div>
  <div>
    <label>就讀學(xué)校</label>
    <input type="text" field="school" />
  </div>
</form>


js獲取表單值到j(luò)son對象里面：
var data={};
$("input[field],select[field]").each(function(){
  var field=$(this).attr("field");
  data[field]=$(this).val();
});

從一個table表單獲取數(shù)據(jù)到JSON數(shù)組

比如批量錄入學(xué)員信息后需要獲取數(shù)據(jù)到j(luò)son數(shù)組

html代碼：
<form>
  <table>
    <tr>
        <td>ID:<input type="text" field="id" /></td>
        <td>姓名:<input type="text" field="name" /></td>
        <td>性別:<select field="sex">
            <option value="男">男</option>
            <option value="女">女</option>
          </select></td>
        <td>學(xué)校:<input type="text" field="school" /></td>
    </tr>
    <tr>
        <td>ID:<input type="text" field="id" /></td>
        <td>姓名:<input type="text" field="name" /></td>
        <td>性別:<select field="sex">
            <option value="男">男</option>
            <option value="女">女</option>
          </select></td>
        <td>學(xué)校:<input type="text" field="school" /></td>
    </tr>
    <tr>
        <td>ID:<input type="text" field="id" /></td>
        <td>姓名:<input type="text" field="name" /></td>
        <td>性別:<select field="sex">
            <option value="男">男</option>
            <option value="女">女</option>
          </select></td>
        <td>學(xué)校:<input type="text" field="school" /></td>
    </tr>
  </table>
</form>


js代碼：
var students=[];
$("form table tr").each(function(){
    var _s=$(this);
    var item={};
    $("input[field],select[field]",_s).each(function(){   //注意此行代碼的$(a, b)兩個參數(shù)的用途：
      var field=$(this).attr("field");//注意此行的this和第3行代碼的this
      item[field]=$(this).val();
    });
    students.push(item);
});

Jquery常用方法

$.trim()    左右兩邊去空格
$.each()    遍歷函數(shù)锄列，如：遍歷一個數(shù)組图云，遍歷一個頁面的所有鏈接/圖片等等
$.inArray() 查找
$(a,b)  獲取元素
$(a,b).val()    設(shè)置或獲取一個節(jié)點(input,textarea,select)的值
$(a,b).html()   設(shè)置或獲取一個節(jié)點的html
$(a,b).text()   設(shè)置或獲取一個節(jié)點的text
$(a,b).show()   顯示一個元素
$(a,b).hide()   隱藏一個元素
$(a,b).toggle() 切換顯示/隱藏匹配的元素(如果顯示就隱藏，如果隱藏就顯示)邻邮，并可選附帶過渡動畫效果竣况。
$(a,b).attr()   設(shè)置或獲取某個屬性
$(a,b).prop()   設(shè)置或獲取某個屬性
$(a,b).is() 重用于判斷一個元素是否隱藏，一個復(fù)選框是否選中
$(a,b).remove() 移除一個元素
$(a,b).append(c)    往一個元素內(nèi)（末尾）追加一個子元素
$(a,b).prepend(c)   往一個元素內(nèi)（開始）追加一個子元素
$(a,b).before(c)    在一個元素（外部）前面插入一個元素
$(a,b).after(c) 在一個元素（外部）后面插入一個元素
$(a,b).empty()  清空一個元素里面的所有子節(jié)點
$(a,b).addClass(c)  增加一個樣式(css類名)
$(a,b).toggleClass(c)   切換當前對象所匹配的每一個元素上指定的css類名筒严。
$(a,b).removeClass(c)   移除一個樣式(css類名)
$(a,b).css()    設(shè)置或返回元素的CSS屬性
$(a,b).offset() 獲取鼠標相對于當前文檔的坐標丹泉。
$(a,b).position()   獲取當前元素相對于離它最近的擁有定位的祖輩元素的坐標。

jQuery 選擇器

選擇器
實例
選取

基本選擇器——根據(jù)多個選擇器的組合篩選元素

[s1,s2,sN]
$("p, div, #abc")
所有的p元素鸭蛙、div元素和 id="abc"的元素

[s1s2sN]
$(":radio[name=uid]:checked")
所有被選中的name="uid"的radio元素

[ancestor escendant]
$("p span")
p標簽內(nèi)的所有span元素

[parent > child]
$("p > span")
所有作為p標簽的直接子元素的span元素

[prev + next]
$("label + input")
所有緊跟在label元素后面的那個同輩input元素

[prev ~ sibings]
$("tr#L2 ~ tr")
在id="L2"的tr元素之后的所有同輩tr元素

基本選擇器——根據(jù)id摹恨、class類名、標簽名等篩選元素

[\*]
$("*")
所有元素

[#id]
$("#abc")
id="abc"的元素

[.className]
$(".post")
所有包含類名"post"的元素

[tagName]
$("p")
所有p元素

偽類選擇器——根據(jù)元素在匹配到的所有元素中的特定次序篩選元素

[:first]
$("p:first")
第一個p標簽

[:last]
$("p:last")
最后一個p標簽

[:even]
$("tr:even")
所有偶數(shù)tr標簽

[:odd]
$("tr:odd")
所有奇數(shù)tr標簽

[:eq(index)]
$("li:eq(3)")
第4個li標簽(index從0開始算起)

[:gt(index)]
$("li:gt(2)")
所有index大于2的 li 標簽(第4娶视、5晒哄、6……個li標簽)

[:lt(index)]
$("li:lt(2)")
所有index小于2的li標簽(第1、2個li標簽)

偽類選擇器——根據(jù)元素在父元素的子元素中的特定次序篩選元素

[:first-child]
$("span:first-child")
所有作為父元素的第一個子元素的span元素

[:last-child]
$("span:last-child")
所有作為父元素的最后一個子元素的span元素

[:only-child]
$("span:only-child")
所有作為父元素的唯一子元素的span元素

[:nth-child(n)]
$("li:nth-child(2)")
所有作為父元素的第2個子元素的li標簽(n從1開始算起)

[:nth-last-child(n)]
$("li:nth-last-child(2)")
所有作為父元素的倒數(shù)第2個子元素的li標簽

[:first-of-type]
$("p:first-of-type")
所有作為父元素的第一個p類型的子元素

[:last-of-type]
$("p:last-of-type")
所有作為父元素的最后一個p類型的子元素

[:only-of-type]
$("p:only-of-type")
所有作為父元素的唯一一個p類型的子元素

[:nth-of-type(n)]
$("li:nth-of-type(2)")
所有作為父元素的第2個li類型的子元素(n從1開始算起)

[:nth-last-of-type(n)]
$("li:nth-last-child(2)")
所有作為父元素的倒數(shù)第2個li類型的子元素

偽類選擇器——根據(jù)包含肪获、排除寝凌、可見、動畫或其他關(guān)系篩選元素

[:has(selector)]
$("ul:has(li.abc)")
所有包含類名為"abc"的li標簽的ul元素

[:not(selector)]
$("input:not(:text)")所有不是文本框的input元素

[:contains(text)]
$(":contains(abc)")
所有包含文本"abc"的元素

[:parent]
$(":parent")
所有包含子元素或文本內(nèi)容(哪怕是空格或換行)的元素

[:empty]
$(":empty")
所有沒有子元素和文本內(nèi)容(哪怕是空格或換行)的元素

[:visible]
$(":visible")
所有可見的元素

[:hidden]
$(":hidden")
所有不可見的元素(包括type="hidden"的input元素)

[:header]
$(":header")
所有標題標簽：h1~h6

[:animated]
$(":animated")
所有正在執(zhí)行動畫效果的元素

[:focus]
$(":focus")
當前獲得焦點的元素

[:root]
$(":root")
當前文檔的根元素(html元素)

[:target]
$(":target")
id屬性等于當前頁面URI中的hash碼值的元素

[:lang(language)]
$(":lang(en)")
所有l(wèi)ang屬性以"en"為前綴的元素

屬性相關(guān)選擇器

[[attribute]]
$("[href]")
所有帶有href屬性的元素

[[attribute=value]]
$("[name=uid]")
所有name="uid"的元素

[[attribute!=value]]
$("[name!=uid]")
所有name屬性的值不等于"uid"的元素

[[attribute^=value]]
$("[name^=uid]")
所有name屬性的值以"uid"開頭的元素

[[attribute$=value]]
$("[src$='.gif']")
所有src屬性以".gif"結(jié)尾的元素

[[attribute|=value]]
$("[name|=uid]")
name屬性的值等于"uid"孝赫，或以"uid-"開頭的所有元素

[[attribute~=value]]
$("[name~='uid']")
name屬性的值包含給定的單詞"uid"的所有元素("uid"與其他詞以空格分隔)

[[attribute*=value]]
$("[name*=uid]")
所有name屬性的值包含"uid"的元素

偽類選擇器——表單相關(guān)

[:input]
$(":input")
所有input较木、select、textarea和button標簽

[:text]
$(":text")
所有type="text"的input元素

[:password]
$(":password")
所有type="password"的input元素

[:radio]
$(":radio")
所有type="radio"的input元素

[:checkbox]
$(":checkbox")
所有type="checkbox"的input元素

[:submit]
$(":submit")
所有type="submit"的input和button元素

[:reset]
$(":reset")
所有type="reset"的input元素和button元素

[:button]
$(":button")
所有button標簽(不區(qū)分type)和type="button"的input元素

[:image]
$(":image")
所有type="image"的input元素

[:file]
$(":file")
所有type="file"的input元素

偽類選擇器——表單狀態(tài)相關(guān)(表單控件是指input青柄、select伐债、textarea、button致开、option元素)

[:enabled]
$(":enabled")
所有可用(沒有disabled屬性)的表單控件元素

[:disabled]
$(":disabled")
所有禁用(帶有disabled屬性)的表單控件元素

[:selected]
$(":selected")所有被選中的option元素

[:checked]
$(":checked")
所有被選中的radio峰锁、checkbox和option元素