jQuery 表单选择器

简介: 版权声明:本文为博主原创文章,转载请注明出处。 https://blog.
版权声明:本文为博主原创文章,转载请注明出处。 https://blog.csdn.net/twilight_karl/article/details/71506719
  • :input 选取所有表单元素,返回集合
  • :text 选择所有单行文本框,即 type=text 集合元素
  • :password 选择所有密码框,即 type=password 集合元素
  • :radio 选择所有单选框,即 type=radio 集合元素
  • :checkbox 选择所有复选框,即 type=checkbox 集合元素:submit 选取所有提交按钮,即 type=submit 集合元素
  • :reset 选取所有重置按钮,即 type=reset 集合元素
  • :image 选取所有图像按钮,即 type=image 集合元素
  • :button 选择所有普通按钮,即 button 元素 集合元素
  • :file 选择所有文件按钮,即 type=file 集合元素
  • :hidden 选择所有不可见字段,即 type=hidden 集合元素

对于以下表单:

<form>
<input type="text" name="user" value="123" disabled/>
<input type="password" name="pass" value="456"/>
<textarea></textarea>
<select>
    <option value="1">1</option> 
    <option value="2" selected>2</option>
    <option value="3">3</option>
</select>

<select>
    <option value="4">4</option> 
    <option value="5" selected>5</option>
    <option value="6">6</option>
</select>
<button>2333</button>

<input type="radio" name="sex" value="nan" checked>男
<input type="radio" name="sex" value="nv">女
</form>

相应的操作:

alert($('input').size());          // 2 必须是input标签
alert($(':input').eq(1).val());    // 5 所有表单控件
alert($(':input').val());          // 默认获取集合中第一个的值

表单过滤器

  • :enabled 选取所有可用元素 集合元素
  • :disabled 选取所有不可用元素 集合元素
  • :checked 选取所有被选中的元素,单选和复选字段 (测试时发现也可以选中下拉列表)
  • :selected 选取所有下拉列表中被选中的元素,获得选定的元素的option对象
alert($(':enabled').size());   // 获取所有可用的元素
alert($(':disabled').val());   // 获取所有不可用的元素

alert($(':selected').size());  // 获取所有下拉框中被选中的元素 返回集合
alert($(':selected').size());  // select 可以识别selected    checked可以识别checked和selected
相关文章
N..
|
7月前
|
JavaScript 前端开发 开发者
jQuery选择器
jQuery选择器
N..
50 1
|
2月前
|
JavaScript 前端开发
jQuery 选择器
jQuery 选择器
31 2
|
3月前
|
JavaScript 索引
jQuery 选择器
jQuery 选择器
42 5
|
2月前
|
JavaScript 前端开发
jQuery 选择器
jQuery 选择器用于操作 HTML 元素,支持基于 id、类、类型、属性等条件选择元素。它扩展了 CSS 选择器的功能,并使用 $() 符号。例如,$(&quot;p&quot;) 选取所有段落元素,而 $(&quot;button&quot;).click(function(){ $(&quot;p&quot;).hide(); }) 实现点击按钮后隐藏所有段落。
|
6月前
|
JavaScript 前端开发
jQuery 选择器
jQuery 选择器
37 0
|
6月前
|
JavaScript 前端开发 索引
jQuery的选择器与自带函数详解
jQuery的选择器与自带函数详解
|
3月前
|
JavaScript 前端开发 CDN
jQuery学习记录--jQuery语法,选择器,事件及hide(),show(), toggle()
本文是关于jQuery的学习笔记,涵盖了jQuery的简介、语法、选择器、事件处理以及hide()、show()、toggle()等方法的使用。
jQuery学习记录--jQuery语法,选择器,事件及hide(),show(), toggle()
|
3月前
|
JavaScript
jQuery 选择器
jQuery 选择器
28 3
|
2月前
|
移动开发 JSON 数据可视化
精选八款包括可视化CMS,jquery可视化表单,vue可视化拖拉,react可视化源码
精选八款包括可视化CMS,jquery可视化表单,vue可视化拖拉,react可视化源码
60 0
|
3月前
|
JavaScript 索引
jQuery 选择器
jQuery 选择器
31 1