jQuery各種選擇器、節點、事件,刪除、複製、插入元素的使用方法總結
《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"
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.