Heim > Web-Frontend > js-Tutorial > juqery 学习之三 选择器 子元素与表单_jquery

juqery 学习之三 选择器 子元素与表单_jquery

WBOY
Freigeben: 2016-05-16 18:15:22
Original
1013 Leute haben es durchsucht

:nth-child(index/even/odd/equation)

匹配其父元素下的第N个子或奇偶元素
':eq(index)' 只匹配一个元素,而这个将为每一个父元素匹配子元素。:nth-child从1开始的,而:eq()是从0算起的!

可以使用:
nth-child(even)
:nth-child(odd)
:nth-child(3n)
:nth-child(2)
:nth-child(3n+1)
:nth-child(3n+2)


Matches the nth-child of its parent.

返回值

Array

参数

index (Number) : 要匹配元素的序号,从1开始

示例

在每个 ul 查找第 2 个li

HTML 代码:


     
  • John

  •  
  • Karl

  •  
  • Brandon



     
  • Glen

  •  
  • Tane

  •  
  • Ralph

jQuery 代码:

$("ul li:nth-child(2)")

结果:

[
  • Karl
  • ,  
  • Tane
  • ]
    --------------------------------------------------------------------------------

    :first-child

    匹配第一个子元素
    ':first' 只匹配一个元素,而此选择符将为每个父元素匹配一个子元素

    Matches the first child of its parent.

    返回值

    Array

    示例

    在每个 ul 中查找第一个 li

    HTML 代码:


       
    • John

    •  
    • Karl

    •  
    • Brandon



       
    • Glen

    •  
    • Tane

    •  
    • Ralph

    jQuery 代码:

    $("ul li:first-child")

    结果:

    [
  • John
  • ,
  • Glen
  • ]

    --------------------------------------------------------------------------------

    :last-child

    匹配最后一个子元素
    ':last'只匹配一个元素,而此选择符将为每个父元素匹配一个子元素

    Matches the last child of its parent.

    返回值

    Array

    示例

    在每个 ul 中查找最后一个 li

    HTML 代码:


       
    • John

    •  
    • Karl

    •  
    • Brandon



       
    • Glen

    •  
    • Tane

    •  
    • Ralph

    jQuery 代码:

    $("ul li:last-child")

    结果:

    [
  • Brandon
  • ,
  • Ralph
  • ]

    --------------------------------------------------------------------------------

    :only-child

    如果某个元素是父元素中唯一的子元素,那将会被匹配
    如果父元素中含有其他元素,那将不会被匹配。

    Matches the only child of its parent.

    返回值

    Array

    示例

    在 ul 中查找是唯一子元素的 li

    HTML 代码:


       
    • John

    •  
    • Karl

    •  
    • Brandon



       
    • Glen

    jQuery 代码:

    $("ul li:only-child")

    结果:

    [
  • Glen
  • ]

    --------------------------------------------------------------------------------

    :input

    匹配所有 input, textarea, select 和 button 元素

    返回值

    Array

    示例

    查找所有的input元素

    HTML 代码:


     
     
     
     
     
     
     
     
     
     
     
     

    jQuery 代码:

    $(":input")

    结果:

    [ , , , , , , , , ]

    --------------------------------------------------------------------------------

    :text

    匹配所有的单行文本框

    返回值

    Array

    示例

    查找所有文本框

    HTML 代码:


     
     
     
     
     
     
     
     
     
     
     
     

    jQuery 代码:

    $(":text")

    结果:

    [ ]

    --------------------------------------------------------------------------------

    :password

    匹配所有密码框

    返回值

    Array

    示例

    查找所有密码框

    HTML 代码:


     
     
     
     
     
     
     
     
     
     
     
     

    jQuery 代码:

    $(":password")

    结果:

    [ ]

    --------------------------------------------------------------------------------

    :radio

    匹配所有单选按钮

    返回值

    Array

    示例

    查找所有单选按钮

    HTML 代码:


     
     
     
     
     
     
     
     
     
     
     
     

    jQuery 代码:

    $(":radio")

    结果:

    [ ]

    --------------------------------------------------------------------------------

    :submit

    匹配所有提交按钮

    返回值

    Array

    示例

    查找所有提交按钮

    HTML 代码:


     
     
     
     
     
     
     
     
     
     
     
     

    jQuery 代码:

    $(":submit")

    结果:

    [ ]


    其他的一些 都是一样的道理:image   ,:reset,:button,:file,:hidden !@#@!%$%
    Verwandte Etiketten:
    Quelle:php.cn
    Erklärung dieser Website
    Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
    Beliebte Tutorials
    Mehr>
    Neueste Downloads
    Mehr>
    Web-Effekte
    Quellcode der Website
    Website-Materialien
    Frontend-Vorlage