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 相关文章推荐
JS 类型转换常见方法小结
May 31 Javascript
js跳转页面方法总结
Jan 29 Javascript
javascript自定义in_array()函数实现方法
Aug 03 Javascript
json定义及jquery操作json的方法
Oct 03 Javascript
jQuery给指定的table动态添加删除行的操作方法
Oct 12 Javascript
详解VueJs中的V-bind指令
May 03 Javascript
简单了解vue中的v-if和v-show的区别
Oct 08 Javascript
ES6 Promise对象概念及用法实例详解
Oct 15 Javascript
详解Vue之事件处理
Jul 10 Javascript
浅谈vue单页面中有多个echarts图表时的公用代码写法
Jul 19 Javascript
如何通过vscode运行调试javascript代码
Jul 24 Javascript
vue中父子组件的参数传递和应用示例
Jan 04 Vue.js
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
基于数据库的在线人数,日访问量等统计
2006/10/09 PHP
实用函数8
2007/11/08 PHP
PHP人民币金额数字转中文大写的函数代码
2013/02/27 PHP
php比较两个绝对时间的大小
2014/01/31 PHP
PHP获取指定时间段之间的 年,月,天,时,分,秒
2016/06/05 PHP
PHP safe_mode开启对于PHP系统函数有什么影响
2020/11/10 PHP
JavaScript性能陷阱小结(附实例说明)
2010/12/28 Javascript
如何将网页表格内容导入excel
2014/02/18 Javascript
鼠标左键单击冲突的问题解决方法(防止冒泡)
2014/05/14 Javascript
Node.js插件的正确编写方式
2014/08/03 Javascript
javascript自定义in_array()函数实现方法
2015/08/03 Javascript
jquery可定制的在线UEditor编辑器
2015/11/17 Javascript
jQuery zTree加载树形菜单功能
2016/02/25 Javascript
jQuery实现简单滚动动画效果
2016/04/07 Javascript
JavaScript常用判断写法大全(推荐)
2016/05/30 Javascript
Javascript中作用域的详细介绍
2016/10/06 Javascript
ES6箭头函数和扩展实例分析
2020/05/23 Javascript
[01:02]DOTA2辉夜杯决赛日 CDEC.Y对阵VG赛前花絮
2015/12/27 DOTA
pyqt4教程之messagebox使用示例分享
2014/03/07 Python
Python中常见的数据类型小结
2015/08/29 Python
对Python3使运行暂停的方法详解
2019/02/18 Python
Python 执行矩阵与线性代数运算
2020/08/01 Python
Python中的面向接口编程示例详解
2021/01/17 Python
一款利用html5和css3实现的3D立方体旋转效果教程
2016/04/26 HTML / CSS
纯css3实现思维导图样式示例
2018/11/01 HTML / CSS
意大利专业化妆品品牌:KIKO MILANO
2017/02/01 全球购物
20世纪40年代连衣裙和复古服装:The Seamstress Of Bloomsbury
2018/07/24 全球购物
nohup的用法
2012/11/26 面试题
自动化专业毕业生自荐信
2013/11/01 职场文书
军训自我鉴定怎么写
2014/02/13 职场文书
毕业生自荐材料范文
2014/12/30 职场文书
体育活动总结
2015/02/04 职场文书
2015年护士节慰问信
2015/03/23 职场文书
2015年维修电工工作总结
2015/04/25 职场文书
2015年小学财务工作总结
2015/07/20 职场文书
Redis分布式锁的7种实现
2022/04/01 Redis