<!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封装选择器的更多相关文章

  1. ajx技术解析以及模拟jQuery封装

    1.后台处理程序 <%@ page language="java" contentType="text/html; charset=UTF-8" page ...

  2. js框架封装，模拟jQuery封装

    模拟jQuery框架,利用原生的js技术,封装一个js框架,以加深对jQuery的常用api的使用和面向对象原理的理解:一:结构部分首先利用闭包,构造一个自执行函数,然后利用选择器函数Sizzle,获 ...

  3. 模拟jquery的$()选择器的实现

    <html> <head> </head> <body> <div id="div1">div1</div> ...

  4. javascript模拟jQuery封装委托事件，兼容IE

    var $ = function(id){ var dom = document.getElementById(id); return { on:function(eventType,element, ...

  5. 原生JS模拟jQuery $

    模拟jQuery的$选择器 在获取元素的时候使用ID选择器,返回的是一个对象:使用类选择器或者标签选择器返回可能是一组元素:将获取到的一个或一组元素进行一个简易的封装封装成一个TQObject 什么是 ...

  6. 模拟jQuery简单封装ajax

    /*模拟jQuery的写法 (简单写法)*/ var $={}; /*ajax*/ $.ajax = function (options) { /* * 请求 * 1.请求接口 type get po ...

  7. 仿照jquery封装一个自己的js库（一）

    所谓造轮子的好处就是复习知识点,加深对原版jquery的理解. 本文系笔者学习jquery的笔记,记述一个名为"dQuery"的初级版和缩水版jquery库的实现.主要涉及知识点包 ...

  8. 仿照jquery封装一个自己的js库

    所谓造轮子的好处就是复习知识点,加深对原版jquery的理解.本文系笔者学习jquery的笔记,记述一个名为"dQuery"的初级版和缩水版jquery库的实现.主要涉及知识点包括 ...

  9. 模拟jQuery库

    用js模拟jQuery方法,体会封装思想 <!DOCTYPE html><html><head><meta charset="UTF-8" ...

随机推荐

  1. Xcode 7 warnings: object file was built for newer iOS version than being linked

    编译之后出现: ld: warning: object file xxxxx... was built for newer iOS version (8.1) than being linked (7 ...

  2. xAML中一些控件的用法学习

    首先,介绍一些比较简单的设计,这些可以直接通过拖拽实现.如下例子: <Window x:Class="wpf1.MainWindow" xmlns="http:// ...

  3. oracle 集合运算符

    aaarticlea/png;base64,iVBORw0KGgoAAAANSUhEUgAAAY4AAACNCAIAAAAvhQoxAAAbmklEQVR4nO1dX6jc1pn/0lBH4KVV6J ...

  4. 武汉科技大学ACM：1010: 零起点学算法27——判断是否直角三角形

    Problem Description 输入三个整数,分别代表三角形的三条边长度,判断能否构成直角三角形 Input 输入3个整数a,b,c(多组数据,-5000000<a,b,c<500 ...

  5. Linux编程基础——GDB（设置断点）（转：TianFang，cnblog： http://www.cnblogs.com/TianFang/archive/2013/01/20/2868889.html）

    启动GDB后,首先就是要设置断点,程序中断后才能调试.在gdb中,断点通常有三种形式: 断点(BreakPoint): 在代码的指定位置中断,这个是我们用得最多的一种.设置断点的命令是break,它通 ...

  6. 转：初学者，手工注入测试方法小节 （出处：: 51Testing软件测试网--jie）

    1.加入单引号 ’提交,  结果:如果出现错误提示,则该网站可能就存在注入漏洞.    2.数字型判断是否有注入; 语句:and 1=1 ;and 1=2 (经典).' and '1'=1(字符型)  ...

  7. jquery中的html()、text()、val()的区别

      1.html(),text(),val()三种方法都是用来读取选定元素的内容: html()是用来读取元素的HTML内容(包括其Html标签),text()用来读取元素的纯文本内容,包括其后代元素 ...

  8. javascript解析从服务器返回的json格式数据

    在javascript中我们可以将服务器返回的json格式数据转换成json格式进行使用,如下: 1.服务器返回的json格式数据: 通过response.responseText获得: " ...

  9. centos6.2下安装星际译王stardict3.0

    星际译王是一个Linux下很好的翻译软件. 我的系统是centos6.2 32位版.本来在http://code.google.com/p/stardict-3/downloads/list 上下的源 ...

  10. 使用Statement执行sql语句

    import java.sql.Connection; import java.sql.DriverManager; import java.sql.SQLException; import java ...