jquery梳理之屬性操作

silencezwm 發布于2019-08-21 16:41 / 2073人閱讀

摘要：與元素屬性原生對于元素的屬性有三種方法來操作為元素添加屬性名和屬性值獲取元素屬性值刪除元素屬性而則將以上三個操作簡化為和對應對應對應上述的為屬性名，為屬性值對于需要設置多個屬性時，采用的方式是在方法傳入屬性配置對象元素值屬性三個方法都

attr與removeAttr - 元素屬性

JS原生對于元素的屬性有三種方法來操作

dom.setAttribute(name , value) //為元素添加屬性名 和 屬性值
dom.getAttribute(name) //獲取元素屬性值
dom.removeAttribute(name) //刪除元素屬性

而JQuery則將以上三個操作簡化為: attr 和 removeAttr

attr(name , value) //對應 dom.setAttribute(name , value)
attr(name) //對應dom.getAttribute(name)
removeAttr(name) //對應dom.removeAttribute(name)

* 上述的name 為屬性名，value為屬性值
對于需要設置多個屬性時，采用的方式是在 attr方法傳入屬性配置對象

dom.attr({
    "class" : "xxxx"
    "data-name" : "xxxxx"
});

html() 、text()、val() - 元素值屬性

三個方法都是為匹配的元素設置或者獲取內容
不同之處：
html設置的內容可以包含元素；
text設置的內容為純文本；
val 設置input(文本框的值)或select選中值

用法:
1、獲取內容

$(dom).html()
$(dom).text()
$(dom).val(); //*當dom為select,且可以多選，則返回值為數組

2、設置內容

$(dom).html(string)
$(dom).text(string)
$(dom).val(string)

對于獲取或者設置輸入框的值，還可以采用attr方法

$(dom).attr("value" , data);  ---> $(dom).val(data);
$(dom).attr("value");             ---> $(dom).val();

addClass，removeClass, toggleClass ,css -- 操作樣式屬性

addClass方法：添加樣式

$(dom).addClass(classname);
$(dom).addClass(function(index,classname) {
    //遍歷匹配的元素，并做相關添加樣式操作
    //index 遍歷元素的下標, name 當前元素的class屬性值
});

removeClass方法：刪除樣式

$(dom).removeClass(classname);
$(dom).removeClass(function(index,classname) {
    //遍歷匹配的元素，并做相關刪除樣式操作
    //index 遍歷元素的下標, name 當前元素的class屬性值
    return "刪除的樣式名稱"; //必須返回
});

toggleClass方法：切換樣式

$(dom).toggleClass(classname); 
//切換樣式，如果元素存在classname這個樣式，則刪除，如果沒有則添加

$(dom).toggleClass(classname , flag)
//flag為布爾值，true表示添加樣式，false表示刪除樣式

css方法：設置樣式值

$(dom).css(name);
//獲取匹配元素中，第一個元素的樣式屬性值
$("p").css("width"); //獲取第一個p標簽的width樣式值
$(dom).css(name , value)
$(dom).css(name , callback)
$(dom).css(properties)
//設置匹配元素的樣式屬性
//當第二個參數為函數時，函數必須返回屬性值
//當第一個參數為一個鍵值對的對象（properties）時，表示為元素設置多個屬性值

**注意：
css方法中的name是指具體的樣式屬性名稱，如 width、height、position
addClass方法中的classname 是指定義于.css文件中或者style標簽內的類選擇器的名稱
例如 .add { color:red; }
$(dom).addClass("add");**

GPU云服務器云服務器 jquery修改屬性值 jquery設置disabled屬性 jquery修改css屬性 js操作tr屬性

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/88603.html

jquery梳理之常用選擇器

摘要：基于規范選擇元素選擇器選擇器相當于原生元素選擇器直接傳入標簽相當于原生通配符選擇器相當于原生層級選擇器選擇節點下的節點，節點只能是直接節點，如果是下的節點則獲取不到選擇節點下的所有節點選擇與節點同級的下一個節點有且僅有一個選擇與節點同級的所基于CSS規范選擇元素 id選擇器 $(#id) class選擇器 $(.class) //相當于原生：document.getEleme...

Raaabbit 2019-08-21 16:41 評論0 收藏0
前端文章- 收藏集 - 掘金

摘要：我的職業是前端工程師入門不是應該很簡單嗎前端掘金入門前端，是一件很難的事嗎在今天，我也沒有想好一個答案，也不知道怎樣給出一個答案。其他不多說了，這次的內容主要深入理解及應用前端掘金幾種常見的邊框用法。 GitHub 上學習前端開發的資料（不定期更新） - 前端 - 掘金GitHub 上學習前端開發的資料（不定期更新）... JS 進階篇: 這可能是關于閉包最好的一篇文章 - 前端 - ...

sugarmo 2019-08-20 18:27 評論0 收藏0
前端文章- 收藏集 - 掘金

摘要：我的職業是前端工程師入門不是應該很簡單嗎前端掘金入門前端，是一件很難的事嗎在今天，我也沒有想好一個答案，也不知道怎樣給出一個答案。其他不多說了，這次的內容主要深入理解及應用前端掘金幾種常見的邊框用法。 GitHub 上學習前端開發的資料（不定期更新） - 前端 - 掘金GitHub 上學習前端開發的資料（不定期更新）... JS 進階篇: 這可能是關于閉包最好的一篇文章 - 前端 - ...

Pocher 2019-08-29 13:05 評論0 收藏0
理解jquery的$.extend

摘要：當目標對象為空時，對象將會被默認為目標對象，這時相當于我們在的命名空間下添加新的功能，這是常見的插件開發模式。以上皆個人愚見，請笑納理解jquery的$.extend 今日在寫js插件過程中需要使用擴展對象的方法，便想到了jQuery.extend這個方法，但又不甚了解，故去查了下官方API文檔，自己也進行了相應嘗試，現將所得總結如下： $.extend和$.fn.extend的相關...

CarterLi 2019-08-21 15:18 評論0 收藏0
JS函數知識點梳理

摘要：函數的分類普通函數有函數名，參數，返回值，同名覆蓋。示例代碼如下解構參數默認值為對象字面量默認值為對象本身函數的返回值函數的返回值為基本數據類型，如字符串，數字，，，。示例代碼如下函數的返回值為對象。要想學好JavaScript除了基本的JavaScript知識點外，作為JavaScript的第一等公民——函數，我們要深入的了解。函數的多變來源于參數的靈活多變和返回值的多變。如果參數...

mgckid 2019-08-22 15:10 評論0 收藏0