jQuery的选择器

选择器

①普通选择方法,略
②选择其中的c,要求是b里的c

<div class="a">
    <div class="b">
        <div class="c">
        </div>
    </div>
    <div class="c">
    </div>
</div>

方法:

$(".a .b .c")

关键之处是.a、.b、.c之间要有空格。
③下面转一个帖子:

    $("#myELement")    //选择id值等于myElement的元素,id值不能重复在文档中只能有一个id值是myElement所以得到的是唯一的元素
    $("div")           //选择所有的div标签元素,返回div元素数组
    $(".myClass")      //选择使用myClass类的css的所有元素
    $("*")             //选择文档中的所有的元素,可以运用多种的选择方式进行联合选择:例如$("#myELement,div,.myclass")
 
    //层叠选择器:
    $("form input")         //选择所有的form元素中的input元素
    $("#main > *")          //选择id值为main的所有的子元素
    $("label + input")    //选择所有的label元素的下一个input元素节点,经测试选择器返回的是label标签后面直接跟一个input标签的所有input标签元素
    $("#prev ~ div")       //同胞选择器,该选择器返回的为id为prev的标签元素的所有的属于同一个父元素的div标签
 
    //基本过滤选择器:
    $("tr:first")               //选择所有tr元素的第一个
    $("tr:last")                //选择所有tr元素的最后一个
    $("input:not(:checked) + span")
 
    //过滤掉:checked的选择器的所有的input元素
    $("tr:even")              //选择所有的tr元素的第0,2,4... ...个元素(注意:因为所选择的多个元素时为数组,所以序号是从0开始)
    $("tr:odd")               //选择所有的tr元素的第1,3,5... ...个元素
    $("td:eq(2)")             //选择所有的td元素中序号为2的那个td元素
    $("td:gt(4)")             //选择td元素中序号大于4的所有td元素
    $("td:ll(4)")             //选择td元素中序号小于4的所有的td元素
    $(":header")
    $("div:animated")
 
    //内容过滤选择器:
    $("div:contains('John')") //选择所有div中含有John文本的元素
    $("td:empty")            //选择所有的为空(也不包括文本节点)的td元素的数组
    $("div:has(p)")        //选择所有含有p标签的div元素
    $("td:parent")          //选择所有的以td为父节点的元素数组
 
    //可视化过滤选择器:
    $("div:hidden")        //选择所有的被hidden的div元素
    $("div:visible")        //选择所有的可视化的div元素
 
    //属性过滤选择器:
    $("div[id]")              //选择所有含有id属性的div元素
    $("input[name='newsletter']")    //选择所有的name属性等于'newsletter'的input元素
    $("input[name!='newsletter']") //选择所有的name属性不等于'newsletter'的input元素
    $("input[name^='news']")         //选择所有的name属性以'news'开头的input元素
    $("input[name$='news']")         //选择所有的name属性以'news'结尾的input元素
    $("input[name*='man']")          //选择所有的name属性包含'news'的input元素
    $("input[id][name$='man']")    //可以使用多个属性进行联合选择,该选择器是得到所有的含有id属性并且那么属性以man结尾的元素
 
    //子元素过滤选择器:
    $("ul li:nth-child(2)")     //选择ul标签下,第2个li标签
    $("ul li:nth-child(odd)")   //选择ul标签下,偶数个li元素(even奇数个)
    $("ul li:nth-child(3n + 1)")    //选择ul标签下,第3n+1个li标签(n从0开始)
    $("div span:first-child")          //返回所有的div元素的第一个子节点的数组
    $("div span:last-child")           //返回所有的div元素的最后一个节点的数组
    $("div button:only-child")       //返回所有的div中只有唯一一个子节点的所有子节点的数组
 
    //表单元素选择器:
    $(":input")                  //选择所有的表单输入元素,包括input, textarea, select 和 button
    $(":text")                     //选择所有的text input元素
    $(":password")
    0// 选择所有的password input元素
    $(":radio")                   //选择所有的radio input元素
    $(":checkbox")            //选择所有的checkbox input元素
    $(":submit")               //选择所有的submit input元素
    $(":image")                 //选择所有的image input元素
    $(":reset")                   //选择所有的reset input元素
    $(":button")                //选择所有的button input元素
    $(":file")                     //选择所有的file input元素
    $(":hidden")               //选择所有类型为hidden的input元素或表单的隐藏域
 
    //表单元素过滤选择器:
    $(":enabled")             //选择所有的可操作的表单元素
    $(":disabled")            //选择所有的不可操作的表单元素
    $(":checked")            //选择所有的被checked的表单元素
    $("select option:selected") //选择所有的select 的子元素中被selected的元素
 
    //选取一个 name 为”S_03_22″的input text框的上一个td的text值
    $(”input[@ name =S_03_22]“).parent().prev().text()
 
    //名字以”S_”开始,并且不是以”_R”结尾的
    $(”input[@ name ^='S_']“).not(”[@ name $='_R']“)
 
    //一个名为 radio_01的radio所选的值
    $(”input[@ name =radio_01][@checked]“).val();
 
    $("A B") //查找A元素下面的所有子节点,包括非直接子节点
    $("A>B") //查找A元素下面的直接子节点
    $("A+B") //查找A元素后面的兄弟节点,包括非直接子节点
    $("A~B") //查找A元素后面的兄弟节点,不包括非直接子节点
 
    $("A B") //查找A元素下面的所有子节点,包括非直接子节点

根据推断,以上代码应该可以应用到写样式表的时候;

例子:找到表单中所有的 input 元素
 
HTML 代码:
 
<form>
<label>Name:</label>
<inputname="name" />
<fieldset>
      <label>Newsletter:</label>
      <input name="newsletter"/>
</fieldset>
</form>
<inputname="none" />
jQuery 代码:
 
$("forminput")
结果:
 
[ <inputname="name" />, <input name="newsletter" /> ]
 
2.$("A>B") 查找A元素下面的直接子节点
例子:匹配表单中所有的子级input元素。
 
HTML 代码:
 
<form>
<label>Name:</label>
<inputname="name" />
<fieldset>
      <label>Newsletter:</label>
      <input name="newsletter"/>
</fieldset>
</form>
<inputname="none" />
jQuery 代码:
 
$("form >input")
结果:
 
[ <inputname="name" /> ]
 
3.$("A+B") 查找A元素后面的兄弟节点,包括非直接子节点
例子:匹配所有跟在 label 后面的 input 元素
 
HTML 代码:
 
<form>
<label>Name:</label>
<inputname="name" />
<fieldset>
      <label>Newsletter:</label>
      <input name="newsletter"/>
</fieldset>
</form>
<inputname="none" />
jQuery 代码:
 
$("label +input")
结果:
 
[ <inputname="name" />, <input name="newsletter" /> ]
 
 
4.$("A~B") 查找A元素后面的兄弟节点,不包括非直接子节点
例子:找到所有与表单同辈的 input 元素
 
HTML 代码:
 
<form>
<label>Name:</label>
<inputname="name" />
<fieldset>
      <label>Newsletter:</label>
      <input name="newsletter"/>
</fieldset>
</form>
<inputname="none" />
jQuery 代码:
 
$("form ~input")
结果:
 
[ <inputname="none" /> ]
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 214,029评论 6 493
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 91,238评论 3 388
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 159,576评论 0 349
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 57,214评论 1 287
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 66,324评论 6 386
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 50,392评论 1 292
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 39,416评论 3 412
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 38,196评论 0 269
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 44,631评论 1 306
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 36,919评论 2 328
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 39,090评论 1 342
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 34,767评论 4 337
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 40,410评论 3 322
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 31,090评论 0 21
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,328评论 1 267
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 46,952评论 2 365
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 43,979评论 2 351

推荐阅读更多精彩内容