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之大字符串的连接的StringBuffer 类
May 08 Javascript
javascript 获取元素位置的快速方法 getBoundingClientRect()
Nov 26 Javascript
Javascript操作cookie的函数代码
Oct 03 Javascript
对于this和$(this)的个人理解
Sep 08 Javascript
JavaScript实现的购物车效果可以运用在好多地方
May 09 Javascript
JS实现页面中所有img对象添加onclick事件及新窗口查看图片的方法
Dec 27 Javascript
js控制一个按钮是否可点击(可使用)disabled的实例
Feb 14 Javascript
如何开发出更好的JavaScript模块
Dec 22 Javascript
angular 表单验证器验证的同时限制输入的实现
Apr 11 Javascript
JavaScript实现单英文金山打字通
Jul 24 Javascript
聊聊鉴权那些事(推荐)
Aug 22 Javascript
vuex刷新后数据丢失的解决方法
Oct 18 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 配置open_basedir 让各虚拟站点独立运行
2009/11/12 PHP
Zend的MVC机制使用分析(一)
2013/05/02 PHP
php定义一个参数带有默认值的函数实例分析
2015/03/16 PHP
javascript suggest效果 自动完成实现代码分享
2012/02/17 Javascript
Firefox和IE兼容性问题及解决方法总结
2013/10/08 Javascript
多种方法实现360浏览器下禁止自动填写用户名密码
2014/06/16 Javascript
jQuery操作JSON的CRUD用法实例
2015/02/25 Javascript
jquery获取当前元素索引值用法实例
2015/06/10 Javascript
初步了解javascript面向对象
2015/11/09 Javascript
跟我学习javascript的执行上下文
2015/11/18 Javascript
基于JavaScript实现瀑布流效果(循环渐近)
2016/01/27 Javascript
js中数组结合字符串实现查找(屏蔽广告判断url等)
2016/03/30 Javascript
jquery自动补齐功能插件flexselect用法示例
2016/08/06 Javascript
javascript数组遍历的方法实例分析
2016/09/13 Javascript
JSON 必知必会 观后记
2016/10/27 Javascript
浅谈js原生拖放
2016/11/21 Javascript
基于jQuery实现滚动刷新效果
2017/01/09 Javascript
jQuery开源组件BootstrapValidator使用详解
2017/06/29 jQuery
详解express与koa中间件模式对比
2017/08/07 Javascript
Vue header组件开发详解
2018/01/26 Javascript
基于Koa2写个脚手架模拟接口服务的方法
2018/11/27 Javascript
vscode 调试 node.js的方法步骤
2020/09/15 Javascript
Python3.x版本中新的字符串格式化方法
2015/04/24 Python
Python中的os.path路径模块中的操作方法总结
2016/07/07 Python
Python使用matplotlib简单绘图示例
2018/02/01 Python
Python装饰器(decorator)定义与用法详解
2018/02/09 Python
python文档字符串(函数使用说明)使用详解
2019/07/30 Python
使用TensorBoard进行超参数优化的实现
2020/07/06 Python
Python 爬虫的原理
2020/07/30 Python
优衣库英国官网:UNIQLO英国
2016/12/25 全球购物
世界顶级户外运动品牌折扣网站:LeftLane Sports
2019/06/12 全球购物
为数据库创建索引都需要注意些什么
2012/07/17 面试题
汽车技术服务与营销专业推荐信
2013/11/29 职场文书
求职自我评价范文100字
2014/09/23 职场文书
2015年妇产科工作总结
2015/05/18 职场文书
2019旅游导游工作总结
2019/06/27 职场文书