Home > Web Front-end > JS Tutorial > Juqery Learning 3 Selector Sub-Elements and Forms_jquery

Juqery Learning 3 Selector Sub-Elements and Forms_jquery

WBOY
Release: 2016-05-16 18:15:22
Original
1014 people have browsed it

: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 code:

    $(":password")

    Result:

    [ ]

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

    :radio

    Match all radio buttons

    Return value

    Array

    Example

    Find all radio buttons

    HTML code:













    jQuery code:

    $(":radio")

    Result:

    [ ]

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

    :submit

    Match all submit buttons

    Return value

    Array

    Example

    Find all submit buttons

    HTML code:













    jQuery code:

    $(":submit")

    Result:

    [ ]


    The others are the same: image ,:reset,:button,:file,:hidden !@# @!%$%
    Related labels:
    source:php.cn
    Statement of this Website
    The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
    Popular Tutorials
    More>
    Latest Downloads
    More>
    Web Effects
    Website Source Code
    Website Materials
    Front End Template