基于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实现多级菜单效果
Jul 25 jQuery
jQuery实现点击DIV同时点击CheckBox,并为DIV上背景色的实例
Dec 18 jQuery
jQuery阻止事件冒泡实例分析
Jul 03 jQuery
jQuery轮播图实例详解
Aug 15 jQuery
jQuery实现轮播图及其原理详解
Apr 12 jQuery
使用jQuery给Table动态增加行、清空table的方法
Sep 05 jQuery
jQuery实现鼠标移入移出事件切换功能示例
Sep 06 jQuery
jQuery实现获取当前鼠标位置并输出功能示例
Jan 05 jQuery
JQuery获取可视区尺寸和文档尺寸及制作悬浮菜单示例
May 14 jQuery
jQuery中使用validate插件校验表单功能
May 24 jQuery
用jQuery实现抽奖程序
Apr 12 jQuery
ajax jquery实现页面某一个div的刷新效果
Mar 04 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 动态执行带有参数的类方法
2009/04/10 PHP
Uchome1.2 1.5 代码学习 common.php
2009/04/24 PHP
让PHP显示Facebook的粉丝数量方法
2014/01/08 PHP
php格式化时间戳显示友好的时间实现思路及代码
2014/10/23 PHP
php中PDO方式实现数据库的增删改查
2015/05/17 PHP
iOS10推送通知开发教程
2016/09/19 PHP
ThinkPHP6.0如何利用自定义验证规则规范的实现登陆
2020/12/16 PHP
JavaScript实际应用:innerHTMl和确认提示的使用
2006/06/22 Javascript
js checkbox(复选框) 使用集锦
2009/04/28 Javascript
js获取html参数及向swf传递参数应用介绍
2013/02/18 Javascript
阿里巴巴技术文章分享 Javascript继承机制的实现
2016/01/14 Javascript
nodejs个人博客开发第三步 载入页面
2017/04/12 NodeJs
微信小程序中的上拉、下拉菜单功能
2020/03/13 Javascript
[37:50]VP vs TNC Supermajor小组赛B组 BO3 第一场 6.2
2018/06/03 DOTA
[54:06]OG vs TNC 2018国际邀请赛小组赛BO2 第二场 8.19
2018/08/21 DOTA
web.py在模板中输出美元符号的方法
2014/08/26 Python
Python常用的文件及文件路径、目录操作方法汇总介绍
2015/05/21 Python
简单谈谈python中的Queue与多进程
2016/08/25 Python
使用python爬虫获取黄金价格的核心代码
2018/06/13 Python
对Python3 goto 语句的使用方法详解
2019/02/16 Python
Python多项式回归的实现方法
2019/03/11 Python
python中append实例用法总结
2019/07/30 Python
Python 获取numpy.array索引值的实例
2019/12/06 Python
tensorflow转换ckpt为savermodel模型的实现
2020/05/25 Python
佐卡伊官网:中国知名珠宝品牌
2017/02/05 全球购物
惊艳的手工时装首饰:Migonne Gavigan
2018/02/23 全球购物
Vertbaudet西班牙网上商店:婴儿服装、童装、母婴用品和儿童家具
2019/10/16 全球购物
什么是封装
2013/03/26 面试题
前台接待员岗位职责
2014/01/02 职场文书
2015年学校教务处工作总结
2015/05/11 职场文书
乡镇团委工作总结2015
2015/05/26 职场文书
小学三年级班主任工作经验交流材料
2015/11/02 职场文书
干货:如何写好观后感 !
2019/05/21 职场文书
Vue3.0中Ref与Reactive的区别示例详析
2021/07/07 Vue.js
使用PostGIS完成两点间的河流轨迹及流经长度的计算(推荐)
2022/01/18 PostgreSQL
详解Anyscript开发指南绕过typescript类型检查
2022/09/23 Javascript