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

首頁

web前端

js教程

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

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

May 16, 2016 pm 05:20 PM

jquery

由于当前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, 或 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(>

$(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( -11 ) );

.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( "Test" );
$( "body" ).append( $newdiv1, [ newdiv2, existingdiv1 ] );
$( "p" ).append( "Hello" );
$( "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" ) );
$( "

Test

" ).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( "

Test

" );

.prependTo(target) 把物件插入到目標元素頭部，用法和prepend類似

Insert every element in the set of matched elements to the beginning of the target.

複製程式碼程式碼如下:

$( "

Test

" ).prependpendTo ( ".inner" );

.before([content][,content]) / .before(function) 在物件前面(不是頭部，而是外面，和物件並列同級)插入內容，參數和append類似

Insert content, specified by the parameter, before each element in the set of matched elements.

複製程式碼程式碼如下:

$( ".inner" ).before(Test" );
$( ".container" ).before( $( "h2" ) );
$( "p" ).first().before( newdiv1, [ newdiv2, existingdiv1 ] );
$( "p" ).before( "Hello" );
$( "p" ).before( document.createTextNode( "Hello" ) );

.insertBefore(target) 把物件插入target之前（同樣不是頭部，是同級）

Insert every element in the set of matched elements before the target.

複製程式碼程式碼如下:

$( "h2" ).insertBefore( $( ".container" ).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( "Test" );
$( "p" ).after( document.createTextNode( "Hello" ) );

.insertAfter(target) 和insertBefore相反，把物件插入target之後（同樣不是尾部，是同等級）

Insert every element in the set of matched elements after the target.

複製程式碼程式碼如下:

$( "

Test

" ).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="inner">Hello
Goodbye

$( ".inner" ).wrap( "

" );

Hello

Goodbye

.wrapAll(wrappingElement) 把所有符合物件包裹在同一個HTML結構中

Wrap an HTML structure around all elements in the set of matched elements.

複製程式碼

程式碼如下:

div class="inner">Hello

Goodbye

$( ".inner" ).wrapAll( "

");

Hello

Goodbye

.wrapInner(wrappingElement) / .wrapInner(function(index)) 包裹匹配元素內容，這個不好說，一看例子就懂

Wrap an HTML structure around the content of each element in the set of matched elements. 複製程式碼程式碼如下:

Hello

Goodbye

$( ".inner" ).wrapInner( "

");

Hello

Goodbye

.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(>

pTags = $( "p" ).unwrap();

屬性方法

.val() 取得元素的value值

Get the current value of the first element in the set of matched elements.

複製程式碼程式碼如下:

$( "input:checkbox:checked" ).valeck ();

.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" ). "title" );

.attr(attributeName,value) / .attr(attributesJson) / .attr( attributeName, function(index, attr) ) 為元素屬性賦值

Set one or more attributes for the set of matched elements.

複製程式碼程式碼如下:

$( "#greattatphoto" ). ", "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( 🎜>

.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.

Some text.

第一次執行

複製程式碼程式碼如下:

$( "div. tumble" ).toggleClass( "bounce" )
Some text.

第二次執行

複製程式碼程式碼如下:

$( "div.tumble" ). bounce" )
Some text.

複製程式碼程式碼如下:

$( "#foo" )..oggleClass(classNamet. addOrRemove );

// 兩種寫法意思一樣

if ( addOrRemove ) {
$( "#foo" ).addClass( className );
} else {
$( "#foo" ).removeClass( className );
}

複製程式碼程式碼如下:

$( "div.foo" ).. () {
  if ( $( this ).parent().is( ".bar" ) ) {
    return "happy";
  } else {
  >  }
});

.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"
      "font. >

事件方法

.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有一個比較全面的認識，然後再學習其他內容的時候就可以游刃有餘了。

本網站聲明

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn