JQuery (簡化dom操作)

2021-09-23 17:56:01 字數 2285 閱讀 7790

jquery本質是乙個js檔案,裡面是js常用功能的封裝。比如繫結事件,修改內容,修改樣式等。

$()是乙個函式,是jquery()的簡寫,它的一些過載函式見下。

$(elements)

將乙個或多個dom物件(原生js獲取到的dom物件)轉化為jquery物件。

$('#id1').html()  //返回id為id1的jquery物件,然後呼叫html()方法。此方法依然返回jquery物件,可以鏈式呼叫。

document.getelementbyid(「id1」).innerhtml;//等同於上一句

$(callback)

等同於$(document).redy(callback),dom文件載入完畢後再執行。例 $(function());

$(selector)

最常用的,根據選擇器選擇元素並轉化為jquery物件返回。

引用可以放在標籤對內或中最後的位置。

乙個例子:

語法描述

$(this)

當前 html 元素

$("p")

所有 元素

$("p.intro")

所有 class="intro" 的 元素

$(".intro")

所有 class="intro" 的元素

$("#intro")

id="intro" 的元素

$("ul li:first")

每個 })

},function(),500)//滑鼠移開後半秒後再消失

});

//設定乙個屬性

$(selector).attr("href","");

//設定多個屬性

$(selector).attr();

//增添乙個類選擇器

$("div").addclass("important");

//增添多個類選擇器

$("#div1").addclass("important blue");

//刪除乙個類選擇器

$("div").removeclass("important");

//返回css屬性中某個屬性的值

$("p").css("background-color");

//設定css屬性中某個屬性的值

$("p").css("background-color","yellow");

//設定css屬性中多個屬性的值

$("p").css();

$(selector).text("hello world!");//設定元素的文字值

$(selector).text() //返回所選元素的文字內容

$(selector).html() //設定或返回所選元素的內容(包括 html 標記)

$(selector).

val("hello world!");//設定輸入框的值

$(selector).

val();//讀取輸入框的值

主要用於實時改變導航條的選中狀態,見圖1。

圖1 導航條滾動監聽

$(window).

scroll(function() {}

//jquery函式,當滾動條發生滾動時(滑鼠滾輪也算)得到呼叫。

document.body.

scrolltop;,獲得已經滾過去的頁面的高度

$("#grade1").

offset().top; 指定元素相對於整個html頁面的頂部距離

後者減前者就是指定元素離螢幕頂端的距離。小於某個閥值時,比如100px就更新導航條的樣式。

$(selector).

scrolltop() //設定或讀取已經翻過去的內容高度(並不一定是整個頁面,比如文字域的豎直滾動條)。

$('#showid')[0].

scrollheight //獲取當前節點的高度。

圖2 使用$(selector).

scrolltop($(selector)[0].

scrollheight); 做到滾動條總是在最下面的效果

JQuery (簡化dom操作)

jquery本質是乙個js檔案,裡面是js常用功能的封裝。比如繫結事件,修改內容,修改樣式等。是乙個函式,是jquery 的簡寫,它的一些過載函式見下。elements 將乙個或多個dom物件 原生js獲取到的dom物件 轉化為jquery物件。id1 html 返回id為id1的jquery物件,...

jQuery操作DOM物件

val 方法 作用 設定或返回表單元素的值,例如 input,select,textarea的值 獲取匹配元素的值,只匹配第乙個元素 selector val 這裡的val 是空值,尤其注意 設定所有匹配到的元素的值 selector val 具體值 text 方法 作用 設定或獲取匹配元素的文字內...

Jquery操作DOM節點

1 向dom節點中追加元素 結果 我想說 你好 結果 我想說 你好 prepend 向每個匹配元素內部前置元素 例如 我想說 p prepend 你好 結果 你好我想說 prependto 將所有匹配的元素前置到指定的元素中 例如 我想說 你好 prependto p 結果 你好我想說 after ...