您好,登錄后才能下訂單哦!
這篇文章主要介紹“jQuery怎么自定義屬性”,在日常操作中,相信很多人在jQuery怎么自定義屬性問題上存在疑惑,小編查閱了各式資料,整理出簡單好用的操作方法,希望對大家解答”jQuery怎么自定義屬性”的疑惑有所幫助!接下來,請跟著小編一起來學(xué)習(xí)吧!
傳統(tǒng)的HTML中如果想要實(shí)現(xiàn)某種樣式,可以在標(biāo)簽上添加id、class、或者在標(biāo)簽上添加固有屬性,通過CSS中的類選擇器、id選擇器、屬性選擇器來實(shí)現(xiàn),在許多UI框架中,例如:bootstrap,可以通過data-[ ]自定義屬性,不用寫一行js代碼,方便了很多。同樣在HTML5可以通過data-自定義屬性名來給元素添加自定義的屬性名。一旦添加完成之后。通過JS可以獲取以及設(shè)置自定義屬性。
自定義屬性目的:是為了保存并使用數(shù)據(jù)。有些數(shù)據(jù)可以保存到頁面中而不保存到數(shù)據(jù)庫中。
自定義屬性獲得是通過getAttribute('屬性')獲得,但有些自定義屬性很容易引起歧義,不容易判斷是元素的內(nèi)置屬性還是自定義屬性。
自定義屬性的名稱駝峰式命名規(guī)則需要用-隔開
自定義屬性名稱如果連在一起寫,大寫會自動轉(zhuǎn)為小寫
data-user="eric"======>屬性名稱是user data-user-name="eric"===>屬性名稱是userName data-userName="eric"=====>屬性名稱是username
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>實(shí)例</title> <script type="text/javascript" src="https://apps.bdimg.com/libs/jquery/1.11.3/jquery.min.js"></script> <script> $(document).ready(function(){ var t1=$('.test').data();//獲取該元素全部自定義屬性 var t2=$('.test').data('age');//獲取指定自定義屬性 console.log(t1);//{age:18,user:"li"} console.log(t2);//18 $('.test').data('age',20);//改變自定義屬性 console.log(t1);//{age:20,user:"li"} $('.test').data('weight','60kg');//設(shè)置新自定義屬性 console.log(t1);//{age:20,user:"li",weight:"60kg"} }); </script> </head> <body> <div class="test" data-user="li" data-age="18"> </div> </body> </html>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>實(shí)例</title> <script type="text/javascript" src="https://apps.bdimg.com/libs/jquery/1.11.3/jquery.min.js"></script> <script> $(document).ready(function(){ $('a[data-url="1.html"]').html('<span >5.html</span>'); $('a[data-url="2.html"]').html('<span >6.html</span>'); }); </script> </head> <body> <div class="test" data-user="li" data-age="18"> <a href="javascript:void(0);" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" data-url="1.html">1.html</a> <a href="javascript:void(0);" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" data-url="1.html">1.html</a> <a href="javascript:void(0);" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" data-url="2.html">2.html</a> <a href="javascript:void(0);" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" data-url="3.html">3.html</a> <a href="javascript:void(0);" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" data-url="4.html">4.html</a> </div> </body> </html>
到此,關(guān)于“jQuery怎么自定義屬性”的學(xué)習(xí)就結(jié)束了,希望能夠解決大家的疑惑。理論與實(shí)踐的搭配能更好的幫助大家學(xué)習(xí),快去試試吧!若想繼續(xù)學(xué)習(xí)更多相關(guān)知識,請繼續(xù)關(guān)注億速云網(wǎng)站,小編會繼續(xù)努力為大家?guī)砀鄬?shí)用的文章!
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場,如果涉及侵權(quán)請聯(lián)系站長郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。