jQuery基本知識

2022-09-03 18:15:07 字數 2795 閱讀 2729

核心:操作dom(通過物件導向)

1.jq是一種鏈式操作 。

$可以拿到dom元素

$(document).ready(

function

() )

//等同於

$(function() )
$(document).ready(

function

() )

//等同

$(document).ready(function() )

原理:

function

$(id)

$(id)

一種炫酷效果 下拉

$(document).ready(function

() )

$(document).ready(function() )

一種效果 漸隱漸顯

$(document).ready(function

() )

//等同

$(document).ready(function

() )

$('div').css()

$('div').on('click', () =>)   //盡量不用箭頭函式 箭頭函式會影響this指向問題

$('p').on('mouseenter', () =>)

$('p').on('mouseenter', () =>) 

//$(can use element choies)

下面是獲得自定義屬性 data-name

用於實現 2. dry (dont repeat youself)

//

原聲獲取屬性 .getattribute("屬性")

//jquery

獲取屬性 .attr("屬性")

$('.button').on('click', function

(e) )

然後獲取元素身上自定義屬性

$('.button').on('click', function(e) )

乙個獨立標籤a內部四個標籤     要控制另外乙個標籤b內部對應的四個

a標籤內部設定自定義屬性內容等於b標籤id

點選a拿到自定義屬性 操控id

上面沒有真實操作dom,而是dom結構基礎上增加 刪除css樣式

dom操作是 增刪改查

1.獲取元素(節點關係)

$('p').first()  獲取相同元素的第乙個

$('p').next() 當前元素的下乙個元素

$('p').prev() 當前元素上乙個

$('p').last() 獲取相同元素的最後乙個

$('p').eq(0) 獲取相同元素的指定下標那乙個

$('p').parent() 獲取元素的父節點

$('li').eq(1).siblings() 獲取元素兄弟元素

$('p').find('name') find() 方法返回被選元素的後代元素

$("p").filter(".intro") // 返回帶有類名 "intro" 的所有 元素 filter() 方法返回符合一定條件的元素

//filter()查詢的是某個元素的自身,而不是內部的元素

2.dom操作

//刪除元素

$('name').remove()  刪除這個節點

//冒泡

$(function

() )

})//阻止冒泡 完美解決

$(function

() )

})

//刪除class

$(this).removeclass('u2-l1')  //

本身是class 不用加 .

//案例

$(function

() )

})

原始dom使用刪除class

let self =event.target

self.classlist.add('active')

remove(class1, class2, ...)

//toggle(class,

true|false

)contains(class)

//增加clss

$(this).addclass('u2-l1') 

//案例

$(function

() )

})

//玄技(玄中元素被特殊標記)

$(function

() )

})

點選是否有某種樣式

$(function

()

else

if ($(this).not('.u2-l1'))

})})

//相同效果

$(function

()

else

})})

// 判斷元素

$(function() 

})

jquery常用基本知識

一 基礎選擇器的使用 divid 選擇id未divid的元素 a 選擇所有元素 bgred 選擇所用css類未bgred的元素 選擇頁面所用元素 divid,a,bgred 同時匹配多個 二 層次選擇器 bgred div 選擇css類為bgred的元素中的所有 mylist li 選擇css類為m...

Jquery 基本知識 一

1.dom物件 通過例如getelementbyid方法獲取到dom樹中的元素就是dom物件 jquery物件 通過jquery包裝dom物件後產生的物件 注意 jquery物件和dom物件不能使用對方的任何方法 2.dom物件和jquery物件之間的轉化 jquery物件轉成dom物件有兩種方法 ...

Jquery 基本知識 一

1.dom物件 通過例如getelementbyid方法獲取到dom樹中的元素就是dom物件 jquery物件 通過jquery包裝dom物件後產生的物件 注意 jquery物件和dom物件不能使用對方的任何方法 2.dom物件和jquery物件之間的轉化 jquery物件轉成dom物件有兩種方法 ...