本文深入探讨了自定义jQuery的实现方式，包括如何通过字符串操作获取DOM元素、执行多种类型的DOM操作、处理事件和样式，以及实现类似内置jQuery方法的功能。
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>自定义jquery</title>
<script>
(function(window){
var document=window.document;
yc=function(str){
if(arguments.length==0){//用户没有指定去哪个对象
str="body";
}
var obj=new qing();
return obj.getObjects(str);
}
//根据id取对象
function $1(id){
return document.getElementById(id);
}
//根据name取对象
function $2(name){
return document.getElementsByName(name);
}
//根据TagName取对象
function $3(tagName){
return document.getElementsByTagName(tagName);
}
//根据obj和TagName取对象
function $4(obj,tagName){
return obj.getElementsByTagName(tagName);
}
//基类对象,专门用来获取用户要取的对象
function qing(){
this.elements=[];//用来存放所有满足条件的对象
var obj=null;//当前要获取对象的字符串
//向外提供一个获取满足所有条件的对象的方法
this.getObjects=function(str){
//判断用户要去的对象的层次
var result=this.getSplit(str);
if(result==null){//说明只有一级
//判断是什么类型，在根据其类型调用相应的方法
this.getObject(obj,str);
}else{//多级查找
for(var i=0;i<result.length;i++){
if(i!=0){//说明第一级应经取完
obj=this.elements[0];
}
this.getObject(obj,result[i]);//result[0]=#myli result[1]=li
}
}
return this;
}
//将用户要查找的字符串以空格或者分割成一个数组
this.getSplit=function(str){
var reg=/[ >]/img;
if(str.search(reg)>0){//用正则表达式来分割(存在空格或者>)
return str.split(reg);
}else{
return null;
}
}
//取对象
this.getObject=function(obj,str){//#myli li
this.elements=[];//清空数组中的有对象
var objs;
var firstChar=this.getFirstChar(str);
if(obj==null){
if(firstChar=="#"){//根据id取
this.elements.push($1(this.getOthersStr(str)));
}else if(firstChar=="*"){//根据name取
objs=$2(this.getOthersStr(str));
for(var i=0;i<objs.length;i++){
this.elements.push(objs[i]);
}
}else{//根据标签名取
var strs=str.split(":");
if(strs.length>1){//说明确实有：li:1
objs=$3(str.substring(0,str.indexOf(":")));//获取到了所有对象
this.elements.push(objs.item(parseInt(strs[1])-1));
}else{
objs=$3(str);
for(var i=0;i<objs.length;i++){
this.elements.push(objs[i]);
}
}
}
}else{
if(firstChar=="#"){//根据id取
}else if(firstChar=="*"){//根据name取
}else{//根据标签名取
var strs=str.split(":");
if(strs.length>1){//说明有：
objs=$4(obj,str.substring(0,str.indexOf(":")));//获取到了所有对象
this.elements.push(objs.item(parseInt(strs[1])-1));
}else{
objs=$4(obj,str);
for(var i=0;i<objs.length;i++){
this.elements.push(objs[i]);
}
}
}
}
return this;//一定要记得返回对象；
}
//获取第一个字符的方法
this.getFirstChar=function(str){
return str.substr(0,1);
}
//去掉第一个字符的其他字符串
this.getOthersStr=function(str){
return str.substring(1);
}
}
//根据用户给定的字符串来查找对象
//取value值或注入值
qing.prototype.val=function(val){
if(arguments.length>0){//有参数，说明是赋值
for(var i=0;i<this.elements.length;i++){
this.elements[i].value=val;
}
}else{
var values=[];
for(var i=0;i<this.elements.length;i++){
values.push(this.elements[i].value);
}
return values;
}
return this;//返回值
}
qing.prototype.txt=function(val){
if(arguments.length>0){//有参数，说明是赋值
if(navigator.appName=='Netscape'){
for(var i=0;i<this.elements.length;i++){
this.elements[i].textContext=val;
}
}else{
for(var i=0;i<this.elements.length;i++){
this.elements[i].innerText=val;
}
}
}else{
var values=[];
if(navigator.appName=='Netscape'){
for(var i=0;i<this.elements.length;i++){
values.push(this.elements[i].textContent);
}
}else{
for(var i=0;i<this.elements.length;i++){
values.push(this.elements[i].innerText);
}
}
return values;//返回值
}
return this;
}
//移除对象的方法 remove();
qing.prototype.remove=function(){
for(var obj in this.elements){
this.elements[obj].parentNode.removeChild(this.elements[obj]);
}
return this;
}
//在指定对象后面添加子节点after();
qing.prototype.after=function(nodeName,nodeValue,attrs){
var node;
for(var obj in this.elements){
node=document.createElement(nodeName);
if(arguments.length>2){//说明属性列表
for(var attr in attrs){
node.setAttribute(attr,attrs[attr]);
}
}
node.appendChild(document.createTextNode(nodeValue));
this.elements[obj].appendChild(node);
}
return this;
}
//在指定对象前面添加子节点的方法before();
qing.prototype.before=function(nodeName,nodeValue,attrs){
var node;
for(var obj in this.elements){
node=document.createElement(nodeName);
if(arguments.length>2){//说明属性列表
for(var attr in attrs){
node.setAttribute(attr,attrs[attr]);
}
}
node.appendChild(document.createTextNode(nodeValue));
this.elements[obj].insertBefore(node,this.elements[obj].firstChild);
}
return this;
}
//在指定对象后面添加内容append();
qing.prototype.append=function(str){
var objs;
for(var obj in this.elements){
objs=this.elements[obj];
objs.innerHTML=objs.innerHTML(str);
}
}
//样式处理css();
qing.prototype.css=function(attr,val){
for(var obj in this.elements){
if(arguments.length==1){//取
if(typeof window.getComputedStyle!='undefined'){//W3C
return window.getComputedStyle(this.elements[obj],attr);
}else if(typeof this.elements[obj].currentStyle!='undefined'){//IE
return this.elements[obj].currentStyle(this.elements[obj],attr);
}
}else{
this.elements[obj].style[attr]=val;
}
}
return this;
}
//添加样式规则addClass();
qing.prototype.addClass=function(className){
for(var i=0;i<this.elements.length;i++){
if(!this.elements[i].className.match(new RegExp('(\\s|^)' +className +'(\\s|$)'))){
this.elements[i].className+=' '+className;
}
}
return this;
}
//移除样式规则removeClass(){即将当前样式替换为空};
qing.prototype.removeClass=function(className){
for(var i=0;i<this.elements.length;i++){
if(this.elements[i].className.match(new RegExp('(\\s|^)' +className +'(\\s|$)'))){
this.elements[i].className=this.elements[i].className.replace(new RegExp('(\\s|^)' +className +'(\\s|$)'), ' ');;
}
}
return this;
}
//对象属性处理attr()
qing.prototype.attr=function(attr,val){
var values=[];
if(arguments.length==1){
for(var i=0;i<this.elements[i];i++){
values.push(this.elements.getAttribute(attr));
}
return values;
}else{
for(var i=0;i<this.elements.length;i++){
this.elements[i].setAttribute(attr,val);
}
}
return this;
}
//给满足条件的对象绑定一个点击事件
qing.prototype.click=function(fn){
for(var i=0;i<this.elements.length;i++){
this.elements[i].οnclick=fn;
}
}
//事件绑定 addEvent
qing.prototype.addEvent=function(type,fn){
var obj;
for(var i=0;i<this.elements.length;i++){
obj=this.elements[i];
if(typeof obj.addEventListener!='undefined'){//W3c
obj.addEventListener(type,fn,flase);
}else if(typeof obj.attachEvent!='undefined'){
obj.attachEvent('on'+type,function(){
fn.call(obj,window.event);
});
}
}
}
//移除事件removeEvent
qing.prototype.addEvent=function(type,fn){
var obj;
for(var i=0;i<this.elements.length;i++){
obj=this.elements[i];
if(typeof obj.removeEventListener!='undefined'){//W3c
obj.removeEventListener(type,fn,false);
}else if(typeof obj.detachEvent!='undefined'){
obj.detachEvent('on'+type,fn);
}
}
}
})(window)
function showInfo(){
//alert(yc("#uname").val());
//alert(yc("li:5").txt());
//yc("ul").before('li','qqq',{class:"red"});
//alert(yc("li:2"))
//yc("li").click(function(){alert("fdff");});
yc("li").addEvent('mouseover',function(){
alert("fdff");
});
}
</script>
<style>
.red{
color:#36C;
}
#aaa{
background:#9FC;
}
</style>
</head>
<body>
<input type="text" id="uname"/> <input type="button" value="提交" onClick="showInfo()"/>
<ul id="aaa">
<li>a</li>
<li>b</li>
<li>c</li>
<li>d</li>
</ul>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
</body>
</html>
扫一扫
评论
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
查看更多评论
添加红包
