欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

JQuery选择器

程序员文章站 2022-07-13 13:11:30
...
JQuery选择器是JQuery的根基,事件处理,DOM遍历,Ajax实现都依赖于JQuery的选择器
其最大的优点就是将HTML代码和JS代码分离。
如下例所示

<script type="text/javascript">
function demo() {
alert("click");
}
</script>
<p onclick="demo();">demo</p>

这是没用到JQuery的手写JavaScript
若用到JQuery的话,上面代码可以等价如下实现

<script type="text/javascript">
$(function(){
$(".demo").click(function(){
alert("click");
})
});
</script>
<p class="demo">demo</p>

如例子中所示$()就是JQuery的选择器函数,如$("#ID"),$("TagName"),$(".class")
等等[b](需要注意的是通过JQuery选择器函数获取到的永远是一个类似于数组的对象,即使该节点不存在也会获取到该对象只不过该对象的length为0)[/b]所以判断有没有该节点不能用if($("#ID"))之类的还应该用if($("ID").length>0)或者直接转化为DOM对象来判断if($("#ID")[0])
JQuery选择器分为:基本选择器,层次选择器,过滤选择器,表单选择器

基本选择器是JQuery中最常用的选择器,利用元素的ID,标签名,或者Class属性来选择DOM元素
如下图所示
[img]http://dl.iteye.com/upload/attachment/244813/5eb3fdcc-7000-3276-8aa5-86cb5b49d55d.jpg[/img]
如果想通过DOM元素之间的层次关系来查找特定元素那么层次选择器就可以很方便的做到这一点
层次选择器有四种
某个元素内的指定元素 如
$("body div")

某个元素的指定子元素 如
$("body > div")

某个元素的下一个指定元素 如
$(".one" + div)

某个元素后的所有指定同辈元素 如
$("#two ~ div")

其中前两个用的比较多,而后两个可以用next()和nextAll方法替代
以上都是获得类似于数组的JQUERY对象
过滤选择器又分基本过滤选择器,内容过滤选择器,可见性过滤选择器,属性过滤选择器