jquery頁面載入什麼用選擇事件

jQuery是前端開發中非常受歡迎的JavaScript函式庫，它可以快速且方便地操作HTML文件和CSS樣式。在jQuery中，選擇器是一種非常重要且常用的功能，可以透過選擇器選擇頁面上的元素，然後對它們進行操作。

jQuery提供了多種選擇器，可以根據元素的標籤名稱、類別名稱、ID值、屬性值等等來選擇元素。在頁面載入時，我們通常會對某些元素進行特殊處理，例如顯示或隱藏某些元素，或綁定事件。

在這種情況下，就可以使用jQuery的選擇器和事件綁定來實作。以下介紹一些常用的事件和選擇器。

一、頁面載入完成事件

在jQuery中，頁面載入完成事件可以使用ready()方法來綁定，該方法會在DOM載入完成後立即執行。範例程式碼如下：

$(document).ready(function() {
  // 页面加载完成后执行的代码
});

另外，由於ready()比較常用，jQuery也提供了一個簡寫形式：

$(function() {
  // 页面加载完成后执行的代码
});

這兩種形式是完全等價的，都可以在頁面加載完成後執行某些操作。

二、選擇器

1.基本選擇器

基本選擇器是選擇器最簡單的形式，可以根據元素的標籤名稱、類別名稱、ID值來選擇元素。

根據標籤名稱選擇元素：

$('p') // 选择所有<p>元素</p>

根據類別名稱選擇元素：

$('.my-class') // 选择所有class属性值为my-class的元素

根據ID值選擇元素：

$('#my-id') // 选择ID值为my-id的元素

2.屬性選擇器

屬性選擇器可以根據元素的屬性值來選擇元素，其中最常用的是[class^="xxx"]和[class$="xxx"]。

根據屬性名稱和屬性值選擇元素：

$('input[type="text"]') // 选择所有type属性值为text的input元素

根據屬性值的開頭選擇元素：

$('div[class^="my-"]') // 选择class属性值以my-开头的所有div元素

根據屬性值的結尾選擇元素：

$('a[href$=".pdf"]') // 选择href属性值以.pdf结尾的所有a元素

3.層次選擇器

層次選擇器可以選擇某個元素的子元素、父元素、兄弟元素等等。

選擇某個元素的子元素：

$('ul li') // 选择所有ul元素下的li元素

選擇某個元素的父元素：

$('li').parent() // 选择所有li元素的父元素

選擇某個元素的兄弟元素：

$('li').siblings() // 选择所有li元素的兄弟元素（不包括自己）

4.表單選擇器

表單選擇器可以選擇表單元素，包括文字方塊、複選框、單選方塊、下拉方塊等等。

選擇所有文字方塊元素：

$('input[type="text"]') // 选择所有type属性值为text的input元素

選擇所有複選框元素：

$('input[type="checkbox"]') // 选择所有type属性值为checkbox的input元素

選擇所有單選框元素：

$('input[type="radio"]') // 选择所有type属性值为radio的input元素

選擇所有下拉框元素：

$('select') // 选择所有select元素

三、事件綁定

1.點選事件

點選事件是最常用的事件之一，可以透過click()方法綁定定。範例程式碼如下：

$('button').click(function() {
  // 单击了button按钮后执行的代码
});

2.雙擊事件

雙擊事件是指在一個元素上快速點擊兩次的事件，可以透過dblclick()方法綁定。範例程式碼如下：

$('button').dblclick(function() {
  // 双击了button按钮后执行的代码
});

3.鍵盤事件

鍵盤事件是指在頁面上按下或放開鍵盤按鍵的事件，可以透過keypress()、keydown()、keyup( )三個方法來綁定。

4.滑鼠事件

滑鼠事件是指滑鼠在頁面上移動、點選、雙擊、按下、放開等動作的事件，可以透過mousemove()、mousedown() 、mouseup()、mouseenter()、mouseleave()、hover()等方法來綁定。

5.頁面捲動事件

捲動事件是指使用者捲動頁面時觸發的事件，可以透過scroll()方法來綁定。

以上是一些常用的事件和選擇器，它們可以幫助我們快速地定位頁面上的元素並進行事件綁定。當然，jQuery也提供了許多其他的功能和方法，有興趣的讀者可以自行學習和探索。

以上是jquery頁面載入什麼用選擇事件的詳細內容。更多資訊請關注PHP中文網其他相關文章！