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 父元素停止

  • 相关阅读:
    正则表达式,re模块
    序列化(pickle,shelve,json,configparser)
    unity 模型 材质 贴图 关系;着色器属性
    Unity 控制public/private 是否暴露给Inspector面板
    Unity局部坐标系与世界坐标系的区别
    Unity脚本中可以引用的类型
    Unity 脚本挂载位置
    Unity 获取坐标函数 坐标转换函数
    Unity 烘焙的2种方式
    Unity官方宣传片Adam 播放地址
  • 原文地址:https://www.cnblogs.com/Xuman0927/p/5961139.html
Copyright © 2011-2022 走看看