利器之cssQuery

理论上来说.cssQuery和document.getElementsByTagName方法的作用一样..

但cssQuery比后者强大多了..无论是功能还是效率.

 

感谢Dean Edwards 的成果让我有幸见到如此强大的cssQuery 

cssQuery官方网站 http://dean.edwards.name/my/cssQuery/

如果查找所有的超链接元素,cssQuery代码如下:<非常简洁>

[javascript] view plaincopy

1. var ps = cssQuery("a");  
2. //如果要改变其背景颜色,或者一些其它的属性,就很好办了.  
3. for(var i = 0; i < ps.length;i ++){  
4.     ps[i].style.backgroundColor = "green";  
5.     ps[i].style.border = "1px solid #000";  
6. }  
7. //....  

当然用document.getElemensByTagName也可以实现,代码如下:

[c-sharp] view plaincopy

1. var ps = document.getElementsByTagName("a");  
2. //其它省略 ....  

 

当然 , 需求太简单, 或许你看不出来什么区别...让我们再来看一个例子.

 

例如,我要找到超链接<a>元素..并且他的href属性的值为www.baidu.com,cssQuery代码如下:

[c-sharp] view plaincopy

1. var baidu = cssQuery("a[href='www.baidu.com']");  
2. //省略...  

 

如果用惯了document.getElementsByTagName的朋友,可就有点麻烦了.代码如下:

 

[javascript] view plaincopy

1. var ps = document.getElementsByTagName("a");  
2. //循环所有元素..  操纵DOM判断其href Attribute是否是www.baidu.com  
3. for(var i = 0; i < ps.length; i ++){  
4.     if(ps[i].href = "www.baidu.com")  
5.        return ps[i];  
6. }  

 

 

 

从这里就可以看出谁更方便,更灵活了吧...~当然好处还不止这么多,,,  ,比如cssQuery还可以获得标签ID的集合,,,还有根据样式的名称

<input type="text" class="abc" id="3"/>

就可用如下代码获得:

[javascript] view plaincopy

1. //获得class="abc"的文本标记  
2. var ps = cssQuery("input.abc");  
3. //获得div下的<a>标签  
4. var divAs = cssQuery("div > a");  

 

 

总之,cssQuery功能很强大.他有很多的组合方式供我们搜索DOM Element, 想了解更深请查阅官网