jQuery 基礎DOM和CSS操作

2022-08-29 04:30:18 字數 2463 閱讀 7976

一、設定元素及內容

html()             獲取元素中的html內容

html(value)   設定元素中的html內容

text()     獲取元素中的文字內容

text(value)    設定元素中的文字內容

val()      獲取表單中的文字內容

val(value)     設定表單中的文字內容

注意:當使用html()和text()設定元素的內容時,會清空原來的資料。如果希望追加資訊,需要先獲取原來的資料。

$('#box').html($('#box').html + 'extra html');

如果想設定多個選定狀態,比如下拉列表、單選核取方塊等,可以通過陣列傳遞操作。

$("input").val(["check1","check2","radio1"]);  //value值是這些的將被選定

二、元素屬性操作

attr(key)            獲取某個元素key屬性的屬性值

attr(key,value)             設定某個元素key屬性的屬性值

attr()    設定某個元素多個key屬性的屬性值 

atrr(key,function(index,value){})       設定某個元素key通過函式來設定

注意:attr()方法裡面的function() {}可以不傳引數。可以只傳乙個引數index,表示當前元素的索引(從0 開始),也可以傳遞兩個引數index、value,第二個引數表示原本屬性的值。

刪除指定的屬性,就不可以使用匿名函式。

三、元素樣式操作

css(name)                 獲取某個元素行內的css樣式

css([name1,name2,name3])      獲取某個元素行內多個css樣式

得到多個css樣式的陣列物件陣列

js遍歷元素

for (var i in box) )    設定某個元素行內的多個css樣式

addclass(class)           給某個元素新增乙個css類

addclass(class1 class2 class3...)   給某個元素新增多個css類

removeclass(class)         刪除某個元素乙個css類

removeclass(class1 class2 class3...)  刪除某個元素多個css類

toggleclass(class)          來回切換預設樣式和指定樣式

toggleclass(class1 class2 class3...)    同上

toggleclass(class,switch)       來回切換的時候設定頻率

toggleclass(function () {})       通過匿名函式設定切換規則

togglecclass(function () {},switch)     在匿名函式設定時也可以設定頻率

toggleclass(funtion(i,c,s) {} switch)      在匿名函式設定時傳遞三個引數

.toggleclass()方法的第二個引數可以傳乙個布林值,ture表示切換到class類,false表示返回預設class類,這個特性可以用來設定切換頻率。

var count = 0;

$('div').click(function() else else )   通過匿名函式設定某個元素的寬度 

height()               獲取某個元素的高度

height(value)           設定某個元素的高度

height(functiong (index, value) {})   通過匿名函式設定某個元素的高度

innerwidth()    獲取某個元素的寬度,包含內邊距padding

innerheight()     獲取某個元素的高度,包含內邊距padding

overwidth()    獲取某個元素的寬度,包含邊框border和內邊距padding

overheright()    獲取某個元素的高度,包含邊框border和內邊距padding

overwidth(true)  獲取某個元素的寬度,包含邊框border、內邊距padding和外邊距margin

overheight(true)   獲取某個元素的高度,包含邊框border、內邊距padding和外邊距margin

offset()          獲取某個元素相對視口的偏移量

position()      獲取某個元素相對于父元素的偏移量

scrolltop()    獲取垂直滾動條的值

scrolltop(value)   設定垂直滾動條的值

scrollleft()    獲取水平滾動條的值

scrollleft(value)   設定水平滾動條的值

jQuery 四 基礎DOM和CSS操作

要點 一 設定元素及內容 1.設定和獲取元素中的html內容 id test span 2.設定和獲取元素中的文字內容 console.log test text this is h1 test text 我要覆蓋你 console.log test text 我要覆蓋你3.設定和獲取表單的內容 c...

jQuery基礎之DOM和jQuery之間的轉換

引言 jquery物件 通過jquery包裝dom物件後產生的物件。dom物件不可使用jquery物件的方法。同理jquery物件也不可使用dom物件的方法。例如 foo html 這是jquery物件的使用 它的功能等同於 document.getelementbyid foo innerhtml...

jquery基礎1 jquery和dom物件轉換

window.nl ad function document ready function 相當於 function foo html 相當於 document.getelementbyid foo innerhtml jquery 物件轉換成 dom物件 第一種方法 var cr cr jquer...