`
zuroc
  • 浏览: 1306232 次
  • 性别: Icon_minigender_1
  • 来自: 江苏
社区版块
存档分类
最新评论

DIY 简易Css选择器

CSSCC++C#prototype 
阅读更多
随便写着玩玩,想当然的认为性能应该不错吧.不知道怎么测试.....................

使用演示
html 代码
 
  1. <script>  
  2. window.onload=function(){  
  3. alert($("#div1").innerHTML)  
  4. alert($("#div1 .class2 div")[0].innerHTML)  
  5.   
  6. }  
  7. <!---->script>  
  8. <!---->head><body>  
  9. <div id="div1">  
  10. div id="div1"  
  11.     <div class="class2">  
  12.         div class="class2"  
  13.               
  14.             <div>div<!---->div>  
  15.       
  16.     <!---->div>  
  17. <!---->div>  

js 代码
 
  1. function $A(o){  
  2.     var i=o.length,a=[];  
  3.     while(i)a[--i]=o[i]  
  4.     return i==0?a:[o];  
  5. }  
  6.   
  7. function copy(d,o) {  
  8.     for(var i in d)if(!o[i])o[i]=d[i]  
  9.     return o  
  10. }  
  11. function extend(d,o){copy(d,o.prototype)}  
  12.   
  13. extend({  
  14.     indexOf  
  15.         :  
  16.     function(o){  
  17.         var i=0,l=this.length;  
  18.         for(;iif(this[i]==o)return i;  
  19.         return -1;  
  20.     },  
  21.     U:  
  22.     function(p){//p:part  
  23.         var i=0,j,l=p.length;  
  24.         while(iif(this.indexOf(p[i])==-1)this.push(p[i++]);  
  25.     },  
  26.     each:  
  27.     function(f){  
  28.         var l=this.length,i=0;  
  29.         while(ithis[i++])  
  30.     }  
  31. },Array);  
  32.   
  33.   
  34. function $(o){  
  35.     //return window==this?new $(o):cssSelect(o,document);  
  36.     return css_select(o,document);  
  37. }  
  38.   
  39. function css_select(o,s){  
  40. //s:scope l:list g:get  
  41. o=o.split(' ');  
  42.   
  43. var l,g,c,d;  
  44.   
  45. //#应该只出现1次,如果出现应该是第1个  
  46. if("#"==o[0].charAt(0))s=s.getElementById(o.shift().substring(1));  
  47.   
  48. if(o[0]){  
  49.     s=[s];  
  50.     o.each(  
  51.     function(i){  
  52.             if("."==i.charAt(0))c=i.substring(1),i='*';  
  53.             l=[];  
  54.             s.each(function(e){  
  55.                 g=e.getElementsByTagName(i)  
  56.                 if(c){  
  57.                     d=$A(g);  
  58.                     g=[];  
  59.                     d.each(  
  60.                         function(e){  
  61.                             if(e.className.split(/\s+/).indexOf(c)>-1)g.push(e);  
  62.                         });  
  63.                     c=0;  
  64.                 }  
  65.                 l.U(g);  
  66.             });  
  67.             s=l;  
  68.     });  
  69. }  
  70.   
  71. return s;  
  72. }  
分享到：
| Flex Builder 3 Beta版公测开始
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    CSS选择器.pdf

    在CSS选择器的体系中，存在多种不同类型的选择器，每种都有其特定的用途和使用场景。 首先，元素选择符是最基本的类型，包括通配符选择器、标签选择器、id选择器和class选择器。通配符选择器用“*”表示，可以选中...

    前端必须掌握的css选择器方法

    下面是前端开发中经常使用的 30 个 CSS3 选择器，包括通用元素选择器、ID 选择器、类选择器、标签选择器、伪类选择器、毗邻元素选择器、子元素选择器、属性选择器等。 1. 通用元素选择器 * 通用元素选择器*是选择...

    css选择器的应用

    ### CSS选择器的应用 #### CSS概述与引入方式 CSS（层叠样式表）是一种用于定义HTML文档中元素样式的语言。它允许开发者控制网页布局、颜色、字体等外观特性，从而增强网页的表现力。CSS可以通过多种方式引入： -...

    CSS选择器详细介绍

    常用选择器是 CSS 选择器中最基本的选择器，包括三种类型：ID 选择器、类选择器和标签选择器。 * ID 选择器：根据元素的 ID 来选择元素，例如 `#demoDiv{color:#FF0000;}`。在 HTML 中，元素可以定义一个 ID 属性，...

    一种可视化的方式来分析选择器在CSS中的特殊性

    **CSS选择器特殊性分析** 在CSS样式表中，选择器是用于指定元素样式的关键工具。它们决定了哪些规则将应用于页面上的特定元素。选择器的特殊性（Specificity）是CSS优先级的一种度量，用于解决当多个选择器同时影响...

    CSS选择器和jQuery选择器

    ### CSS选择器与jQuery选择器详解 #### 一、引言 在现代Web开发中，选择器扮演着至关重要的角色。无论是对HTML元素应用样式还是对其进行动态操作，选择器都是必不可少的工具。本文将深入探讨两种常用的选择器——...

    css选择器 的概要介绍与分析

    CSS选择器的灵活性和多样性是CSS强大之处的关键因素之一。下面是一些关于CSS选择器的资源描述。 ### CSS选择器资源描述 #### 1. **官方文档与教程** - **MDN Web Docs**：Mozilla提供的MDN Web Docs是学习CSS选择...

    利用css＋javascript实现的一个日期选择器代码

    【标题】：“利用css＋javascript实现的一个日期选择器代码”涉及的核心知识点主要集中在CSS样式设计和JavaScript编程上，用于创建一个交互式的日期选择组件。日期选择器是网页表单中常见的一种元素，允许用户方便地...

    css属性选择器理解案列

    理解css属性选择器

    HTML5+CSS3 城市选择器

    另外，CSS3的Flexbox或Grid布局可以方便地实现选择器的响应式设计，使其在不同屏幕尺寸上都能正常显示。 JQuery库在这当中起到了辅助作用，它简化了JavaScript的DOM操作，使得事件处理、元素操作和动画效果的实现...

    Go-Go的CSS选择器

    Go-Go的CSS选择器支持大部分标准的CSS选择器特性，包括类选择器、ID选择器、属性选择器、伪类选择器等。然而，由于Go语言本身的限制，可能不支持某些高级的CSS3选择器，比如`::before`、`::after`伪元素或复杂的组合...

    HTML5&CSS3网页制作：CSS基础选择器.pptx

    理解并熟练使用这些基础选择器是CSS学习的关键步骤。通过它们，你可以更有效地控制网页的布局和视觉呈现。在实际项目中，通常会结合使用这些选择器，以及更复杂的后代选择器、伪类选择器等，来创建更精细的样式规则...

    CSS选择器-xmind

    CSS选择器 xmind - 选择器分类(ID选择器，类选择器，标签选择器，通配选择器，属性选择器，伪类选择器)。 - 选择器关系(分组，后代，子元素，相邻兄弟，后续兄弟)。 - CSS特性(优先级，继承，层叠)。

    CSS选择器.docx

    以下是对CSS选择器的详细介绍： 一、基本选择器 通用选择器（*）： 匹配HTML或XML文档中的所有元素。 例如：* { margin: 0; padding: 0; } 将所有元素的外边距和内边距设置为0。 元素（标签）选择器（E）： 通过...

    css选择器.xmind

    脑图形式的css选择器和层叠规则整理，包括css选择器的类型以及css层叠规则的影响因素（重要性、来源、特殊性、顺序等等），属于前端基础技术的资源

    CSS基本选择器实用PPT学习教案.pptx

    CSS 基本选择器实用学习教案 本学习教案主要介绍了 CSS 基本选择器的概念、语法和应用，旨在帮助学生掌握基本的 CSS 选择器，并实践于个人主页项目中。 一、CSS 概念和语法 CSS（Cascading Style Sheets）是用来...

    CSS3选择器总结CSS3选择器总结

    CSS选择器可以分为多种类型，包括id选择器、类选择器、标签选择器、交叉选择器、群组选择器、后代选择器和通用选择器。 - id选择器：通过元素的id属性来选择特定元素，使用#符号加上id名作为选择器（如#idname）。 ...

Magicbox
Global site tag (gtag.js) - Google Analytics