热门标签 | HotTags
当前位置:  开发笔记 > 前端 > 正文

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

juqery学习之三选择器子元素与表单,学习jquery的朋友可以参考下。

: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.
While ':eq(index)' matches only a single element, this matches more then one: One for each parent. The specified index is one-indexed, in contrast to :eq() which starst at zero.

返回值

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.
    While ':first' matches only a single element, this matches more then one: One for each 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.
    While ':last' matches only a single element, this matches more then one: One for each 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.
    If the parent has other child elements, nothing is matched.

    返回值

    Array

    示例

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

    HTML 代码:


       
    • John

    •  
    • Karl

    •  
    • Brandon



       
    • Glen

    jQuery 代码:

    $("ul li:only-child")

    结果:

    [
  • Glen
  • ]

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

    :input

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

    Matches all input, textarea, select and button elements.

    返回值

    Array

    示例

    查找所有的input元素

    HTML 代码:


     
     
     
     
     
     
     
     
     
     
     
     

    jQuery 代码:

    $(":input")

    结果:

    [ , , , , , , , , ]

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

    :text

    匹配所有的单行文本框

    Matches all input elements of type text.

    返回值

    Array

    示例

    查找所有文本框

    HTML 代码:


     
     
     
     
     
     
     
     
     
     
     
     

    jQuery 代码:

    $(":text")

    结果:

    [ ]

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

    :password

    匹配所有密码框

    Matches all input elements of type password.

    返回值

    Array

    示例

    查找所有密码框

    HTML 代码:


     
     
     
     
     
     
     
     
     
     
     
     

    jQuery 代码:

    $(":password")

    结果:

    [ ]

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

    :radio

    匹配所有单选按钮

    Matches all input elements of type radio.

    返回值

    Array

    示例

    查找所有单选按钮

    HTML 代码:


     
     
     
     
     
     
     
     
     
     
     
     

    jQuery 代码:

    $(":radio")

    结果:

    [ ]

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

    :submit

    匹配所有提交按钮

    Matches all input elements of type submit.

    返回值

    Array

    示例

    查找所有提交按钮

    HTML 代码:


     
     
     
     
     
     
     
     
     
     
     
     

    jQuery 代码:

    $(":submit")

    结果:

    [ ]


    其他的一些 都是一样的道理:image   ,:reset,:button,:file,:hidden !@#@!%$%

    推荐阅读
    • 使用JS、HTML5和C3创建自定义弹出窗口
      本文介绍如何结合JavaScript、HTML5和C3.js来实现一个功能丰富的自定义弹出窗口。通过具体的代码示例,详细讲解了实现过程中的关键步骤和技术要点。 ... [详细]
    • Spring Boot 中静态资源映射详解
      本文深入探讨了 Spring Boot 如何简化 Web 应用中的静态资源管理,包括默认的静态资源映射规则、WebJars 的使用以及静态首页的处理方法。通过本文,您将了解如何高效地管理和引用静态资源。 ... [详细]
    • 本文将详细介绍如何在ThinkPHP6框架中实现多数据库的部署,包括读写分离的策略,以及如何通过负载均衡和MySQL同步技术优化数据库性能。 ... [详细]
    • 本文介绍了如何使用JavaScript和jQuery实现页面元素随着滚动条的移动而相应变化位置的功能,提供了一段简洁的代码示例。 ... [详细]
    • 深入分析十大PHP开发框架
      随着PHP技术的发展,各类开发框架层出不穷,成为了开发者们热议的话题。本文将详细介绍并对比十款主流的PHP开发框架,旨在帮助开发者根据自身需求选择最合适的工具。 ... [详细]
    • 本文介绍了Java语言开发的远程教学系统,包括源代码、MySQL数据库配置以及相关文档,适用于计算机专业的毕业设计。系统支持远程调试,采用B/S架构,适合现代教育需求。 ... [详细]
    • Web前端性能提升指南:简化JavaScript与消除重复脚本
      本文为Web前端性能优化系列的第七篇,重点探讨简化JavaScript代码及清除重复脚本的方法。通过这些技术,可以显著提高网页加载速度和用户体验。了解更多信息,请参阅我们的完整指南:Web前端性能优化。 ... [详细]
    • 近期,谷歌公司的一名安全工程师Eduardo Vela在jQuery Mobile框架中发现了一项可能引发跨站脚本攻击(XSS)的安全漏洞。此漏洞使得使用jQuery Mobile的所有网站面临潜在的安全威胁。 ... [详细]
    • jQuery中 $(selector).each() 和 $.each() 的区别与应用
      在JavaScript开发中,jQuery库提供了两种遍历方法:$(selector).each() 和 $.each()。本文将详细探讨这两种方法的不同之处及其应用场景。 ... [详细]
    • 本文探讨了前端包管理器的核心功能,包括注册机制、文件存储、上传下载、以及依赖分析等关键特性,并介绍了几种流行的前端包管理工具。 ... [详细]
    • 本文详细介绍了使用JavaScript和jQuery进行页面加载初始化的方法,包括不同的实现方式及其应用场景,并探讨了两者在初始化过程中的主要区别。 ... [详细]
    • 探讨在 Vue 框架中遇到的数据更新延迟或失败的问题,并提供解决方案。 ... [详细]
    • 访问一个网页的全过程
      准备:DHCPUDPIP和以太网启动主机,用一根以太网电缆连接到学校的以太网交换机,交换机又与学校的路由器相连.学校的这台路由器与一个ISP链接,此ISP(Intern ... [详细]
    • 本文介绍了如何通过Java代码计算一个整数的位数,并展示了多个基础编程示例,包括求和、平均分计算、条件判断等。 ... [详细]
    • 本题要求在一组数中反复取出两个数相加,并将结果放回数组中,最终求出最小的总加法代价。这是一个经典的哈夫曼编码问题,利用贪心算法可以有效地解决。 ... [详细]
    author-avatar
    dmcm0006
    这个家伙很懒,什么也没留下!
    PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
    Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有