jQuery選擇器大全整理

時間 2020-11-30

標籤 javascript html java jquery api 數組瀏覽器 ruby markdown app 欄目 JQuery 简体版

原文原文鏈接

1、選擇網頁元素

$(document) //選擇整個文檔對象

$('#myId') //選擇ID爲myId的網頁元素

$('div.myClass') // 選擇class爲myClass的div元素

$('input[name=first]') // 選擇name屬性等於first的input元素

$('a:first') //選擇網頁中第一個a元素

$('tr:odd') //選擇表格的奇數行

$('#myForm :input') // 選擇表單中的input元素

$('div:visible') //選擇可見的div元素

$('div:gt(2)') // 選擇全部的div元素，除了前三個

$('div:animated') // 選擇當前處於動畫狀態的div元素

$('div').has('p'); // 選擇包含p元素的div元素

$('div').not('.myClass'); //選擇class不等於myClass的div元素

$('div').filter('.myClass'); //選擇class等於myClass的div元素

$('div').first(); //選擇第1個div元素

$('div').eq(5); //選擇第6個div元素

$('div').next('p'); //選擇div元素後面的第一個p元素

$('div').parent(); //選擇div元素的父元素

$('div').closest('form'); //選擇離div最近的那個form父元素

$('div').children(); //選擇div的全部子元素

$('div').siblings(); //選擇div的同級元素

2、鏈式操做

每一步的jQuery操做，返回的都是一個jQuery對象，因此不一樣操做能夠連在一塊兒。javascript

$('div') //找到div元素
　　　.find('h3') //選擇其中的h3元素
　　　.eq(2) //選擇第3個h3元素
　　　.html('Hello'); //將它的內容改成Hello

鏈式操做可使用 end 回退到上一步的結果集：html

$('div')
　　　.find('h3')
　　　.eq(2)
　　　.html('Hello')
　　　.end() //退回到選中全部的h3元素的那一步
　　　.eq(0) //選中第一個h3元素
　　　.html('World'); //將它的內容改成World

3、元素的操做：取值（getter）和賦值（setter）

$('h1').html(); //html()沒有參數，表示取出h1的值

$('h1').html('Hello'); //html()有參數Hello，表示對h1進行賦值

.html() //取出或設置html內容

.text() //取出或設置text內容

.attr() //取出或設置某個屬性的值

.width() //取出或設置某個元素的寬度

.height() //取出或設置某個元素的高度

.val() //取出某個表單元素的值

須要注意的是，若是結果集包含多個元素，那麼賦值的時候，將對其中全部的元素賦值；取值的時候，則是隻取出第一個元素的值（.text()例外，它取出全部元素的text內容）。java

4、元素的操做：移動

$('div').insertAfter($('p')); //把div元素移動p元素後面

$('p').after($('div')); //把p元素加到div元素前面

兩種效果同樣，區別在於返回值的不一樣：第一種方法返回div元素，第二種方法返回p元素jquery

.insertAfter()和.after()：在現存元素的外部，從後面插入元素

.insertBefore()和.before()：在現存元素的外部，從前面插入元素

.appendTo()和.append()：在現存元素的內部，從後面插入元素

.prependTo()和.prepend()：在現存元素的內部，從前面插入元素

5、元素的操做：複製、刪除和建立

複製元素使用.clone()。api
刪除元素使用.remove()和.detach()。二者的區別在於，前者不保留被刪除元素的事件，後者保留，有利於從新插入文檔時使用。數組
清空元素內容（可是不刪除該元素）使用.empty()。瀏覽器

6、工具方法

$.trim() 去除字符串兩端的空格。ruby
$.each() 遍歷一個數組或對象。markdown

$.inArray() 返回一個值在數組中的索引位置。若是該值不在數組中，則返回-1。app

var arr = [ 4, "Pete", 8, "John" ];
$.inArray( "John", arr );//結果爲3
$.inArray( "Karl", arr );//結果爲-1

$.grep() 返回數組中符合某種標準的元素。

var arr = [ 1, 9, 3, 8, 6, 1, 5, 9, 4, 7, 3, 8, 6, 9, 1 ];
arr = $.grep(arr, function( n, i ) {
  return ( n !== 5 && i > 4 );
});
arr.join( ", " )

//結果爲 
1, 9, 4, 7, 3, 8, 6, 9, 1
過濾了=5的元素和數組索引位置小於等於4的元素

$.extend() 將多個對象，合併到第一個對象。

var object1 = {
  apple: 0,
  banana: { weight: 52, price: 100 },
  cherry: 97
};
var object2 = {
  banana: { price: 200 },
  durian: 100
};

// Merge object2 into object1
$.extend( object1, object2 );
console.log(JSON.stringify( object1 ));

結果爲：
{"apple":0,"banana":{"price":200},"cherry":97,"durian":100}

$.makeArray() 將對象轉化爲數組。

$.type() 判斷對象的類別（函數對象、日期對象、數組對象、正則對象等等）。

jQuery.type( undefined ) === "undefined"
jQuery.type() === "undefined"
jQuery.type( window.notDefined ) === "undefined"
jQuery.type( null ) === "null"

jQuery.type( true ) === "boolean"
jQuery.type( new Boolean() ) === "boolean"
jQuery.type( 3 ) === "number"
jQuery.type( new Number(3) ) === "number"
jQuery.type( "test" ) === "string"
jQuery.type( new String("test") ) === "string"
jQuery.type( function(){} ) === "function"
jQuery.type( [] ) === "array"
jQuery.type( new Array() ) === "array"
jQuery.type( new Date() ) === "date"
jQuery.type( new Error() ) === "error" // as of jQuery 1.9
jQuery.type( /test/ ) === "regexp"

$.isArray() 判斷某個參數是否爲數組。

$.isEmptyObject() 判斷某個對象是否爲空（不含有任何屬性）。

jQuery.isEmptyObject({}); // true
jQuery.isEmptyObject({ foo: "bar" }); // false

$.isFunction() 判斷某個參數是否爲函數。

function stub() {}
var objs = [
  function() {},
  { x:15, y:20 },
  null,
  stub,
  "function"
];

jQuery.each( objs, function( i ) {
  var isFunc = jQuery.isFunction( objs[ i ]);
  console.log(isFunc );
});

結果：
true
false
false
true
false

$.isPlainObject() 判斷某個參數是否爲用」{}」或」new Object」創建的對象。
$.support() 判斷瀏覽器是否支持某個特性。

7、事件操做

//爲P元素綁定click事件
$('p').click(function(){
alert('Hello');
});

.blur() 表單元素失去焦點。

$( "#target" ).blur(function() {
  alert( "Handler for .blur() called." );
});

.change() 表單元素的值發生變化

<!--HTML-->
<form>
  <input class="target" type="text" value="Field 1">
  <select class="target">
    <option value="option1" selected="selected">Option 1</option>
    <option value="option2">Option 2</option>
  </select>
</form>
<div id="other">
  Trigger the handler
</div>

//JS
$( ".target" ).change(function() {
  alert( "Handler for .change() called." );
});

.click() 鼠標單擊
.dblclick() 鼠標雙擊
.focus() 表單元素得到焦點
.focusin() 子元素得到焦點
.focusout() 子元素失去焦點
.hover() 同時爲mouseenter和mouseleave事件指定處理函數
.keydown() 按下鍵盤（長時間按鍵，只返回一個事件）
.keypress() 按下鍵盤（長時間按鍵，將返回多個事件）
.keyup() 鬆開鍵盤

.load() 元素加載完畢

$( "img.userIcon" ).load(function() {
  if ( $( this ).height() > 100) {
    $( this ).addClass( "bigImg" );
  }
});

.mousedown() 按下鼠標
.mouseenter() 鼠標進入（進入子元素不觸發）
.mouseleave() 鼠標離開（離開子元素不觸發）
.mousemove() 鼠標在元素內部移動
.mouseout() 鼠標離開（離開子元素也觸發）
.mouseover() 鼠標進入（進入子元素也觸發）
.mouseup() 鬆開鼠標
.ready() DOM加載完成

.resize() 瀏覽器窗口的大小發生改變

$( window ).resize(function() {
  $( "body" ).prepend( "<div>" + $( window ).width() + "</div>" );
});

.scroll() 滾動條的位置發生變化
.select() 用戶選中文本框中的內容
.submit() 用戶遞交表單

.toggle() 根據鼠標點擊的次數，依次運行多個函數

$( "td" ).toggle(
  function() {
    $( this ).addClass( "selected" );
  }, function() {
    $( this ).removeClass( "selected" );
  }
);

.unload() 用戶離開頁面

以上這些事件在jQuery內部，都是.bind()的便捷方式。使用.bind()能夠更靈活地控制事件，好比爲多個事件綁定同一個函數：

　　$('input').bind(
　　　　'click change', //同時綁定click和change事件
　　　　function() {
　　　　　　alert('Hello');
　　　　}
　　);

有時，你只想讓事件運行一次，這時可使用.one()方法。

　　$("p").one("click", function() {
　　　　alert("Hello"); //只運行一次，之後的點擊不會運行
　　});

.unbind()用來解除事件綁定。

　　$('p').unbind('click');

全部的事件處理函數，均可以接受一個事件對象（event object）做爲參數，好比下面例子中的e：

　　$("p").click(function(e) {
　　　　alert(e.type); // "click"
　　});

這個事件對象有一些頗有用的屬性和方法：

event.pageX 事件發生時，鼠標距離網頁左上角的水平距離　　
event.pageY 事件發生時，鼠標距離網頁左上角的垂直距離
event.type 事件的類型（好比click）　　
event.which 按下了哪個鍵　
event.data 在事件對象上綁定數據，而後傳入事件處理函數
event.target 事件針對的網頁元素
event.preventDefault() 阻止事件的默認行爲（好比點擊連接，會自動打開新頁面）
event.stopPropagation() 中止事件向上層元素冒泡

若是在代碼裏自動觸發一個事件，一種是直接使用事件函數，另外一種是使用.trigger()或.triggerHandler()。

　　$('a').click(); //直接使用事件函數
　　$('a').trigger('click');

通常用來觸發其餘事件，好比點擊某個元素觸發另一個元素的hover事件。

8、特殊效果

$('h1').show(); //展示一個h1標題

　　.fadeIn() 淡入
　　.fadeOut() 淡出
　　.fadeTo() 調整透明度
　　.hide() 隱藏元素 = display:none
　　.show() 顯示元素 
　　.slideDown() 向下展開
　　.slideUp() 向上捲起
　　.slideToggle() 依次展開或捲起某個元素
　　.toggle() 依次展現或隱藏某個元素

除了.show()和.hide()，全部其餘特效的默認執行時間都是400ms（毫秒），可是你能夠改變這個設置。

$('h1').fadeIn(300); // 300毫秒內淡入
$('h1').fadeOut('slow'); // 緩慢地淡出

在特效結束後，能夠指定執行某個函數。

$('p').fadeOut(300, function() { 
    $(this).remove(); 
});

更復雜的特效，能夠用.animate()自定義。

$('div').animate(
　　　　{
　　　　　　left : "+=50", //不斷右移
　　　　　　opacity : 0.25 //指定透明度
　　　　},
　　　　300, // 持續時間
　　　　function() { 
    　　　　alert('done!'); 
    　　} //回調函數
　　);

.stop()和.delay()用來中止或延緩特效的執行。
$.fx.off若是設置爲true，則關閉全部網頁特效。