基于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.serializeJSON
Jun 23 jQuery
jQuery封装placeholder效果实现方法,让低版本浏览器支持该效果
Jul 08 jQuery
jQuery EasyUI 选项卡面板tabs的使用实例讲解
Dec 25 jQuery
jQuery实现鼠标响应式淘宝动画效果示例
Feb 13 jQuery
jquery动态添加带有样式的HTML标签元素方法
Feb 24 jQuery
jQuery实现form表单序列化转换为json对象功能示例
May 23 jQuery
jQuery实现下拉菜单动态添加数据点击滑出收起其他功能
Jun 14 jQuery
jQuery实现的3D版图片轮播示例【滑动轮播】
Jan 18 jQuery
jQuery移动端跑马灯抽奖特效升级版(抽奖概率固定)实现方法
Jan 18 jQuery
jQuery each和js forEach用法比较
Feb 27 jQuery
jQuery对底部导航进行跳转并高亮显示的实例代码
Apr 23 jQuery
jquery将信息遍历到界面上实例代码
Jan 21 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
FirePHP 推荐一款PHP调试工具
2011/04/23 PHP
采用thinkphp自带方法生成静态html文件详解
2014/06/13 PHP
PHP代码重构方法漫谈
2018/04/17 PHP
PHP 图片合成、仿微信群头像的方法示例
2019/10/25 PHP
JQUERY设置IFRAME的SRC值的代码
2010/11/30 Javascript
js前台判断开始时间是否小于结束时间
2012/02/23 Javascript
js动态创建、删除表格示例代码
2013/08/07 Javascript
JavaScript中reduce()方法的使用详解
2015/06/09 Javascript
js查看一个函数的执行时间实例代码
2015/09/12 Javascript
在网页中插入百度地图的步骤详解
2016/12/02 Javascript
Angular.js实现注册系统的实例详解
2016/12/18 Javascript
使用grunt合并压缩js和css文件的方法
2017/03/02 Javascript
Javascript实现信息滚动效果
2017/05/18 Javascript
深入理解vue.js中的v-if和v-show
2017/06/22 Javascript
countUp.js实现数字动态变化效果
2019/10/17 Javascript
轻松掌握python设计模式之访问者模式
2016/11/18 Python
Django中login_required装饰器的深入介绍
2017/11/24 Python
Python 12306抢火车票脚本
2018/02/07 Python
python实现日志按天分割
2019/07/22 Python
使用浏览器访问python写的服务器程序
2019/10/10 Python
Python xlrd excel文件操作代码实例
2020/03/10 Python
python:删除离群值操作(每一行为一类数据)
2020/06/08 Python
python中线程和进程有何区别
2020/06/17 Python
python Pexpect模块的使用
2020/12/25 Python
网购亚洲时装、美容产品和生活百货:YesStyle
2016/09/15 全球购物
定制别致的瑜伽垫:Sugarmat
2019/06/21 全球购物
JAVA和C++区别都有哪些
2015/03/30 面试题
运动会通讯稿50字
2014/01/30 职场文书
农村结婚典礼司仪主持词
2014/03/14 职场文书
加油口号大全
2014/06/13 职场文书
自我管理的活动方案
2014/08/25 职场文书
2014年社区妇联工作总结
2014/12/02 职场文书
旷工检讨书1000字
2015/01/01 职场文书
会议主持人开场白台词
2015/05/28 职场文书
MySQL系列之五 视图、存储函数、存储过程、触发器
2021/07/02 MySQL
铁拳制作人赞《铁拳7》老头环Mod:制作精良 但别弄了
2022/04/03 其他游戏