JavaScript使用鏈?zhǔn)椒椒ǚ庋bjQuery中CSS()方法示例

發(fā)布時(shí)間：2020-10-24 16:59:35 來(lái)源：腳本之家閱讀：192 作者：謝玉勝欄目：web開(kāi)發(fā)

本文實(shí)例講述了JavaScript使用鏈?zhǔn)椒椒ǚ庋bjQuery中CSS()方法。分享給大家供大家參考，具體如下：

主要思路就是：返回this對(duì)象，將所獲取的操作元素放入一個(gè)數(shù)組中。在原型中添加拓展方法

<html>
<head>
  <title></title>
</head>
<body>
  <div id="one">aa</div>
</body>
<script type="text/javascript">
//封裝類似于JQuery的連綴
/*
思路：一個(gè)操作后再返回本來(lái)的對(duì)象this，將獲取的元素放入一個(gè)數(shù)組內(nèi)部。通過(guò)原型添加方法;
為了能在原型對(duì)象中添加方法；這個(gè)應(yīng)該用函數(shù)來(lái)建立原型對(duì)象
function Base(){
  this.getId=function(id){
    return this;
  }
  使用的時(shí)候，需要new一個(gè)實(shí)例對(duì)象
  var newBase=Base（）；
}
*/
function Base(){
  this.element=[];
  //獲取ID
  this.getId=function(id){
    //將所獲取的元素放入數(shù)組里面，返回當(dāng)前對(duì)象
      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;
    }
  }
//通過(guò)原型添加方法：
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頁(yè)面元素操作技巧總結(jié)》、《JavaScript事件相關(guān)操作與技巧大全》、《JavaScript操作DOM技巧總結(jié)》、《JavaScript錯(cuò)誤與調(diào)試技巧總結(jié)》、《JavaScript數(shù)據(jù)結(jié)構(gòu)與算法技巧總結(jié)》、《JavaScript遍歷算法與技巧總結(jié)》及《JavaScript數(shù)學(xué)運(yùn)算用法總結(jié)》

希望本文所述對(duì)大家JavaScript程序設(shè)計(jì)有所幫助。

向AI問(wèn)一下細(xì)節(jié)

JavaScript使用鏈?zhǔn)椒椒ǚ庋bjQuery中CSS()方法示例

猜你喜歡

最新資訊

相關(guān)推薦

相關(guān)標(biāo)簽