Introduction
jQuery最方便的地方便是各种选择器。jQuery选择器完美兼容CSS 3选择器,甚至还有更强大的功能。
$
在jQuery程序中,最常见的就是$符号,那么$到底是什么意思呢?
其实,JavaScript的命名规范中,允许以$开头命名变量,而jQuery则将$作为别名使用,也就是说:
$ = jQuery = window.$ = window.jquery
利用$,你可以简化大量的代码量,减少你的代码体积。
jQuery选择器
虽然JavaScript提供了getElementsByClassName()和getElementsByTagName()的方法,但是并不是所有浏览器都能正确的解析,所以不推荐使用原生态JavaScript代码。
jQuery对上述问题做了兼容性处理,当浏览器支持以上方法时,jQuery调用该方法,否则,jQuery有自己的实现,确保在不同浏览器下都能生效。
下面给出jQuery选择器的几个例子:
*
选择页面所有的元素
a
选择页面所有链接元素(a元素)
#selected-id
选择页面ID为selected-id的元素,如:
csprojectedu.com
—|—
选择这个标签的jQuery代码为:
$(‘#selected-id’);
—|—
.selected-class
选择页面class为selected-class的元素,如:
csprojectedu.com
—|—
选择这个标签的jQuery代码为:
$(‘.selected-class’);
—|—
.selected-classA.selected-classB
选择页面class为selected-classB且包含在selected-classA中的元素,如:
csprojectedu.com
—|—
选择这个标签的jQuery代码为:
$(‘.selected-classA.selected-classB’);
—|—
[selected-property]
选择页面属性为selected-property的元素,如:
csprojectedu.com
—|—
选择这个标签的jQuery代码为:
$(‘[selected-property]’);
—|—
jQuery选择器高级用法
在实际编程中,只使用基础选择器是不够的,除非你愿意给每一个需要的元素建立ID或者Class,下面给出一些技巧:
层级选择器
可以根据DOM层级来选择元素,如:
csprojectedu.com
—|—
可以这样来选择:
$(‘A > B > C’);
—|—
属性选择器
可以根据部分属性来选择元素,如:
—|—
可以这样来选择:
$(‘a[href^=”http://“]’);
—|—
^是匹配开头的意思,这样可以找到所有以http开头的链接元素。
反过来你也可以通过:
$(‘a[href^!=”http://“]’);
—|—
选择所有非http开头的链接元素。
事实上还有更多比较灵活的选择器,如伪选择器等。更多选择器使用语法,可以参考W3School的 CSS教程 ,这里不再赘述。
Summary
本文简单介绍了jQuery的选择器,选择器并不是jQuery
3特有的东西,本系列文章也不会深入去探索。如何精妙简洁地使用选择器,不是jQuery的重点,而是CSS的重点。此外,虽然jQuery有许多精妙的选择器使用方法,但是过于注重代码的精简,实际将会增加代码的可读性和维护难度。
(本文出自 csprojectedu.com
,转载请注明出处)