摘要:與元素屬性原生對(duì)于元素的屬性有三種方法來操作為元素添加屬性名和屬性值獲取元素屬性值刪除元素屬性而則將以上三個(gè)操作簡化為和對(duì)應(yīng)對(duì)應(yīng)對(duì)應(yīng)上述的為屬性名,為屬性值對(duì)于需要設(shè)置多個(gè)屬性時(shí),采用的方式是在方法傳入屬性配置對(duì)象元素值屬性三個(gè)方法都
attr與removeAttr - 元素屬性
JS原生對(duì)于元素的屬性有三種方法來操作
dom.setAttribute(name , value) //為元素添加屬性名 和 屬性值 dom.getAttribute(name) //獲取元素屬性值 dom.removeAttribute(name) //刪除元素屬性
而JQuery則將以上三個(gè)操作簡化為: attr 和 removeAttr
attr(name , value) //對(duì)應(yīng) dom.setAttribute(name , value) attr(name) //對(duì)應(yīng)dom.getAttribute(name) removeAttr(name) //對(duì)應(yīng)dom.removeAttribute(name)
* 上述的name 為屬性名,value為屬性值
對(duì)于需要設(shè)置多個(gè)屬性時(shí),采用的方式是在 attr方法傳入屬性配置對(duì)象
dom.attr({ "class" : "xxxx" "data-name" : "xxxxx" });html() 、text()、val() - 元素值屬性
三個(gè)方法都是為匹配的元素設(shè)置或者獲取內(nèi)容
不同之處:
html設(shè)置的內(nèi)容可以包含元素;
text設(shè)置的內(nèi)容為純文本;
val 設(shè)置input(文本框的值)或select選中值
用法:
1、獲取內(nèi)容
$(dom).html() $(dom).text() $(dom).val(); //*當(dāng)dom為select,且可以多選,則返回值為數(shù)組
2、設(shè)置內(nèi)容
$(dom).html(string) $(dom).text(string) $(dom).val(string)
對(duì)于獲取或者設(shè)置輸入框的值,還可以采用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) { //遍歷匹配的元素,并做相關(guān)添加樣式操作 //index 遍歷元素的下標(biāo), name 當(dāng)前元素的class屬性值 });
removeClass方法:刪除樣式
$(dom).removeClass(classname); $(dom).removeClass(function(index,classname) { //遍歷匹配的元素,并做相關(guān)刪除樣式操作 //index 遍歷元素的下標(biāo), name 當(dāng)前元素的class屬性值 return "刪除的樣式名稱"; //必須返回 });
toggleClass方法:切換樣式
$(dom).toggleClass(classname); //切換樣式,如果元素存在classname這個(gè)樣式,則刪除,如果沒有則添加 $(dom).toggleClass(classname , flag) //flag為布爾值,true表示添加樣式,false表示刪除樣式
css方法:設(shè)置樣式值
$(dom).css(name); //獲取匹配元素中,第一個(gè)元素的樣式屬性值 $("p").css("width"); //獲取第一個(gè)p標(biāo)簽的width樣式值 $(dom).css(name , value) $(dom).css(name , callback) $(dom).css(properties) //設(shè)置匹配元素的樣式屬性 //當(dāng)?shù)诙€(gè)參數(shù)為函數(shù)時(shí),函數(shù)必須返回屬性值 //當(dāng)?shù)谝粋€(gè)參數(shù)為一個(gè)鍵值對(duì)的對(duì)象(properties)時(shí),表示為元素設(shè)置多個(gè)屬性值
**注意:
css方法中的name是指具體的樣式屬性名稱,如 width、height、position
addClass方法中的classname 是指定義于.css文件中或者style標(biāo)簽內(nèi)的類選擇器的名稱
例如 .add { color:red; }
$(dom).addClass("add");**
文章版權(quán)歸作者所有,未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為,您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址:http://m.hztianpu.com/yun/88603.html
摘要:基于規(guī)范選擇元素選擇器選擇器相當(dāng)于原生元素選擇器直接傳入標(biāo)簽相當(dāng)于原生通配符選擇器相當(dāng)于原生層級(jí)選擇器選擇節(jié)點(diǎn)下的節(jié)點(diǎn),節(jié)點(diǎn)只能是直接節(jié)點(diǎn),如果是下的節(jié)點(diǎn)則獲取不到選擇節(jié)點(diǎn)下的所有節(jié)點(diǎn)選擇與節(jié)點(diǎn)同級(jí)的下一個(gè)節(jié)點(diǎn)有且僅有一個(gè)選擇與節(jié)點(diǎn)同級(jí)的所 基于CSS規(guī)范選擇元素 id選擇器 $(#id) class選擇器 $(.class) //相當(dāng)于原生:document.getEleme...
摘要:我的職業(yè)是前端工程師入門不是應(yīng)該很簡單嗎前端掘金入門前端,是一件很難的事嗎在今天,我也沒有想好一個(gè)答案,也不知道怎樣給出一個(gè)答案。其他不多說了,這次的內(nèi)容主要深入理解及應(yīng)用前端掘金幾種常見的邊框用法。 GitHub 上學(xué)習(xí)前端開發(fā)的資料(不定期更新) - 前端 - 掘金GitHub 上學(xué)習(xí)前端開發(fā)的資料(不定期更新)... JS 進(jìn)階篇: 這可能是關(guān)于閉包最好的一篇文章 - 前端 - ...
摘要:我的職業(yè)是前端工程師入門不是應(yīng)該很簡單嗎前端掘金入門前端,是一件很難的事嗎在今天,我也沒有想好一個(gè)答案,也不知道怎樣給出一個(gè)答案。其他不多說了,這次的內(nèi)容主要深入理解及應(yīng)用前端掘金幾種常見的邊框用法。 GitHub 上學(xué)習(xí)前端開發(fā)的資料(不定期更新) - 前端 - 掘金GitHub 上學(xué)習(xí)前端開發(fā)的資料(不定期更新)... JS 進(jìn)階篇: 這可能是關(guān)于閉包最好的一篇文章 - 前端 - ...
摘要:當(dāng)目標(biāo)對(duì)象為空時(shí),對(duì)象將會(huì)被默認(rèn)為目標(biāo)對(duì)象,這時(shí)相當(dāng)于我們?cè)诘拿臻g下添加新的功能,這是常見的插件開發(fā)模式。以上皆個(gè)人愚見,請(qǐng)笑納 理解jquery的$.extend 今日在寫js插件過程中需要使用擴(kuò)展對(duì)象的方法,便想到了jQuery.extend這個(gè)方法,但又不甚了解,故去查了下官方API文檔,自己也進(jìn)行了相應(yīng)嘗試,現(xiàn)將所得總結(jié)如下: $.extend和$.fn.extend的相關(guān)...
摘要:函數(shù)的分類普通函數(shù)有函數(shù)名,參數(shù),返回值,同名覆蓋。示例代碼如下解構(gòu)參數(shù)默認(rèn)值為對(duì)象字面量默認(rèn)值為對(duì)象本身函數(shù)的返回值函數(shù)的返回值為基本數(shù)據(jù)類型,如字符串,數(shù)字,,,。示例代碼如下函數(shù)的返回值為對(duì)象。 要想學(xué)好JavaScript除了基本的JavaScript知識(shí)點(diǎn)外,作為JavaScript的第一等公民——函數(shù),我們要深入的了解。函數(shù)的多變來源于參數(shù)的靈活多變和返回值的多變。如果參數(shù)...
閱讀 1219·2021-11-25 09:43
閱讀 1736·2021-09-13 10:25
閱讀 2696·2021-09-09 11:38
閱讀 3579·2021-09-07 10:14
閱讀 1806·2019-08-30 15:52
閱讀 706·2019-08-30 15:44
閱讀 3664·2019-08-29 13:23
閱讀 2044·2019-08-26 13:33