基于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插件FusionWidgets实现的Cylinder图效果示例【附demo源码】
Mar 23 jQuery
jQuery为某个div加入行样式
Jun 09 jQuery
jQuery 利用ztree实现树形表格的实例代码
Sep 27 jQuery
原生JS与jQuery编写简单选项卡
Oct 30 jQuery
详解在vue-cli中引用jQuery、bootstrap以及使用sass、less编写css
Nov 08 jQuery
jQuery实现的淡入淡出与滑入滑出效果示例
Apr 18 jQuery
Vue引入jquery实现平滑滚动到指定位置
May 09 jQuery
详解jQuery-each()方法
Mar 13 jQuery
基于 jQuery 实现键盘事件监听控件
Apr 04 jQuery
使用JQuery自动完成插件Auto Complete详解
Jun 18 jQuery
JQuery中的常用事件、对象属性与使用方法分析
Dec 23 jQuery
如何基于jQuery实现五角星评分
Sep 02 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获取金书网的书名的实现代码
2010/06/11 PHP
PHP自定义大小验证码的方法详解
2013/06/07 PHP
php 修改、增加xml结点属性的实现代码
2013/10/22 PHP
php过滤HTML标签、属性等正则表达式汇总
2014/09/22 PHP
Smarty中调用FCKeditor的方法
2014/10/27 PHP
Laravel使用原生sql语句并调用的方法
2019/10/09 PHP
js单例模式详解实例
2013/11/21 Javascript
jquery validate 自定义验证方法介绍 日期验证
2014/02/27 Javascript
JavaScript截取字符串的Slice、Substring、Substr函数详解和比较
2014/03/20 Javascript
javascript实现存储hmtl字符串示例
2014/04/25 Javascript
js 获取本地文件及目录的方法(推荐)
2016/11/10 Javascript
前端把html表格生成为excel表格的实例
2017/09/19 Javascript
浅析前端路由简介以及vue-router实现原理
2018/06/01 Javascript
在vue项目中集成graphql(vue-ApolloClient)
2018/09/08 Javascript
让 babel webpack vue 配置文件支持智能提示的方法
2019/06/22 Javascript
Net微信网页开发 使用微信JS-SDK获取当前地理位置过程详解
2019/08/26 Javascript
webpack打包优化的几个方法总结
2020/02/10 Javascript
Vue列表如何实现滚动到指定位置样式改变效果
2020/05/09 Javascript
JS canvas实现画板和签字板功能
2021/02/23 Javascript
python命令行参数sys.argv使用示例
2014/01/28 Python
Python微信库:itchat的用法详解
2017/08/14 Python
Python Paramiko模块的使用实际案例
2018/02/01 Python
使用python3实现操作串口详解
2019/01/01 Python
Python基础知识点 初识Python.md
2019/05/14 Python
Python 异常处理Ⅳ过程图解
2019/10/18 Python
pandas实现excel中的数据透视表和Vlookup函数功能代码
2020/02/14 Python
详解python如何引用包package
2020/06/07 Python
Html5大文件断点续传实现方法
2015/12/05 HTML / CSS
办加油卡单位介绍信
2014/01/09 职场文书
物流专业求职计划书
2014/01/10 职场文书
中医临床专业自我鉴定范文
2014/01/15 职场文书
小学毕业典礼主持词
2014/03/27 职场文书
蛋糕店创业计划书范文
2014/09/21 职场文书
诚信承诺书
2015/01/19 职场文书
学生逃课检讨书
2015/02/17 职场文书
导游词之山西关帝庙
2019/11/01 职场文书