jQuery選擇器大全整理

一、選擇網頁元素

$(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的同級元素

二、鏈式操作

每一步的jQuery操作，返回的都是一個jQuery對象，所以不同操作可以連在一起。

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

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

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

三、元素的操作：取值（getter）和賦值（setter）

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

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

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

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

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

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

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

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

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

四、元素的操作：移動

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

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

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

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

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

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

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

五、元素的操作：複製、刪除和創建

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

六、工具方法

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

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

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() 判斷瀏覽器是否支持某個特性。

七、事件操作

//爲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事件。

八、特殊效果

$('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，則關閉所有網頁特效。

jQuery選擇器大全整理

一、選擇網頁元素

二、鏈式操作

三、元素的操作：取值（getter）和賦值（setter）

四、元素的操作：移動

五、元素的操作：複製、刪除和創建

六、工具方法

七、事件操作

八、特殊效果

NETCore中實現一個輕量無負擔的極簡任務調度ScheduleTask

docker使用特定的網絡

使用c#強大的表達式樹實現對象的深克隆之解決循環引用的問題

容器中nginx無法使用同一個網絡下的容器域名

避免DbContext同時在多個線程調用

Python: SunMoonTimeCalculator

GPT-4o 引領人機交互新風向，向量數據庫賽道沸騰了

free AI online tools All In One

痞子衡嵌入式：恩智浦i.MX RT1xxx系列MCU啓動那些事（12.A）- uSDHC eMMC啓動時間(RT1170)

基於Ubuntu-22.04安裝K8s-v1.28.2實驗（二）使用kube-vip實現集羣VIP訪問

字節流與字符流的讀寫學習

css樣式文件命名規範

webview加載url出現空白頁面，有些頁面沒問題

10款面向HTML5 畫布(Canvas)的JavaScript庫

淺析大數據的技術生態圈(Hadoop，hive，spark)

https://yachay.unat.edu.pe/blog/index.php?comment_area=format_blog&comment_component=blog&comment_co

linux以太網驅動總結