juqery 学习之三 选择器 子元素与表单
2010-11-25 19:54
423 查看
[ <li>Karl</li>, <li>Tane</li> ]
--------------------------------------------------------------------------------
<li>John</li>
<li>Karl</li>
<li>Brandon</li>
</ul>
<ul>
<li>Glen</li>
<li>Tane</li>
<li>Ralph</li>
</ul>
--------------------------------------------------------------------------------
<li>John</li>
<li>Karl</li>
<li>Brandon</li>
</ul>
<ul>
<li>Glen</li>
<li>Tane</li>
<li>Ralph</li>
</ul>
--------------------------------------------------------------------------------
<li>John</li>
<li>Karl</li>
<li>Brandon</li>
</ul>
<ul>
<li>Glen</li>
--------------------------------------------------------------------------------
<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>
--------------------------------------------------------------------------------
<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>
--------------------------------------------------------------------------------
<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>
--------------------------------------------------------------------------------
<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>
--------------------------------------------------------------------------------
<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>
其他的一些 都是一样的道理:image ,:reset,:button,:file,:hidden !@#@!%$%
--------------------------------------------------------------------------------
: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 !@#@!%$%
相关文章推荐
- juqery 学习之三 选择器 子元素与表单
- juqery 学习之三 选择器--<子元素><表单>
- juqery 学习之三 选择器--<可见性><元素属性>
- juqery 学习之三 选择器 可见性 元素属性
- juqery 学习之三 选择器 可见性 元素属性
- 黑马程序员_学习日记63_710jQuery2(属性选择器、表单选择器、操作Dom节点、事件、动画)
- 敏捷思维学习Ext.Net MVC--3.9Form表单组件之多项选择下拉菜单
- 页面元素选择二(jQuery学习随笔二)
- HTML&CSS基础学习笔记1.25-input标签的选择文件和隐藏元素
- HTML学习笔记(五)_HTML5表单相关元素和属性
- 【HTML5学习笔记】13:表单元素 其三
- JavaScript 学习(2)表单元素
- 【HTML5学习笔记】11:表单元素 其二
- 20171017学习笔记Selenium 2 第四章WebDriver API 4.8定位一组元素4.9多表单切换4.10多窗口切换
- web前端与移动开发---html列表、表单元素等标签的学习
- juqery 学习之三 选择器--<层级><基本>
- juqery 学习之三 选择器 层级 基本
- 表单元素之选择系
- 常用表单元素学习总结