JQuery基礎學習筆記（1）

時間 2019-11-09

標籤 jquery 基礎學習筆記欄目 JQuery 简体版

原文原文鏈接

//------------------------- 第一章認識JQuery -------------------------css
·頁面加載事件（能夠寫多個ready()）
html
$(document).ready(function(){
瀏覽器
alert("hello world");
app
})this
·鏈式操做：JQuery容許你在一句代碼中操作任何與其相關聯的元素，包括其子元素、父元素等
spa
//選擇名稱爲myDiv的元素，爲其自身添加css1的樣式，而後再選擇其全部子元素a，爲其移除css2樣式
orm
$("#myDiv").addClass("css1").children("a").removeClass("css2");htm
·JQuery中得到一個對象的全部子元素內容
對象
$("#myDiv").html()
索引
·JQuery中的變量與 DOM中的變量
var $myVar = "";
var myVar = "";
·DOM對象轉換成 JQuery對象
var obj = documnet.getElementById("myDiv");
var $obj = $(obj);
·JQuery對象轉換成 DOM對象
var $obj = $("#myDiv");
var obj = $obj.get(0); //或者var obj = $obj[0];
·釋放JQuery對$符號的控制權
JQuery.noConflict();
//---------------------------- 第二章 JQuery選擇器 -------------------------------
·JQuery完善的處理機制
document.getElementById("test").style.color = "red"; //若是test不存在，則頁面出現異常
$("#test").css("color","red"); //哪怕頁面沒有名稱爲test的元素，也不會報錯。它是一個JQuery對象
·判斷頁面是否選擇的對象
if( $(".class").length > 0 ){
// todo something
}
·基本選擇器
$("#myDiv") //根據給定的ID選擇匹配的元素，返回：單個元素
$(".myClass") //根據給定的樣式名稱選擇匹配的元素，返回：集合元素
$("div") //根據給定的元素名稱選擇匹配的元素，返回：集合元素
$("#myDiv,div.myClass,span") //根據給定的規則選擇匹配的元素，返回：集合元素
$("*") //選擇頁面全部元素，返回：集合元素
·層次選擇器
$("div span") //選擇全部DIV元素下的全部SPAN元素（全部後代元素），返回：集合元素
$("div>span") //選擇全部DIV元素下的SPAN子元素（僅子元素），返回：集合元素
$(".myClass+div") //選擇樣式名稱爲myClass的下一個DIV元素，返回：集合元素
$(".myClass+div") //等價於 $(".myClass").next("div");
$(".myClass~div") //選擇樣式名稱爲myClass以後的全部DIV元素，返回：集合元素
$(".myClass~div") //等價於 $(".myClass").nextAll();
$(".myClass").siblings("div") //選擇樣式名稱爲myClass的元素的全部同輩DIV元素（不管先後），返回集合元素
·過濾選擇器（index從0開始）
$("div:first") //選擇全部DIV元素下的第一個DIV元素，返回：單個元素
$("div:last") //選擇全部DIV元素下的最後一個DIV元素，返回：單個元素
$("div:not(.myClass)") //選擇全部樣式不包括myClass的DIV元素，返回：集合元素
$("div:even") //選擇全部索引是偶數的DIV元素，返回：集合元素
$("div:odd") //選擇全部索引是奇數的DIV元素，返回：集合元素
$("div:eq(index)") //選擇全部索引等於index的DIV元素，返回：集合元素
$("div:gt(index)") //選擇全部索引大於index的DIV元素，返回：集合元素
$("div:lt(index)") //選擇全部索引小於index的DIV元素，返回：集合元素
$(":header") //選擇全部標題元素（h1,h2,h3），返回：集合元素
$("div:animated") //選擇全部正在執行去畫的DIV元素，返回：集合元素
·子元素過濾選擇器（index從1開始）
$(":nth-child(index/even/odd)") //選擇每一個父元素下的第index/偶數/奇數個子元素，返回：集合元素
$(":first-child") //選擇每一個父元素下的第一個子元素，返回：集合元素
$(":last-child") //選擇每一個父元素下的最後一個子元素，返回：集合元素
$("ul li:only-child") //在UL元素中選擇只有一個LI元素的子元素，返回：集合元素
·內容過濾選擇器
$(":contains(text)") //選擇全部內容包含text的元素，返回：集合元素
$("div:empty") //選擇全部內容爲空的DIV元素，返回：集合元素
$("div:has(span)") //選擇全部含有SPAN子元素的DIV元素，返回：集合元素
$("div:parent") //選擇全部含有子元素的DIV元素，返回：集合元素
·可見性選擇器
$(":hidden") //選擇全部不可見的元素（type="hidden" style="display:none" style="visibility:none"），返回：集合元素
$(":visible") //選擇全部可見的元素，返回：集合元素
·屬性過濾選擇器
$("[id]") //選擇全部含有id屬性的元素，返回：集合元素
$("[class=myClass]") //選擇全部class屬性值是myClass的元素，返回：集合元素
$("[class!=myClass]") //選擇全部class屬性值不是myClass的元素，返回：集合元素
$("[alt^=begin]") //選擇全部alt屬性值以begin開始的元素，返回：集合元素
$("[alt^=end]") //選擇全部alt屬性值以end結束的元素，返回：集合元素
$("[alt*=some]") //選擇全部alt屬性值含有some的元素，返回：集合元素
$("div[id][class=myClass]") //選擇全部含有id屬性的而且class屬性值是myClass的元素，返回：集合元素
·表單對象屬性選擇器
$("#myForm:enabled") //選擇ID屬性爲myForm的表單的全部可用元素，返回：集合元素
$("#myForm:disabled") //選擇ID屬性爲myForm的表單的全部不可用元素，返回：集合元素
$("#myForm:checked") //選擇ID屬性爲myForm的表單的全部全部被選中的元素，返回：集合元素
$("#myForm:selected") //選擇ID屬性爲myForm的表單的全部全部被選中的元素，返回：集合元素
·表單選擇器
$(":input") //選擇全部<input> <select> <button> <textarea>元素，返回：集合元素
$(":text") //選擇全部單行文本框元素，返回：集合元素
$(":password") //選擇全部密碼框元素，返回：集合元素
$(":radio") //選擇全部單選框元素，返回：集合元素
$(":checkbox") //選擇全部複選框元素，返回：集合元素
$(":submit") //選擇全部提交按鈕元素，返回：集合元素
$(":image") //選擇全部圖片按鈕元素，返回：集合元素
$(":reset") //選擇全部重置按鈕元素，返回：集合元素
$(":button") //選擇全部按鈕元素，返回：集合元素
$(":file") //選擇全部上傳域元素，返回：集合元素
$(":hidden") //選擇全部不可見域元素，返回：集合元素
$(":text") //選擇全部單選文本框元素，返回：集合元素
//---------------------------- 第三章 JQuery中的DOM操做 -------------------------------
·查找元素節點
var str = $("#myDiv").text(); //<div id="myDiv" title="hello">123</div>
alert(str); //結果：123
·查找屬性節點
var str = $("#myDiv").attr("title"); //<div id="myDiv" title="hello">123</div>
alert(str); //結果：hello
·建立元素節點
var $li1 = $(""); //傳入元素標記，自動包裝並建立第一個li元素對象
var $li2 = $(""); //第二個,建立時須要遵循XHTML規則（閉合、小寫）
$("#myDiv").append($li1); //往id爲myDiv的元素中添加一個元素
$("#myDiv").append($li2); //結果：<div id="myDiv"></div>
$("#myDIv").append($li1).append($li2); //客串：傳說中的鏈式寫法，省一行代碼 ^_^
·建立文本節點
var $li1 = $("first");
var $li2 = $("second");
$("#myDIv").append($li1).append($li2);
//結果：<div id="myDiv">firstsecond</div>
·建立屬性節點
var $li1 = $("first");
var $li2 = $("second");
$("#myDIv").append($li1).append($li2);
//結果：<div id="myDiv">firstsecond</div>
·插入節點
$("#myDiv").append(""); //往id爲myDiv的元素插入span元素
$("").appendTo("#myDiv"); //倒過來，將span元素插入到id爲myDiv的元素
$("#myDiv").prepend(""); //往id爲myDiv的元素內最前面插入span元素
$("").prependTo("#myDiv"); //倒過來，將span元素插入到id爲myDiv的元素內的最前面
$("#myDiv").after(""); //往id爲myDiv的元素後面插入span元素（同級，不是子元素）
$("").insertAfter("#myDiv"); //倒過來，將span元素插入到id爲myDiv的元素後面（同級，不是子元素）
$("#myDiv").before(""); //往id爲myDiv的元素前面插入span元素（同級，不是子元素）
$("").insertBefore("#myDiv"); //倒過來，將span元素插入到id爲myDiv的元素前面（同級，不是子元素）
·刪除節點
$("#myDiv").remove(); //將id爲myDiv的元素移除
·清空節點
$("#myDiv").remove("span"); //將id爲myDiv的元素內的全部span元素移除
·複製節點
$("#myDiv span").click( function(){ //點擊id爲myDiv的元素內的span元素，觸發click事件
$(this).clone().appendTo("#myDiv"); //將span元素克隆，而後再添加到id爲myDiv的元素內
$(this).clone(true).appendTo("#myDiv"); //若是clone傳入true參數，表示同時複製事件
})
·替換節點
$("p").replaceWith("您好"); //將全部p元素替換成後者 您好 --> 您好
$("您好").replaceAll("p"); //倒過來寫，同上
·包裹節點
$("strong").wrap(""); //用b元素把全部strong元素單獨包裹起來 您好您好
$("strong").wrapAll(""); //用b元素把全部strong元素所有包裹起來 您好您好
$("strong").wrapInner(""); //把b元素包裹在strong元素內 您好
·屬性操做
var txt = $("#myDiv").arrt("title"); //獲取id爲myDiv的元素的title屬性
$("#myDiv").attr("title","我是標題內容"); //設置id爲myDiv的元素的title屬性的值
$("#myDiv").attr({"title":"我是標題內容", "alt":"我仍是標題"); //一次性設置多個屬性的值
$("#myDiv").removeArrt("alt"); //移除id爲myDiv的元素的title屬性
·樣式操做
var txt = $("#myDiv").arrt("class"); //獲取id爲myDiv的元素的樣式
$("#myDiv").attr("class","myClass"); //設置id爲myDiv的元素的樣式
$("#myDiv").addClass("other"); //在id爲myDiv的元素中追加樣式
$("#myDiv").removeClass("other"); //在id爲myDiv的元素中移除other樣式
$("#myDiv").removeClass("myClass other"); //在id爲myDiv的元素中移除myClass和other多個樣式
$("#myDiv").removeClass(); //在id爲myDiv的元素中移除全部樣式
$("#myDiv").toggleClass("other"); //切換樣式，在有other樣式和沒other樣式之間切換
$("#myDiv").hasClass("other"); //判斷是否有other樣式
·設置和獲取HTML、文本和值
alert( $("#myDiv").html() ); //獲取id爲myDiv的元素的HTML代碼（至關於innerHTML）
$("#myDiv").html("hello"); //設置id爲myDiv的元素的HTML代碼
alert( $("#myDiv").text() ); //獲取id爲myDiv的元素的HTML代碼（至關於innerText）
$("#myDiv").text("hello"); //設置id爲myDiv的元素的HTML代碼
alert( $("#myInput").val() ); //獲取id爲myDiv的元素的value值（支持文本框、下拉框、單選框、複選框等）
$("#myInput").val("hello"); //設置id爲myDiv的元素的value值（下拉框、單選框、複選框帶有選中效果）
·遍歷節點
var $cList = $("#myDiv").children(); //獲取id爲myDiv的元素的子元素（只考慮子元素，不考慮後代元素）
var $sNext = $("#myDiv").next(); //獲取id爲myDiv的元素的下一個同輩元素
var $sPrev = $("#myDiv").prev(); //獲取id爲myDiv的元素的上一個同輩元素
var $sSibl = $("#myDiv").siblings(); //獲取id爲myDiv的元素的全部同輩元素
var $pClos = $("#myDiv").closest("span"); //獲取id爲myDiv的元素自己開始，最接近的span元素（向上查找）
·CSS-DOM操做
$("#myDiv").css("color"); //獲取id爲myDiv的元素的color樣式的值
$("#myDiv").css("color", "blue"); //設置id爲myDiv的元素的color樣式的值
$("#myDiv").css({"color":"blue", "fontSize":"12px"}); //設置id爲myDiv的元素的color樣式的值（多個）
$("#myDiv").css("opacity", "0.5"); //設置id爲myDiv的元素的透明度（兼容瀏覽器）
$("#myDiv").css("height"); //獲取id爲myDiv的元素的高度（單位：px，兼容瀏覽器）
$("#myDiv").height(); //同上（實際高度）
$("#myDiv").css("width"); //獲取id爲myDiv的元素的寬度（單位：px，兼容瀏覽器）
$("#myDiv").width(); //同上（實際寬度）
var offset = $("#myDiv").offset(); //獲取id爲myDiv的元素在當前窗口的相對偏移量
alert( offset.top + "|" + offset.left );
var offset = $("#myDiv").position(); //獲取id爲myDiv的元素相對於最近一個position設置爲relative或absolute的父元素的相對偏移量
alert( offset.top + "|" + offset.left );
$("#txtArea").scrollTop(); //獲取id爲txtArea的元素滾動條距離頂端的距離
$("#txtArea").scrollLeft(); //獲取id爲txtArea的元素滾動條距離左側的距離
$("#txtArea").scrollTop(100); //設置id爲txtArea的元素滾動條距離頂端的距離
$("#txtArea").scrollLeft(100); //設置id爲txtArea的元素滾動條距離左側的距離

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。