<html>

<head>

</head>

<body>

<div id="div1">div1</div>

<div class=".div2">aaaa</div>

<div class=".div2">aaaa</div>

<p>p1</p>

<p>p2</p>

<script>

var TQObject = function(){

	this.data=[];

}

TQObject.prototype = {}

var $=function(selecter)

{

	this.tqOjbect = new TQObject();

	if (selecter.substring(0,1) == "#") {

		var elem = document.getElementById(selecter.substring(1));

		this.tqOjbect.data.push(elem);

	} else if (selecter.substring(0,1) == ".") {

		var elems = document.getElementsByTagName("*");

		console.log(elems);

		var reg  = new RegExp("(^|\\s)" + selecter.substring(1) + "($|\\s)");

		console.log(reg);

		for (var i=0;i<elems.length;i++) {

			if (reg.test(elems[i].className.substring(1))) {

				this.tqOjbect.data.push(elems[i]);

			}

		}

	} else {

		var elems = document.getElementsByTagName(selecter);

		this.tqOjbect.data.push(elems);

	}

	return tqOjbect;

}

window.onload=function(){

	var ele1 = $("#div1");

	var ele2 = $(".div2");

	var ele3 = $("p");

	console.log(ele2);

}

</script>

</body>

</html>

　　

模拟jquery的$()选择器的实现的更多相关文章

  1. 模拟jquery封装选择器

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  2. 原生JS模拟jQuery $

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

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

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

  4. jQuery 的选择器常用的元素查找方法

    jQuery 的选择器常用的元素查找方法 基本选择器: $("#myELement")    选择id值等于myElement的元素,id值不能重复在文档中只能有一个id值是myE ...

  5. HTML 学习笔记 JQuery（选择器）

    学习前端也有一段时间了,今天终于进入到JQuery阶段了,对于新手来讲,JQuery的选择器类型之多 功能之强大实在不是一天两天能够记得完的.现在,就采用边学边记录的方式.以后要是忘了的话,也有一个地 ...

  6. 模拟jQuery简单封装ajax

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

  7. 模拟jQuery库

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

  8. jQuery的选择器中的通配符总结

    1.选择器 (1)通配符: $("input[id^='code']");//id属性以code开始的所有input标签 $("input[id$='code']&quo ...

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

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

随机推荐

  1. python之路十

    协程协程,又称微线程,纤程.英文名Coroutine.一句话说明什么是线程:协程是一种用户态的轻量级线程.协程拥有自己的寄存器上下文和栈.协程调度切换时,将寄存器上下文和栈保存到其他地方,在切回来的时 ...

  2. request \response 总结

    request&response request 1.获得信息的方法     1> 获得请求首行信息的方法         *getMethod         *getContextP ...

  3. Java Class类及反射机制

    java.lang.Class类 声明: public final class Class<T>extends Object implements Serializable, Generi ...

  4. Linux服务器模型及其对应的程序流程

    一.TCP循环服务器 TCP循环服务器一次只能处理一个客户端的请求,处理完成后,才能接受下一个客户端的请求,程序流程如下: socket(......);//创建套接字 bind(......);// ...

  5. iOS开发UI篇—核心动画(关键帧动画)

    转自:http://www.cnblogs.com/wendingding/p/3801330.html iOS开发UI篇—核心动画(关键帧动画) 一.简单介绍 是CApropertyAnimatio ...

  6. 与你相遇好幸运，mocha接口测试

    var rest = require('restler');var assert = require("assert");var systemID;var userID; cons ...

  7. FTP安装与使用

    1.查看ftp是否已安装:rpm -qa | grep vsftpd 2.安装ftp:rpm -ivh vsftpd 或yum install vsftpd 3.匿名用户配置文件主要参数: anony ...

  8. 【Cocos2d-x for WP8 学习整理】（4）CCTableView 实现《天天爱消除》中的得分榜

    接上回 CCScrollView 继续,在GUI 里还有个 CCScrollView 的子类---CCTableView . 这个名字应该是从 IOS 里的 UITableView来的,其实是跟WP8 ...

  9. 取两个DataTable的交集,删除重复数据

    /// <summary> /// 取两个DataTable的交集,删除重复数据 /// </summary> /// <param name="sourceD ...

  10. 本机tomcat的server.xml被还原的问题及解决办法

    将tomcat的server.xml进行修改,但当eclipse发布站点后,发布tomcat中的server.xml会被还原. 原因是eclipse会将自己的tomcat配置文件对tomcat覆盖,解 ...