Jquery常用的方法匯總
//jQuery的優(yōu)點 :
1 輕量級
2 強大的選擇器
3 出色的DOM操作的封裝
4 可靠的事件處理機制
5 完善的Ajax
6 不污染頂級變量
7 出色的瀏覽器兼容性
8 鏈式操作方式
9 隱式迭代
10 行為曾與結構層的分離
11 豐富的插件支持
12 完善的文檔
13 開源
<script src="jquery.js" type="text/javascript">這里不許放任何代碼</script>
$("#foo")和 jQuery("#foo")是等價的
$.ajax 和 jQuery.ajax 是等價的 $符號是jQuery的簡寫形式
// window.onload : $(function(){ })
$(function(){ }) 就相當于 js 中的window.onload事件一樣,是在頁面加載完成后,立刻執(zhí)行的 只有這個和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對象是一個類似數(shù)組,可以通過[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庫發(fā)生沖突,我們可以在任何時候調(diào)用 : jQuery.noConflict()函數(shù)來將變量$的控制權移交給其他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 :
只要獲得標簽對象 . 就是數(shù)組
//jQuery對象獲取 :
$("p");//獲取所有p標簽對象 ---- 獲取的對象是數(shù)組
$("#aa");//獲取id為aa的那個標簽的對象 --- 獲取的對象是數(shù)組
$(".aaa");//獲取class為aaa的那個標簽的對象 --- 獲取的對象是數(shù)組
//jQuery對象和DOM對象的轉換 :
jQuery的方法和DOM的方法不能互相使用(調(diào)用),但是對象可以互相轉換
$("p");//是jQuery對象
document.documentElementsTagName("p");//是DOM對象
$(document.documentElementsTagName("p"));//把DOM對象轉換成jQuery對象
$("p").get(1);//是一個DOM對象,
get(1);代表p這個數(shù)組的第二位,(下標為1 就是第二位)
$($("p").get(1));//是jQuery對象轉成
//jQuery對象轉成DOM對象 :
1 jQuery對象是一個類似數(shù)組,可以通過[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對象
//創(chuàng)建元素 :
$("<li title='其他'>123</li>");//創(chuàng)建<li>標簽 屬性為title=其他 內(nèi)容為123
元素節(jié)點(標簽名) 屬性節(jié)點(屬性 title='xxx') 文本標簽(123)
//text()文本節(jié)點 :
text() : 函數(shù)/方法,是獲得選定標簽內(nèi)部文本(人眼能夠看到的內(nèi)容)
<li>123</li>
var li = $("li").text();//獲得了li的文本節(jié)點里面的數(shù)據(jù)(就是 123 這個內(nèi)容)
//attr()獲得屬性/設置屬性/更改屬性 :
<p title="aaa"></p>;
var i = $("p").attr("title");//這是獲得p標簽里面的title屬性的值
$("p").attr("title"," bbb");//把p標簽里面的title屬性的值 更改為bbb
//removeAttr() 刪除指定元素的屬性值 :
removeAttr(xx,xx);刪除屬性值
<p title="選擇你最喜歡的水果." >你最喜歡的水果是?</p>
$("p").removeAttr('title',"你最不喜歡的");//就是把p標簽里面的title屬性的值,(你最不喜歡的)刪除
//append()添加元素 :
將匹配到的子元素 添加到指定的父元素中.
函數(shù)的鏈式調(diào)用 : 為什么可以鏈式調(diào)用?
是因為前面的函數(shù)返回的仍然是調(diào)用的那個對象
如下面 a.append(b).append(c) a是個父標簽對象,調(diào)用函數(shù)把b添加進去,并且返回的值,還是a的對象,所以還可以在調(diào)用函數(shù),把c也添加進去
//a和b和c 都是標簽的對象
var $li_1 = $("<li></li>");//只創(chuàng)建了元素節(jié)點
var $li_2 = $("<li></li>");
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的上面 (鏈式的調(diào)用添加)
a.prepend(b)//把 b 添加到 a 里面 的最前面 a是父標簽 b是子標簽
a.insertAfter(b);//把 a 添加到 b 的 后面(同輩的)
a.insertBefore(b);//把 a 添加到 b 的 前面(同輩的)
//叫移動節(jié)點
//把我們指定元素插入匹配到元素的前面(指定的元素.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 title="選擇你最喜歡的水果." >你最喜歡的水果是?</p>
$("p").removeAttr('title',"你最不喜歡的");//就是把p標簽里面的title屬性的值,(你最不喜歡的)刪除
//清空empty() :
$("ul li:eq(1)").empty();//找到ul里面第二個li元素 并把內(nèi)容刪除,(文本節(jié)點,<li>內(nèi)容(文本節(jié)點)<li>)
//復制選定的節(jié)點clone() :
clone(true) : 復制節(jié)點,true的時候,節(jié)點綁定的事件監(jiān)聽也一起復制過去,不寫默認為false
$("li").clone()//復制當前節(jié)點
$("li").clone().appendTo("ul");//復制li節(jié)點,并將它追加到ul中(是追加到 ul 的內(nèi)部)
$("li").clone(true).appendTo("ul");//復制li節(jié)點,并復制li綁定的事件監(jiān)聽,一起追加到ul中(是追加到 ul 的內(nèi)部)
//替換選定的節(jié)點replaceWith(),replaceAll() :
a是被替換的那個對象
b是替換的那個完整標簽
a.replaceWith(b);//b就會把a替換掉 (后面的 b 替換了前面的 a) 后面替換前面
b.replaceAll(a);//b把a替換掉 (前面的 b 替換后面的 a) 前面替換后面
//如果有多個p 就會都替換
$("p").replaceWith("<strong>你女朋友最不喜歡的水果是???</strong>");//把整個p標簽都換了 換成了 <strong>你女朋友最不喜歡的水果是???</strong>
//如果有多個p 并且只想替換一個
$($("p").get(1)).replaceWith("<strong>你女朋友最不喜歡的水果是???</strong>");//只把第2個p標簽替換了
也可以給想要替換的那個標簽 加一個ID 就是只替換一個了
$("#abc").replaceWith("<li>我替換了id為abc的那個標簽</li>")
//replaceAll() :
$("<strong>你媽咪最不喜歡的水果是???</strong>").replaceAll("#abc");//前面的替換了后面的 替換了id為#abc的那個標簽
$("<li>我替換了所有的p標簽</li>").replaceAll("p");//前面替換了后面的
//包裹wrap() wraoAll() wrapInner() :
//wrap() :
wrap() : 給匹配 到的元素,包裹一個新的html標.
a標簽對象(被包裹) b是標簽(用b標簽包裹)
所有的 a標簽 都會被包裹
a.wrap(b);
//如果有一個a標簽 就包裹成 :
<b><a>我是a標簽</a></b>
//如果有多個a標簽 就包裹成 :
<b><a>我是a標簽</a></b>
<b><a>我是a標簽</a></b>
<b><a>我是a標簽</a></b>
每個都是分開包裹的 不是一起包裹到一起
a.wrap("b");//就是給a添加了一個父標簽 a被b包裹
<p>我是p標簽</p>
$("p").wrap("<i></i>");//給p標簽添加一個父標簽,就是用<i>標簽把p標簽包裹了 就成了<i><p>我是p標簽</p></i>
/*
<i>
<p>我是p標簽</p>
</i>
*/
//wrapAll() :
wrapAll():把標簽都包裹到一起,就算要被包裹標簽沒在一起,中間有別的標簽,也會吧那個要被包裹標簽,都移到一起,在一起包裹
//包裹之前
<a>123</a>
<p>aaa</p>
<a>456</a>
a.wrapAll(b);//全部包裹
//包裹之后
<b>
<a>123</a>
<a>456</a>
</b>
<p>aaa</p>
這樣包裹之后,輸出的位置就變了,效果也就變了
//wrapInner() :
wrapInner(): 將匹配標簽中的內(nèi)容,添加一個指定標簽(相當于是給原標簽添加一個子標簽,并且保存的是父標簽的文本內(nèi)容)
<a>123</a> :
a.wrapInner("b");//結果就是 : <a><b>123</b></a> 用b標簽 把a里面的內(nèi)容括起來
<li title="蘋果">蘋果</li>
$("li").wrapInner("<i></i>");//結果就是 : <li title='蘋果'><i>蘋果</i></li>
<li title="蘋果">
<i>蘋果</i>
</li>
//效果切換 toggleClass() :
是指的效果之間的切換,第一次沒有切換的時候有一個效果,切換的時候,是指所有的class綜合組成的那個效果
就是當前效果和指定的效果來回切換
<style type="text/css">
.high{
font-weight:bold; /* 粗體字 */
color : red; /* 字體顏色設置紅色*/
}
.another{
font-style:italic;
color:blue;
}
</style>
<p class="high" title="選擇你最喜歡的水果." >你最喜歡的水果是?</p>
$("p").toggleClass("another ");//其實是改class,當觸發(fā)這個函數(shù)的時候,就等于是把another和height換了一下,上面設置了,當class是high的時候,是紅色字體,當class是another的時候,是藍色字體
所以,觸發(fā)這個函數(shù),就會變一次顏色,在觸發(fā)一次,就在變一次,只不過是class之間的切換.是$("p").toggleClass("another")后面的class 和p標簽里面原代的class進行切換
//判斷元素是否包含某樣式 hasClass() :
$("p").hasClass("MyClass");//判斷p標簽里面是否有個class的屬性為MyClass
$("p").is("MyClass");//和上面一樣
//html()和text() :
<p title="選擇你最喜歡的水果." ><strong>你最喜歡的水果是?</strong></p>
$("p").html();//就是p標簽,兩個標簽(<p></p>)之間的內(nèi)容,相當于是p的innerHTML,就是 : <strong>你最喜歡的水果是?</strong>
$("p").text();//就是p標簽里面的文本數(shù)據(jù)(文本節(jié)點),就是 : 你最喜歡的水果是?
//得到 失去 焦點 focus() blur() :
focus() : 得到焦點
blur() : 失去焦點
$("標簽名(#ID名)(.class名)").focus(獲取焦點需要執(zhí)行的方法和語句function(){ 語句 操作})
$("標簽名(#ID名)(.class名)").blur(失去焦點需要執(zhí)行的方法和語句function(){ 語句 操作})
//獲取/更改 value()值 defaultValue :
<input type="button" value="請輸入賬號"/>
$("input").val();//這是獲取value的值
$("input").val("賬號是****");//這是更改value的值
結果就是 : <input type="button" value="賬號是****"/>
//defaultValue :
代表value的默認值,就是編寫代碼的時候,設置value的值是什么,那defaultValue就是什么
一般用于判斷
if (txt_value == ""){//意思是,如果value為空,就把開始的默認值再賦值給value
用于設置輸入框,如果輸入框沒有輸出東西,就還把默認的value值輸入進去,(沒得到焦點的時候,輸入框里顯示默認值,得到焦點后,設置去掉默認值,如果客戶沒有輸入東西,還會給value把默認值賦值回去,用于提醒客戶,沒有輸入東西)
$("input").val($("input").defaultValue)
}
//查看子元素的個數(shù)children() (只是子元素,子元素的子元素,不算,直接子元素才是子元素) :
$("標簽").children();
標簽的jQuery對象.children();
<a>
<b>
<c></c>
</b>
<d></d>
</a>
$("a").children();//就是2 因為a的子元素只有b和d
$("b").children();//就是1 因為b的子元素只有c一個
$("d").children();//就是0 因為d沒有子元素
//同輩元素,next(),prev(),siblings() :
next();//同輩的下一個元素
prev();//同輩的上一個元素
siblings();//所有的同輩元素
<b>123</b>
<p title="選擇你最喜歡的水果." >你最喜歡的水果是?</p>
<ul>
<li title='蘋果'>蘋果</li>
<li title='橘子'>橘子</li>
<li title='菠蘿'>菠蘿</li>
</ul>
<i>456</i>
// 例子 : next()
var p= $("p").next();
p.html();//p元素的同輩下一個元素的內(nèi)容(就相當于innerHTML),結果就是 :
<li title='蘋果'>蘋果</li>
<li title='橘子'>橘子</li>
<li title='菠蘿'>菠蘿</li>
p的同輩的下一個標簽是ul,<ul>這里就是html()的東西</ul>
---------------------
// prev()
var p = $("p").prev();
p.html();//就是p的同輩元素的上一位 就是b 元素吧 b元素的html(), 就是123把 所以就是123
123
----------------------
// siblings()
var p = $("p").siblings();//所有元素,現(xiàn)在是數(shù)組把
p.html();//這個,只是123,因為是數(shù)組,如果輸出,輸出第一個,所以就是b標簽的內(nèi)容就是123 要遍歷才能看到所有內(nèi)容
for(var i =0;p.length;i++){
alert(p[i].innerHTML);//這就是所有的內(nèi)容,為什么用innerHTML?
//因為p是jQuery對象吧,當jQuery對象,后面跟下標的時候,就是DOM對象了,所以只能用innerHTML.這個和jQuery對象的html()方法,功能是一樣的,
//alert();是個普通的彈框
//結果就是 :
123
你最喜歡的水果是?
蘋果
橘子
菠蘿
456
}
//事件委托機制 :
事件委托機制 : 我們要找到某個元素,改變其屬性,但是這個元素我們不知道能不能找到,所以我們就用一個臨時變量,把事件委托給他,然后去尋找元素,找到以后就把事件轉交
// $(自定義變量.target).closest("要找的元素").css("找到之后的某一個屬性","更改屬性值")
//這里從點擊對象開始往上查詢(如果點擊的是a,就會先找a,在找span,再找p,再找body,一直除非找到正確的那個標簽,就停止網(wǎng)上找了)
$(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)是那個不特定的對象
//來自于我們不特定的匹配,匹配到誰就是誰
<body>
<p title="選擇你最喜歡的水果." >
<span>
<a title='蘋果'>蘋果</a>
<a title='橘子'>橘子</a>
<a title='菠蘿'>菠蘿</a>
</span>
</p>
<ul>
<li title='蘋果'>蘋果</li>
<li title='橘子'>橘子</li>
<li title='菠蘿'>菠蘿</li>
</ul>
</body>
//獲取對象的左邊距和上邊距 offset() :
用法 :
jQuery對象.offset();
jQuery對象.offset().left/top;
var $p = $("p").offset();//獲得p的左邊距和上邊距,是個數(shù)組
$p.left;//得到的值,就是左邊距
$p.top;//得到的值,就是上邊距
//設置坐標并顯示,show() :
對象.css().show("slow(慢)"/"normal(正常)"/"fast(快)");
三種預定速度之一的字符串("slow","normal","fast")或表示動畫時長的毫秒數(shù)值(如：1000)
$("#id").mouseover(function(e){
//e相當于原生js中的event
//創(chuàng)建一個div元素,e觸發(fā)的事件對象(mouseover),this代表觸發(fā)的時候,事件源對象(指html標簽)
var tooltip = "<div id='tooltip'>" + this.title + "<\/div>";
$("body").append(tooltip); //追加到文檔中
$("#tooltip").css({
"top":e.pageY + "px",
"left":e.pageX + "px",
"width":"300px"
}).show("fast"); //設置x坐標和y坐標并且顯示,這里的e,是當事件源觸發(fā)這個事件的時候,事件和鼠標的相交的一個坐標,用這個坐標,表示這個框的左上角坐標
})
相關文章
本人使用JavaScript 已經(jīng)有2年左右的時間了,一直被它簡潔優(yōu)雅的代碼所吸引, 近期接觸了 JQuery這個庫 , 感覺還不錯, 但是并不意味著要舍棄 JavaScript , 而是更宣揚結合使用 .2009-02-02
jQuery Autocomplete plugin 寫的比較滿意，拿出來分享，歡迎大家找BUG。2010-07-07
jquery插件jSignature實現(xiàn)手動簽名
在IE7~IE8這種不支持HTML5的瀏覽器上，是利用Flash嵌入的方式實現(xiàn)的簽名處理，在支持的HTML5的瀏覽器上默認采用canvas標簽處理簽名，可以生成 PNG格式、SVG格式的簽名圖片。非常適合在IPAD等移動客戶端上實現(xiàn)手寫簽名的，該插件基于JQuery2015-05-05
好的代碼會帶來速度的提升，快速渲染和響應意味著更好的用戶體驗。本文主要總結了如何高效的編寫jQuery代碼的技巧，對提升你的jQuery和javascript代碼具有很好的參考價值，下面跟著小編一起來看下吧2017-02-02
下面小編就為大家?guī)硪黄猠asy ui datagrid 從編輯框中獲取值的方法。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-02-02
斑馬線其實就是隔行換色效果。2009-05-05
Jquery 類網(wǎng)頁微信二維碼圖塊滾動效果具體實現(xiàn)
網(wǎng)頁微信二維碼圖塊滾動效果想必大家都有見到過吧，在接下來的文章中將為大家詳細介紹下使用Jquery是如何實現(xiàn)，感興趣的朋友可以參考下2013-10-10
JQuery操作Select的Options的Bug(IE8兼容性視圖模式)
JQuery在IE8兼容性視圖模式下操作Select的Options的Bug在本文進行重現(xiàn)并給出詳細的解決方法，感興趣的朋友可以參考下哈，希望對你有所幫助2013-04-04
本文給大家分享的是使用jquery實現(xiàn)的全選刪除插件的代碼，非常的實用，本文示例是結合的ThinkPHP,小伙伴們可以自由擴展。2015-03-03
這篇文章主要介紹了jQuery中get()方法用法,實例分析了get()方法返回匹配集合DOM元素的使用技巧,具有一定的參考借鑒價值,需要的朋友可以參考下2014-12-12