zoukankan      html  css  js  c++  java
  • 第 4 章 过滤选择器

    学习要点:

    1.基本过滤器

    2.内容过滤器

    3.可见性过滤器

    4.子元素过滤器

    5.其他方法

    $('li:first').css('background','#ccc'); //第一个元素
    $('li:last).css('background','#ccc'); //最后一个元素
    $('li:not(.red)).css('background','#ccc'); //非 class 为 red 的元素
    $('li:even').css('background','#ccc'); //索引为偶数的元素
    $('li:odd).css('background', '#ccc'); //索引为奇数的元素
    $('li:eq(2)).css('background','#ccc'); //指定索引值的元素
    $('li:gt(2)').css('background','#ccc'); //大于索引值的元素
    $('li:lt(2)').css('background','#ccc'); //小于索引值的元素
    $(':header').css('background','#ccc'); //页面所有 h1~h6 元素

    注意::focus 过滤器,必须是网页初始状态的已经被激活焦点的元素才能实现元素获取。 而不是鼠标点击或者 Tab 键盘敲击激活的。 $('input').get(0).focus(); //先初始化激活一个元素焦点 $(':focus').css('background','red'); //被焦点的元素

    jQuery 为最常用的过滤器提供了专用的方法,已达到提到性能和效率的作用:
    $('li').eq(2).css('background','#ccc'); //元素 li 的第三个元素,负数从后开始
    $('li').first().css('background','#ccc'); //元素 li 的第一个元素
    $('li').last().css('background','#ccc'); //元素 li 的最后一个元素
    $('li').not('.red').css('background','#ccc'); //元素 li 不含 class 为 red 的元素
    注意::first、:last 和 first()、last()这两组过滤器和方法在出现相同元素的时候,first 会 实现第一个父元素的第一个子元素,last 会实现最后一个父元素的最后一个子元素。所以, 如果需要明确是哪个父元素,需要指明: $('#boxli:last').css('background','#ccc'); //#box 元素的最后一个 li //或 $('#boxli).last().css('background','#ccc'); //同上

    //选择元素文本节点含有 ycku.com 文本的元素
    $('div:contains("ycku.com")').css('background', '#ccc');
    $('div:empty').css('background','#ccc'); //选择空元素
    $('ul:has(.red)').css('background','#ccc'); //选择子元素含有 class 是 red 的元素
    $(':parent').css('background','#ccc'); //选择非空元素
    jQuery 提供了一个 has()方法来提高:has 过滤器的性能:
    $('ul').has('.red').css('background','#ccc'); //选择子元素含有 class 是 red 的元素
    jQuery 提供了一个名称和:parent 相似的方法,但这个方法并不是选取含有子元素或文本 的元素,而是获取当前元素的父元素,返回的是元素集合。 $('li').parent().css('background','#ccc'); //选择当前元素的父元素
    $('li').parents().css('background','#ccc'); //选择当前元素的父元素及祖先元素
    $('li').parentsUntil('div').css('background','#ccc');//选择当前元素遇到 div 父元素停止

  • 相关阅读:
    Python全栈day19(函数补充)
    Python全栈day18(三元运算,列表解析,生成器表达式)
    Python全栈day18(迭代器协议和for循环工作机制)
    KVM虚拟化
    Python使用函数实现把字符串转换成整数
    MySQL备份1356错误提示修复办法
    Python全栈day17(文件处理)
    CentOS添加PHP至环境变量
    CentOS7.2编译配置LNMP环境(MySQL5.7.20,PHP7.0.24)
    php查询mysql数据库 查询条件替中文字符串变量时无法查询
  • 原文地址:https://www.cnblogs.com/Xuman0927/p/5961139.html
Copyright © 2011-2022 走看看