这里有新鲜出炉的 Javascript 教程,程序狗速度看过来!
Javascript 是一种由 Netscape 的 LiveScript 发展而来的原型化继承的基于对象的动态类型的区分大小写的客户端脚本语言,主要目的是为了解决服务器端语言,比如 Perl,遗留的速度问题,为客户提供更流畅的浏览效果。
下面小编就为大家带来一篇原生 JS 查找元素的方法 (推荐)。小编觉得挺不错的,希望对大家有所帮助。一起跟随小编过来看看吧,祝大家游戏愉快哦
今天写了一个很简单、很粗暴的通过 JS 根据类来查找 DOM 元素。
为了降低它的粗暴等级(耗费性能)我给了三个等级。
首先性能最好的,适合 FF,CH,IE8, 通过 querySelectorAll 这个 API。
其次是指定 ID
最后只能全页面进行匹配 class, 不过比较节省的性能的是,在指定 class 名称的时候,同时传入 html 标签的类型,用于节省遍历的范围!
因为水平有限,目前也只能写成这种,真的好好奇 JQ 的选择器是怎么去匹配 DOM 的,如果有大神看到这篇文章,请不要吝啬施教。。。
下面贴代码:
- function $(d, t) {
- var c = null,
- // className
- e = null,
- // element
- i = null; // id
- function type(p) { /
- function. (\w * )\ (\) / .test(p.constructor);
- return RegExp.$1.toLowerCase();
- }
- if (type(d) == 'string') {
- if (/^\.[a-z,A-Z,_]\w*$/.test(d)) { // 匹配class
- c = d;
- } else if (/^#[a-z,A-Z,_]\w*$/.test(d)) { // 匹配id
- i = d;
- } else if (/^[a-z,A-Z,_]+$/.test(d)) { // 匹配元素
- e = d;
- } else {
- return undefined;
- }
- if (document.querySelectorAll) {
- if (c || e) return document.querySelectorAll(c || e);
- if (i) return document.querySelectorAll(i)[0];
- } else {
- if (c) {
- var all = document.getElementsByTagName(t || '*'),
- cn = c.slice(1, c.length),
- reg = new RegExp('^' + cn + '\\b'),
- // 限定类名的起始,结束只要是相同字符结束即可。
- em = [];
- for (var i = 0; i < all.length; i++) {
- if (reg.test(all[i].className)) {
- em.push(all[i])
- }
- }
- return em;
- } else if (e) {
- return document.getElementsByTagName(e);
- } else if (i) {
- return document.getElementById(i);
- }
- }
- } else {
- return undefined;
- }
- }
调用方式:
- $('selector'[,type])
来源: http://www.phperz.com/article/17/0531/330307.html