基于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插件之validation插件
Mar 29 jQuery
jquery中封装函数传递当前元素的方法示例
May 05 jQuery
jquery Ajax实现Select动态添加数据
Jun 08 jQuery
jQuery层级选择器_动力节点节点Java学院整理
Jul 04 jQuery
jquery插件canvaspercent.js实现百分比圆饼效果
Jul 18 jQuery
基于jquery实现多级菜单效果
Jul 25 jQuery
jQuery实现菜单栏导航效果
Aug 15 jQuery
实现jquery放大镜的两种方法
Feb 22 jQuery
jQuery实现模拟搜索引擎的智能提示功能简单示例
Jan 27 jQuery
jQuery创建折叠式菜单
Jun 15 jQuery
jQuery AJAX应用实例总结
May 19 jQuery
jquery.validate自定义验证用法实例分析【成功提示与择要提示】
Jun 06 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时的知识积累总结
2013/06/07 PHP
一个不易被发现的PHP后门代码解析
2014/07/05 PHP
以文件形式缓存php变量的方法
2015/06/26 PHP
php取出数组单个值的方法
2018/03/12 PHP
JS实现点击图片在当前页面放大并可关闭的漂亮效果
2013/10/18 Javascript
JS获取月的最后一天与JS得到一个月份最大天数的实例代码
2013/12/16 Javascript
javascript页面上使用动态时间具体实现
2014/03/18 Javascript
JavaScript中实现最高效的数组乱序方法
2014/10/11 Javascript
JavaScript更改原始对象valueOf的方法
2015/03/19 Javascript
jquery实现全选、不选、反选的两种方法
2016/09/06 Javascript
如何给ss bash 写一个 WEB 端查看流量的页面
2017/03/23 Javascript
jQuery开源组件BootstrapValidator使用详解
2017/06/29 jQuery
Nodejs进阶之服务端字符编解码和乱码处理
2017/09/04 NodeJs
利用yarn代替npm管理前端项目模块依赖的方法详解
2017/09/04 Javascript
微信小程序使用progress组件实现显示进度功能【附源码下载】
2017/12/12 Javascript
layui中table表头样式修改方法
2018/08/15 Javascript
fetch 如何实现请求数据
2018/12/20 Javascript
Vue中使用create-keyframe-animation与动画钩子完成复杂动画
2019/04/09 Javascript
vue3 源码解读之 time slicing的使用方法
2019/10/31 Javascript
JS校验与最终登陆界面功能完整示例
2020/01/13 Javascript
python计算牛顿迭代多项式实例分析
2015/05/07 Python
Python实现将文本生成二维码的方法示例
2017/07/18 Python
numpy添加新的维度:newaxis的方法
2018/08/02 Python
Django微信小程序后台开发教程的实现
2020/06/03 Python
解决python图像处理图像赋值后变为白色的问题
2020/06/04 Python
Pycharm配置autopep8实现流程解析
2020/11/28 Python
10分钟理解CSS3 Grid布局
2018/12/20 HTML / CSS
加拿大领先的时尚和体育零售商:Sporting Life
2019/12/15 全球购物
中专生自我鉴定范文
2014/02/02 职场文书
治安消防安全责任书
2014/07/23 职场文书
2014年大学生预备党员思想汇报1000字
2014/09/13 职场文书
田径运动会通讯稿
2014/09/13 职场文书
2014年酒店前台工作总结
2014/11/14 职场文书
迎新生欢迎词2015
2015/07/16 职场文书
CSS变量实现主题切换的方法
2021/06/23 HTML / CSS
windows11选中自动复制怎么开启? Win11自动复制所选内容的方法
2022/07/23 数码科技