<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. espcms内容页上下篇按后台手动排序号

    模板文件: {%get name=plist class="did":$read.did,pid:$read.pid%} <li class="fl"&g ...

  2. 【Network】Calico, Flannel, Weave and Docker Overlay Network 各种网络模型之间的区别

    From the previous posts, I have analysed 4 different Docker multi-host network solutions - Calico, F ...

  3. java19

    1:异常(理解) (1)程序出现的不正常的情况. (2)异常的体系 Throwable |--Error 严重问题,我们不处理. |--Exception |--RuntimeException 运行 ...

  4. Deep Learning入门视频（上）_一层/两层神经网络code

    关于在51CTO上的深度学习入门课程视频(9)中的code进行解释与总结: (1)单层神经网络: #coding:cp936 #建立单层神经网络,训练四个样本, import numpy as np ...

  5. 解决log4j:WARN No appenders could be found for logger

    这个问题是因为我们的log4j.properties文件配置不够完整,所以我们给它配置齐了就不会再出现这个问题. log4j.properties不完整配置如下: log4j.rootLogger=D ...

  6. 在WebApi中 集成 Swagger

    1. Swagger(俗称:丝袜哥)是什么东西? Swagger 是一个规范和完整的框架,用于生成.描述.调用和可视化 RESTful 风格的 Web 服务.总体目标是使客户端和文件系统作为服务器以同 ...

  7. Build2016上值得一看的大数据相关Session

    (此文章同时发表在本人微信公众号"dotNET每日精华文章",欢迎右边二维码来关注.) 题记:Build2016开完很久了,现在才来回顾下,就说说那些和大数据相关的Session, ...

  8. MySQL批量删除指定前缀表

    Select CONCAT( 'drop table ', table_name, ';' ) FROM information_schema.tables Where table_name LIKE ...

  9. 常见开发需求之前端利器webstorm中的git和快捷键

    需求   前端开发中我们最常用的一般是webstorm.hbuilder和sublime,因为以前使用过一段时间eclipse所以我对webstorm的感觉比较良好,再加上以前使用hbuilder维护 ...

  10. NSURLConnection 异步加载网络数据

    #import "ViewController.h" @interface ViewController () @end @implementation ViewControlle ...