JQuery學習 2 選擇器 1

2022-08-11 15:36:19 字數 1571 閱讀 3307

通過標籤名,屬性名或內容對dom元素進行選擇,沒有瀏覽器的相容問題

選擇器型別:

基本選擇器

層次選擇器

過濾選擇器

表單選擇器

基本選擇器:jquery中使用最頻繁的選擇器

使用jquery:

$('#mydiv').css('background-color','red');

使用js:

document.getelementbyid('mydiv').style.backgroundcolor = 'red';

按照jquery的習慣,下面的**應該改成第二種方式

element:根據給定的元素名稱匹配所有元素,也就是《後邊的元素名稱

$(function () )

})根據型別匹配元素:若多個元素使用的型別相同,則選擇多個元素

層次選擇器

$('#divmid').css('display', 'block'):設定id為'divmid'的層可見

$('div span').css('display', 'block'):設定id為'divmid'的層裡面的所有span元素可見,無論有幾級巢狀

$('div>span').css('display', 'block'):設定id為'divmid'的層裡面的第一級span元素可見,此span元素裡面的span元素不可見

$('#divmid+div').css('display','block'):設定id為'divmid'的層後面的第乙個div可見

$('#divmid+span').css('display', 'block'):設定id為'divmid'的層後面的第乙個span可見

$('#divmid').next().css('display','block'):設定id為'divmid'的層後面的第乙個元素可見,無論是什麼元素

$('#divmid').nextall().css('display', 'block'):設定id為'divmid'的層後面的所有元素可見,無論是什麼元素,必須與divmid平級,平級元素裡面的巢狀元素不可見

$('#divmid~div').css('display', 'block'):設定id為'divmid'的層後面的所有div元素可見,必須是平級的。

$('#divmid~span').css('display','block');:設定id為'divmid'的層後面的所有span元素可見,必須是平級的。

例:

第一層

第二層第三層

第四層

過濾選擇器

根據某類過濾規則進行元素的匹配

$(function () )

jQuery學習筆記2 選擇器

1 簡單選擇器 box p css color red 直接相鄰兒子p標籤 返回選擇器選擇元素個數方法 length屬性或size 方法。jquery具有容錯功能 if document.getelementbyid pox 等效於if pox size 0 也可以轉換為dom物件方式來判斷,有值時...

jQuery學習 選擇器

首先了解一下css選擇器,css即層疊樣式表他將網頁結構和表現樣式完全分離出來,利用css選擇器可以輕鬆在不改變html結構的前提下改變樣式。他是利用獲取目標元素後施加樣式,有三種方式 行間樣式表 內部樣式表 外部樣式表。選擇器語法 描述示例 標籤選擇器 e以標籤作為選擇符 tdid選擇器 id以文...

jquery選擇器學習

學習方式,照著列表乙個個敲一遍,記個大概,知道有這麼個選擇器.之後使用的時候查查w3c,就會用了 p 取得p標籤 p1 取得id為p1的元素 p1 取得class p1的元素 href 選擇屬性帶有href的元素 href 選擇href 的元素 href 選擇href 的元素 選擇所有href屬性以...