jquery应用—— 查找元素相关(选择器);

子元素选择器:

    //  大前提: 所选的 都是 修饰div的... div 是它父元素(没有限定)的第一个孩子吗?是最后一个孩子吗?是第index个孩子吗?是唯一的孩子吗?
    $('div:first-child') // 匹配所有为第一个元素的div
    $('div:last-child') // 匹配所有为最后一个元素的div
    $('div:nth-child(index)') // 匹配所有索引值为 index的div
    $('div:only-child') // 匹配所有 为父元素唯一子元素的div
    // 1.9+
    // 大前提 div:first-of-type 是一个整体 最后的结果 是父元素(div) 的第一个为div的元素,最后一个元素;
    $('div:first-of-type') // 匹配所有为div内第一个元素的div
    $('div:last-of-type') // 匹配所有为div内最后一个元素的div
    $('div:nth-of-type(index)') // 匹配所有为div内索引值为index 的div元素

混淆选择器:

用在类选择器或者ID选择器中包含一些CSS特殊字符的时候;

基本选择器:

$('*')

$( '#id')

$('.class')

$('element')  // div p span ...

层级选择器:

$('parent children') // parent 所有子元素;
$('parent > children') // parent 直接子元素;
$('prev + next') // prev 后所有next 元素;
$('prev ~ siblings') // 匹配所有sibllings 的兄弟元素;

属性选择器: 

$('div[attr]') // 选出所有拥有属性 attr 的 div
$('div[attr = value]') // 选出所有属性attr = value 的div
$('div[attr != value]') // 选出所有具有属性attr 且attr不为value的div
$('div[attr ^= value]') // 选出所有attr 的值 以value 开头的div
$('div[attr $= value]') // 选出所有attr 的值 以value 结尾的div
$('div[attr *= value]') // 选出所有attr 的值 包含value 的div
$('div[attr][attr1][attr2='value']') // 选出所有拥有且满足条件的div

基本筛选器:

  
    $('div:first') // 选择出的jquery元素组中的第一个div
    $('div:last') // 选择出的jquery元素组中的最后一个div
    $('div:not(selector)') // 将选出jquery对象组中的满足selector 条件的 对象去除;
    $('div:even');$('div:odd') // 匹配所有索引值为偶数/基数的元素;
    $('div:eq(index)') // 匹配索引值为index的元素;
    $('div:gt(index)') // 匹配所有索引值大于index的元素;
    $('div:lt(index)') // 匹配所有索引值小于index的元素;
    $(':header')  // 匹配所有的header(h1-h6)元素;
    $(':animated')  // 匹配所有正在运动的元素;
    $(':focus') // 匹配当前获得焦点的元素;
    // 1.9+
    $('div:lang(language)') // 匹配一个语言值所提供的语言代码;
    $(':root') // 文档根目录;html元素;
    $(':target') // http://jquery.cuishifeng.cn/target.html

内容选择器:

    $('div:contains(text)') // 匹配包含给定文本的元素;
    $('div:has(selector)') // 匹配包含给定元素的元素;
    $('div:empty') // 匹配包含的空元素;
    $('div:parent') // 匹配所有拥有子元素或者文本的元素;所有有内容的元素; 
    // <div class="demo">div</div> demo 满足
    // <div class="demo"><div class="demo1"></div></div> demo 满足 demo1 不满足

可见性选择器:

    $('div:visible') // 匹配所有可见元素
    $('div:hidden') // 匹配所有不可见元素,或者type值(首先元素得有type) 为hidden

表单元素选择器:

:input 匹配所有input元素;

:text :password :radio :checkbox :submit :image :reset :button file匹配所有type 为text,password,radio,checkbox,submit,image,reset,button,file的元素;

表单对象属性选择器:

:enabled 可操作

:disabled 不可操作

:checked 已选择

:selected 已选择

  • 0
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值