基于jQuery选择器之表单对象属性筛选选择器的实例


Posted in jQuery onSeptember 19, 2017

基于jQuery选择器之表单对象属性筛选选择器的实例

<!DOCTYPE html>
<html>

<head>
  <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
  <title></title>
  <link rel="stylesheet" href="imooc.css" rel="external nofollow" type="text/css">
  <style>
  input {
    display: block;
    margin: 10px;
    padding: 10px;
  }
  </style>
  <script src="http://libs.baidu.com/jquery/1.9.1/jquery.js"></script>
</head>

<body>
  <h2>子元素筛选选择器</h2>
  <h3>enabled、disabled</h3>
  <form>
    <input type="text" value="未设置disabled" />
    <input type="text" value="设置disabled" disabled />
    <input type="text" value="未设置disabled" />
  </form>

  <script type="text/javascript">
    //查找所有input所有可用的(未被禁用的元素)input元素。
    $("input:enabled").css("border", "2px groove red");
  </script>

  <script type="text/javascript">
    //查找所有input所有不可用的(被禁用的元素)input元素。
    $("input:disabled").css("border", "2px groove blue");
  </script>

  <h3>checked、selected</h3>
  <form>
    <input type="checkbox" checked="checked">
    <input type="checkbox">
    <input type="radio" checked>    
    <input type="radio">
    
    <select name="garden" multiple="multiple">
      <option>imooc</option>
      <option selected="selected">慕课网</option>
      <option>aaron</option>
      <option selected="selected">博客园</option>
     </select>

  </form>

  <script type="text/javascript">
     //查找所有input所有勾选的元素(单选框,复选框)
     //移除input的checked属性
    $("input:checked").removeAttr('checked')
  </script>

  <script type="text/javascript">
     //查找所有option元素中,有selected属性被选中的选项
     //移除option的selected属性
    $("option:selected").removeAttr('selected')
  </script>

</body>

</html>

注意:

在某些浏览器中,选择器:checked可能会错误选取到<option>元素,所以保险起见换用选择器input:checked,确保只会选取<input>元素

以上这篇jQuery选择器之表单对象属性筛选选择器实例就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

jQuery 相关文章推荐
Jquery-data的三种用法
Apr 18 jQuery
jQuery实现可编辑表格并生成json结果(实例代码)
Jul 19 jQuery
基于jQuery实现的单行公告活动轮播效果
Aug 23 jQuery
bootstrap+jquery项目引入文件报错的解决方法
Jan 22 jQuery
jquery 实现拖动文件上传加载进度条功能
Mar 18 jQuery
jQuery实现的简单歌词滚动功能示例
Jan 07 jQuery
Jquery的Ajax技术使用方法
Jan 21 jQuery
Jquery滑动门/tab切换实现方法完整示例
Jun 05 jQuery
jQuery实现简单飞机大战
Jul 05 jQuery
jquery实现简易验证插件封装
Sep 13 jQuery
jQuery实现简单评论区功能
Oct 26 jQuery
jQuery实现容器间的元素拖拽功能
Dec 01 jQuery
jQuery选择器之子元素选择器详解
Sep 18 #jQuery
jQuery实现的表格前端排序功能示例
Sep 18 #jQuery
jQuery实现对网页节点的增删改查功能示例
Sep 18 #jQuery
jQuery UI 实例讲解 - 日期选择器(Datepicker)
Sep 18 #jQuery
jQuery实现火车票买票城市选择切换功能
Sep 15 #jQuery
jQuery获取复选框选中的当前行的某个字段的值
Sep 15 #jQuery
jQuery plugin animsition使用小结
Sep 14 #jQuery
You might like
Yii2超好用的日期和时间组件(值得收藏)
2016/05/05 PHP
PHP简单留言本功能实现代码
2017/06/09 PHP
PHP实现数据四舍五入的方法小结【4种方法】
2019/03/27 PHP
JavaScript高级程序设计(第3版)学习笔记7 js函数(上)
2012/10/11 Javascript
JavaScript中的数值范围介绍
2014/12/29 Javascript
javascript实现简单的贪吃蛇游戏
2015/03/31 Javascript
jQuery鼠标悬浮链接弹出跟随图片实例代码
2016/01/08 Javascript
jQuery实现的文字hover颜色渐变效果实例
2016/02/20 Javascript
ie下js不执行的几种可能
2017/02/28 Javascript
node.js利用redis数据库缓存数据的方法
2017/03/01 Javascript
JavaScript实现两个select下拉框选项左移右移
2017/03/09 Javascript
js实现手机发送验证码功能
2017/03/13 Javascript
jQuery实现仿京东防抖动菜单效果示例
2018/07/06 jQuery
解决vue同一slot在组件中渲染多次的问题
2018/09/06 Javascript
angular 服务的单例模式(依赖注入模式下)详解
2018/10/22 Javascript
如何在JavaScript中正确处理变量
2020/12/25 Javascript
python快速排序代码实例
2013/11/21 Python
Windows系统配置python脚本开机启动的3种方法分享
2015/03/10 Python
在Python中的Django框架中进行字符串翻译
2015/07/27 Python
python实现批量修改文件名代码
2017/09/10 Python
Python的CGIHTTPServer交互实现详解
2018/02/08 Python
Python 查找list中的某个元素的所有的下标方法
2018/06/27 Python
Django框架之中间件MiddleWare的实现
2019/12/30 Python
python使用正则表达式(Regular Expression)方法超详细
2019/12/30 Python
关于win10在tensorflow的安装及在pycharm中运行步骤详解
2020/03/16 Python
详解python程序中的多任务
2020/09/16 Python
python中类与对象之间的关系详解
2020/12/16 Python
3种方式实现瀑布流布局小结
2019/09/05 HTML / CSS
Bloomingdale’s阿联酋:选购奢华时尚、美容及更多
2020/09/22 全球购物
护理工作感言
2014/01/16 职场文书
致裁判员加油稿
2014/02/08 职场文书
党员公开承诺书范文
2014/03/25 职场文书
市场调查策划方案
2014/06/10 职场文书
给校长的一封检讨书
2014/09/20 职场文书
教师党员个人剖析材料
2014/09/29 职场文书
2015年个人自我剖析材料
2014/12/29 职场文书