首頁  >  文章  >  web前端  >  jquery頁面載入什麼用選擇事件

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

PHPz
PHPz原創
2023-04-17 10:28:25488瀏覽

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

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

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

一、頁面載入完成事件

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

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

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

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

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

二、選擇器

1.基本選擇器

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

根據標籤名稱選擇元素:

$('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中文網其他相關文章!

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