JavaScriptはチェーンメソッドを使用してjQueryのCSS()メソッドの例をカプセル化する
2370 ワード
この例では、JavaScriptがチェーンメソッドを使用してjQuery内のCSS()メソッドをカプセル化する方法について説明します.皆さんの参考にしてください.具体的には以下の通りです.
主な考え方は、thisオブジェクトを返し、取得した操作要素を配列に入れることです.プロトタイプに拡張メソッドを追加するには
主な考え方は、thisオブジェクトを返し、取得した操作要素を配列に入れることです.プロトタイプに拡張メソッドを追加するには
<div id="one">aa</div>
<script type="text/javascript">
// JQuery
/*
： this， 。 ;
；
function Base(){
this.getId=function(id){
return this;
}
， new
var newBase=Base（）；
}
*/
function Base(){
this.element=[];
// ID
this.getId=function(id){
// ，
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){
//
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>
</code></pre>
</div>
<p> JavaScript ：《JavaScript 》、《JavaScript 》、《JavaScript DOM 》、《JavaScript 》、《JavaScript 》、《JavaScript 》 《JavaScript 》</p>
<p> JavaScript 。</p>
<div class="clearfix">
<span id="art_bot" class="jbTestPos"/>
</div>
</div>
</div>
</div>