jQuery选择器 之 表单属性选择器

于 2024-09-07 09:11:35 发布
阅读量158 收藏 1
点赞数 3
文章标签： jquery 前端 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/panghuangang/article/details/141953331
版权

语法说明

https://api.jquery.com/category/selectors/form-selectors/

  • :enabled 选择器：选择所有启用的元素，例如$('input[type="text"]:enabled')
  • :disabled 选择器：选择所有禁用的元素，例如$(':text:disabled')
  • :checked 选择器：匹配所有被选中或选定的元素（单选radio，多选checkbox），例如$(':checkbox:checked')
  • :selected 选择器：选择所有被选中的元素（下拉列表select），例如$('option:selected')

示例

:enabled 选择器

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script src="js/jquery-3.7.1.js"></script>
  <style>
    #b1 {
      display: inline-block;
      font-size: 24px;
      margin-bottom: 20px;
    }

    input {
      font-size: 24px;
    }

    label {
      font-size: 24px;
    }
  </style>
</head>

<body>
  <input type="button" id="b1" value="利用jQuery对象的val()方法,改变表单内可用input元素的值"><br><br>

  <input type="text" disabled placeholder="不可用值1">
  <input type="text" name="" id="" placeholder="可用值1">
  <input type="text" disabled placeholder="不可用值2">
  <input type="text" name="" id="" placeholder="可用值2"><br><br>

  <input type="checkbox" id="beauty">
  <label for="beauty">美容</label>

  <input type="checkbox" id="it">
  <label for="it">IT</label>

  <input type="checkbox" id="fiance">
  <label for="fiance">金融</label>

  <input type="checkbox" id="manage">
  <label for="manage">管理</label><br><br><br>

  <input type="radio" name="gender" id="male">
  <label for="male">男</label>

  <input type="radio" name="gender" id="female">
  <label for="female">女</label>

  <script>
    $('#b1').click(function () {
      $('input[type="text"]:enabled').val('新的内容')
    })
  </script>
</body>

</html>

在这里插入图片描述

点击上面按钮：
在这里插入图片描述

上面的$('input[type="text"]:enabled').val('新的内容')语句也可以改为更简单的方式：$(':text:enabled').val('新的内容')

:disabled 选择器

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script src="js/jquery-3.7.1.js"></script>
  <style>
    #b1 {
      display: inline-block;
      font-size: 24px;
      margin-bottom: 20px;
    }

    input {
      font-size: 24px;
    }

    label {
      font-size: 24px;
    }
  </style>
</head>

<body>
  <input type="button" id="b1" value="利用jQuery对象的val()方法,改变表单内不可用input元素的值"><br><br>

  <input type="text" disabled placeholder="不可用值1">
  <input type="text" name="" id="" placeholder="可用值1">
  <input type="text" disabled placeholder="不可用值2">
  <input type="text" name="" id="" placeholder="可用值2"><br><br>

  <input type="checkbox" id="beauty">
  <label for="beauty">美容</label>

  <input type="checkbox" id="it">
  <label for="it">IT</label>

  <input type="checkbox" id="fiance">
  <label for="fiance">金融</label>

  <input type="checkbox" id="manage">
  <label for="manage">管理</label><br><br><br>

  <input type="radio" name="gender" id="male">
  <label for="male">男</label>

  <input type="radio" name="gender" id="female">
  <label for="female">女</label>

  <script>
    $('#b1').click(function () {
      // $('input[type="text"]:enabled').val('新的内容')
      $(':text:disabled').val('新的内容')
    })
  </script>
</body>

</html>

在这里插入图片描述

点击上面的按钮：
在这里插入图片描述

:checked 选择器

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script src="js/jquery-3.7.1.js"></script>
  <style>
    #b1 {
      display: inline-block;
      font-size: 24px;
      margin-bottom: 20px;
    }

    input {
      font-size: 24px;
    }

    label {
      font-size: 24px;
    }
  </style>
</head>

<body>
  <input type="button" id="b1" value="点击按钮，利用jQuery对象的length属性获取多选框选中的个数"><br><br>

  <input type="text" disabled placeholder="不可用值1">
  <input type="text" name="" id="" placeholder="可用值1">
  <input type="text" disabled placeholder="不可用值2">
  <input type="text" name="" id="" placeholder="可用值2"><br><br>

  <input type="checkbox" id="beauty">
  <label for="beauty">美容</label>

  <input type="checkbox" id="it">
  <label for="it">IT</label>

  <input type="checkbox" id="fiance">
  <label for="fiance">金融</label>

  <input type="checkbox" id="manage">
  <label for="manage">管理</label><br><br><br>

  <input type="radio" name="gender" id="male">
  <label for="male">男</label>

  <input type="radio" name="gender" id="female">
  <label for="female">女</label>

  <script>
    $('#b1').click(function () {
      const $cks = $(':checkbox:checked')
      alert($cks.length)
    })
  </script>
</body>

</html>

在这里插入图片描述

复选框中随便选中几个：
在这里插入图片描述

点击上面按钮：
在这里插入图片描述

:selected 选择器

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script src="js/jquery-3.7.1.js"></script>
  <style>
    #b1 {
      display: inline-block;
      font-size: 24px;
      margin-bottom: 20px;
    }

    input,
    label,
    select {
      font-size: 24px;
    }
  </style>
</head>

<body>
  <input type="button" id="b1" value="点击按钮，利用jQuery对象的text()方法，获取下拉框选中的内容"><br><br>

  <input type="text" disabled placeholder="不可用值1">
  <input type="text" name="" id="" placeholder="可用值1">
  <input type="text" disabled placeholder="不可用值2">
  <input type="text" name="" id="" placeholder="可用值2"><br><br>

  <input type="checkbox" id="beauty">
  <label for="beauty">美容</label>

  <input type="checkbox" id="it">
  <label for="it">IT</label>

  <input type="checkbox" id="fiance">
  <label for="fiance">金融</label>

  <input type="checkbox" id="manage">
  <label for="manage">管理</label><br><br><br>

  <input type="radio" name="gender" id="male">
  <label for="male">男</label>

  <input type="radio" name="gender" id="female">
  <label for="female">女</label>

  <br><br>

  <select name="job" id="job" multiple size="4">
    <option value="">java开发</option>
    <option value="">前端开发</option>
    <option value="">python开发</option>
    <option value="">人工智能开发</option>
  </select>

  <script>
    $('#b1').click(function () {
      const $ops = $('option:selected')
      alert($ops.text())
    })
  </script>
</body>

</html>

在这里插入图片描述

在下拉框中随便选中几项：
在这里插入图片描述

点击上面按钮：
在这里插入图片描述

听海边涛声
关注
  • 3
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
基于jQuery选择器之表单对象属性筛选选择器的实例
10-19
本文将详细讲解基于jQuery选择器在表单对象属性筛选方面的应用实例。利用jQuery选择器，开发者可以轻松地根据表单元素的属性状态进行元素的选择和操作。 1. 表单对象属性筛选选择器概述 在HTML表单中，输入元素如...
jQuery选择器之表单元素选择器详解
10-19
jQuery是目前最流行的JavaScript库之一，它极大地简化了HTML文档遍历和事件处理，以及动画和Ajax交互，...希望读者能够通过学习本文内容，熟练使用jQuery表单选择器，并在实际开发中广泛应用，提升开发效率和产品质量。
JQuery中常用的 属性选择器
小小刚CSDN
07-30 5464
jQuery中使用$()作为选择符极大提高工作效率以及方便快捷;一些常用属性的选择器由以下几种 1)　　$('#id')　　id选择器 2)　　$('.class')　　css选择器,class类名 3)　　$('element')　　标签选择器，例如p,h1,div 4)　　$('*')　　全选择器,可选择所有的html标签(影响范围较大甚用) 5)　　$('sele1,sele2')...
jQuery之表单选择器
python全栈
01-25 1029
关于表单项状态的选择器 :selected :checked :enabled :disabled :hidden :visible 注意$("input")和$(":input")的区别 $("input")：标签选择器，只匹配input标签, $(":input")： 匹配所有 input, textarea, select 和 button 元素 <!DOCTYPE html> <html> <head> <meta charset=
jQuery对象、基本选择器、表单属性过滤器和实现Ajax请求简介
Reggie97的博客
04-05 789
本文详细介绍了jQuery的含义，并介绍饿了DOM对象和jQuery对象的相互转化，并介绍了基本选择器和表单属性过滤器等内容，也介绍了如何操作jQuery数组，包括怎么jquery怎么使用Ajax发起请求。
jQuery选择器（一）基本选择器、层次选择器及属性选择器的详细使用
Jin_Xiang123的博客
01-14 3902
本篇文章主要介绍在jQuery中基本选择器、层次选择器及属性选择器的详细使用以及部分理论知识 在jQuery中，基本选择器是一组简单而直接的选择器，用于选择DOM元素。它们是最常用和最基础的选择器，可以根据元素的标签名、类名、id等属性来选择元素。基本选择器包括标签选择器、类选择器、ID选择器、并集选择器和全局选择器。名称语法构成描述示例标的id匹配元素。
JQuery选择器超级详细
热门推荐
林高禄
08-06 1万+
基本选择器 id选择器：$("#id的属性值") 获取与指定id属性值匹配的元素 单击按钮，将id为myid的元素背景为绿色 <%@ page contentType="text/html;charset=UTF-8" language="java" %> <html> <head> <title>JQuery选择器</title> <script src="js/jquery-3.3.1.min...
jquery 选择器(name,属性,元素)大全
heni6560的博客
12-27 1182
转载：https://www.cnblogs.com/hanqishihu/p/6096977.html jQuery 选择器大体上可分为：基本选择器、层次选择器、过滤选择器、表单选择器。 其中过滤选择器可以分为：简单过滤选择器、内容过滤选择器、可见性过滤选择器、属性过滤选择器、子元素过滤选择器、表单对象属性过滤选择器。选择器是jQuery最基础的东西，下面向大家介绍jquery+%D1%A1%...
jquery 选择器及循环
baobao__的博客
09-23 1979
文章目录1. 基本选择器2. 层次选择器3.基本过滤选择器4. 内容过滤选择器5.属性选择器6.表单相关选择器7.循环1.map2.each 1. 基本选择器 //标签 $("div").css("background","red"); //id $("#active").css("background","orange"); //类 $(".box").css("background","g...
jquery表单选择器
醉殇姒若梦遗年 ツ的博客
03-22 4474
表单选择器 jQuery专门加入了表单选择器，从而能够极其方便地获取到某个类型的表单元素 表单元素选择器 :input :input选择器选择input、textarea、select和button元素　　 :text :text选择器选择所有的单行文本框　 :password :password选择器选择所有的密码框 :radio :radio选择器选择所有的单选框 ...
轻松学会jQuery选择器的用法
不迁怒，不贰过。小知识，大智慧。
11-16 2180
本篇重点讲解jQuery中丰富的选择器，以及他们的基本用法。CSS的选择器均可以用jQuery的$进行选择，部分浏览器对CSS3的选择器支持不全，可以用jQuery作为补充，所以本篇重点介绍jQuery扩展的选择器。
jQuery(二)——jQuery选择器之表单对象过滤选择器
HangHug_L的博客
01-30 939
4. 表单对象过滤选择器 在开始之前，先介绍两个属性disabled属性和multiple属性，它们和checked属性、selected属性一样： checked=“checked” 表示多选框或单选框中的被初始时选中，不写就不选中。 selected=“selected” 表示下拉列表中的option项是否被选中 disabled=“disabled” 表示input输入框是否可用，默认可用，为enabled，disabled时不可用 multiple=“multiple” 表示下拉列表是否允许多
jquery表单对象属性过滤选择器实例分析
10-24
在本例中，我们关注的是jQuery中的表单对象属性过滤选择器，这些选择器专门用于筛选表单元素，如输入(input)、复选框(checkbox)、单选按钮(radio)以及下拉列表(select)的选项(option)。以下是对这些选择器的详细说明...
jQuery表单对象属性过滤选择器实例详解
11-24
本文实例讲述了jQuery表单对象属性过滤选择器。分享给大家供大家参考，具体如下： <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>2-11&lt...
vue3+vite 通过js引入的src，在打包后为什么不能显示
肖肖肖丽珠的博客
09-02 299
页面有个图片我是动态设置的。但是打包之后一直没有找到。我本来使用的绝对定位发现不行，改成了相对的也不行，最后改成下面的这种就可以啦。
跨页面进行数据通讯
榴莲不好吃的专栏
09-02 481
Broadcast Channel API 允许在一个源的不同窗口、标签页或 iframe 之间进行通信。这是一种实时的通信机制，非常适合需要实时同步数据的场景。3.iframe 数据通讯 postMessage/message（可设置不同源数据通讯）1.使用 LocalStorage 或 SessionStorage（同源）// 检查消息来源，确保来自正确的源。// 检查消息来源，确保来自正确的源。'Hello 来自父亲的消息!'Hello 来自儿子的消息!// 忽略来自自身的消息。
js对象操作常用方法
m0_75276704的博客
09-02 575
2.构造函数创建 2.方括号 三、添加属性 四、删除属性 五、判断属性是否存在 1.in运算符 2.hasOwnProperty方法 六、遍历对象属性 1.for...in...循环 2.Object.keys，Object.values，Object.entries 七、深拷贝与浅拷贝 1.浅拷贝 2.深拷贝 八、合并对象 Object.assign 九、其他方法 1.Object.is() 比较两个
Vue2 中对数组进行操作时需要注意什么
最新发布
m0_73882020的博客
09-06 314
在 Vue 2 中，对数组进行操作时，关键是确保操作能够被 Vue 的响应式系统检测到。使用 Vue 的响应式 API，如Vue.set或this.$set，可以确保数组的变化会被正确地反映到视图中。此外，避免直接修改数组的length属性或使用数组索引直接赋值，以确保视图的响应性。
网页开发 HTML
ultramand的博客
09-06 843
这个例子中，我使用了多个HTML标签来构建一个包含图像、图表、视频和其他元素的综合页面。// JavaScript代码。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值