基于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插件FusionCharts绘制的3D环饼图效果示例【附demo源码】
Apr 02 jQuery
jQuery EasyUI 组件加上“清除”功能实例详解
Apr 11 jQuery
jQuery实现在HTML文档加载完毕后自动执行某个事件的方法
May 08 jQuery
基于jquery日历价格、库存等设置插件
Jul 05 jQuery
简单实现jQuery弹窗效果
Oct 30 jQuery
jquery如何实现点击空白处隐藏元素
Dec 05 jQuery
jQuery图片查看插件Magnify开发详解
Dec 25 jQuery
关于jquery中attr()和prop()方法的区别
May 28 jQuery
JQuery扩展对象方法操作示例
Aug 21 jQuery
jquery操作select常见方法大全【7种情况】
May 28 jQuery
jQuery使用jsonp实现百度搜索的示例代码
Jul 08 jQuery
jQuery实现增删改查
Dec 22 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
Terran热键控制
2020/03/14 星际争霸
PHP取进制余数函数代码
2012/01/19 PHP
解析如何去掉CodeIgniter URL中的index.php
2013/06/25 PHP
php读取文件内容到数组的方法
2015/03/16 PHP
PHP使用array_fill定义多维数组的方法
2015/03/18 PHP
thinkPHP中create方法与令牌验证实例浅析
2015/12/08 PHP
PHP实现递归目录的5种方法
2016/10/27 PHP
JavaScript中的toLocaleLowerCase()方法使用详解
2015/06/06 Javascript
jQuery获取checkboxlist的value值的方法
2015/09/27 Javascript
从0开始学Vue
2016/10/27 Javascript
vue实现nav导航栏的方法
2017/12/13 Javascript
bootstrap fileinput插件实现预览上传照片功能
2018/01/23 Javascript
JSONP原理及应用实例详解
2018/09/13 Javascript
vue2.0 + ele的循环表单及验证字段方法
2018/09/18 Javascript
[01:11:21]DOTA2-DPC中国联赛 正赛 VG vs Elephant BO3 第一场 3月6日
2021/03/11 DOTA
用TensorFlow实现多类支持向量机的示例代码
2018/04/28 Python
python TKinter获取文本框内容的方法
2018/10/11 Python
Python numpy中矩阵的基本用法汇总
2019/02/12 Python
python导入pandas具体步骤方法
2019/06/23 Python
Python实现平行坐标图的绘制(plotly)方式
2019/11/22 Python
django连接mysql数据库及建表操作实例详解
2019/12/10 Python
python中对二维列表中一维列表的调用方法
2020/06/07 Python
高清屏下canvas重置尺寸引发的问题的解决
2019/10/14 HTML / CSS
萨克斯第五大道英国:Saks Fifth Avenue英国
2019/04/01 全球购物
Derek Rose官网:英国高档睡衣、家居服和内衣品牌
2020/01/18 全球购物
Java面试中常遇到的问题,也是需要注意的几点
2013/08/30 面试题
最新远光软件笔试题面试题内容
2013/11/08 面试题
《陋室铭》教学反思
2014/02/26 职场文书
历史专业大学生职业生涯规划书
2014/03/13 职场文书
保密承诺书范文
2014/03/27 职场文书
卖房协议书样本
2014/10/30 职场文书
工作检讨书大全
2015/01/26 职场文书
写一个Python脚本自动爬取Bilibili小视频
2021/04/24 Python
Golang 实现超大文件读取的两种方法
2021/04/27 Golang
MySQL如何快速创建800w条测试数据表
2022/03/17 MySQL
Android开发之WECHAT微信小程序路由跳转的两种形式
2022/04/12 Java/Android