JSON(JavaScript Object Notation, JS 物件標記) 是一種輕量級的資料交換格式。它基於 ECMAScript (w3c制定的js規範)的一個子集，採用完全獨立於程式語言的文字格式來儲存和表示資料。簡潔和清晰的層次結構使得 JSON 成為理想的資料交換語言。 易於人閱讀和編寫，同時也易於機器解析和生成，並有效地提升網路傳輸效率。
參考源引地址：
baike.baidu.com/item/JSON/2…
blog.csdn.net/fengyun14/a…
blog.csdn.net/feicongcong…
www.ruanyifeng.com/blog/2014/0…
www.w3school.com.cn/jquery/jque…
JSON 語法規則
在 JS 語言中，一切都是物件。因此，任何支援的型別都可以通過 JSON 來表示，例如字串、數字、物件、陣列等。但是物件和陣列是比較特殊且常用的兩種型別：
物件表示為鍵值對
陣列由逗號分隔
花括號儲存物件
方括號儲存陣列
變數定義
var a = {}; //定義一個空的json物件
var b = []; //定義一個空的json陣列
var c = ""; //定義一個空的字串
複製程式碼JSON 鍵/值對
JSON 鍵值對是用來儲存 JS 物件的一種方式，和 JS 物件的寫法也大同小異，鍵/值對組合中的鍵名寫在前面並用雙引號 "" 包裹，使用冒號 : 分隔，然後緊接著值：
{"firstName": "John"} 鍵名不待帶引號也可以正確解析，但是不推薦
推薦{"a": "Hello", "b": "World"}
不推薦 {a: 'Hello', b: 'World'}
複製程式碼強調 JSON鍵（屬性）區分大小寫
var a = {"name" : "John", "Name" : "Lily"}; //name,Name 是兩個不同的鍵
複製程式碼單引號和雙引號
JS中定義字串變數時，用單引號或者雙引號的是可以的，可根據實際情況具體選擇
如果字串值是 一串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";
複製程式碼如果字串值裡面同時包含單引號和雙引號，那麼如果使用單引號包裹值，值裡面的單引號需要用 \ 轉義，如果使用雙引號包裹，那麼值裡面的雙引號需要用 \ 轉義
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 物件的關係
很多人搞不清楚 JSON 和 Js 物件的關係，甚至連誰是誰都不清楚。其實，可以這麼理解：
JSON 是 JS 物件的字串表示法，它使用文字表示一個 JS 物件的資訊，本質是一個字串。如：
var obj = {a: 'Hello', b: 'World'}; //這是一個物件，注意鍵名也是可以使用引號包裹的
var json = '{"a": "Hello", "b": "World"}'; //這是一個 JSON 字串，本質是一個字串
複製程式碼JSON 和 JS 物件互轉
要實現從物件轉換為 JSON 字串，使用 JSON.stringify() 方法：
var json = JSON.stringify({a: 'Hello', b: 'World'}); //結果是 '{"a": "Hello", "b": "World"}'
複製程式碼要實現從 JSON 轉換為物件，使用 JSON.parse() 方法：
var obj = JSON.parse('{"a": "Hello", "b": "World"}'); //結果是 {a: 'Hello', b: 'World'}
//jQuery.parseJSON('{"a": "Hello", "b": "World"}'); //同樣效果
複製程式碼常用型別
在 JS 語言中，一切都是物件。因此，任何支援的型別都可以通過 JSON 來表示，例如字串、數字、物件、陣列等。但是物件和陣列是比較特殊且常用的兩種型別。
物件：物件在 JS 中是使用花括號包裹 {} 起來的內容，資料結構為 {key1：value1, key2：value2, ...} 的鍵值對結構。在物件導向的語言中，key 為物件的屬性，value 為對應的值。鍵名可以使用整數和字串來表示。值的型別可以是任意型別。
陣列：陣列在 JS 中是方括號 [] 包裹起來的內容，資料結構為 ["java", "javascript", "vb", ...] 的索引結構。在 JS 中，陣列是一種比較特殊的資料型別，它也可以像物件那樣使用鍵值對，但還是索引使用得多。同樣，值的型別可以是任意型別。
JSON資料的常用使用場景
物件賦值與讀取
賦值：
var a = {};
a["id"] = 1; //數字賦值
a["name"] = "John"; //字串賦值
var _school = "北京大學";
a["school"] = _school; //字串變數賦值
//a={"id": 1, "name": "John" ,"school": "北京大學"};
複製程式碼讀取：
var a = {"id": 1,"name": "John","school": "北京大學"};
//方式一
var html = "編號："+ a.id +",姓名："+ a.name +",就讀學校："+ a.school;
//方式二
var html2 = "編號："+ a["id"] +",姓名："+ a["name"] +", 就讀學校："+ a["school"];
//一個比較複雜的例子
var a = {
"id": 1,
"name": "John",
"school": "北京大學",
"schoolinfo": {
"title": "北京大學",
"address": "中國北京市朝陽區20號"
}
};
var html3 = "編號：" +a.id
+", 姓名："+ a.name
+", 就讀學校："+ a.school
+"學校地址："+ a.schoolinfo.address;
var html4 = "編號："+ a["id"]
+", 姓名："+ a["name"]
+", 就讀學校："+ a["school"]
+", 學校地址："+ a["schoolinfo"]["address"];
複製程式碼如果一個物件裡面的某個鍵（屬性）不存在，那麼會報undefined,所以在不確定鍵是否存在的情況下，需要作undefined驗證
var a = {
"id": 1,
"name": "John",
"school": "北京大學",
"schoolinfo": {
"title": "北京大學",
"address": "中國北京市朝陽區20號"
}
};
var html = "編號："+ a["id"] +",姓名："+ a["name"] +",就讀學校："+ 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 += ",學校地址："+ a["schoolinfo"]["address"];
}
複製程式碼關於null和undefined的區別請參閱下面地址：
blog.csdn.net/fengyun14/a…
blog.csdn.net/feicongcong…
www.ruanyifeng.com/blog/2014/0…
將一個物件新增到一個陣列(push())
//示例一
var arr = [3,5];
arr.push(1);
arr.push(2);
var s = "你好";
var t = 10;
arr.push(s);
arr.push(t)
//結果：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"});
//結果：
arr2=[
{"id": 1, "name": "John"},
{"id": 2, "name": "Lily"},
{"id": 3, "name": "Susan"},
{"id": 4, "name": "Zhiyi Wang"}
]
複製程式碼陣列過濾($.grep())
//示例一
var arr = [1, 2, 3, 4, 5];
//過濾出大於3的元素放到新的陣列newarr裡面
var newarr = $.grep(arr, function (v) {
return v > 3;
});
//newarr:[4,5]
//示例二
//過濾出就讀於北京大學的記錄放到新陣列裡面
var students = [
{"id":1,"name":"John","school":"清華大學"},
{"id":2,"name":"Lily","school":"北京大學"},
{"id":3,"name":"Susan","school":"上海大學"},
{"id":4,"name":"Zhiyi Wang","school":"北京大學"}
];
var result = $.grep(students, function (v) {
return v["school"] == "北京大學";
//或者 return v.school == "北京大學";
});
//結果：
result = [
{"id": 2, "name": "Lily", "school": "北京大學"},
{"id": 4, "name": "Zhiyi Wang", "school": "北京大學"}
]
複製程式碼清空一個陣列
var arr = [1,2,3];
//清空方式一
arr = []; //推薦使用
//清空方式二
arr.length = 0;
//清空方式三
arr.splice(0,arr.length);
複製程式碼查詢(indexOf(), lastIndexOf(), $.inArray())
字串查詢
indexOf(): 第一次出現
lastIndexOf(): 最後一次出現
var str = "hello,my name is susan";
//查詢 o 第一次出現的位置
var index1 = str.indexOf('o');
//index1 = 4;
//查詢 s 最有一次出現的位置
var index2 = str.lastIndexOf("s");
//index2 = 19;
//如果沒有找到，則返回-1;
複製程式碼陣列查詢
$.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
複製程式碼陣列合並去重(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已經去重複了,無需賦值給某個變數
複製程式碼陣列轉化為字串(join)
var student = [1,2,3,4];
var str = student.join(",");
//str = "1, 2, 3, 4";
注意：一般此方法用於數字陣列轉字串，如果是字串陣列有逗號，可能會有問題
複製程式碼將陣列資料輸出到html表格(for, $.each())
html程式碼：
<html>
<body>
<div id="dataview"></div>
</body>
</html>
複製程式碼json資料：
var students=[
{"id":1,"name":"John","school":"清華大學"},
{"id":2,"name":"Lily","school":"北京大學"},
{"id":3,"name":"Susan","school":"上海大學"},
{"id":4,"name":"Zhiyi Wang","school":"北京大學"}
];
將stucents裡面的資料顯示到div[id='dataview']裡面
複製程式碼js程式碼：
方法一
var html = '<table>';
html += '<tr>\
<td>ID</td>\
<td>姓名</td>\
<td>學校</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>學校</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>學校</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>學校</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資料：
var data={"id":1,"name":"John","school":"清華大學","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>就讀學校</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>就讀學校</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>就讀學校</label>
<input type="text" id="gotoschool" />
</div>
</form>
js獲取表單值到json物件裡面：
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>就讀學校</label>
<input type="text" field="school" />
</div>
</form>
js獲取表單值到json物件裡面：
var data={};
$("input[field],select[field]").each(function(){
var field=$(this).attr("field");
data[field]=$(this).val();
});
複製程式碼從一個table表單獲取資料到JSON陣列
比如批量錄入學員資訊後需要獲取資料到json陣列
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>學校:<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>學校:<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>學校:<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)兩個引數的用途：
var field=$(this).attr("field");//注意此行的this和第3行程式碼的this
item[field]=$(this).val();
});
students.push(item);
});
複製程式碼Jquery常用方法
$.trim() 左右兩邊去空格
$.each() 遍歷函式，如：遍歷一個陣列，遍歷一個頁面的所有連結/圖片等等
$.inArray() 查詢
$(a,b) 獲取元素
$(a,b).val() 設定或獲取一個節點(input,textarea,select)的值
$(a,b).html() 設定或獲取一個節點的html
$(a,b).text() 設定或獲取一個節點的text
$(a,b).show() 顯示一個元素
$(a,b).hide() 隱藏一個元素
$(a,b).toggle() 切換顯示/隱藏匹配的元素(如果顯示就隱藏，如果隱藏就顯示)，並可選附帶過渡動畫效果。
$(a,b).attr() 設定或獲取某個屬性
$(a,b).prop() 設定或獲取某個屬性
$(a,b).is() 重用於判斷一個元素是否隱藏，一個核取方塊是否選中
$(a,b).remove() 移除一個元素
$(a,b).append(c) 往一個元素內（末尾）追加一個子元素
$(a,b).prepend(c) 往一個元素內（開始）追加一個子元素
$(a,b).before(c) 在一個元素（外部）前面插入一個元素
$(a,b).after(c) 在一個元素（外部）後面插入一個元素
$(a,b).empty() 清空一個元素裡面的所有子節點
$(a,b).addClass(c) 增加一個樣式(css類名)
$(a,b).toggleClass(c) 切換當前物件所匹配的每一個元素上指定的css類名。
$(a,b).removeClass(c) 移除一個樣式(css類名)
$(a,b).css() 設定或返回元素的CSS屬性
$(a,b).offset() 獲取滑鼠相對於當前文件的座標。
$(a,b).position() 獲取當前元素相對於離它最近的擁有定位的祖輩元素的座標。
複製程式碼jQuery 選擇器
選擇器
例項
選取
基本選擇器——根據多個選擇器的組合篩選元素
[s1,s2,sN]
$("p, div, #abc")
所有的p元素、div元素和 id="abc"的元素
[s1s2sN]
$(":radio[name=uid]:checked")
所有被選中的name="uid"的radio元素
[ancestor escendant]
$("p span")
p標籤內的所有span元素
[parent > child]
$("p > span")
所有作為p標籤的直接子元素的span元素
[prev + next]
$("label + input")
所有緊跟在label元素後面的那個同輩input元素
[prev ~ sibings]
$("tr#L2 ~ tr")
在id="L2"的tr元素之後的所有同輩tr元素
複製程式碼基本選擇器——根據id、class類名、標籤名等篩選元素
[\*]
$("*")
所有元素
[#id]
$("#abc")
id="abc"的元素
[.className]
$(".post")
所有包含類名"post"的元素
[tagName]
$("p")
所有p元素
複製程式碼偽類選擇器——根據元素在匹配到的所有元素中的特定次序篩選元素
[:first]
$("p:first")
第一個p標籤
[:last]
$("p:last")
最後一個p標籤
[:even]
$("tr:even")
所有偶數tr標籤
[:odd]
$("tr:odd")
所有奇數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標籤)
複製程式碼偽類選擇器——根據元素在父元素的子元素中的特定次序篩選元素
[: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)")
所有作為父元素的倒數第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)")
所有作為父元素的倒數第2個li型別的子元素
複製程式碼偽類選擇器——根據包含、排除、可見、動畫或其他關係篩選元素
[:has(selector)]
$("ul:has(li.abc)")
所有包含類名為"abc"的li標籤的ul元素
[:not(selector)]
$("input:not(:text)")所有不是文字框的input元素
[:contains(text)]
$(":contains(abc)")
所有包含文字"abc"的元素
[:parent]
$(":parent")
所有包含子元素或文字內容(哪怕是空格或換行)的元素
[:empty]
$(":empty")
所有沒有子元素和文字內容(哪怕是空格或換行)的元素
[:visible]
$(":visible")
所有可見的元素
[:hidden]
$(":hidden")
所有不可見的元素(包括type="hidden"的input元素)
[:header]
$(":header")
所有標題標籤：h1~h6
[:animated]
$(":animated")
所有正在執行動畫效果的元素
[:focus]
$(":focus")
當前獲得焦點的元素
[:root]
$(":root")
當前文件的根元素(html元素)
[:target]
$(":target")
id屬性等於當前頁面URI中的hash碼值的元素
[:lang(language)]
$(":lang(en)")
所有lang屬性以"en"為字首的元素
複製程式碼屬性相關選擇器
[[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"結尾的元素
[[attribute|=value]]
$("[name|=uid]")
name屬性的值等於"uid"，或以"uid-"開頭的所有元素
[[attribute~=value]]
$("[name~='uid']")
name屬性的值包含給定的單詞"uid"的所有元素("uid"與其他詞以空格分隔)
[[attribute*=value]]
$("[name*=uid]")
所有name屬性的值包含"uid"的元素
複製程式碼偽類選擇器——表單相關
[: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標籤(不區分type)和type="button"的input元素
[:image]
$(":image")
所有type="image"的input元素
[:file]
$(":file")
所有type="file"的input元素
複製程式碼偽類選擇器——表單狀態相關(表單控制元件是指input、select、textarea、button、option元素)
[:enabled]
$(":enabled")
所有可用(沒有disabled屬性)的表單控制元件元素
[:disabled]
$(":disabled")
所有禁用(帶有disabled屬性)的表單控制元件元素
[:selected]
$(":selected")所有被選中的option元素
[:checked]
$(":checked")
所有被選中的radio、checkbox和option元素複製程式碼