104 CSS セレクターのカプセル化 $('#ele').css() $('.ele').css() $('ele').css()_html/css_WEB-ITnose

//demo.js 调用

window.onload = function () {
// $().getClass("a").css("color","re​​d");//旧方法
/* $("#box").css("color", "red").click(function(){
alert($(this).html())
});*/
//$( ".a").css("color","green")
// $("p").find(".a").css("color","blue");
$("div ").find("span").css("color","re​​d")
// $("div").find(".a").css("color","re​​d");
//$("div").find("#bb").css("color","re​​d")


//$(".a").css("color","re​​d")
};

//Base.js

var $=function(args)//呼び出し、これを渡します
{
Return new Base(args);


};
//オブジェクトスタイル
function Base(args)
{
// 配列を1つ作成しますノードとノードの配列を取得します
this.elements=[];//プライベート、共有ではありません
if(typeof args=="string")//$(".a").css("color", "green") は次のように実行されます
{
switch (args.charAt(0)) Break ; This.elements = this.getTagName(args) ;//getClassreturn は配列なので直接代入します
}
} }
else if(typeof args=="object") // $().getClass("a").css("color","re​​d"); 呼び出した場合はここで実行
{
if (args! = Unknown) ) // ここの _this はオブジェクトであり、unknown もオブジェクトですが、「UNDEFINED」とマークされた一重引用符を付けないでください
{
this.elements [
this.elements 0]=args. ; //これを配列の最初に配置します
} }
} }


}
// 子ノードを選択するための css を設定します
Base.prototype.find=function(str)
{
var childElements=[ ] ; // 一時配列 Base.element []
for (var I = 0; I & lt; this.elements.length; i ++) {
switch (str.charat (0)) {
case "＃"：childelements.push（this.getid（str.substring（1）））;プッシュ（j]; 0; tags.Length; )
{ Le childelements.push (tags [j]); D = FUNCTION (ID) {
//ID ノード自身のオブジェクトを返す
return document.getElementById(id);
/ /要素ノード配列を取得します
Base.prototype.getTagName = function (tag,parentNode) {
var node = null;
var temps = [];
if (parentNode != unknown) {
node =parentNode;
} else {
ノード = ドキュメント;
}
var tags = node.getElementsByTagName(tag);
for (var i = 0; i < tags.length; i ++) {
temps.push(tags[i]);
}
return temps;
};
//クラスが取得します
Base.prototype.getClass=function(className,parentNode)
{
var node=null;
var temps=[];//一時配列はbase.element[]との競合を回避します
if(parentNode! =未定義)
{
ノード = 親ノード;
}
else
{
ノード = ドキュメント;
}
var all=node.getElementsByTagName("*");
for(var i=0;i //一時配列を返す
};
//ノードを取得してBaseオブジェクトを返す
Base.prototype.eq=function(num)
{
var element=this.elements[num];
this.elements =[];//配列をクリアします
this.elements[0]=element;//再割り当て
return this; //jq の eq() のようなものを返します
};


// ノードを取得して元に戻しますこのノードのオブジェクト
Base.prototype.get=function(num)//
{
return this.elements[num];// jq の get() のようなものを返します
};
// CSS を設定します
Base.prototype。 css = function (attr, value) {
for (var i = 0; i if (arguments.length == 1) {
for (var i = 0; i this.elements[i].style[attr] = value ;
}
これを返す
};
Base.prototype.click=function(fn)
{
for(var i=0;i Base.prototype.html=function( value)
{

for(var i=0;i {
if(arguments.length==0)
{
return this. [i].innerHTML;
}
これを返してください;
};
//クラスを追加します
Base.prototype.addClass= function(className)
{
for(var i=0;i {
if(!hasClass (this.elements[i],className))//このクラスが既に存在するかどうかを判断します I {
this.Elements [i] .className+= ''+ClassName;
return this; // メソッドの呼び出し $ ( ).getClass("dd").addClass("a").addClass("b").removeClass("b");
{
for(var i=0;i If (Hasclass (this.elements [i], className)) // このクラスが既に存在するかを判定
{
this.elements [i] .className = this.elements [i] .classname.Rewlace (news Regexp ('(\s|^)'+className+'(\s|$)'),'');
これを返す Base.prototype.addRule=function(num,selectorText,cssText,position ) //メソッドを呼び出します, $().addRule(0,"body","background:red",0)
{
varsheet=document.styleSheets [num];
if(typeofsheet.insertRule!="unknown ")//w3c
else if(typeofsheet.addRule !="未定義")//iE
{
        Sheet.addRule(selectorText,cssText,position);//sheet.addRule("body","background:red",)
}
};
// 削除リンクまたはスタイルのcss规则,不常用
Base。 prototype.addRule=function(num,index) //调用メソッド， $().removeRule(0);
{
varsheet=document.styleSheets[num];
if(typeofsheet.deleteRule!="unknown") //w3c
{
sheet.deleteRule(index);
}
else if(typeof sheet.removeRule!="unknown")//iE
{
sheet.removeRule(index);//sheet.addRule("body ","background:red",)
}
};
//ホバー配置方法
Base.prototype.hover=function(over,out)
{
for(var i=0;i {
// this.elements[i].onmouseover=over;
// this.elements[i].onmouseout=out;
addEvent(this.elements[i],"mouseover",over);
addEvent(this.elements[i],"mouseout",out)
}
return this;
};
// 追加show
Base.prototype.show=function()
{
for(var i=0; i {
this.elements[i].style.display="block"


}
return this;
};
// 追加 Hide
Base.prototype.hide= function()
{
for(var i=0;i {
this.elements[i].style.display="none"


}
return this;
} ;
//设置物体居中
Base.prototype.center=function(width,height)
{
var top=(getInner().height-width)/2;
var left=(getInner().width-height) )/2;
for(var i=0;i {
this.elements[i].style.top=top+"px";
this.elements[i].style .left=left+"px";
}
return this;
};
//触発浏览器窗口イベント
Base.prototype.resize = function (fn) {
for(var i=0;i {
var element=this.elements[i];
/* window.onresize=function()
{
fn();
if (element.offsetLeft & gt; getInner().width - element.offsetWidth) {
element.style.left = getInner().width - element.offsetWidth + 'px';
}
if (element.offsetTop > getInner().height - element. offsetHeight) {
element.style.top = getInner().height - element.offsetHeight + 'px';
}
}*/
addEvent(window,"resize",function()
{
fn();
if (element.offsetLeft > getInner().width - element.offsetWidth) {
element.style.left = getInner().width - element.offsetWidth + 'px';
}
if (element.offsetTop > getInner ().height - element.offsetHeight) {
element.style.top = getInner().height - element.offsetHeight + 'px';
}
}
return this;
};
/ /锁屏功能
Base.prototype.lock=function()
{
for(var i=0;i {
this.elements[i].style.width=getInner().width+ "px";
this.elements[i].style.height=getInner().height+"px";
this.elements[i].style.display="block";
document.documentElement.style.overflow = 「隠れた」;
        addEvent(window,"scroll",scrollTop);
}

return this;
};
functionscrollTop(){
document.documentElement.scrollTop=0;// IE W3C
document.body.scrollTop=0; //火狐
}
Base.prototype.unlock=function()
{
for(var i=0;i {
this.elements[i].style.display=" none "; =function(name,fn)
{
Base.prototype[name]=fn;
};


$().extend("bbb",function(){
alert("123")
});