juqery 学习之三 选择器 子元素与表单 |
|
本文标签：选择器,子元素 :nth-child(index/even/odd/equation)匹配其父元素下的第N个子或奇偶元素
:eq(index) 只匹配一个元素，而这个将为每一个父元素匹配子元素 。:nth-child从1开始的，而:eq()是从0算起的！
可以使用: 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 !@#@!%$% |
