利器之cssQuery

最新推荐文章于 2024-10-14 21:22:33 发布

原创最新推荐文章于 2024-10-14 21:22:33 发布 · 4.8k 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#class #div #html #css #input

Javascript 专栏收录该内容

4 篇文章

订阅专栏

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

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

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

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

贴上效果代码:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <mce:script type="text/javascript" src="http://hi.images.youkuaiyun.com/js/blog/tiny_mce/themes/advanced/langs/zh.js" mce_src="http://hi.images.youkuaiyun.com/js/blog/tiny_mce/themes/advanced/langs/zh.js"></mce:script><mce:script type="text/javascript" src="http://hi.images.youkuaiyun.com/js/blog/tiny_mce/plugins/syntaxhl/langs/zh.js" mce_src="http://hi.images.youkuaiyun.com/js/blog/tiny_mce/plugins/syntaxhl/langs/zh.js"></mce:script><head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>Untitled Document</title> <mce:script src="cssQuery/cssQuery-p.js" mce_src="cssQuery/cssQuery-p.js"></mce:script> </head> <body lang="en"> <h2>cssQuery Test Page</h2> <h3> <abbr> CSS </abbr> Level 1 </h3> <pre>#test1-1 p a {background-color: lime;}</pre> <div id="test1-1"> <p class="test link"> <span>This</span> is a <a href="www.baidu.com" mce_href="www.baidu.com" title="This is a link">test</a> link. </p> </div> <pre>#test1-2 :link {background-color: lime;}</pre> <div id="test1-2"> <p class="test link"> <span>This</span> is a <a href="#" mce_href="#" title="This is a link">test</a> link. </p> </div> <h3> <abbr> CSS </abbr> Level 2 </h3> <pre>#test2-1 p.test.link a {background-color: lime;}</pre> <div id="test2-1"> <p class="test link"> <span>This</span> is a <a href="#" mce_href="#" title="This is a link">test</a> link. </p> </div> <pre>#test2-2 p > a {background-color: lime;}</pre> <div id="test2-2"> <p class="test link"> <span>This</span> is a <a href="#" mce_href="#" title="This is a link">test</a> link. </p> </div> <pre>#test2-3 span + a {background-color: lime;}</pre> <div id="test2-3"> <p class="test link"> <span>This</span> is a <a href="#" mce_href="#" title="This is a link">test</a> link. </p> </div> <pre>#test2-4 p:first-child a {background-color: lime;}</pre> <div id="test2-4"> <p class="test link"> <span>This</span> is a <a href="#" mce_href="#" title="This is a link">test</a> link. </p> </div> <pre>#test2-5 a:lang(en) {background-color: lime;}</pre> <div id="test2-5"> <p class="test link"> <span>This</span> is a <a href="#" mce_href="#" title="This is a link">test</a> link. </p> </div> <pre>#test2-6 a[href] {background-color: lime;}</pre> <div id="test2-6"> <p class="test link"> <span>This</span> is a <a href="#" mce_href="#" title="This is a link">test</a> link. </p> </div> <pre>#test2-7 a[title="This is a link"] {background-color: lime;}</pre> <div id="test2-7"> <p class="test link"> <span>This</span> is a <a href="#" mce_href="#" title="This is a link">test</a> link. </p> </div> <pre>#test2-8 a[title~="is"] {background-color: lime;}</pre> <div id="test2-8"> <p class="test link"> <span>This</span> is a <a href="#" mce_href="#" title="This is a link">test</a> link. </p> </div> <pre>div[id|=test2-9] a {background-color: lime;}</pre> <div id="test2-9"> <p class="test link"> <span>This</span> is a <a href="#" mce_href="#" title="This is a link">test</a> link. </p> </div> <h3> <abbr> CSS </abbr> Level 3 </h3> <pre>#test3-1 span ~ a {background-color: lime;}</pre> <div id="test3-1"> <p class="test link"> <span>This</span> is a <a href="#" mce_href="#" title="This is a link">test</a> link. </p> </div> <pre>#test3-2 p:last-child a {background-color: lime;}</pre> <div id="test3-2"> <p class="test link"> <span>This</span> is a <a href="#" mce_href="#" title="This is a link">test</a> link. </p> </div> <pre>#test3-3 a:contains("test") {background-color: lime;}</pre> <div id="test3-3"> <p class="test link"> <span>This</span> is a <a href="#" mce_href="#" title="This is a link">test</a> link. </p> </div> <pre>#test3-4 p :not(span) {background-color: lime;}</pre> <div id="test3-4"> <p class="test link"> <span>This</span> is a <a href="#" mce_href="#" title="This is a link">test</a> link. </p> </div> <pre>#test3-5 p:only-child a {background-color: lime;}</pre> <div id="test3-5"> <p class="test link"> <span>This</span> is a <a href="#" mce_href="#" title="This is a link">test</a> link. </p> </div> <pre>#test3-6 p *:nth-child(even) {background-color: lime;}</pre> <div id="test3-6"> <p class="test link"> <span>This</span> is a <a href="#" mce_href="#" title="This is a link">test</a> link. </p> </div> <pre>#test3-7 p *:nth-last-child(2n+1) {background-color: lime;}</pre> <div id="test3-7"> <p class="test link"> <span>This</span> is a <a href="#" mce_href="#" title="This is a link">test</a> link. </p> </div> <pre>:root #test3-8 a {background-color: lime;}</pre> <div id="test3-8"> <p class="test link"> <span>This</span> is a <a href="#" mce_href="#" title="This is a link">test</a> link. </p> </div> <pre>#test3-9 a[title^="This"] {background-color: lime;}</pre> <div id="test3-9"> <p class="test link"> <span>This</span> is a <a href="#" mce_href="#" title="This is a link">test</a> link. </p> </div> <pre>#test3-10 a[title*="is a"] {background-color: lime;}</pre> <div id="test3-10"> <p class="test link"> <span>This</span> is a <a href="#" mce_href="#" title="This is a link">test</a> link. </p> </div> <pre>#test3-11 a[title$="link"] {background-color: lime;}</pre> <div id="test3-11"> <p class="test link"> <span>This</span> is a <a href="#" mce_href="#" title="This is a link">test</a> link. </p> </div> </body> </html>

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

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

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

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

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

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

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

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

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

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

就可用如下代码获得:

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

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