jQuery 操作 DOM

xuanxuanQueen發表於2019-08-21

attr(name);  //獲取元素屬性,引數name表示屬性名稱
attr(key,value);  //設定元素屬性,引數key表示屬性名稱,value表示屬性值
attr({key0:value0, kery1:value1}); //設定多個元素屬性
attr(key, function()); //可以繫結一個function()函式,透過該函式返回的值作為元素的屬性值
removeAttr(name);//刪除元素屬性

獲取和設定元素內容

//與js中的innerHTML屬性類似,獲取或設定元素的HTML內容
html();  //獲取元素的HTML內容
html(val);  //設定元素的HTML內容,val引數為元素的HTML內容
//與js中的innerText屬性,獲取或設定元素的文字內容
text(); //獲取元素的文字內容
text(val);  //設定元素的文字內容,val引數為元素的文字內容

獲取和設定元素值

//該方法常用於表單中獲取或設定物件的值
var();//獲取某元素的值
val(val); //設定某元素的值
//透過val()可以獲取select標記中的多個選項值
val.join(",");
//直接設定元素樣式
css(name,value); //name為樣式名,value為樣式的值
//增加元素CSS類名
addClass(class);//class為類名
addClass(class0 class1 ...);//新增多個類名,用空格隔開
//切換元素CSS類名
toggleClass(class);//引數class為類名,當元素中含有名稱為class的CSS類名時,刪除該類名,否則增加一個該名稱的CSS類名
//刪除元素CSS類名
removeClass( [class] ); //刪除選擇的類名
removeClass(); //刪除所有類名
$(html); //引數html表示用於動態建立DOM元素的HTML標記字串,$(div)動態建立一個div標記
//內部插入節點
append(content); //向所選擇的元素內部插入內容content
append(function(index, html)); //向所選擇的元素內部插入function函式所返回的內容
appendTo(content); //把所選擇的元素追加到另一個指定的元素合集中,$("span").appendTo($("div"))
prepend(content); //向每個所選擇的元素內部前置內容
prepend(function(index,html)); //向所選擇的元素內部前置function函式所返回的內容
prependTo(content);//將所選擇的元素前置到另一個指定元素的集合中
//外部插入節點
after(content); //向所選擇的元素外部後面插入內容
after(function); //向所選擇的元素外部後面插入function函式所返回的內容
before(content);//向所選擇的元素外部前面插入內容
before(function);//向所選擇的元素外部前面插入function函式所返回的內容
insertAfter(content); //將所選擇的元素插入另一個指定的元素外部後面
insertBefore(content);//將所選擇的元素插入另一個指定的元素外部前面
//複製元素節點
clone();//複製元素本身
clone(true);//複製元素包括該元素的全部行為
//替換元素節點
replaceWith(content); //將所有選擇的元素替換成指定的HTML或DOM元素,引數content為被所選擇元素替換的內容
replaceAll(selector);//將所有選擇的元素替換成指定selector的元素,引數selector為需要被替換的元素
//包裹元素節點
wrap(html);//把所有選擇的元素用其他字串程式碼包裹起來
wrapInner*i=(html); //把所有選擇的元素的子內容(包含文字節點)用字串程式碼包裹起來
//遍歷元素
each(callback); 
//刪除頁面元素
remove([expr]); //引數expr為可選項,清空所選擇的頁面元素或所有的後代元素
empty();//不是真正意義上的刪除,只是可以清空全部的節點或節點所包含的所有後代元素,並非刪除節點和元素
本作品採用《CC 協議》,轉載必須註明作者和本文連結

相關文章