zoukankan      html  css  js  c++  java
  • Jquery中选择器

    1.基本选择器
    *:所有元素选择器
    例如:$("*").css("border","3px solid red"),表示为网页中的所有元素增加一个Border的css

    #id:id选择器
    每个id值必须是在一个文件中只能使用一次。如果一个以上的元素分配了相同的ID,查询将只选择该ID第一个匹配的DOM元素
    $("#test"),选中网页中id为test的元素

    .class:类选择器,选择给定类名的所有元素。
    $(".test"),选择类名为test的所有元素

    element:元素选择器
    选择所有的element元素
    $(p):选择中页面中所有的p元素

    selector1,selector2,....:组合选择器
    将每一个选择器匹配到的元素合并后一起返回。
    你可以指定任意多个选择器,并将匹配到的元素合并到一个结果内。
    $("P,#test,.te")选中所有的p元素,和id为test的元素,类名为te的元素

    2.层级选择器
    $("ancestor descendant "):选择所有给定的祖先的后代元素,一个元素的后代可能是该元素的一个孩子,孙子,曾孙等。
    例如$("from input")选择所有的form下的input

    $("parent>child"):选择所有通过“parent”给定的元素直接子元素,该子元素“child”给定。

    $("prev+next"):查找所有紧接在 prev 元素后的 next 元素
    $("prev~siblings"):匹配 “prev” 元素之后的所有 “siblings” 元素。
    (prev + next) 和 (prev ~ siblings)之间最值得注意的不同点是他们各自的可及之范围。前者只达到紧随的同级元素,后者扩展了该达到跟随其的所有同级元素。

    3.属性选择器
    $("div[id]"):选择拥有id属性的所有div元素
    $("div[id=‘test’]"):选择id属性值等于test的所有div元素
    $("div[id*=’test‘]"):选择id属性值包含test字符串的所有div元素
    $("div[id!=‘test’]"):选择id属性值不等于test的所有div元素
    $("div[id^='test']"):选择id属性值以test字符串开始的所有div元素
    $("div[id$='test']"):选择id属性值以test字符串结束的所有div元素,这个比较是区分大小写的
    $("div[id|='test']"):选择id属性等于test或以该字符串为前缀("test-” )的元素。
    [selector1][selector2][selectorN]复合属性选择器,需要同时满足多个条件时使用。
    $("input[id][name$='man']") :选择包含id属性并且name属性以man字符串结尾的所有input元素

    4.简单的过滤选择器
    $(":animated"):匹配所有正在执行动画效果的元素
    $("div:not(:animated)"):匹配所有停止在执行动画效果的div
    $("div:eq(index)"):选择索引值为index的div元素,index从0开始
    :even,匹配所有索引值为偶数的元素,从 0 开始计数
    $("tr:even”):选择索引值为偶数的tr
    $("tr:odd”):选择索引值为奇数的tr
    $("tr:gt(index)"):选择索引值大于index的tr元素,index从0开始
    $("tr:lt(index)"):选择索引值小于index的tr元素,index从0开始
    $("tr:first)"):选择第一个tr元素
    $("tr:last)"):选择最后一个tr元素
    $(":header"):选择所有标题元素,像h1, h2, h3 等.
    :not():选择所有去除不匹配给定的选择器的元素。
    $("div:not(.test)"):选择class名不是test的div

    5.可见性选择器
    $("hide”):选择所有隐藏的元素
    $("Visible"):选择所有可见的元素

    6.子元素选择器
    :first-child
    选择所有父级元素下的第一个子元素,first只匹配一个单独的元素,但是first-child选择器可以匹配超过一个:为每个父级元素匹配第一个子元素。这相当于:nth-child(1)
    :last-child与上面相反
    :only-child,如果某个元素是父元素中唯一的子元素,那将会被匹配
    :nth-child,选择其父元素下的第N个子或奇偶元素。
    通常可以使用的样式有
    :nth-child(even)
    :nth-child(odd)
    :nth-child(3n)
    :nth-child(2)
    :nth-child(3n+1)
    :nth-child(3n+2)

    7.内容选择器
    :contains(text),匹配包含给定文本的元素
    $("div:contains('test')"):选择div的内容中有test字符串的div
    :empty,匹配不含有任何子元素的元素
    :has(selector),匹配含有选择器所匹配的元素的元素
    $("div:has(p)"):选择包含p元素的所有div元素
    :parent匹配含有子元素或者文本的元素

    8.表单选择器
    $(":button"):匹配所有的type为button的form内的元素
    相关:checkbox,input,text,image等
    9.表单属性选择器
    :checked,匹配所有选中的被选中元素(复选框、单选框等,不包括select中的option)
    :disabled,匹配所有不可用元素
    :enabled,匹配所有可用元素
    :selected,匹配所有选中的option元素

  • 相关阅读:
    398. Random Pick Index
    382. Linked List Random Node
    645. Set Mismatch
    174. Dungeon Game
    264. Ugly Number II
    115. Distinct Subsequences
    372. Super Pow
    LeetCode 242 有效的字母异位词
    LeetCode 78 子集
    LeetCode 404 左叶子之和
  • 原文地址:https://www.cnblogs.com/ldqwyl/p/2024062.html
Copyright © 2011-2022 走看看