juqery 学习之三 选择器 子元素与表单
:nth-child(index/even/odd/equation)
可以使用:
nth-child(even)
:nth-child(odd)
:nth-child(3n)
:nth-child(2)
:nth-child(3n+1)
:nth-child(3n+2)
返回值
Array<Element>
参数
index (Number) : 要匹配元素的序号，从1开始
示例
在每个 ul 查找第 2 个li
HTML 代码:
<li>John</li>
<li>Karl</li>
<li>Brandon</li>
</ul>
<ul>
<li>Glen</li>
<li>Tane</li>
<li>Ralph</li>
</ul>
jQuery 代码:
结果:
--------------------------------------------------------------------------------
:first-child
返回值
Array<Element>
示例
在每个 ul 中查找第一个 li
HTML 代码:
<li>John</li>
<li>Karl</li>
<li>Brandon</li>
</ul>
<ul>
<li>Glen</li>
<li>Tane</li>
<li>Ralph</li>
</ul>
jQuery 代码:
结果:
--------------------------------------------------------------------------------
:last-child
返回值
Array<Element>
示例
在每个 ul 中查找最后一个 li
HTML 代码:
<li>John</li>
<li>Karl</li>
<li>Brandon</li>
</ul>
<ul>
<li>Glen</li>
<li>Tane</li>
<li>Ralph</li>
</ul>
jQuery 代码:
结果:
--------------------------------------------------------------------------------
:only-child
返回值
Array<Element>
示例
在 ul 中查找是唯一子元素的 li
HTML 代码:
<li>John</li>
<li>Karl</li>
<li>Brandon</li>
</ul>
<ul>
<li>Glen</li>
jQuery 代码:
结果:
--------------------------------------------------------------------------------
:input
返回值
Array<Element>
示例
查找所有的input元素
HTML 代码:
<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
返回值
Array<Element>
示例
查找所有文本框
HTML 代码:
<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
返回值
Array<Element>
示例
查找所有密码框
HTML 代码:
<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
返回值
Array<Element>
示例
查找所有单选按钮
HTML 代码:
<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
返回值
Array<Element>
示例
查找所有提交按钮
HTML 代码:
<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 代码:
结果:
其他的一些 都是一样的道理：image ,:reset,:button,:file,:hidden !@#@!%$%
您可能感兴趣的文章：
jQuery学习笔记之jQuery选择器的使用
juqery 学习之三 选择器 层级 基本
jquery选择器(常用选择器说明)
锋利的jQuery 要点归纳（一） jQuery选择器
juqery 学习之三 选择器 子元素与表单
CSS3选择器之学习笔记
jquery选择器大全 全面详解jquery选择器
jquery 选择器部分整理
jquery选择器大全详解
jQuery :visible 选择器(冒号)的用法