jQuery 表单对象属性

最新推荐文章于 2020-10-20 21:14:31 发布

黄河爱浪

最新推荐文章于 2020-10-20 21:14:31 发布

阅读量4.7k

点赞数

分类专栏： jQuery 文章标签：表单对象属性表单

本文链接：https://blog.csdn.net/u013350495/article/details/82533570

版权

jQuery 专栏收录该内容

40 篇文章 1 订阅

订阅专栏

jQuery有着非常丰富的DOM元素操作方法，在DOM元素中，表单元素尤为突出，在jQuery库中与表单DOM元素相关的方法是占有非常大的比例，可见一斑！接下来的文章中，将是都介绍与表单DOM元素相关的方法。

本篇文章，介绍表单元素中使用频率较高的单选按钮，复选按钮，下拉列表框相关的选择器。

1：“:checked” 选择器

功能：匹配所有勾选的元素

在使用单选框和复选框时，经常会需要获取当前选中的值，如果给每个按钮添加点击事件，来获取当前所选中的值，那样做效率太低了，严格来说就是错误的做法。jQuery的 “:checked” 选择器非常好的完成了这个工作。但是，想使用好jQuery的选择器，首先要有良好的代码规范，代码结构明确，避免无效的代码，使得HTML结构可读性差。

通过下面的示例具体学习一下 “:checked” 选择器的使用：

<!-- html -->
<form action="" >
    <input type="radio" value="web" name="demo">
    <input type="radio" checked value="梦之蓝" name="demo">
    <input type="radio" value="前端开发" name="demo">

    <input type="checkbox" checked value="web" name="demo2">
    <input type="checkbox" checked value="梦之蓝" name="demo2">
    <input type="checkbox" value="前端开发" name="demo2">
</form>

<!-- js -->
var demo=$("form>input[name='demo']:checked");
console.log(demo.val());    //梦之蓝

var demo2=$("form>input[name='demo2']:checked");
console.log(demo2.val());   //web

“:checked”选择器 能很好的匹配出当前所选中的单选框按钮的值，但是复选框表现不足，未能正确的得到所有选中的值，因为当前所匹配出的元素有多个，返回的是一个数组的jQuery对象，那如何正确的获取呢？可阅读前面所发布的文章《jQuery 筛选之map()》找到答案。

2：“:selected” 选择器

功能：匹配所有选中的 option 元素

下拉列表是使用频率非常高的，与之对应的 “:selected” 选择器也是非常的实用。

通过下面的示例具体学习一下 “:selected” 选择器的使用：

<!-- html -->
<form action="">
    <select name="demo3">
        <option value="前端开发">前端开发</option>
        <option value="梦之蓝">梦之蓝</option>
        <option value="web" data-id="web-7258" selected>web</option>
    </select>
</form>

如果只是想获取该下拉列表的值，可直接这么写，也是最常用的写法

<!-- js -->
console.log($("form>select[name='demo3']").val());

本文章为重点说明 “:selected” 选择器的使用，请看下面的代码

<!-- js -->
var demo3=$("form>select[name='demo3']>option:selected");
console.log(demo3.val());   //web
console.log(demo3.html());  //web
console.log(demo3.data("id"));  //web-7258

通过上面的代码能明显的知道，“:selected” 选择器返回的确实是一个 DOM元素的JQuery对象，有兴趣的同学还可以阅读之前的文章《jQuery 对象访问》中所介绍的 get() 方法来确认。

其实，如果当前下拉列表允许多选并当前有选中多个值时，“:selected” 选择器也会遇到不能正确获取值的问题，那么解决办法可一样通过遍历的方式来实现，或者直接获取这个下拉列表元素的 val() 值即可！