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绑定事件this指向发生改变的问题解决方法
Apr 23 Javascript
js 定时器setTimeout无法调用局部变量的解决办法
Nov 28 Javascript
javascript(js)的小数点乘法除法问题详解
Mar 07 Javascript
JavaScript常用验证函数实例汇总
Nov 25 Javascript
javascript实现按回车键切换焦点
Feb 09 Javascript
javascript自动切换焦点控制效果完整实例
Feb 02 Javascript
js鼠标单击和双击事件冲突问题的快速解决方法
Jul 11 Javascript
JS判断鼠标进入容器的方向与window.open新窗口被拦截的问题
Dec 23 Javascript
深入理解Javascript中的作用域链和闭包
Apr 25 Javascript
JS库之Waypoints的用法详解
Sep 13 Javascript
详解vue中点击空白处隐藏div的实现(用指令实现)
Apr 19 Javascript
async/await让异步操作同步执行的方法详解
Nov 01 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遍历目录viewDir函数
2009/12/15 PHP
ThinkPHP实现事务回滚示例代码
2014/06/23 PHP
php检查日期函数checkdate用法实例
2015/03/19 PHP
PHP+Redis链表解决高并发下商品超卖问题(实现原理及步骤)
2020/08/03 PHP
jquery实现每个数字上都带进度条的幻灯片
2013/02/20 Javascript
纯JS实现五子棋游戏兼容各浏览器(附源码)
2013/04/24 Javascript
JS控件ASP.NET的treeview控件全选或者取消(示例代码)
2013/12/16 Javascript
处理文本部分内容的TextRange对象应用实例
2014/07/29 Javascript
分享20款美化网站的 jQuery Lightbox 灯箱插件
2014/10/10 Javascript
jquery实现简单的自动播放幻灯片效果
2015/06/13 Javascript
JS实现超简洁网页title标题跑动闪烁提示效果代码
2015/10/23 Javascript
jquery选择器中的空格与大于号&gt;、加号+与波浪号~的区别介绍
2016/06/24 Javascript
angular.js之路由的选择方法
2016/09/24 Javascript
Javascript单例模式的介绍和实例
2016/10/08 Javascript
js中获取键盘事件的简单实现方法
2016/10/10 Javascript
angularjs实现的前端分页控件示例
2017/02/10 Javascript
JS简单实现获取元素的封装操作示例
2017/04/07 Javascript
详解vue.js2.0父组件点击触发子组件方法
2017/05/10 Javascript
微信小程序实现点击按钮修改view标签背景颜色功能示例【附demo源码下载】
2017/12/06 Javascript
Chart.js 轻量级HTML5图表绘制工具库(知识整理)
2018/05/22 Javascript
vue生成token并保存到本地存储中
2018/07/17 Javascript
详解webpack模块加载器兼打包工具
2018/09/11 Javascript
[37:23]DOTA2上海特级锦标赛主赛事日 - 3 胜者组第二轮#2Secret VS EG第二局
2016/03/04 DOTA
Python进行数据科学工作的简单入门教程
2015/04/01 Python
python链接oracle数据库以及数据库的增删改查实例
2018/01/30 Python
pandas数据分组和聚合操作方法
2018/04/11 Python
python实现弹窗祝福效果
2019/04/07 Python
关于python pycharm中输出的内容不全的解决办法
2020/01/10 Python
Python装饰器用法与知识点小结
2020/03/09 Python
python实现对变位词的判断方法
2020/04/05 Python
淘宝网店营销策划书
2014/01/11 职场文书
企业安全生产责任书
2014/04/14 职场文书
超市客服工作职责
2014/06/11 职场文书
2014年环保工作总结
2014/11/26 职场文书
房产公证书样本
2015/01/23 职场文书
工作年限证明模板
2015/06/15 职场文书