模拟jquery封装选择器
<!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>
//测试模拟tquery选择器封装的效果 function btn_click(){
console.log($("#btnName").val());
} function btn_setValue(){
$("#btnName").val("hello world");
} /*封装的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添加原型方法 //返回data数组的个数
size:function(){
return this.data.length;
}, //封装innerHTML
html:function(content){
if(content){
//为元素设置html值(xx.innerHTML="")
for(var i=0;i<this.data.length;i++){
//innerHTML兼容性比较好
this.data[i].innerHTML=content;
}
}else{
//获取html值(return xx.innerHTML)
if(this.data.length!=0){
return this.data[0].innerHTML;
}
return;
}
}, //获得/设置value属性
val:function(value){
if(value){
//为value属性设置值
for(var i=0;i<this.data.length;i++){
this.data[i].value=value;
//this.data[i].setAttribute("value",value);
}
return this;//为了使用连缀的效果
}else{
if(this.data.length!=0){
return this.data[0].value;
//return this.data[0].getAttribute("value");
}
}
}, //获得/设置任意属性
attr:function(name,value){
//如果有两个参数
if(name && value){
for(var i=0;i<this.data.length;i++){
//这里只能处理出现在标签中的属性
this.data[i].setAttribute(name,value);
}
return this;
}else if(name){
if(this.data.length!=0){
return this.data[0].getAttribute(name);
}
}
}, //追加样式
addClass:function(className){
for(var i=0;i<this.data.length;i++){
var elem=this.data[i];
if(elem.getAttribute("class")){
//如果有class属性了
var oldClassName=elem.getAttribute("class");
var newClassName=oldClassName+""+className;
elem.setAttribute("class",newClassName);
}else{
//设置class属性
elem.setAttribute("class",className);
}
}
}, //移除样式
/*removeClass(className) 移除指定样式
removeClass() 移除所有样式
*/
removeClass:function(className){
if(className){
//删除指定名称的样式
//<input class="a b c"/>
for(var i=0;i<this.data.length;i++){
var arr=this.data[i].getAttribute("class").split(" ");//得到一个数组
var newClassName="";
for(var j=0;j<arr.length;j++){
if(arr[j]==className){
continue;
}
newClassName+=arr[j]+" ";
newClassName=newClassName.substring(0,newClassName.length-1);
this.data[i].setAttribute("class",newClassName);
}
return this;
}
}else{
//移除所有类样式
for(var i=0;i<this.data.length;i++){
this.data[i].setAttribute("class","");
}
return this;
}
}
};
</script>
</head> <body>
<div class="redBorder" id="myDiv"></div>
<div class="redBorder"></div>
<div class="grayBorder"></div>
<input type='text' id="btnName"/>
<input type="button" value="测试" onclick="btn_click()"/>
<input type="button" value="设置值" onclick="btn_setValue()"/>
</body>
</html>
模拟jquery封装选择器的更多相关文章
- ajx技术解析以及模拟jQuery封装
1.后台处理程序 <%@ page language="java" contentType="text/html; charset=UTF-8" page ...
- js框架封装，模拟jQuery封装
模拟jQuery框架,利用原生的js技术,封装一个js框架,以加深对jQuery的常用api的使用和面向对象原理的理解:一:结构部分首先利用闭包,构造一个自执行函数,然后利用选择器函数Sizzle,获 ...
- 模拟jquery的$()选择器的实现
<html> <head> </head> <body> <div id="div1">div1</div> ...
- javascript模拟jQuery封装委托事件，兼容IE
var $ = function(id){ var dom = document.getElementById(id); return { on:function(eventType,element, ...
- 原生JS模拟jQuery $
模拟jQuery的$选择器 在获取元素的时候使用ID选择器,返回的是一个对象:使用类选择器或者标签选择器返回可能是一组元素:将获取到的一个或一组元素进行一个简易的封装封装成一个TQObject 什么是 ...
- 模拟jQuery简单封装ajax
/*模拟jQuery的写法 (简单写法)*/ var $={}; /*ajax*/ $.ajax = function (options) { /* * 请求 * 1.请求接口 type get po ...
- 仿照jquery封装一个自己的js库（一）
所谓造轮子的好处就是复习知识点,加深对原版jquery的理解. 本文系笔者学习jquery的笔记,记述一个名为"dQuery"的初级版和缩水版jquery库的实现.主要涉及知识点包 ...
- 仿照jquery封装一个自己的js库
所谓造轮子的好处就是复习知识点,加深对原版jquery的理解.本文系笔者学习jquery的笔记,记述一个名为"dQuery"的初级版和缩水版jquery库的实现.主要涉及知识点包括 ...
- 模拟jQuery库
用js模拟jQuery方法,体会封装思想 <!DOCTYPE html><html><head><meta charset="UTF-8" ...
随机推荐
- 请写一个C函数，判断处理器是大端存储还是小端存储，若处理器是Big_endian的，则返回0；若是Little_endian的，则返回1
[解答] int checkCPU() { { union w { int a; char b; }c; c.a=1; return (c.b==1); } } [剖析] 嵌入式系统开发者应该对Lit ...
- cmd命名设置成全局
如在jsdoc里.想要把jsdoc命名设置成全局.只要把环境变量里面的用户变量里面的path变量值增加 C:\Program Files\nodejs;E:\Program Files (x86)\j ...
- 安装.net framework 4.0失败，出现HRESULT 0xc8000222错误代码
安装了一上午的.net framework 4.0,各种失败,查了好多答案,各种不靠谱,最后终于找到答案了 和Windows Update有关系,给目录名重命名一下再次安装,即安装成功了! 方法: 1 ...
- JS-商品图片放大器
//给mask添加事件,让其随着鼠标移动 superMask.onmousemove=function(){ var left=event.offsetX-175/2; left=left>0? ...
- javascript 网页图标音乐切换
图片名称 sprite.zip <!doctype html> <html> <head> </head> <style> .css{ po ...
- Python交互模式下方向键出现乱码
解决办法如下: 1.安装readline模块 readline库是bash shell用的库,包含许多功能,如命令行自动补全等. ubuntu下安装的命令: sudo apt-get instal ...
- 在centos中使用vim编辑器
下面用编辑crontab举个例子: 在命令行输入 crontab -e 会直接进入vim编辑模式编辑crontab文件. 随后可以输入“i”进入insert模式 然后移动光标在指定的位置添加文字,可以 ...
- lucene分词多种方法
目前最新版本的lucene自身提供的StandardAnalyzer已经具备中文分词的功能,但是不一定能够满足大多数应用的需要.另外网友谈的比较多的中文分词器还有:CJKAnalyzerChinese ...
- Altium Designer如何批量修改名称，数值，封装
方法一: altium里的封装管理库 1,Tools -> Footprint Manager -> ...2,在Component List里选择要改的器件3,在View and Edi ...
- 【HDOJ】1494 跑跑卡丁车
DP,将能量映射为0~14,注意当选择这圈加速的时候,这圈就不能再储存能量,同时能量14可能转化为10. #include <cstdio> #include <cstring> ...