1. id 選擇器 #
class 選擇器 .
標簽 選擇器 標簽名
群組 選擇器 用逗號隔開
全局 選擇器 *
2. 后代 元素 選擇器 空格
子代 元素 選擇器 >
緊鄰同輩 元素 選擇器 +
相鄰同輩 元素 選擇器 ~
3. first() 第一個
last() 最后一個
even() 偶數個
odd() 奇數個
eq() 指定的那一個（下標）
gt() 大於本元素的（下標）
lt() 小於本元素的（下標）
4. 表單域 選擇器 :表單名
5. 表單對象屬性選擇器
獲取選中的復選框元素 :checkbox:checked
獲取選中的單選框元素 :radio:checked
獲取選中的下拉框元素 option:selected
6. 屬性選擇器
普通包含選擇器（包含id屬性的元素）:標簽名[id]
屬性等於選擇器 [id=XXXXX]
復合屬性選擇器 [value=''][id]
7. 搜索父元素
父 元素 parent()
祖先元素 parents()
搜索同輩元素
上一個 prev()
下一個 next()
所有 siblings()
搜索子元素
children()
過濾操作
filter
例如：console.log($(":input").filter("[id]"));
過濾出input有id的
map
例如：$(":checkbox:checked").map(function (){return $(this).val();}).get().join(",");
多選框數值的接收
8. 內部追加
內部向前追加 【prepend】
內部向后追加 【append】
外部追加
外部向前追加 【before】
外部向后追加 【after】
9. 刪除
刪除節點 remove
清空節點 empty
10.元素內容
操作HTML
//設置p中的html內容
$("p:first").html("<a href='#'>跳轉</a>");
//獲取p標簽中的html內容
var t=$("p:first").html();
console.log(t);
操作文本
//獲取p標簽中的文本
var m=$("p:first").text();
console.log(m);
//設置p標簽中的文本
$("p:first").text("<a href='#'>跳轉</a>");
操作值
//獲取和設置單標簽input元素的值
//獲取id和name的元素的value屬性的值
var name = $("#name").val();
console.log(name);
//設置id是btn的元素的value屬性的值
$("#btn").val("提交");
元素屬性
//讀取和修改屬性
//.attr("屬性名","屬性值");
//讀取id為name的type屬性值
var zhi = $("#name").attr("type");
console.log(zhi);
//修改id為name的type屬性值為button
$("#name").attr("id","button");
//刪除id是name的value屬性
$("#button").removeAttr("value");
元素樣式
//添加樣式類 addClass
$("#btn").addClass("c");
//移除樣式類 removeClass
//$("#btn").removeClass();
//是否包含樣式類 hasClass
var flag = $("#btn").hasClass("c");
console.log(flag);
元素css
//設置css樣式
//1.鏈式操作
$("div").css("width","100px").css("height","100px").css("background-color","red");
//2.對象
$("div").css({"width":"200px","height":"200px","background-color":"green"});
//讀取css樣式
console.log($("div").css("width"));
console.log($("div").css("background-color"));
//元素css位置
//position:獲取當前元素相對於父元素的偏移
var position = $("div").position(); console.log(position);
//元素css尺寸
//width
console.log($("#button").width());
//height
console.log($("#button").height());
//innerWidth
console.log($("#button").innerWidth());
//innerHeight
console.log($("#button").innerHeight());
//outerWidth
console.log($("#button").outerWidth());
//outerHeight
console.log($("#button").outerHeight());