Jquery常用的方法總結_jquery
- WBOY原創
- 2016-05-16 15:41:251399瀏覽
//jQuery的優點 :
1 輕量
2 強大的選擇器
3 優良的DOM作業的封裝
4 可靠的事件處理機制
5 完善的Ajax
6 不污染頂級變因
7 優良的瀏覽器相容性
8 鍊式操作方式
9 隱式迭代
10 行為曾與結構層的分離
11 豐富的插件支援
12 完善的文件
13 開源
$("#foo")和 jQuery("#foo")是等價的
$.ajax 和 jQuery.ajax 是等價的 $符號是jQuery的簡寫形式
// window.onload : $(function(){ })
$(function(){ }) 就相當於 js 中的window.onload事件一樣,是在頁面載入完成後,立刻執行的 只有這個和window.onload一樣
不過window.onload只能寫一個 但是$(function(){ })可以寫多
沒有簡寫的時候是 $(document)ready(function(){ })
//鍊式操作風格 :
$(".level1>a").click(function(){
$(this).addClass("current") //给当前元素添加"current"样式
.next().show(); //下一个元素显示
.parent().siblings()//父元素的同辈元素
.children("a") //子元素<a>
.removeClass("current")//移出"current"样式
.next().hide();//他们的下一个元素隐藏
return false;
})
//jQuery物件轉成DOM物件 :
1 jQuery物件是一個類似陣列,可以透過[index]的方法得到對應的DOM物件
var $cr = $("#cr");//jQuery物件
var cr = $[0]; //DOM物件
2 另一種方法是jQuery本身提供的,透過get(index)方法得到對應的DOM物件
var $cr = $("#cr");//jQuery物件
var cr = $cr.get(0);//DOM物件
//DOM物件轉成jQuery物件 :
對於一個DOM物件,只需要用$()把DOM物件包裝起來,就可以獲得一個jQuery物件了.
方式為 : $(DOM對象);
var cr = document.getElementById("cr");//DOM物件
var $cr = $(cr); //jQuery物件
//解決衝突 :
1 如果其他JS函式庫和jQuery函式庫發生衝突,我們可以在任何時候呼叫 : jQuery.noConflict()函數來將變數$的控制權移交給其他JavaScript函式庫
var $jaovo = jQuery.noConflict();
$jaovo(function(){
$jaovo("p").click(function(){
alert($jaovo(this).text());
});
});
2 可以直接使用"jQuery"來做一些jQuery的工作
jQuery(function(){
jQuery("p".click(function(){
alert(jQuery(this).text());
}));
});
//jQuery選擇器
1 基本選擇器
基本選擇器是jQuery中最常用的選擇器,也是最簡單的選擇器,他透過元素id、class 和 標籤名 等來查找DOM元素
//jQuery :
只要取得標籤物件 . 就是陣列
//jQuery物件取得 :
$("p");//取得所有p標籤物件 ---- 取得的物件是陣列
$("#aa");//取得id為aa的那個標籤的物件 --- 取得的物件是陣列
$(".aaa");//取得class為aaa的那個標籤的物件 --- 取得的物件是陣列
//jQuery物件與DOM物件的轉換 :
jQuery的方法和DOM的方法不能互相使用(調用),但是物件可以互相轉換
$("p");//是jQuery物件
document.documentElementsTagName("p");//是DOM物件
$(document.documentElementsTagName("p"));//把DOM物件轉換成jQuery物件
$("p").get(1);//是一個DOM物件,
get(1);代表p這個陣列的第二位,(下標為1 就是第二位)
$($("p").get(1));//是jQuery物件轉成
//jQuery物件轉換為DOM物件 :
1 jQuery物件是一個類似陣列,可以透過[index]的方法得到對應的DOM物件
var $cr = $("#cr");//jQuery物件
var cr = $[0]; //DOM物件
2 另一種方法是jQuery本身提供的,透過get(index)方法得到對應的DOM物件
var $cr = $("#cr");//jQuery物件
var cr = $cr.get(0);//DOM物件
//DOM物件轉換為jQuery物件 :
對於一個DOM物件,只需要用$()把DOM物件包裝起來,就可以獲得一個jQuery物件了.
方式為 : $(DOM對象);
var cr = document.getElementById("cr");//DOM物件
var $cr = $(cr); //jQuery物件
//建立元素 :
$("
元素節點(標籤名) 屬性節點(屬性 title='xxx') 文字標籤(123)
//text()文字節點 :
text() : 函數/方法,是取得選定標籤內部文字(人眼所能看到的內容)
var li = $("li").text();//取得了li的文字節點裡面的資料(就是 123 這個內容)
//attr()取得屬性/設定屬性/更改屬性 :
;
var i = $("p").attr("title");//這是獲得p標籤裡面的title屬性的值
$("p").attr("title"," bbb");//把p標籤裡面的title屬性的值 改為bbb
//removeAttr() 刪除指定元素的屬性值 :
removeAttr(xx,xx);刪除屬性值
你最喜歡的水果是?
$("p").removeAttr('title',"你最不喜歡的");//就是把p標籤裡面的title屬性的值,(你最不喜歡的)刪除
//append()新增元素 :
將符合的子元素 加到指定的父元素.
函數的鍊式呼叫 : 為什麼可以鍊式呼叫?
是因為前面的函數回傳的仍然是那些被呼叫的物件
如下面a.append(b).append(c) a是個父標籤物件,呼叫函數把b加進去,並且傳回的值,還是a的物件,所以還可以在呼叫函數,把c也加進去
//a和b和c 都是被標籤的物件
var $li_1 = $("
var $li_2 = $("
var $parent = $("ul");
$parent.append($li_1).append($li_2);
a.append(b);//把 b 加到 a 裡面 的最後面(追加),a是父標籤b是子標籤
a.append(c);//把 c 加到 a 裡面 的最後面(追加),a是父標籤c是子標籤
a.append(b).append(c);//把b c 都加到 a 裡面 b 和 c 是同輩 只是b在c的上面 (鍊式的調用添加)
a.prepend(b)//把 b 加到 a 裡面 的最前面 a是父標籤 b是子標籤
a.insertAfter(b);//把 a 加到 b 的 後面(同輩的)
a.insertBefore(b);//把 a 加到 b 的 前面(同輩的)
//呼叫行動節點
//將我們指定元素插入配對到元素的前面(指定的元素.insertBefore("配對到的元素"))
//appendTo()新增元素 :
//a是物件 b是標籤名稱
appendTo() : 是將制定元素加入符合的元素的集合中去
$("li").appendTo("ul");//把li標籤加到ul
a.appendTo("b"); //是吧 b 加到 a 的裡面(a是標籤 b是標籤)
指定元素.appendTo(符合元素);
//刪除元素(是隱藏)remove() :
a.remove();//把 a 從html移除(是隱藏)
var $li = $("ul li:eq(1)").remove();//把ul 裡面li標籤的第二個刪除 eq(1);就是下標為1的那個li元素也就是第二個吧因為下標從0開始
$li.appendTo("ul");//把剛才刪除的元素重新加入ul裡面
$("ul li").remove("li[title !=蘋果]");//把 ul 元素裡面所有的 li 元素 title屬性不是蘋果的 都刪除
//removeAttr() 刪除指定元素的屬性值 :
removeAttr(xx,xx);刪除屬性值
你最喜歡的水果是?
$("p").removeAttr('title',"你最不喜歡的");//就是把p標籤裡面的title屬性的值,(你最不喜歡的)刪除
//清空empty() :
$("ul li:eq(1)").empty();//找到ul裡面第二個li元素並刪除內容,(文字節點,
//複製選取的節點clone() :
clone(true) : 複製節點,true的時候,節點綁定的事件監聽也一起複製過去,不寫預設為false
$("li").clone()//複製目前節點
$("li").clone().appendTo("ul");//複製li節點,並將它追加到ul中(是追加到 ul 的內部)
$("li").clone(true).appendTo("ul");//複製li節點,並複製li綁定的事件監聽,一起追加到ul中(是追加到 ul 的內部)
//替換選定的節點replaceWith(),replaceAll() :
a是被替換的那個對象
b是指替換的那個完整標籤
a.replaceWith(b);//b就會把a替換掉 (後面的 b 替換了前面的 a) 後面替換前面
b.replaceAll(a);//b把a替換掉 (前面的 b 替換後面的 a) 前面替換後面
//若有多個p 就會更換
$("p").replaceWith("女友最不喜歡的水果是???");//把整個p標籤都換了換成了 你女友最不喜歡的水果是???
//如果有多個p 且只想取代一個
$($("p").get(1)).replaceWith("女友最不喜歡的水果是???");//只把第2個p標籤替換了
也可以為想要替換的那個標籤 加上一個ID 就是只換一個了
$("#abc").replaceWith("
//replaceAll() :
$("你媽咪最不喜歡的水果是???").replaceAll("#abc");//前面的替換了後面的替換了id為#abc的那個標籤
$("
//包裹wrap() wraoAll() wrapInner() :
//wrap() :
wrap() : 給予配對 到的元素,包裹一個新的html標籤.
a標籤物件(被包裹) b是標籤(用b標籤包裹)
所有的 a標籤 都會被包裹
a.wrap(b);
//若有a標籤 就包裹成 :
我是a標籤
//若有多個a標籤 就包裹成 :
我是a標籤
我是a標籤
我是a標籤
為每個都是分開包裹的 不是一起包裹於一起
a.wrap("b");//就是為a加上了一個父標 a被b包裹
我是p標籤
$("p").wrap("");//為p標籤加上一個父標籤,就是用標籤把p標籤包裹了就成了
我是p標籤
/*
我是p標籤
*/
//wrapAll() :
wrapAll():把標籤都包裹到一起,就算要被包裹標籤沒在一起,中間有別的標籤,也會吧那個要被包裹標籤,都移到一起,在一起包裹
//包裹前
123
aaa
456
a.wrapAll(b);//全部包裹
//包裹後
123
456
aaa
這樣包裹之後,輸出的位置變了,效果也變了
//wrapInner() :
wrapInner(): 將配對標籤中的內容,加上一個指定標籤(相當於為原始標籤加上一個子標籤,且儲存的是父標籤的文字內容)
123 :
a.wrapInner("b");//結果就是 : 123 用b標籤 把a裡面的內容括起來
$("li").wrapInner("");//結果就是 :
蘋果
//效果切換 toggleClass() :
是指的效果之間的切換,第一次沒有切換的時候有一個效果,切換的時候,是指所有的class綜合組成的那個效果
是目前效果和指定的效果來回切換
你最喜歡的水果是?
$("p").toggleClass("another ");//其實是改class,當觸發這個函數的時候,就等於是把another和height換了一下,上面設定了,當class是high的時候,是紅色字體,當class是another的時候,是藍色字體
所以,觸發這個函數,就會變一次顏色,在觸發一次,就在變一次,只不過是class之間的切換.是$("p").toggleClass("another")後面的class 和p標籤裡面原代的class進行切換
//判斷元素是否包含某樣式 hasClass() :
$("p").hasClass("MyClass");//判斷p標籤裡面是否有個class的屬性為MyClass
$("p").is("MyClass");//與上面一樣
//html()和text() :
你最喜歡的水果是?
$("p").html();//就是p標籤,兩個標籤()之間的內容,相當於是p的innerHTML,就是: 你最喜歡的水果是?
$("p").text();//就是p標籤裡面的文字資料(文字節點),就是 : 你最喜歡的水果是?
//得到 失去 焦點 focus() blur() :
focus() : 得到焦點
blur() : 失去焦點
$("標籤名(#ID名)(.class名稱)").focus(取得焦點需要執行的方法與語句function(){ 語句 運算})
$("標籤名(#ID名)(.class名稱)").blur(失去焦點需要執行的方法與語句function(){ 語句 運算})
//取得/更改 value()值 defaultValue :
$("input").val();//這是取得value的值
$("input").val("帳號是****");//這是改變value的值
結果為 :
//defaultValue :
代表value的預設值,就是寫程式碼的時候,設定value的值是什麼,那defaultValue就是什麼
一般用於判斷
if (txt_value == ""){//意思是,如果value為空,就把開始的預設值再賦值給value
用於設定輸入框,如果輸入框沒有輸出東西,就還把預設的value值輸入進去,(沒得到焦點的時候,輸入框裡顯示預設值,得到焦點後,設定去掉預設值,如果客戶沒有輸入東西,還會給value把預設值賦值回去,用於提醒客戶,沒有輸入東西)
$("input").val($("input").defaultValue)
}
//查看子元素的個數children() (只是子元素,子元素的子元素,不算,直接子元素才是子元素) :
$("標籤").children();
標籤的jQuery物件.children();
$("a").children();//是2 因為a的子元素只有b和d
$("b").children();//就是1 因為b的子元素只有c一個
$("d").children();//就是0 因為d沒有子元素
//同儕元素,next(),prev(),siblings() :
next();//同儕的下一個元素
prev();//同輩的上一個元素
siblings();//所有的同儕元素
123
你最喜歡的水果是?
- 蘋果
- 橘子
- 菠蘿
456
// 範例 : next()
var p= $("p").next();
p.html();//p元素的同儕下一個元素的內容(就相當於innerHTML),結果就是 :
p的同輩的下一個標籤是ul,
- 這裡有html()的東西
---------------------
// prev()
var p = $("p").prev();
p.html();//是p的同儕元素的上一位 就是b 元素吧 b元素的html(), 就是123把 所以就是123
123
----------------------
// siblings()
var p = $("p").siblings();//所有元素,現在是陣列把
p.html();//這個,只是123,因為是數組,如果輸出,輸出第一個,所以就是b標籤的內容就是123 要遍歷才能看到所有內容
for(var i =0;p.length;i ){
alert(p[i].innerHTML);//這就是所有的內容,為什麼用innerHTML?
//因為p是jQuery物件吧,當jQuery物件,後面跟下標的時候,就是DOM物件了,所以只能用innerHTML.這個和jQuery物件的html()方法,功能是一樣的,
//alert();是普通的彈框
//結果為 :
123
最喜歡的水果是?
蘋果
橘子
鳳梨
456
}
//事件委託機制 :
事件委託機制: 我們要找到某個元素,改變其屬性,但是這個元素我們不知道能不能找到,所以我們就用一個臨時變數,把事件委託給他,然後去尋找元素,找到以後就把事件轉交
// $(自訂變數.target).closest("要找的元素").css("找到之後的某一個屬性","更改屬性值")
//這裡從點擊物件開始往上查詢(如果點擊的是a,就會先找a,在找span,再找p,再找body,一直除非找到正確的那個標籤,就停止網上找了)
$(document).bind("click",function(e){
$(e.target).closest("body").css("color","red");
})
//$(document).bind("click",function("p"){
// $("p").css("color","red");
// })
//document:代表整個文件,我要符合文件中某一個不確定對象,用了這樣一種形式
//e:是指我們要找的某個元素,他的是個不特定的值,$(e.target)是那個不特定的對象
//來自於我們不特定的配對,配對到誰是誰
- 蘋果
- 橘子
- " this.title "";
$("body").append(tooltip); //追加至文件中
$("#tooltip").css({
"top":e.pageY "px",
"left":e.pageX "px",
"width":"300px"
}).show("fast"); //設定x座標和y座標並且顯示,這裡的e,是當事件來源觸發這個事件的時候,事件和滑鼠的相交的一個座標,用這個座標,表示這個框的左上角座標
})