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


Posted in Javascript onNovember 25, 2010

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

参数

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

示例

在每个 ul 查找第 2 个li

HTML 代码:

<ul>
  <li>John</li>
  <li>Karl</li>
  <li>Brandon</li>
</ul>
<ul>
  <li>Glen</li>
  <li>Tane</li>
  <li>Ralph</li>
</ul>

jQuery 代码:

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

结果:

[ <li>Karl</li>,   <li>Tane</li> ]
--------------------------------------------------------------------------------

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

示例

在每个 ul 中查找第一个 li

HTML 代码:

<ul>
  <li>John</li>
  <li>Karl</li>
  <li>Brandon</li>
</ul>
<ul>
  <li>Glen</li>
  <li>Tane</li>
  <li>Ralph</li>
</ul>

jQuery 代码:

$("ul li:first-child")

结果:

[ <li>John</li>, <li>Glen</li> ]

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

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

示例

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

HTML 代码:

<ul>
  <li>John</li>
  <li>Karl</li>
  <li>Brandon</li>
</ul>
<ul>
  <li>Glen</li>
  <li>Tane</li>
  <li>Ralph</li>
</ul>

jQuery 代码:

$("ul li:last-child")

结果:

[ <li>Brandon</li>, <li>Ralph</li> ]

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

:only-child

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

Matches the only child of its parent.
If the parent has other child elements, nothing is matched.

返回值

Array<Element>

示例

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

HTML 代码:

<ul>
  <li>John</li>
  <li>Karl</li>
  <li>Brandon</li>
</ul>
<ul>
  <li>Glen</li>

jQuery 代码:

$("ul li:only-child")

结果:

[ <li>Glen</li> ]

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

:input

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

Matches all input, textarea, select and button elements.

返回值

Array<Element>

示例

查找所有的input元素

HTML 代码:

<form>
  <input type="text" />
  <input type="checkbox" />
  <input type="radio" />
  <input type="image" />
  <input type="file" />
  <input type="submit" />
  <input type="reset" />
  <input type="password" />
  <input type="button" />
  <select><option/></select>
  <textarea></textarea>
  <button></button>
</form>

jQuery 代码:

$(":input")

结果:

[ <input type="text" />, <input type="checkbox" />, <input type="radio" />, <input type="image" />, <input type="file" />, <input type="submit" />, <input type="reset" />, <input type="password" />, <input type="button" /> ]

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

:text

匹配所有的单行文本框

Matches all input elements of type text.

返回值

Array<Element>

示例

查找所有文本框

HTML 代码:

<form>
  <input type="text" />
  <input type="checkbox" />
  <input type="radio" />
  <input type="image" />
  <input type="file" />
  <input type="submit" />
  <input type="reset" />
  <input type="password" />
  <input type="button" />
  <select><option/></select>
  <textarea></textarea>
  <button></button>
</form>

jQuery 代码:

$(":text")

结果:

[ <input type="text" /> ]

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

:password

匹配所有密码框

Matches all input elements of type password.

返回值

Array<Element>

示例

查找所有密码框

HTML 代码:

<form>
  <input type="text" />
  <input type="checkbox" />
  <input type="radio" />
  <input type="image" />
  <input type="file" />
  <input type="submit" />
  <input type="reset" />
  <input type="password" />
  <input type="button" />
  <select><option/></select>
  <textarea></textarea>
  <button></button>
</form>

jQuery 代码:

$(":password")

结果:

[ <input type="password" /> ]

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

:radio

匹配所有单选按钮

Matches all input elements of type radio.

返回值

Array<Element>

示例

查找所有单选按钮

HTML 代码:

<form>
  <input type="text" />
  <input type="checkbox" />
  <input type="radio" />
  <input type="image" />
  <input type="file" />
  <input type="submit" />
  <input type="reset" />
  <input type="password" />
  <input type="button" />
  <select><option/></select>
  <textarea></textarea>
  <button></button>
</form>

jQuery 代码:

$(":radio")

结果:

[ <input type="radio" /> ]

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

:submit

匹配所有提交按钮

Matches all input elements of type submit.

返回值

Array<Element>

示例

查找所有提交按钮

HTML 代码:

<form>
  <input type="text" />
  <input type="checkbox" />
  <input type="radio" />
  <input type="image" />
  <input type="file" />
  <input type="submit" />
  <input type="reset" />
  <input type="password" />
  <input type="button" />
  <select><option/></select>
  <textarea></textarea>
  <button></button>
</form>

jQuery 代码:

$(":submit")

结果:

[ <input type="submit" /> ]

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

Javascript 相关文章推荐
javascript 打印页面代码
Mar 24 Javascript
getElementsByTagName vs selectNodes效率 及兼容的selectNodes实现
Feb 26 Javascript
jquery下json数组的操作实现代码
Aug 09 Javascript
javascript中的document.open()方法使用介绍
Oct 09 Javascript
JavaScript获取客户端IP的方法(新方法)
Mar 11 Javascript
jQuery实现简单滚动动画效果
Apr 07 Javascript
详解jQuery的Cookie插件
Nov 23 Javascript
使用BootStrap进行轮播图的制作
Jan 06 Javascript
vue 项目中使用Loading组件的示例代码
Aug 31 Javascript
React性能优化系列之减少props改变的实现方法
Jan 17 Javascript
mongodb初始化并使用node.js实现mongodb操作封装方法
Apr 02 Javascript
Node.js API详解之 dgram模块用法实例分析
Jun 05 Javascript
juqery 学习之三 选择器 可见性 元素属性
Nov 25 #Javascript
juqery 学习之三 选择器 简单 内容
Nov 25 #Javascript
juqery 学习之三 选择器 层级 基本
Nov 25 #Javascript
jquery 学习之二 属性 文本与值(text,val)
Nov 25 #Javascript
jquery 学习之二 属性(html()与html(val))
Nov 25 #Javascript
jquery 学习之二 属性(类)
Nov 25 #Javascript
初窥JQuery(二) 事件机制(1)
Nov 25 #Javascript
You might like
php使用pdo连接sqlite3的配置示例
2016/05/27 PHP
php常用字符串长度函数strlen()与mb_strlen()用法实例分析
2019/06/25 PHP
理解Javascript_02_理解undefined和null
2010/10/11 Javascript
JS的get和set使用示例
2014/02/20 Javascript
javascript处理表单示例(javascript提交表单)
2014/04/28 Javascript
两种方法基于jQuery实现IE浏览器兼容placeholder效果
2014/10/14 Javascript
实例分析javascript中的call()和apply()方法
2014/11/28 Javascript
JS+CSS实现仿雅虎另类滑动门切换效果
2015/10/13 Javascript
详解javascript高级定时器
2015/12/31 Javascript
vue双向绑定简要分析
2017/03/23 Javascript
Vue组件化通讯的实例代码
2017/06/23 Javascript
微信小程序实现上传图片功能
2018/05/28 Javascript
详解Vue+axios+Node+express实现文件上传(用户头像上传)
2018/08/10 Javascript
node链接mongodb数据库的方法详解【阿里云服务器环境ubuntu】
2019/03/07 Javascript
jquery多级树形下拉菜单的实例代码
2019/07/09 jQuery
vue实现一拉到底的滑动验证
2019/07/25 Javascript
Vue前端项目部署IIS的实现
2020/01/06 Javascript
解决小程序无法触发SESSION问题
2020/02/03 Javascript
微信小程序获取公众号文章列表及显示文章的示例代码
2020/03/10 Javascript
javascript设计模式 ? 装饰模式原理与应用实例分析
2020/04/14 Javascript
js前端对于大量数据的展示方式及处理方法
2020/12/02 Javascript
在python中的socket模块使用代理实例
2014/05/29 Python
仅用500行Python代码实现一个英文解析器的教程
2015/04/02 Python
Python实现的RSS阅读器实例
2015/07/25 Python
python获取网页中所有图片并筛选指定分辨率的方法
2018/03/31 Python
Python os.rename() 重命名目录和文件的示例
2018/10/25 Python
Pythony运维入门之Socket网络编程详解
2019/04/15 Python
Python3 Tkinter选择路径功能的实现方法
2019/06/14 Python
ubuntu上安装python的实例方法
2019/09/30 Python
Python生成六万个随机,唯一的8位数字和数字组成的随机字符串实例
2020/03/03 Python
如何在Cookie里面保存Unicode和国际化字符
2013/05/25 面试题
小区门卫值班制度
2014/01/24 职场文书
销售经理岗位职责
2014/03/16 职场文书
庆六一文艺汇演活动方案
2014/08/26 职场文书
初中生思想道德自我评价
2015/03/09 职场文书
新党员入党决心书
2015/09/22 职场文书