美文网首页
jQuery内容整理——选择器

jQuery内容整理——选择器

作者: 郭子林 | 来源:发表于2016-07-06 20:46 被阅读21次
    基本选择器

    id选择器$('#mydiv'),若id里包含特殊字符使用转义字符处理\\
    元素选择器$('div');
    class选择器$('.myclass')
    *选择器$('*');
    复合选择器$('p,.myclass,#myid')

    层级选择器

    匹配所有后代$('div p');
    子代选择器$('div > p');
    兄弟相邻$('lable + input')匹配所有跟在 label 后面的 input 元素
    同辈$('form ~ input')找到所有与form同辈的 input 元素

    伪类选择器

    :first 第一个元素
    :last 最后一个元素
    :not(selector) 去除所有selector匹配的元素
    :even 索引值为偶数的元素,从 0 开始计数
    :odd 索引值为奇数的元素,从 0 开始计数
    :eq(index) 等于
    :gt(index) 大于
    :lt(index)小于
    :header 匹配h1,h2,h3,h4,h5,h6 $(':header')
    :animated 正在执行动画的元素
    :focus 获取到焦点$('selecctor:focus')

    内容选择器

    :contains(text) 匹配包含给定文本的元素$("p:contains('jhon')")
    :empty 匹配所有不包含子元素或者文本的空元素 $('div:empty')
    :has(selector)匹配含有选择器所匹配的元素的元素$('div:has(p)')
    :parent 匹配含有子元素或者文本的元素$('div:parent')

    可见性

    :hidden 选中display:none或者type=hidden的元素
    :visible 匹配所有可见元素

    属性

    [attr] 匹配包含给定属性的元素 $('div[id]')
    [attr=value] 匹配给定的属性是某个特定值的元素 $('div[id='test']')
    [attr!=value] 匹配所有不含有指定的属性,或者属性不等于特定值的元素。$("input[name!='news']")
    [attr^=value] 匹配给定的属性是以某些值开始的元素$("input[name^='news']") name="newsletter" name="newsboy" 均可被选中
    [attr$=value] 匹配给定的属性是以某些值结尾的元素$("input[name$='news']")
    [attr*=value] 匹配给定的属性是以包含某些值的元素$("input[name*='new']")
    [attrSel1][attrSel2][attrSelN]复合属性选择器,需要同时满足多个条件时使用。$("input[id][name$='man']")包含ID属性并且name的值以man结尾。

    子元素

    :nth-child()匹配其父元素下的第N个子或奇偶元素 $('ul li:nth-child(3)')从1开始
    :first-child 匹配第一个子元素 $("ul li:first-child")
    :last-child() 匹配第一个子元素 $("ul li:last-child")
    :only-child() 如果某个元素是父元素中唯一的子元素,那将会被匹配

    表单

    基本不用下面这些选择器,别的完全可以代替这些
    $(":input") 匹配所有 input, textarea, select 和 button 元素
    $(":text")匹配所有的单行文本框 <input type="text" />
    $(":password")匹配所有密码框 <input type="password" />
    $(":radio")匹配所有单选按钮 <input type="radio" />
    $(":checkbox") 匹配所有复选框 <input type="checkbox" />
    $(":submit")匹配所有提交按钮 <input type="submit" />
    $(":image")匹配所有图像域<input type="image" />
    $(":reset")匹配所有重置按钮 <input type="reset" />
    $(":button")匹配所有按钮[ <input type="button" />,<button></button> ]
    $(":file")匹配所有文件域 <input type="file" />
    $("input:hidden")匹配所有不可见元素,或者type为hidden的元素
    $("input:enabled") 匹配所有可用(非disabled)元素
    $("input:disabled")
    $("input:checked") 选中的单选框或者复选框
    $("select option:selected")匹配所有选中的option元素

    相关文章

      网友评论

          本文标题:jQuery内容整理——选择器

          本文链接:https://www.haomeiwen.com/subject/afpkjttx.html