JavaScript使用鏈?zhǔn)椒椒ǚ庋bjQuery中CSS()方法示例
更新時間：2017年04月07日 10:47:21 作者：謝玉勝
這篇文章主要介紹了JavaScript使用鏈?zhǔn)椒椒ǚ庋bjQuery中CSS()方法,結(jié)合具體實例形式分析了JS采用鏈?zhǔn)讲僮鞣椒ǚ庾Query中連綴操作實現(xiàn)css()方法的相關(guān)技巧,需要的朋友可以參考下
本文實例講述了JavaScript使用鏈?zhǔn)椒椒ǚ庋bjQuery中CSS()方法。分享給大家供大家參考，具體如下：
主要思路就是：返回this對象，將所獲取的操作元素放入一個數(shù)組中。在原型中添加拓展方法
<html>
<head>
<title></title>
</head>
<body>
<div id="one">aa</div>
</body>
<script type="text/javascript">
//封裝類似于JQuery的連綴
/*
思路：一個操作后再返回本來的對象this，將獲取的元素放入一個數(shù)組內(nèi)部。通過原型添加方法;
為了能在原型對象中添加方法；這個應(yīng)該用函數(shù)來建立原型對象
function Base(){
this.getId=function(id){
return this;
}
使用的時候，需要new一個實例對象
var newBase=Base（）；
}
*/
function Base(){
this.element=[];
//獲取ID
this.getId=function(id){
//將所獲取的元素放入數(shù)組里面，返回當(dāng)前對象
this.element.push(document.getElementById(id))
// return this.element.length
return this
}
//獲取className，遍歷push
this.getClass=function(name){
var names=document.getElementsByName(name);
for( var i=0;i<names.length;i++){
this.element.push(names[i])
}
return this;
}
//獲取tagName；遍歷push
this.getTag=function(tags){
var tags=document.getElementsByTagName(tags);
for(var i=0;i<tags.length;i++){
this.element.push(tags[i])
}
return this;
}
}
//通過原型添加方法：
Base.prototype.css=function(attr,value){
//遍歷選取當(dāng)前元素
for(var i=0;i<this.element.length;i++){
this.element[i].style[attr]=value;
}
return this;
}
var newBase= new Base();
// alert(newBase.getId("one"))
newBase.getId("one").css("background","red").css("color","blue").css("fontSize","60")
</script>
</html>
更多關(guān)于JavaScript相關(guān)內(nèi)容感興趣的讀者可查看本站專題：《JavaScript頁面元素操作技巧總結(jié)》、《JavaScript事件相關(guān)操作與技巧大全》、《JavaScript操作DOM技巧總結(jié)》、《JavaScript錯誤與調(diào)試技巧總結(jié)》、《JavaScript數(shù)據(jù)結(jié)構(gòu)與算法技巧總結(jié)》、《JavaScript遍歷算法與技巧總結(jié)》及《JavaScript數(shù)學(xué)運(yùn)算用法總結(jié)》
希望本文所述對大家JavaScript程序設(shè)計有所幫助。
您可能感興趣的文章:
- 原生js封裝的一些jquery方法(詳解)
- 原生js仿jquery實現(xiàn)對Ajax的封裝
- 詳解JavaScript原生封裝ajax請求和Jquery中的ajax請求
- 原生js實現(xiàn)對Ajax的封裝(仿jquery)
- 基于jquery封裝的一個js分頁
- JS鏈?zhǔn)秸{(diào)用的實現(xiàn)方法
- 學(xué)習(xí)JavaScript設(shè)計模式(鏈?zhǔn)秸{(diào)用)
- 原生js實現(xiàn)簡單的鏈?zhǔn)讲僮?/a>
- javascript中的鏈?zhǔn)秸{(diào)用
- js實現(xiàn)封裝jQuery的簡單方法與鏈?zhǔn)讲僮髟斀?/a>
相關(guān)文章
這篇文章主要介紹了微信小程序如何調(diào)用圖片接口API并居中顯示,文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友可以參考下2019-06-06
JavaScript 讀URL參數(shù)增強(qiáng)改進(jìn)版版
網(wǎng)上有不少JavaScript 讀 URL 參數(shù)的函數(shù)，但沒考慮到 URL 中帶 # 符的情況，我的可以處理這種情況，并使用了點對象寫法，優(yōu)化了些性能。2008-10-10
掌握document.getElementById() 根據(jù)id獲取元素,在頁面畫出一個寬200 高200 粉色的盒子, 在控制臺打印這個盒子,接到這樣的需求如何處理呢,下面小編給大家分享webapi根據(jù)id獲取元素的實現(xiàn)思路,感興趣的朋友一起看看吧2024-02-02
寫入cookie的JavaScript代碼庫 cookieLibrary.js
cookieLibrary.js 寫入cookie的JavaScript代碼庫,需要的朋友可以參考下。2009-10-10
JS 組件系列之 bootstrap treegrid 組件封裝過程
最近產(chǎn)品需要設(shè)計一套相對完整的組織架構(gòu)的解決方案，由于組織架構(gòu)涉及到層級關(guān)系，在表格里面展示層級關(guān)系，自然就要用到所謂的treegrid。下面小編通過本文給大家分享JS 組件系列之 bootstrap treegrid 組件的封裝過程,需要的朋友可以參考下2017-04-04
這篇文章主要介紹了Javascript代碼實現(xiàn)仿實例化類的相關(guān)資料并附上示例，非常不錯的文章,需要的朋友可以參考下2015-04-04
DOM（Document Object Model 文檔對象模型）定義了訪問和操作文檔的標(biāo)準(zhǔn)方法。整個瀏覽器網(wǎng)頁就是一個Dom樹形結(jié)構(gòu)，這篇文章主要介紹了JavaScript DOM節(jié)點操作方式2022-10-10
這篇文章主要給大家介紹了關(guān)于JavaScript中String對象的使用方法以及實例的相關(guān)資料,文中通過實例代碼介紹的非常詳細(xì),方便開發(fā)者在JavaScript開發(fā)中更好地處理字符串,需要的朋友可以參考下2022-04-04
這篇文章主要為大家詳細(xì)介紹了JavaScript實現(xiàn)網(wǎng)頁計算器功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-07-07
Axios返回的是Promise對象,這意味著可以使用Promise的.then()、.catch()和.finally()方法來處理異步操作的結(jié)果,本文詳細(xì)介紹了處理Axios返回Promise對象的幾種常見方式,需要的朋友可以參考下2024-09-09