<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. soundtouch变速wsola算法之改进

    soundtouch变速算法很类似sola算法,细看才知道是wsola算法. 上个星期有个需求,将该变速应用到直播的包处理,有点类似于webrtc的netEQ处理机制. 直接使用soundtouch, ...

  2. Linux命令行上程序执行的那一刹那！

    转自:http://www.cppblog.com/cuijixin/archive/2008/03/14/44463.html by falcon<zhangjinw@gmail.com> ...

  3. [Linux]系统调用理解(3)

    本文介绍了Linux下的进程的一些概念,并着重讲解了与Linux进程管理相关的重要系统调用wait,waitpid和exec函数族,辅助一些例程说明了它们的特点和使用方法. 1.7 背景 在前面的文章 ...

  4. C#通过事件跨类调用WPF主窗口中的控件

    xaml.cs文件: using System; using System.Timers; using System.Windows; using System.Windows.Forms; name ...

  5. jQuery treetable【表格多重折叠树功能及拖放表格子元素重新排列】

    今天有个表格需求做到多重折叠子元素功能,仔细想了下实现原理, 1.在html中,把父子节点的关系写在自定义属性,但对于节点是否有孩子(hasChild),是否是最后一个节点(isLastOne),是否 ...

  6. Spring+SpringMvc+Mybatis框架集成搭建教程五(项目源码发布到GitHub)

    一.背景 我们做完了上面的四步操作以后,来把我们写好的项目提交到自己的GitHub仓库进行版本管理,具体步骤如下. 二.提交步骤 1.首先你要保证你已经有GitHub的账号和密码(没有可以去githu ...

  7. iOS 应用数据存储方式（XML属性列表-plist）

    iOS 应用数据存储方式(XML属性列表-plist) 一.ios应用常用的数据存储方式 1.plist(XML属性列表归档) 2.偏好设置 3.NSKeydeArchiver归档(存储自定义对象) ...

  8. 【MongoDB】 Windows 安装

    Windows下安装MongoDB,虽然网上有很多攻略,但是还是有很多坑,为了以后少犯错误,特此记录. 1.下载安装包 https://fastdl.mongodb.org/win32/mongodb ...

  9. UnrealEd3视图导航

    本博客使用的版本:2010-08   [更多其他的UE3版本]     [最新的UE3版本 -- 2015-02]  [unreal engine wiki]   注:dx11被加入2011-03月版 ...

  10. js验证输入的金钱格式

    <html> <head> <title>js验证输入的金钱格式</title> <script type="text/javascri ...