jquery 中多条件选择器,相对选择器,层次选择器的区别

 更新时间:2012年07月03日 11:16:43   转载 作者:  
jquery 中多条件选择器,相对选择器,层次选择器的区别介绍,需要的朋友可以参考下
一、Jquery常用的过滤选择器如下所示:

1、:first,选取第一个元素,比如$("div:first")选取第一个div元素

2、:last,选取最后一个元素,比如$("div:last")选取最后一个div元素

3、:not(选择器),选取不满足“选择器”条件的元素,比如$("div:not(.className)"),选取样式不是className的所有div元素

4、:even/:odd,选取索引为偶数/奇数的元素,比如$("div:even"),选取索引号为偶数的所有div元素

5、:eq(索引序号)/:gt(索引序号)/:lt(索引序号),选取等于索引号/大于索引号/小于索引号的元素,比如$("div:lt(3)"),选取索引号小于3的所有div元素

注意:

过滤选择器的混合使用时要记住后面的过滤条件是以前面的过滤选择器过滤后的重新序号为基础,即过滤的逐级性,比如

$("#t1 tr:gt(0):lt(3)").css("fontSize", "28"); //lt(3)是从gt(0)出的新序列中的序号,不要写成lt(4)





二,重点

多条件选择器
多条件选择器:$("p,div,span,menuitem"),同时选择p标签,div标签,和拥有menuitem样式的span标签元素
注意选择器表达式中的空格不能多不能少,易错!

相对选择器

只要在$()指定第二个参数,第二个参数为相对的元素。比如html代码如下
复制代码 代码如下:

<table id="table1">
<tr><td>dsds</td><td>dsfdef</td></tr>
<tr><td>dsds</td><td>dsfdef</td></tr>
<tr><td>dsds</td><td>dsfdef</td></tr>
<tr><td>dsds</td><td>dsfdef</td></tr>
<tr><td>dsds</td><td>dsfdef</td></tr>
</table>

那么可以用如下的js代码操作td的背景色
$("td", $(this)).css("background", "red"),这句代码用的就是相对选择器,选择出的td是以当前的tr为相对的元素。选择的td元素是当前的tr元素下的所有td元素,没有涉及到其他行的td元素

复制代码 代码如下:

<script type="text/javascript">
$(function () {
$("#table1 tr").click(function () {
$("td", $(this)).css("background", "red");
});
});
</script>

层次选择器:
1 $("#div li")获取div下的所有li元素(后代,子,子的子....)
2 $("#div > li")获取div下的直接li子元素//注意空格
3 $(".menuitem + div")获取样式名为menuitem之后的第一个div元素,不常用。
3 $(".menuitem ~ div")获取样式名为menuitem之后的所有的div元素,不常用。

细节区别在于(易错点):
多条件选择器:$("p,div,span,menuitem"),相对选择器:$("td", $(this)).css("background", "red")",层次选择器:$("#div li")获取div下的所有li元素(后代,子,子的子....)

三者的区别是:

多条件选择器:在一个“”内有逗号区分,

相对选择器:2个元素分开 ,

层次选择器在一个“”内以空格区分

相关文章

  • ASP.NET jQuery 实例13 原创jQuery文本框字符限制插件-TextArea Counter

    ASP.NET jQuery 实例13 原创jQuery文本框字符限制插件-TextArea

    这节介绍一个自己写的jQuery文本框字符限制插件,至于如何写插件,我这里就不多讲了,可以查看相关介绍,这里主要介绍下该插件的功能
    2012-02-02
  • 基于jQuery实现放大镜效果

    基于jQuery实现放大镜效果

    这篇文章主要介绍了基于jQuery实现放大镜效果,一般应用于放大查看商品图片,需要的朋友可以参考下
    2015-12-12
  • 深入学习jQuery中的data()

    深入学习jQuery中的data()

    大家应该都会有这样一种感觉,data函数在jQuery中看起来很不起眼, 就像沙滩上一颗平凡的沙子, 但仔细一瞅, 却惊讶的发现data是jQuery中无比重要的一环, 甚至jQuery中各种事件都基于此。下面就来详细深入的学习下jQuery中的data(),感兴趣的朋友们可以参考借鉴。
    2016-12-12
  • jquery实现键盘左右翻页特效

    jquery实现键盘左右翻页特效

    jQuery实现网页上键盘左右方向键翻页代码,我们在很多小说网站经常看到这样的效果,这样可以给网站提高用户体验,方便访客翻页使用,从而大大提高了网站PV
    2015-04-04
  • domReady的实现案例

    domReady的实现案例

    下面小编就为大家带来一篇domReady的实现案例。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2016-11-11
  • jquery dataTable 获取某行数据

    jquery dataTable 获取某行数据

    本篇文章主要介绍了jquery dataTable 获取某行数据的相关知识,具有很好的参考价值。下面跟着小编一起来看下吧
    2017-05-05
  • jQuery实现判断控件是否显示的方法

    jQuery实现判断控件是否显示的方法

    这篇文章主要介绍了jQuery实现判断控件是否显示的方法,涉及jQuery针对页面元素属性相关操作技巧,需要的朋友可以参考下
    2017-01-01
  • Jquery each方法跳出循环,并获取返回值(实例讲解)

    Jquery each方法跳出循环,并获取返回值(实例讲解)

    这篇文章主要是对Jquery each方法跳出循环,并获取返回值进行了详细的介绍,需要的朋友可以过来参考下,希望对大家有所帮助
    2013-12-12
  • jQuery mobile在页面加载时添加加载中效果 document.ready 和window.onload执行顺序比较

    jQuery mobile在页面加载时添加加载中效果 document.ready 和win

    这篇文章主要介绍了jQuery mobile在页面加载时添加加载中效果 document.ready 和window.onload执行顺序比较,非常不错,具有参考借鉴价值,需要的朋友可以参考下
    2016-07-07
  • JQuery1.4+ Ajax IE8 内存泄漏问题

    JQuery1.4+ Ajax IE8 内存泄漏问题

    将JQuery1.2.6升级到JQuery1.4,有几天下班没有关闭ajax轮询网页,第二天早上来,内存耗尽,发现此内存泄漏在IE6上不存在(IE7未测试),IE8上存在
    2010-10-10

最新评论