瞭解了這些才能開始發揮jQuery的威力

謙行發表於2013-10-08

由於當前jQuery如此的如雷貫耳，相信不用介紹什麼是jQuery了，公司程式碼中廣泛應用了jQuery，但我在看一些小朋友的程式碼時發現一個問題，小朋友們使用的僅僅是jQuery的皮毛，只是使用id選擇器與attr方法，還有幾個動畫，如果只是如此，相比於其帶來的開銷，其實還不如不使用，下面介紹幾個jQuery常用的方法，來讓jQuery的威力發揮出來，否則只用有限的幾個方法，相對於執行速度問題，真不如不用jQuery。

jQuery如此之好用，和其在獲取物件時使用與CSS選擇器相容的語法有很大關係，畢竟CSS選擇器大家都很熟悉（關於CSS選擇器可以看看十分鐘搞定CSS選擇器），但其強大在相容了CSS3的選擇器，甚至多出了很多。

選擇器

有了CSS選擇器基礎後，看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) 查詢集合每個元素的子節點

Get the descendants(子節點) of each element in the current set of matched elements, filtered by a selector, jQuery object, or element.

$('li.item-ii').find('li').css('background-color', 'red');

.filter(selector) 過濾當前集合內元素

Reduce(減少) the set of matched elements to those that match the selector or pass the function's test.

$('li').filter(':even').css('background-color', 'red');

基本方法

.ready(handler) 文件載入完成後執行的方法，區別於window.onload

Specify a function to execute when the DOM is fully loaded.

$(document).ready(function() {
  // Handler for .ready() called.
});

.each(function(index,element)) 遍歷集合內每個元素

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

CSS方法

.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.
  });
});

動畫/Ajax

這兩部分內容比較多，不是簡單的一個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有一個比較全面的認識，然後再學習其他內容的時候就可以遊刃有餘了。

python是什麼?這些你都瞭解了嗎?
2020-09-24
Python
瞭解了這些，輕鬆拿offer——Java面試之道
2020-01-28
Java面試
CentOS停服遭替代，這些操作差異，你瞭解了嗎？
2023-10-09
CentOS
瞭解【Docker】從這裡開始
2019-05-29
Docker
Python開發打牢基礎，從這些個語法開始！
2019-05-10
Python
Gemini 2.0 來了，這些 Voice Agent 開發者早已開始探索……
2024-12-17
HTTPS 你瞭解了嗎？
2020-03-18
HTTP
Web前端開發怎樣學？你需瞭解這些問題
2022-03-07
Web前端
SSD新正規化｜“真香”定律又開始發揮作用了
2022-11-02
資料視覺化在這些領域發揮著不同作用
2022-09-29
視覺化
怎樣才能讓遊戲DEMO發揮最大的宣傳效果？
2022-03-03
遊戲
手遊投放如何才能回本？手遊買量必須瞭解這些資料指標
2019-10-17
指標
瞭解作業系統的那些事兒，從這篇文章開始
2021-02-23
作業系統
Javascript建立陣列的方式你瞭解了嗎
2021-07-07
JavaScript陣列
谷歌官方元件Navigation你瞭解了嗎？
2019-04-03
谷歌元件Navigation
ava String 物件，你真的瞭解了嗎?
2020-05-26
物件
幽默圖：你瞭解了量子力學嗎？
2021-10-09
Android混淆——瞭解這些就夠了
2018-05-03
Android
學習Python，這些你瞭解嗎?
2020-10-09
Python
excalidraw 這些用法你肯定不瞭解
2024-07-21
從 0 開始瞭解 Docker
2019-03-03
Docker
《死亡擱淺》發行商開始發行國產獨立遊戲，這只是開始
2021-08-02
遊戲
從零開始學Web之jQuery（一）jQuery的概念，頁面載入事件
2018-07-04
WebjQuery事件
快速瞭解jQuery
2023-05-05
jQuery
掌握jQuery外掛開發，這篇文章就夠了
2021-09-09
jQuery
flex入門—瞭解這些flex屬性
2018-05-29
Flex
建立索引，這些知識應該瞭解
2021-04-12
索引
資料治理始終沒有發揮成效，原因何在？
2024-01-29
新手如何開始做自媒體？做自媒體的步驟有這些
2021-03-12
Goland 這些技巧，學會開發效率翻倍！
2021-08-17
GoLand
Python人工智慧開發的優勢?這些很重要！
2020-01-03
Python人工智慧
學會這些 Web API 使你的開發效率翻倍
2023-04-10
WebAPI
01_瞭解jQuery
2018-07-24
jQuery
Linux從頭學11：理解了這三個概念，才能徹底理解任務管理和任務切換
2021-09-09
Linux
TCP/IP、HTTP、socket 這些，你真的瞭解嗎？
2018-06-08
TCPHTTP
初識Python,我想你應該瞭解這些...
2020-06-27
Python
如何做好卡牌遊戲？這些開發者是這麼說的
2019-05-15
遊戲
大廠一線研發揭秘：怎麼樣才算全面瞭解了業務？
2024-04-21
【還沒開始】每個前端開發人員都應瞭解的延遲資料
2024-11-21
前端