JQ對象和原生對象可以相互轉(zhuǎn)化
原生轉(zhuǎn)JQ $('需要轉(zhuǎn)化的元素')
JQ轉(zhuǎn)原生
$('需要轉(zhuǎn)化的元素')[0]
注[0]是下表:index根據(jù)不同的選擇器需要作出相應(yīng)的調(diào)整
$('需要轉(zhuǎn)化的元素').get(0)
注:這里面的 0 也是index 需要根據(jù)不同的選擇器不同的需要作出調(diào)整
選擇器
id選擇器 $("#myDiv");
標(biāo)簽選擇器 $("div");
類選擇器 $(".myClass");
通配符選擇器 $("");
群組選擇器 $("div,span,p.myClass")碗淌;
后代選擇器 $("form input")盏求;
父子選擇器 $("form > input")抖锥;
兄弟選擇器 緊接在后面的 $("label + input");
兄弟選擇器碎罚,匹配到后面所有的 $("form ~ input")磅废;
獲取第一個元素 $('li:first');
否定選擇器、去除所有給定選擇器選中的元素 $("input:not(:checked)")
匹配所有索引值為偶數(shù)的元素 (第二個 第四個...) $("tr:even")
匹配所有索引值為奇數(shù)的元素 (第一個 第三個...) $("tr:odd")
匹配一個給定索引值的元素 $("tr:eq(1)")
匹配所有大于給定索引值的元素 $("tr:gt(0)")
匹配所有小于給定索引值的元素 $("tr:lt(2)")
獲取最后一個元素 $('li:last')
匹配h1,h2,h3等標(biāo)題元素 $(":header")
匹配所有正在執(zhí)行動畫效果的元素 :animated
匹配當(dāng)前獲取焦點的元素 :focus
選擇該文檔的根元素 :root
匹配包含給定文本的元素 $("div:contains('John')")
匹配所有不含子元素或者文本是空的元素 $("td:empty")
匹配所有含有指定元素的元素 $("div:has(p)")《匹配所有包含p標(biāo)簽的div》
匹配所有含有子元素或者文本的元素 :parent
匹配所有不可見的元素荆烈,或者type 為hidden的元素 :hidden
匹配所有可見的元素 :visible
包含給定屬性的元素(屬性選擇器)element [attribute]
匹配給定屬性是某個特定值的元素 element[attribute=value]
匹配所有不含有特定屬性后者是屬性不為特定值的元素 [attribute!=value]
匹配給定的屬性是以某些特定的值開始的元素 [attribute^=value]
匹配給定的屬性是以某些特定的值結(jié)束的元素[attribute$=value]
匹配給定的屬性包含指定屬性的元素 [attribute=value]
復(fù)合屬性選擇器还蹲,需要同時滿足多個條件時使用。$("input[id][name$='man']")找到所有含有 id 屬性耙考,并且它的 name 屬性是以 man 結(jié)尾的
匹配所有文件域 :file
匹配所有可用 元素 :enable
匹配所有不可用元素 :disable
$.escapeSelector(selector) 這個方法通常被用在類選擇器或者ID選擇器中包含一些CSS特殊字符的時候谜喊,這個方法基本上與CSS中CSS.escape()方法類似,唯一的區(qū)別是jquery中的這個方法支持所有瀏覽器倦始。
文檔處理
1.append()在給定的元素的內(nèi)部的末尾插入
p.append(span) 給p添加子集span(在最后)
2.appendTo()把所有匹配到的所有元素插入到指定元素的末尾
p.appendTo(body) 把p插入到body里面 (最后面)
3.pretend 在只元素的內(nèi)容開始插入
p.pretend(span) 給p添加子集span(在最前)
4.pretendTo 把所有匹配的元素插入到指定的元素的最前
p.pretendTo(body) 把p插入到body里面 (最前面)
5.after() 在匹配的元素之后差插入(同級)
element.after('element2') 把element2插入到element的后面(同級)
6.before()在匹配的元素的前面插入內(nèi)容
element.before('element2') 把element2插入到element的前面(同級)
7.insertAfter() 把所有匹配的元素插入到 指定元素的后面
element.insertAfter('element2') 把所有匹配到的element插入到element2的后面(同級)
8.insertBefore() 把所有匹配到的元素插入到指定元素的后面
element.insertBefore('element2') 把所有匹配到的element插入到element2的前面(同級)
9.wrap()給所有匹配到的元素添父級
$('form').wrap($('<div class="BB"></div>')); 給form添加一個類名為BB的div父級
10.unwrap() 移除指定元素的父級
$('.content').unwrap(); 把類名為.content的div的父級去除
11.wrapAll()把所有匹配到的元素用同同一個標(biāo)簽包裹起來
$('form').wrapAll($('<div class="BB"></div>')); 把所有的form放在同一個標(biāo)簽里 這個標(biāo)簽的位置在匹配到的元素的第一個的位置
12.wrapInner()把所有匹配到的元素的子內(nèi)容(包括文本節(jié)點)用一個HTML包裹起來
13replaceWith(content|fn) 把匹配到的元素替換成指定的HTML后者DOM節(jié)點 支持回調(diào)函數(shù)
14.replaceAll(selector) 用匹配的元素替換掉所有 selector匹配到的元素斗遏。
刪除元素
1.empty()刪除匹配的元素集合中所有的子節(jié)點。
2.remove() 從DOM中刪除所有匹配的元素鞋邑。
注:這個方法不會把匹配的元素從jQuery對象中刪除诵次,因而可以在將來再使用這些匹配的元素。但除了這個元素本身得以保留之外枚碗,其他的比如綁定的事件逾一,附加的數(shù)據(jù)等都會被移除。
3.detach()從DOM中刪除所有匹配的元素肮雨。
注:這個方法不會把匹配的元素從jQuery對象中刪除遵堵,因而可以在將來再使用這些匹配的元素。與remove()不同的是怨规,所有綁定的事件陌宿、附加的數(shù)據(jù)等都會保留下來。
克隆
clone()克隆匹配的DOM元素并且選中這些克隆的副本波丰。
在想把DOM文檔中元素的副本添加到其他位置時這個函數(shù)非常有用壳坪。
屬性
attr(name|pro|key,val|fn)
name 屬性名
$("img").attr("src"); 返回文檔中所有圖像的src屬性值。
properties 作為屬性的(名值對象)
$("img").attr({ src: "test.jpg", alt: "Test Image" }); 為所有圖像設(shè)置src和alt屬性掰烟。
key,value 屬性名 屬性值
$("img").attr("src","test.jpg");為所有圖像設(shè)置src屬性爽蝴。
key,function(index, attr)
1:屬性名稱。
2:返回屬性值的函數(shù),第一個參數(shù)為當(dāng)前元素的索引值纫骑,第二個參數(shù)為原先的屬性值蝎亚。
$("img").attr("title", function() { return this.src }); 把src屬性的值設(shè)置為title屬性的值。
removeAttr(name) 從每一個匹配的元素中刪除指定屬性
$("img").removeAttr("src"); 刪除img的src屬性
prop(n|p|k,v|f) 獲取在匹配的元素集中的第一個元素的屬性值惧磺。
$("input[type='checkbox']").prop("checked"); 選中復(fù)選框為true颖对,沒選中為false
$("input[type='checkbox']").prop({
disabled: true
});禁用頁面上的所有復(fù)選框。
$("input[type='checkbox']").prop("disabled", false);
$("input[type='checkbox']").prop("checked", true);
禁用和選中所有頁面上的復(fù)選框磨隘。
$("input[type='checkbox']").prop("checked", function( i, val ) {
return !val;
});通過函數(shù)來設(shè)置所有頁面上的復(fù)選框被選中缤底。
removeProp(name) 用來刪除由.prop()方法設(shè)置的屬性集
設(shè)置一個段落數(shù)字屬性,然后將其刪除番捂。
var $para = $("p");
$para.prop("luggageCode", 1234);
$para.append("The secret luggage code is: ", String($para.prop("luggageCode")), ". ");
$para.removeProp("luggageCode");
$para.append("Now the secret luggage code is: ", String($para.prop("luggageCode")), ". ");
addClass(class|fn) 為每個匹配到的元素添加類名
class 一個或多個要添加到元素中的CSS類名个唧,請用空格分開
function(index, class) 此函數(shù)必須返回一個或多個空格分隔的class名。接受兩個參數(shù)设预,index參數(shù)為對象在這個集合中的索引值徙歼,class參數(shù)為這個對象原先的class屬性值。
為匹配的元素加上 'selected' 類
$("p").addClass("selected");
$("p").addClass("selected1 selected2");
給li加上不同的class
<ul>
<li>Hello</li>
<li>Hello</li>
<li>Hello</li>
</ul>
$('ul li:last').addClass(function() {
return 'item-' + $(this).index();
});
removeClass([class|fn]) 從所有匹配的元素中刪除全部或者指定的類鳖枕。
class 一個或多個要刪除的CSS類名魄梯,請用空格分開
function(index, class)此函數(shù)必須返回一個或多個空格分隔的class名。接受兩個參數(shù)宾符,index參數(shù)為對象在這個集合中的索引值酿秸,class參數(shù)為這個對象原先的class屬性值。
從匹配的元素中刪除 'selected' 類
$("p").removeClass("selected");
刪除匹配元素的所有類
$("p").removeClass();
刪除最后一個元素上與前面重復(fù)的class
$('li:last').removeClass(function() {
return $(this).prev().attr('class');
});
toggleClass(class|fn[,sw]) 如果存在(不存在)就刪除(添加)一個類魏烫。
$("p").toggleClass("selected"); 類名存在刪除該類名辣苏,不存在,添加此類名
每點擊三下加上一次 'highlight' 類
var count = 0;
$("p").click(function(){
$(this).toggleClass("highlight", count++ % 3 == 0);
});
根據(jù)父元素來設(shè)置class屬性
$('div.foo').toggleClass(function() {
if ($(this).parent().is('.bar') {
return 'happy';
} else {
return 'sad';
}
});
html([val|fn]) 取得第一個匹配元素的html內(nèi)容哄褒。這個函數(shù)不能用于XML文檔稀蟋。但可以用于XHTML文檔。
返回p元素的內(nèi)容呐赡。
$('p').html();
設(shè)置所有 p 元素的內(nèi)容
$("p").html("Hello <b>world</b>!");
使用函數(shù)來設(shè)置所有匹配元素的內(nèi)容退客。
$("p").html(function(n){
return "這個 p 元素的 index 是:" + n;
});
text([val|fn])取得所有匹配元素的內(nèi)容。
結(jié)果是由所有匹配元素包含的文本內(nèi)容組合起來的文本链嘀。這個方法對HTML和XML文檔都有效
返回p元素的文本內(nèi)容井辜。
$('p').text();
設(shè)置所有 p 元素的文本內(nèi)容
$("p").text("Hello world!");
使用函數(shù)來設(shè)置所有匹配元素的文本內(nèi)容
$("p").text(function(n){
return "這個 p 元素的 index 是:" + n;
});
val([val|fn|arr])獲得匹配元素的當(dāng)前值。
包括select管闷。如果多選粥脚,將返回一個數(shù)組,其包含所選的值包个。>>
獲取文本框中的值
$("input").val();
設(shè)定文本框的值
$("input").val("hello world!");
設(shè)定文本框的值
$('input:text.items').val(function() {
return this.value + ' ' + this.className;
});
事件
頁面載入
ready()在文檔加載完畢之后激活函數(shù)
三種用法
方法一:$(document).ready(function)
方法二:$().ready(function)
方法三:$(function) 最常用的用法
事件處理
trigger() 方法觸發(fā)被選元素的指定事件類型刷允。
$(selector).trigger(event,[param1,param2,...])
event
必需。規(guī)定指定元素要觸發(fā)的事件碧囊。
可以使自定義事件(使用 bind() 函數(shù)來附加)树灶,或者任何標(biāo)準(zhǔn)事件。
[param1,param2,...]
可選糯而。傳遞到事件處理程序的額外參數(shù)天通。
額外的參數(shù)對自定義事件特別有用。
觸發(fā) input 元素的 select 事件:
$("button").click(function(){
$("input").trigger("select");
});
one() 方法為被選元素附加一個或多個事件處理程序熄驼,并規(guī)定當(dāng)事件發(fā)生時運行的函數(shù)像寒。
當(dāng)使用 one() 方法時烘豹,每個元素只能運行一次事件處理器函數(shù)。
當(dāng)點擊 p 元素時诺祸,增加該元素的文本大行酢:
$("p").one("click",function(){
$(this).animate({fontSize:"+=6px"});
});
$(selector).one(event,data,function)
event
必需。規(guī)定添加到元素的一個或多個事件筷笨。
由空格分隔多個事件张遭。必須是有效的事件讲弄。
data 可選。規(guī)定傳遞到函數(shù)的額外數(shù)據(jù)。
function 必需纸泄。規(guī)定當(dāng)事件發(fā)生時運行的函數(shù)污桦。
triggerHandler() 方法觸發(fā)被選元素的指定事件類型甜攀。但不會執(zhí)行瀏覽器默認動作喧笔,也不會產(chǎn)生事件冒泡。
triggerHandler() 方法與 trigger() 方法類似悼瘾。不同的是它不會觸發(fā)事件(比如表單提交)的默認行為囊榜,而且只影響第一個匹配元素。
與 trigger() 方法相比的不同之處
它不會引起事件(比如表單提交)的默認行為
.trigger() 會操作 jQuery 對象匹配的所有元素亥宿,而 .triggerHandler() 只影響第一個匹配元素卸勺。
由 .triggerHandler() 創(chuàng)建的事件不會在 DOM 樹中冒泡;如果目標(biāo)元素不直接處理它們烫扼,則不會發(fā)生任何事情曙求。
該方法的返回的是事件處理函數(shù)的返回值,而不是具有可鏈性的 jQuery 對象映企。此外悟狱,如果沒有處理程序被觸發(fā),則這個方法返回 undefined堰氓。
篩選
.eq( index ) 選中集合中的某一個元素 index是元素的下標(biāo)支持負數(shù)(從后向前)
.first()元素集合的第一個元素
.last()元素集合的最后一的元素
.hasClass( className ) 選中軸指定類名的元素
.filter( selector ) 支持選擇器 下標(biāo) 函數(shù) 函數(shù)的返回值應(yīng)是下標(biāo)
.is() 代表是什么的就選中 可以是各種選擇器 或者是函數(shù) (返回值是布爾類型)
可以用于選擇出指定類型的元素 也可以用來判斷 選中的是不是指定類型的元素
.children( [selector ] ) 獲得匹配元素集合中每個元素的子元素挤渐,選擇器選擇性篩選。
.find( selector ) 通過一個選擇器双絮,jQuery對象浴麻,或元素過濾,得到當(dāng)前匹配的元素集合中每個元素的后代囤攀。 在該元素的所有后代元素中查找指定類型的元素
.parent( [selector ] )取得匹配元素集合中软免,每個元素的父元素,可以提供一個可選的選擇器焚挠。
.parents( [selector ] ) 獲得集合中每個匹配元素的祖先元素膏萧,可以提供一個可選的選擇器作為參數(shù)。
.siblings( [selector ] )獲得匹配元素集合中每個元素的兄弟元素,可以提供一個可選的選擇器。
.next()下一個元素 同級
.prev() 上一個元素 同級
.nextAll()后面的所有元素 同級
.prevAll()前面的所有元素 同級
事件的綁定
on 綁定事件 四個參數(shù)
div.on(type , selecter , obj , fn )
type 是字符串類型 放的是事件類型榛泛,如 click
selecter 字符串類型 是選擇器蝌蹂,代表過濾 只有這個選擇器里面的元素才能觸發(fā)事件
obj 對象類型,給事件傳遞的參數(shù)
fn 函數(shù)挟鸠,事件觸發(fā)之后執(zhí)行的函數(shù)
$('div p:first-child:first').on('click','span',{name:'張忠仁',age:18},function(ev){
console.log(ev); 打印參數(shù)的所有屬性和屬性值
ev.data 傳進去的參數(shù)
console.log('點擊了P標(biāo)簽');
});
解除綁定事件 off
div.off() 移除所有事件
div.off('click') 移除所有點擊事件
div.off('click',fn) 移除指定的點擊事件