jQuery各種選擇器、節點、事件，刪除、複製、插入元素的使用方法總結
阿新 • • 發佈：2019-02-19
《jQuery全面提速》筆記（2015年12月19日）
（1）表單域選擇器
:input選擇器， 用於選擇所有input、textarea、select和button元素, $(":input").each(function(){ });
:text選擇器, 用於選擇所有單行文字框（<input type="text" />）$(":text")
:password選擇器,用於選擇所有密碼框（<input type="password" />）
:radio選擇器， 用於選擇所有單選按鈕（<input type="radio" />）
:checkbox選擇器 用於選擇所有複選框（<input type="checkbox" />）
:file選擇器 用於選擇所有檔案域（<input type="file" />）
:image選擇器 用於選擇所有影象域（<input type="image" />）
:hidden選擇器 用於選擇所有不可見元素（css display屬性為none），以及隱藏域（<input type="hidden" />）
:button選擇器 用於選擇所有按鈕（<input type="button" />和<button>..</button>）$(":button")
:submit選擇器 用於選擇所有提交按鈕（<input type="submit" />）
:reset選擇器 用於選擇所有重置按鈕（<input type="reset" />）
（61.2）過濾選擇器
:first選擇器， 例如:$("table tr:first").css("color","#999"); ,例如：$("table tr:first").css("background", "#EED"); 設定表格第一行的背景色
:last選擇器 例如:$("tbody tr:last").css("background", "#F90"); ,例如：$("tbody tr:last").css("background", "#F90"); 設定表格最後一行的背景色
:odd選擇器 用於選擇索引為奇數（從0開始）的所有元素 ,例如：$("tbody tr:odd").css("background", "#9EF"); 設定奇數行的背景色
:even選擇器 選擇索引為偶數（從0開始）的所有元素 ,例如：$("tbody tr:even").css("background", "#FE0"); 設定偶數行的背景色
:eq()選擇器 選擇索引為給定值的元素(從0開始奇數) ,例如：$("#tr3 td:eq(3)").html("索引值等於3"); 設定id="tr3"行中第4個單元格的內容
:gt()選擇器 選擇索引大於給定值的所有元素 ,例如：$("#tr5 td:gt(3)").html("索引值大於3");設定id="tr5"行中，第4至第7個單元格的內容（每行共7個單元格）
:lt()選擇器 選擇索引小於給定值的所有元素 ,例如：$("#tr4 td:lt(3)").html("索引值小於3");設定id="tr4"行中，第1至第3個單元格的內容
:not()選擇器 ,例如：$("#tr6 td:not(#td63)").css("background", "#3F0");設定id="tr6"行除#td63外所有單元格的背景
:header選擇器 ,例如：$(":header").css("color","#999");設定表格第一行的背景色
:animated選擇器
siblings()函式用於選取每個匹配元素的所有同輩元素(不包括自己)
例如：table第一列居中顯示 其他列居左顯示
<script>
$(function(){
$('table td:first-child').css('text-align','left').siblings().css('text-align','center');
})
</script>
例如：利用jquey給table加上滑鼠變色功能
<style type="text/css">
.trhover{ background-color: #c2e0fc; cursor: pointer; }
</style>
$(function () {
$("table tr:gt(0)").hover(function () { //tr:gt(0)表示不選第一行，因為第一行往往是標題
$(this).addClass("trhover");
}, function () {
$(this).removeClass("trhover");
});
});
（61.3）內容過濾選擇器
:contains()選擇器， 用於選擇包含文字的所有內容 ,例如：$("td:contains(基本)").css("background-color", "#F00"); 設定包含“基本”的單元格的背景色
:has()選擇器 用於選擇含有給定子元素的元素 ,例如：$("td:has(p)").css("background-color","#F96"); 設定以p為子元素的單元格的背景色
:empty選擇器， 用於選擇不包含子元素或文字的所有空元素 ,例如：$("#tr2 td:empty").css("background-color", "#CF3"); 設定tr2行中所有空單元格的背景色
:parent選擇器 用於選擇包含子元素或文字的元素 ,例如：$("#tr3 td:parent").css("background", "#FC0"); 設定tr3行中所有非空單元格的背景色
（4）ch4章，jQuery文件操作（2015-12-23）
內部插入：
$("").append()方法,插入到元素末尾 $("selector").append("text");
$("").appendTo()方法,插入到元素末尾 $("text").appendTo($("selector"));
$("").prepend()方法，插入開頭 $("selector").prepend("text"); selector:目標容器， text:要插入的內容 h3:標籤元素
$("").prependTo()方法，開頭 $("text").prependTo($("selector")); selector:目標容器， text:要插入的內容
$("").html()方法，
$("").text()方法，
外部插入：
.after()方法，在元素之後， 寫法：$("selector").after("text");在selector後面插入 text
.insertAfter()方法， 反過來寫
.before()方法, $("selector").before("text"); selector:目標容器， text:要插入的內容
.insertBefore()方法， 反過來寫
刪除元素：
.remove()方法，刪除某個內容 $("selector").remove("text");或者 $("text").remove(); selector:目標容器， text:要刪除的內容
.detach()方法，
.empty()方法， 從目標元素中刪除所有巢狀的節點和文字 $("#selector1,#selector2,#selector3").empty();
例如：$("tr").remove(":has(:checkbox:checked)");
$("table").empty();刪除表中的所有行
替換元素：
.replaceWidth()方法， $("A").replaceWidth(""B); B 替換 A
.replaceAll()方法， $("A").replaceAll(""B); A 替換 B
複製元素
.clone()方法, $("#demo1").clone().appendTo("selector");
$("li").clone().text("").appendTo("selector");
包裝元素
.wrap()方法， 在目標元素的外部周圍內部插入 $(".selector").wrap("text");
.wrapAll()方法， 在目標元素的外部周圍插入 $("selector").wrapAll("text");
.wrapInner()方法，在目標元素內部的周圍插入結構， $("selector").wrapIneer("text");
屬性操作：
.attr()方法，獲取元素的屬性；
.removeAttr(),刪除一個屬性
.val(), $("select option:selected").val(); 獲取列表框的值
$("select").val(); 獲取列表框的值
$("input:checkbox:chencked").val(); 獲取一個選中的複選框的值
$("input:radio[name-bar]:checked").val(); 獲取一個單選按鈕組的值
$("select option:selected").text(); 獲取一個單選按鈕組的值
設定和切換CSS類
.addClass()方法， $("p:last").addClass("selected highlight");
$("p:first").removeClass("myClass").addClass("yourClass");
.hasClass()方法，檢查是否存在，
.removeClass()方法，刪除一個或多個類
.toggleClass()方法， 新增或刪除一個類
設定或獲取元素的大小
innerHeight()方法， 用於獲取匹配元素的內部高度，
innerWidth()方法，內部高度
outerHeight()方法，外部高度
outerWidth()方法，外部寬度
（61.5）第五章事件處理 (2015-12-26)
接觸事件處理 05\unbind.html頁面 例子
.unbind()方法， 此方法講先前附件的事件處理程式從元素上移除並返回jQuery物件 $("#div1").unbind("click",fn);
.die()方法， 從元素上移除先前用.live()方法附加的事件處理程式 $("#div1").live("click"); $("#div1").die("click",fn);
.indelegate()方法， 移除所有事件， $("#div1").indelegate("click");
.bind()，繫結事件
.live()繫結事件
.delegate()繫結事件
觸發事件處理程式
.trigger()方法， 附加匹配元素給時間型別的所有事件處理程式和行為 .trigger(eventType,extraParameters)
（6）建立Ajax應用， 載入JSON資料
json是JavaScript object notation的縮寫，以及JavaScript物件表示方法，
jQuery提供了對json資料集的支援。使用jQuery名稱空間下的getJSON方法可以通過GET請求從拂去其載入 json資料
jQuery.getJSON(url[,data][,callback(data,textStatus)])
引數url是一個字串，用於指定要請求的url地址；
data是字串或對映，給出通過請求傳送到伺服器的資料；
callback:是請求成功是執行的回撥函式，其引數data表示伺服器返回的資料， 引數textStatus表示相應文字狀態。
$.getJSON方法是$.ajax()方法的一種簡略形式，他的作用等價於：
$.ajax({
url:url,
dataType:"json",
data:data,
success:success
});
下面的程式碼使用於請求上述json檔案，並指定了在請求成功是執行的回撥函式。
在這個回撥函式中讀取json檔案的資料，然後將其插入頁面中。
$(document).ready(function () {
$("table").append("<tr><th>類別ID</th><th>類別名稱</th><th>說明</th></tr>");
$("table").find("tr").css("background-color", "#DDD");
$.getJSON("empjson.asp", function(data) {
$.each(data, function(i, item) {
var tr = "<tr><td>" + item.categoryId + "</td><td>" + item.categoryName + "</td><td>" + item.description + "</td></tr>";
$("table").append(tr);
});
$("tr").find("td:first").attr("align", "center");
});
});
$.getScript("ajax/text.js",function(){
alert("指令碼已載入並執行");
});
$.getScript方法是$.get()方法的一種簡略形式，他的作用等價於：
$.ajax({
url:url,
dataType:"script",
success:success
});
$.get("ajax/text.html",function(){
$("div#result").html(data);
alert("指令碼已載入並執行");
});
dataType為可選引數，是字串，用於指定從伺服器獲取的資料型別，可以是："xml"、"html"、"script"、"json"或"text"
（1）表單域選擇器
:input選擇器， 用於選擇所有input、textarea、select和button元素, $(":input").each(function(){ });
:text選擇器, 用於選擇所有單行文字框（<input type="text" />）$(":text")
:password選擇器,用於選擇所有密碼框（<input type="password" />）
:radio選擇器， 用於選擇所有單選按鈕（<input type="radio" />）
:checkbox選擇器 用於選擇所有複選框（<input type="checkbox" />）
:file選擇器 用於選擇所有檔案域（<input type="file" />）
:image選擇器 用於選擇所有影象域（<input type="image" />）
:hidden選擇器 用於選擇所有不可見元素（css display屬性為none），以及隱藏域（<input type="hidden" />）
:button選擇器 用於選擇所有按鈕（<input type="button" />和<button>..</button>）$(":button")
:submit選擇器 用於選擇所有提交按鈕（<input type="submit" />）
:reset選擇器 用於選擇所有重置按鈕（<input type="reset" />）
（61.2）過濾選擇器
:first選擇器， 例如:$("table tr:first").css("color","#999"); ,例如：$("table tr:first").css("background", "#EED"); 設定表格第一行的背景色
:last選擇器 例如:$("tbody tr:last").css("background", "#F90"); ,例如：$("tbody tr:last").css("background", "#F90"); 設定表格最後一行的背景色
:odd選擇器 用於選擇索引為奇數（從0開始）的所有元素 ,例如：$("tbody tr:odd").css("background", "#9EF"); 設定奇數行的背景色
:even選擇器 選擇索引為偶數（從0開始）的所有元素 ,例如：$("tbody tr:even").css("background", "#FE0"); 設定偶數行的背景色
:eq()選擇器 選擇索引為給定值的元素(從0開始奇數) ,例如：$("#tr3 td:eq(3)").html("索引值等於3"); 設定id="tr3"行中第4個單元格的內容
:gt()選擇器 選擇索引大於給定值的所有元素 ,例如：$("#tr5 td:gt(3)").html("索引值大於3");設定id="tr5"行中，第4至第7個單元格的內容（每行共7個單元格）
:lt()選擇器 選擇索引小於給定值的所有元素 ,例如：$("#tr4 td:lt(3)").html("索引值小於3");設定id="tr4"行中，第1至第3個單元格的內容
:not()選擇器 ,例如：$("#tr6 td:not(#td63)").css("background", "#3F0");設定id="tr6"行除#td63外所有單元格的背景
:header選擇器 ,例如：$(":header").css("color","#999");設定表格第一行的背景色
:animated選擇器
siblings()函式用於選取每個匹配元素的所有同輩元素(不包括自己)
例如：table第一列居中顯示 其他列居左顯示
<script>
$(function(){
$('table td:first-child').css('text-align','left').siblings().css('text-align','center');
})
</script>
例如：利用jquey給table加上滑鼠變色功能
<style type="text/css">
.trhover{ background-color: #c2e0fc; cursor: pointer; }
</style>
$(function () {
$("table tr:gt(0)").hover(function () { //tr:gt(0)表示不選第一行，因為第一行往往是標題
$(this).addClass("trhover");
}, function () {
$(this).removeClass("trhover");
});
});
（61.3）內容過濾選擇器
:contains()選擇器， 用於選擇包含文字的所有內容 ,例如：$("td:contains(基本)").css("background-color", "#F00"); 設定包含“基本”的單元格的背景色
:has()選擇器 用於選擇含有給定子元素的元素 ,例如：$("td:has(p)").css("background-color","#F96"); 設定以p為子元素的單元格的背景色
:empty選擇器， 用於選擇不包含子元素或文字的所有空元素 ,例如：$("#tr2 td:empty").css("background-color", "#CF3"); 設定tr2行中所有空單元格的背景色
:parent選擇器 用於選擇包含子元素或文字的元素 ,例如：$("#tr3 td:parent").css("background", "#FC0"); 設定tr3行中所有非空單元格的背景色
（4）ch4章，jQuery文件操作（2015-12-23）
內部插入：
$("").append()方法,插入到元素末尾 $("selector").append("text");
$("").appendTo()方法,插入到元素末尾 $("text").appendTo($("selector"));
$("").prepend()方法，插入開頭 $("selector").prepend("text"); selector:目標容器， text:要插入的內容 h3:標籤元素
$("").prependTo()方法，開頭 $("text").prependTo($("selector")); selector:目標容器， text:要插入的內容
$("").html()方法，
$("").text()方法，
外部插入：
.after()方法，在元素之後， 寫法：$("selector").after("text");在selector後面插入 text
.insertAfter()方法， 反過來寫
.before()方法, $("selector").before("text"); selector:目標容器， text:要插入的內容
.insertBefore()方法， 反過來寫
刪除元素：
.remove()方法，刪除某個內容 $("selector").remove("text");或者 $("text").remove(); selector:目標容器， text:要刪除的內容
.detach()方法，
.empty()方法， 從目標元素中刪除所有巢狀的節點和文字 $("#selector1,#selector2,#selector3").empty();
例如：$("tr").remove(":has(:checkbox:checked)");
$("table").empty();刪除表中的所有行
替換元素：
.replaceWidth()方法， $("A").replaceWidth(""B); B 替換 A
.replaceAll()方法， $("A").replaceAll(""B); A 替換 B
複製元素
.clone()方法, $("#demo1").clone().appendTo("selector");
$("li").clone().text("").appendTo("selector");
包裝元素
.wrap()方法， 在目標元素的外部周圍內部插入 $(".selector").wrap("text");
.wrapAll()方法， 在目標元素的外部周圍插入 $("selector").wrapAll("text");
.wrapInner()方法，在目標元素內部的周圍插入結構， $("selector").wrapIneer("text");
屬性操作：
.attr()方法，獲取元素的屬性；
.removeAttr(),刪除一個屬性
.val(), $("select option:selected").val(); 獲取列表框的值
$("select").val(); 獲取列表框的值
$("input:checkbox:chencked").val(); 獲取一個選中的複選框的值
$("input:radio[name-bar]:checked").val(); 獲取一個單選按鈕組的值
$("select option:selected").text(); 獲取一個單選按鈕組的值
設定和切換CSS類
.addClass()方法， $("p:last").addClass("selected highlight");
$("p:first").removeClass("myClass").addClass("yourClass");
.hasClass()方法，檢查是否存在，
.removeClass()方法，刪除一個或多個類
.toggleClass()方法， 新增或刪除一個類
設定或獲取元素的大小
innerHeight()方法， 用於獲取匹配元素的內部高度，
innerWidth()方法，內部高度
outerHeight()方法，外部高度
outerWidth()方法，外部寬度
（61.5）第五章事件處理 (2015-12-26)
接觸事件處理 05\unbind.html頁面 例子
.unbind()方法， 此方法講先前附件的事件處理程式從元素上移除並返回jQuery物件 $("#div1").unbind("click",fn);
.die()方法， 從元素上移除先前用.live()方法附加的事件處理程式 $("#div1").live("click"); $("#div1").die("click",fn);
.indelegate()方法， 移除所有事件， $("#div1").indelegate("click");
.bind()，繫結事件
.live()繫結事件
.delegate()繫結事件
觸發事件處理程式
.trigger()方法， 附加匹配元素給時間型別的所有事件處理程式和行為 .trigger(eventType,extraParameters)
（6）建立Ajax應用， 載入JSON資料
json是JavaScript object notation的縮寫，以及JavaScript物件表示方法，
jQuery提供了對json資料集的支援。使用jQuery名稱空間下的getJSON方法可以通過GET請求從拂去其載入 json資料
jQuery.getJSON(url[,data][,callback(data,textStatus)])
引數url是一個字串，用於指定要請求的url地址；
data是字串或對映，給出通過請求傳送到伺服器的資料；
callback:是請求成功是執行的回撥函式，其引數data表示伺服器返回的資料， 引數textStatus表示相應文字狀態。
$.getJSON方法是$.ajax()方法的一種簡略形式，他的作用等價於：
$.ajax({
url:url,
dataType:"json",
data:data,
success:success
});
下面的程式碼使用於請求上述json檔案，並指定了在請求成功是執行的回撥函式。
在這個回撥函式中讀取json檔案的資料，然後將其插入頁面中。
$(document).ready(function () {
$("table").append("<tr><th>類別ID</th><th>類別名稱</th><th>說明</th></tr>");
$("table").find("tr").css("background-color", "#DDD");
$.getJSON("empjson.asp", function(data) {
$.each(data, function(i, item) {
var tr = "<tr><td>" + item.categoryId + "</td><td>" + item.categoryName + "</td><td>" + item.description + "</td></tr>";
$("table").append(tr);
});
$("tr").find("td:first").attr("align", "center");
});
});
$.getScript("ajax/text.js",function(){
alert("指令碼已載入並執行");
});
$.getScript方法是$.get()方法的一種簡略形式，他的作用等價於：
$.ajax({
url:url,
dataType:"script",
success:success
});
$.get("ajax/text.html",function(){
$("div#result").html(data);
alert("指令碼已載入並執行");
});
dataType為可選引數，是字串，用於指定從伺服器獲取的資料型別，可以是："xml"、"html"、"script"、"json"或"text"