因爲當前jQuery如此的如雷貫耳,相信不用介紹什麼是jQuery了,公司代碼中普遍應用了jQuery,但我在看一些小朋友的代碼時發現一個問題,小朋友們使用的僅僅是jQuery的皮毛,只是使用id選擇器與attr方法,還有幾個動畫,若是隻是如此,相比於其帶來的開銷,其實還不如不使用,下面介紹幾個jQuery經常使用的方法,來讓jQuery的威力發揮出來,不然只用有限的幾個方法,相對於運行速度問題,真不如不用jQuery。css
jQuery如此之好用,和其在獲取對象時使用與CSS選擇器兼容的語法有很大關係,畢竟CSS選擇器你們都很熟悉(關於CSS選擇器能夠看看十分鐘搞定CSS選擇器),但其強大在兼容了CSS3的選擇器,甚至多出了不少。html
有了CSS選擇器基礎後,看jQuery的選擇器就很簡單了,再也不詳細一一說明jquery
基本選擇器 | |
$(‘*’) | 匹配頁面全部元素 |
$(‘#id’) | id選擇器 |
$(‘.class’) | 類選擇器 |
$(‘element’) | 標籤選擇器 |
組合/層次選擇器 | |
$(‘E,F’) | 多元素選擇器,用」,分隔,同時匹配元素E或元素F |
$(‘E F’) | 後代選擇器,用空格分隔,匹配E元素全部的後代(不僅是子元素、子元素向下遞歸)元素F |
$(E>F) | 子元素選擇器,用」>」分隔,匹配E元素的全部直接子元素 |
$(‘E+F’) | 直接相鄰選擇器,匹配E元素以後的相鄰的同級元素F |
$(‘E~F’) | 普通相鄰選擇器(弟弟選擇器),匹配E元素以後的同級元素F(不管直接相鄰與否) |
$(‘.class1.class2’) | 匹配類名中既包含class1又包含class2的元素 |
基本過濾選擇器 | |
$("E:first") | 全部E中的第一個 |
$("E:last") | 全部E中的最後一個 |
$("E:not(selector)") | 按照selector過濾E |
$("E:even") | 全部E中index是偶數 |
$("E:odd") | 全部E中index是奇數 |
$("E:eq(n)") | 全部E中index爲n的元素 |
$("E:gt(n)") | 全部E中index大於n的元素 |
$("E:ll(n)") | 全部E中index小於n的元素 |
$(":header") | 選擇h1~h7 元素 |
$("div:animated") | 選擇正在執行動畫效果的元素 |
內容過濾器 | |
$(‘E:contains(value)’) | 內容中包含value值的元素 |
$(‘E:empty’) | 內容爲空的元素 |
$(‘E:has(F)’) | 子元素中有F的元素,$(‘div:has(a)’):包含a標籤的div |
$(‘E: parent’) | 父元素是E的元素,$(‘td: parent’):父元素是td的元素 |
可視化選擇器 | |
$(‘E:hidden’) | 全部被隱藏的E |
$(‘E:visible’) | 全部可見的E |
屬性過濾選擇器 | |
$(‘E[attr]’) | 含有屬性attr的E |
$(‘E[attr=value]’) | 屬性attr=value的E |
$(‘E[attr !=value]’) | 屬性attr!=value的E |
$(‘E[attr ^=value]’) | 屬性attr以value開頭的E |
$(‘E[attr $=value]’) | 屬性attr以value結尾的E |
$(‘E[attr *=value]’) | 屬性attr包含value的E |
$(‘E[attr][attr *=value]’) | 能夠連用 |
子元素過濾器 | |
$(‘E:nth-child(n)’) | E的第n個子節點 |
$(‘E:nth-child(3n+1)’) | E的index符合3n+1表達式的子節點 |
$(‘E:nth-child(even)’) | E的index爲偶數的子節點 |
$(‘E:nth-child(odd)’) | E的index爲奇數的子節點 |
$(‘E:first-clild’) | 全部E的第一個子節點 |
$(‘E:last-clild’) | 全部E的最後一個子節點 |
$(‘E:only-clild’) | 只有惟一子節點的E的子節點 |
表單元素選擇器 | |
$(‘E:type’) | 特定類型的input |
$(‘:checked’) | 被選中的checkbox或radio |
$(‘option: selected’) | 被選中的option |
.find(selector) 查找集合每一個元素的子節點web
Get the descendants(子節點) of each element in the current set of matched elements, filtered by a selector, jQuery object, or element.ajax
$('li.item-ii').find('li').css('background-color', 'red');
.filter(selector) 過濾當前集合內元素json
Reduce(減小) the set of matched elements to those that match the selector or pass the function's test.api
$('li').filter(':even').css('background-color', 'red');
.ready(handler) 文檔加載完成後執行的方法,區別於window.onloadapp
Specify a function to execute when the DOM is fully loaded.ide
$(document).ready(function() { // Handler for .ready() called. });
.each(function(index,element)) 遍歷集合內每一個元素post
Iterate over a jQuery object, executing a function for each matched element.
$("li" ).each(function( index ) { console.log( index + ": " + $(this).text() ); });
jQuery.extend( target [, object1 ] [, objectN ] ) 合併對象
Merge the contents of two or more objects together into the first object.
var object = $.extend({}, object1, object2);
.eq(index) 按index獲取jQuery對象集合中的某個特定jQuery對象
Reduce the set of matched elements to the one at the specified index.
.eq(-index) 按逆序index獲取jQuery對象集合中的某個特定jQuery對象
An integer indicating the position of the element, counting backwards from the last element in the set.
$( "li" ).eq( 2 ).css( "background-color", "red" );
.get(index) 獲取jQuery集合對象中某個特定index的DOM對象(將jQuery對象自動轉換爲DOM對象)
Retrieve one of the DOM elements matched by the jQuery object.
console.log( $( "li" ).get( -1 ) );
.get() 將jQuery集合對象轉換爲DOM集合對象並返回
Retrieve the DOM elements matched by the jQuery object.
console.log( $( "li" ).get() );
.index() / .index(selector)/ .index(element) 從給定集合中查找特定元素index
Search for a given element from among the matched elements.
1. 沒參數返回第一個元素index
2.若是參數是DOM對象或者jQuery對象,則返回參數在集合中的index
3.若是參數是選擇器,返回第一個匹配元素index,沒有找到返回-1
var listItem = $( "#bar" ); alert( "Index: " + $( "li" ).index( listItem ) );
.clone([withDataAndEvents][,deepWithDataAndEvents]) 建立jQuery集合的一份deep copy(子元素也會被複制),默認不copy對象的shuju和綁定事件
Create a deep copy of the set of matched elements.
$( ".hello" ).clone().appendTo( ".goodbye" );
.parent([selector]) 獲取jQuery對象符合selector的父元素
Get the parent of each element in the current set of matched elements, optionally filtered by a selector.
$( "li.item-a" ).parent('ul').css( "background-color", "red" );
.parents([selector]) 獲取jQuery對象符合選擇器的祖先元素
Get the ancestors of each element in the current set of matched elements, optionally filtered by a selector.
$( "span.selected" ) .parents( "div" ) .css( "border", "2px red solid" )
.append(content[,content]) / .append(function(index,html)) 向對象尾部追加內容
Insert content, specified by the parameter, to the end of each element in the set of matched elements.
1. 能夠一次添加多個內容,內容能夠是DOM對象、HTML string、 jQuery對象
2. 若是參數是function,function能夠返回DOM對象、HTML string、 jQuery對象,參數是集合中的元素位置與原來的html值
$( ".inner" ).append( "<p>Test</p>" ); $( "body" ).append( $newdiv1, [ newdiv2, existingdiv1 ] ); $( "p" ).append( "<strong>Hello</strong>" ); $( "p" ).append( $( "strong" ) ); $( "p" ).append( document.createTextNode( "Hello" ) );
.appendTo(target) 把對象插入到目標元素尾部,目標元素能夠是selector, DOM對象, HTML string, 元素集合,jQuery對象;
Insert every element in the set of matched elements to the end of the target.
$( "h2" ).appendTo( $( ".container" ) ); $( "<p>Test</p>" ).appendTo( ".inner" );
.prepend(content[,content]) / .prepend(function(index,html)) 向對象頭部追加內容,用法和append相似
Insert content, specified by the parameter, to the beginning of each element in the set of matched elements.
$( ".inner" ).prepend( "<p>Test</p>" );
.prependTo(target) 把對象插入到目標元素頭部,用法和prepend相似
Insert every element in the set of matched elements to the beginning of the target.
$( "<p>Test</p>" ).prependTo( ".inner" );
.before([content][,content]) / .before(function) 在對象前面(不是頭部,而是外面,和對象並列同級)插入內容,參數和append相似
Insert content, specified by the parameter, before each element in the set of matched elements.
$( ".inner" ).before( "<p>Test</p>" ); $( ".container" ).before( $( "h2" ) ); $( "p" ).first().before( newdiv1, [ newdiv2, existingdiv1 ] ); $( "p" ).before( "<b>Hello</b>" ); $( "p" ).before( document.createTextNode( "Hello" ) );
.insertBefore(target) 把對象插入到target以前(一樣不是頭部,是同級)
Insert every element in the set of matched elements before the target.
$( "h2" ).insertBefore( $( ".container" ) );
.after([content][,content]) / .after(function(index)) 和before相反,在對象後面(不是尾部,而是外面,和對象並列同級)插入內容,參數和append相似
Insert content, specified by the parameter, after each element in the set of matched elements.
$( ".inner" ).after( "<p>Test</p>" ); $( "p" ).after( document.createTextNode( "Hello" ) );
.insertAfter(target) 和insertBefore相反,把對象插入到target以後(一樣不是尾部,是同級)
Insert every element in the set of matched elements after the target.
$( "<p>Test</p>" ).insertAfter( ".inner" ); $( "p" ).insertAfter( "#foo" );
.wrap(wrappingElement) / .wrap(function(index)) 爲每一個對象包裹一層HTML結構,能夠是selector, element, HTML string, jQuery object
Wrap an HTML structure around each element in the set of matched elements.
<div class="container"> <div class="inner">Hello</div> <div class="inner">Goodbye</div> </div>
$( ".inner" ).wrap( "<div class='new'></div>" );
<div class="container"> <div class="new"> <div class="inner">Hello</div> </div> <div class="new"> <div class="inner">Goodbye</div> </div> </div>
.wrapAll(wrappingElement) 把全部匹配對象包裹在同一個HTML結構中
Wrap an HTML structure around all elements in the set of matched elements.
<div class="container"> <div class="inner">Hello</div> <div class="inner">Goodbye</div> </div>
$( ".inner" ).wrapAll( "<div class='new' />");
<div class="container"> <div class="new"> <div class="inner">Hello</div> <div class="inner">Goodbye</div> </div> </div>
.wrapInner(wrappingElement) / .wrapInner(function(index)) 包裹匹配元素內容,這個很差說,一看例子就懂
Wrap an HTML structure around the content of each element in the set of matched elements.
<div class="container"> <div class="inner">Hello</div> <div class="inner">Goodbye</div> </div>
$( ".inner" ).wrapInner( "<div class='new'></div>");
<div class="container"> <div class="inner"> <div class="new">Hello</div> </div> <div class="inner"> <div class="new">Goodbye</div> </div> </div>
.unwap() 把DOM元素的parent移除
Remove the parents of the set of matched elements from the DOM, leaving the matched elements in their place.
pTags = $( "p" ).unwrap();
.val() 獲取元素的value值
Get the current value of the first element in the set of matched elements.
$( "input:checkbox:checked" ).val();
.val(value) /.val(function(index,value)) 爲元素設置值,index和value一樣是指在爲集合中每一個元素設置的時候該元素的index和原value值
Set the value of each element in the set of matched elements.
$( "input" ).val( ‘hello’ ); $( "input" ).on( "blur", function() { $( this ).val(function( i, val ) { return val.toUpperCase(); }); });
.attr(attributeName) 獲取元素特定屬性的值
Get the value of an attribute for the first element in the set of matched elements.
var title = $( "em" ).attr( "title" );
.attr(attributeName,value) / .attr(attributesJson) / .attr( attributeName, function(index, attr) ) 爲元素屬性賦值
Set one or more attributes for the set of matched elements.
$( "#greatphoto" ).attr( "alt", "Beijing Brush Seller" ); $( "#greatphoto" ).attr({ alt: "Beijing Brush Seller", title: "photo by Kelly Clark" }); $( "#greatphoto" ).attr( "title", function( i, val ) { return val + " - photo by Kelly Clark"; });
.prop( propertyName ) 獲取元素某特性值
Get the value of a property for the first element in the set of matched elements.
$( elem ).prop( "checked" )
.prop(propertyName,value) / .prop(propertiesJson) / .prop(propertyName,function(index,oldPropertyValue)) 爲元素特性賦值
Set one or more properties for the set of matched elements.
$( "input" ).prop( "checked", true ); $( "input[type='checkbox']" ).prop( "checked", function( i, val ) { return !val; }); $( "input[type='checkbox']" ).prop({ disabled: true });
關於attribute 和 property區別能夠看看 jQuery的attr與prop
.data(key,value) / .value(json) 爲HTML DOM元素添加數據,HTML5元素 已有data-*屬性
Store arbitrary data associated with the matched elements.The .data()
method allows us to attach data of any type to DOM elements in a way that is safe from circular references and therefore from memory leaks.
$( "body" ).data( "foo", 52 ); $( "body" ).data( "bar", { myType: "test", count: 40 } ); $( "body" ).data( { baz: [ 1, 2, 3 ] } );
.data(key) / .data() 獲取獲取data設置的數據或者HTML5 data-*屬性中的數據
Return the value at the named data store for the first element in the jQuery collection, as set by data(name, value) or by an HTML5 data-* attribute.
alert( $( "body" ).data( "foo" ) ); alert( $( "body" ).data() ); alert( $( "body" ).data( "foo" ) ); // undefined $( "body" ).data( "bar", "foobar" ); alert( $( "body" ).data( "bar" ) ); // foobar
.hasClass(calssName) 檢查元素是否包含某個class,返回true/false
Determine whether any of the matched elements are assigned the given class.
$( "#mydiv" ).hasClass( "foo" )
.addClass(className) / .addClass(function(index,currentClass)) 爲元素添加class,不是覆蓋原class,是追加,也不會檢查重複
Adds the specified class(es) to each of the set of matched elements.
$( "p" ).addClass( "myClass yourClass" ); $( "ul li" ).addClass(function( index ) { return "item-" + index; });
removeClass([className]) / ,removeClass(function(index,class)) 移除元素單個/多個/全部class
Remove a single class, multiple classes, or all classes from each element in the set of matched elements.
$( "p" ).removeClass( "myClass yourClass" ); $( "li:last" ).removeClass(function() { return $( this ).prev().attr( "class" ); });
.toggleClass(className) /.toggleClass(className,switch) / .toggleClass([switch]) / .toggleClass( function(index, class, switch) [, switch ] ) toggle是切換的意思,方法用於切換,switch是個bool類型值,這個看例子就明白
Add or remove one or more classes from each element in the set of matched elements, depending on either the class's presence or the value of the switch argument.
<div class="tumble">Some text.</div>
第一次執行
$( "div.tumble" ).toggleClass( "bounce" )
<div class="tumble bounce">Some text.</div>
第二次執行
$( "div.tumble" ).toggleClass( "bounce" )
<div class="tumble">Some text.</div>
$( "#foo" ).toggleClass( className, addOrRemove ); // 兩種寫法意思同樣 if ( addOrRemove ) { $( "#foo" ).addClass( className ); } else { $( "#foo" ).removeClass( className ); }
$( "div.foo" ).toggleClass(function() { if ( $( this ).parent().is( ".bar" ) ) { return "happy"; } else { return "sad"; } });
.css(propertyName) / .css(propertyNames) 獲取元素style特定property的值
Get the value of style properties for the first element in the set of matched elements.
var color = $( this ).css( "background-color" ); var styleProps = $( this ).css([ "width", "height", "color", "background-color" ]);
.css(propertyName,value) / .css( propertyName, function(index, value) ) / .css( propertiesJson ) 設置元素style特定property的值
Set one or more CSS properties for the set of matched elements.
$( "div.example" ).css( "width", function( index ) { return index * 50; }); $( this ).css( "width", "+=200" ); $( this ).css( "background-color", "yellow" ); $( this ).css({ "background-color": "yellow", "font-weight": "bolder" });
.bind( eventType [, eventData ], handler(eventObject) ) 綁定事件處理程序,這個常常用,很少解釋
Attach a handler to an event for the elements.
$( "#foo" ).bind( "click", function() { alert( "User clicked on 'foo.'" ); });
.delegate( selector, eventType, handler(eventObject) ) 這個看官方解釋吧
Attach a handler to one or more events for all elements that match the selector, now or in the future, based on a specific set of root elements.
$( "table" ).on( "click", "td", function() {//這樣把td的click事件處理程序綁在table上 $( this ).toggleClass( "chosen" ); });
.on( events [, selector ] [, data ], handler(eventObject) ) 1.7後推薦使用,取代bind、live、delegate
Attach an event handler function for one or more events to the selected elements.
$( "#dataTable tbody" ).on( "click", "tr", function() { alert( $( this ).text() ); });
關於bind、live、delegate、on的區別能夠看看 jQuery三種事件綁定方式.bind(),.live(),.delegate()
.trigger( eventType [, extraParameters ] ) JavaScript出發元素綁定事件
Execute all handlers and behaviors attached to the matched elements for the given event type.
$( "#foo" ).trigger( "click" );
.toggle( [duration ] [, complete ] ) / .toggle( options ) 隱藏或顯示元素
Display or hide the matched elements.
$( ".target" ).toggle();
$( "#clickme" ).click(function() { $( "#book" ).toggle( "slow", function() { // Animation complete. }); });
這兩部份內容比較多,不是簡單的一個function就能夠的,這裏只是列舉一下經常使用方法名,關於其使用能夠看看 jQuery API animation ajax ,或者 jQuery的動畫處理總結,ASP.NET 使用Ajax
動畫
queue/dequeue/clearQueue
delay/stop
fadeIn/fadeOut/fadeTo/fadeToggle
slideUp/slideDown/slideToggle
show/hide
Ajax
$.ajax
$.load
$.get
瞭解了上面這些內容,使用jQuery進行web開發的時候就能夠體驗到jQuery的威力了。本文不是jQuery學習指南,僅僅是個經常使用方法介紹,若是你們想學習jQuery,最好的教材仍是jQuery API,本文中示例與英文解釋所有來源於jQuery API。 另外文中介紹內容遠遠不是jQuery所有,可是首先掌握了這些能夠對jQuery有一個比較全面的認識,而後再學習其餘內容的時候就能夠遊刃有餘了。