<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
<title></title>
<script>
//测试模拟jquery选择器封装的效果
window.onload=function(){
console.log("#myDiv:"+$("#myDiv").size()+"个");
console.log(".redBorder:"+$(".redBorder").size()+"个");
console.log("div:"+$("div").size()+"个");
}
/*封装的id、class、元素选择器的选择操作*/
var $=function(selector){
this.tqObject=new TQObject();
//id选择器的操作
if(selector.substring(0,1)=="#"){
var elem=document.getElementById(selector.substring(1,selector.length));
tqObject.data.push(elem);//存入tqObject对象的数组中
}else if(selector.substring(0,1)==‘.‘){
//类选择器的操作
var elems=document.getElementsByTagName(‘*‘);//获取页面中的所有元素
var className=selector.substring(1);//获取className
var reg=new RegExp("(^|\\s)"+className+"($|\\s)");//定义正则表达式
for(var i=0;i<elems.length;i++){
if(reg.test(elems[i].className)){//如果匹配上，则存入tqObject对象的数组中
this.tqObject.data.push(elems[i]);
}
}
}else{
//标签选择器
var elems=document.getElementsByTagName(selector);
this.tqObject.data=elems;
}
return tqObject;
}
/*封装选择器
*封装TQObject对象，提供一个数组元素，以及若干自定义的操作方法
*通过封装$("#id|.class|element")来获取元素
*/
/*封装TQObject对象*/
var TQObject=function(){
this.data=[];
}
TQObject.prototype={
//TQObject添加原型方法
size:function(){//返回data数组的个数
return this.data.length;
}
};
</script>
</head>
<body>
<div class="redBorder" id="myDiv"></div>
<div class="redBorder"></div>
<div class="grayBorder"></div>
</body>
</html>
时间： 2024-11-05 13:03:45