基于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+ThinkPHP+Ajax实现即时消息提醒功能实例代码
Mar 21 jQuery
使用jQuery和ajax代替iframe的方法(详解)
Apr 12 jQuery
jQuery自定义元素右键点击事件(实现案例)
Apr 28 jQuery
jquery仿微信聊天界面
May 06 jQuery
jquery.validate.js 多个相同name的处理方式
Jul 10 jQuery
使用jquery+iframe做一个ajax上传效果(实例)
Aug 24 jQuery
jQuery plugin animsition使用小结
Sep 14 jQuery
jquery+ajaxform+springboot控件实现数据更新功能
Jan 22 jQuery
jquery radio 动态控制选中失效问题的解决方法
Feb 28 jQuery
jQuery实现仿京东防抖动菜单效果示例
Jul 06 jQuery
jQuery实现小火箭返回顶部特效
Feb 03 jQuery
JQuery获得内容和属性方法解析
May 30 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
php基础知识:类与对象(1)
2006/12/13 PHP
php桌面中心(一) 创建数据库
2007/03/11 PHP
PHP实现的简单mock json脚本分享
2015/02/10 PHP
CodeIgniter生成静态页的方法
2016/05/17 PHP
Laravel框架实现抢红包功能示例
2019/10/31 PHP
JAVASCRIPT style 中visibility和display之间的区别
2010/01/22 Javascript
一段批量给页面上的控件赋值js
2010/06/19 Javascript
个人总结的一些JavaScript技巧、实用函数、简洁方法、编程细节
2015/06/10 Javascript
JS数组排序技巧汇总(冒泡、sort、快速、希尔等排序)
2015/11/24 Javascript
js 单引号替换成双引号,双引号替换成单引号的实现方法
2017/02/16 Javascript
jQuery插件echarts设置折线图中折线线条颜色和折线点颜色的方法
2017/03/03 Javascript
vue v-on监听事件详解
2017/05/17 Javascript
使用原生js写ajax实例(推荐)
2017/05/31 Javascript
Vue2 监听属性改变watch的实例代码
2018/08/27 Javascript
Vue解析带html标签的字符串为dom的实例
2019/11/13 Javascript
Vue自定义表单内容检查rules实例
2020/10/30 Javascript
Python 拷贝对象(深拷贝deepcopy与浅拷贝copy)
2008/09/06 Python
python操作摄像头截图实现远程监控的例子
2014/03/25 Python
python通过线程实现定时器timer的方法
2015/03/16 Python
使用Python的Flask框架实现视频的流媒体传输
2015/03/31 Python
Mac 上切换Python多版本
2017/06/17 Python
磁盘垃圾文件清理器python代码实现
2020/08/24 Python
python自动化测试之如何解析excel文件
2019/06/27 Python
python实现门限回归方式
2020/02/29 Python
Python小白不正确的使用类变量实例
2020/05/29 Python
基于python实现生成指定大小txt文档
2020/07/20 Python
纯CSS3实现8组超炫酷鼠标滑过图片动画
2016/03/16 HTML / CSS
Backcountry旗下的户外商品闪购网站:steep&cheap
2016/09/22 全球购物
一份软件工程师的面试试题
2016/02/01 面试题
销售简历自我评价
2014/01/24 职场文书
幼儿园英语教学反思
2014/01/30 职场文书
内蒙古鄂尔多斯市市长寄语
2014/04/10 职场文书
初中教师业务学习材料
2014/05/12 职场文书
大学新闻系应届生求职信
2014/06/02 职场文书
SQL实战演练之网上商城数据库商品类别数据操作
2021/10/24 MySQL
JS实现简单九宫格抽奖
2022/06/28 Javascript