基于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插件HighCharts绘制简单2D柱状图效果示例【附demo源码】
Mar 21 jQuery
Jquery获取radio选中的值
May 05 jQuery
jQuery实现的表格前端排序功能示例
Sep 18 jQuery
jQuery访问浏览器本地存储cookie、localStorage和sessionStorage的基本用法
Oct 20 jQuery
基于jquery.page.js实现分页效果
Jan 01 jQuery
jQuery第一次运行页面默认触发点击事件的实例
Jan 10 jQuery
jquery 获取索引值在一定范围的列表方法
Jan 25 jQuery
jQuery实现的老虎机跑动效果示例
Dec 29 jQuery
jQuery实现的中英文切换功能示例
Jan 11 jQuery
JQueryDOM之样式操作
Mar 27 jQuery
jQuery Ajax async=&gt;false异步改为同步时,解决导致浏览器假死的问题
Jul 22 jQuery
jQuery实现可以扩展的日历
Dec 01 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 配置文件中open_basedir选项作用
2009/07/19 PHP
PHP实现的购物车类实例
2015/06/17 PHP
利用PHP如何实现Socket服务器
2015/09/23 PHP
详解PHP字符串替换str_replace()函数四种用法
2017/10/13 PHP
JQuery UI DatePicker中z-index默认为1的解决办法
2010/09/28 Javascript
javascript 隔行换色函数代码
2010/10/24 Javascript
jquery 插件学习(一)
2012/08/06 Javascript
基于JavaScript 下namespace 功能的简单分析
2013/07/05 Javascript
jquery实现在页面加载的时自动为日期插件添加当前日期
2014/08/20 Javascript
jQuery的图片滑块焦点图插件整理推荐
2014/12/07 Javascript
基于jquery实现人物头像跟随鼠标转动
2015/08/23 Javascript
适用于javascript开发者的Processing.js入门教程
2016/02/24 Javascript
动态加载js文件简单示例
2016/04/21 Javascript
5个最顶级jQuery图表类库插件【jquery插件库】
2016/05/05 Javascript
全面解析JavaScript中“&amp;&amp;”和“||”操作符(总结篇)
2016/07/18 Javascript
JavaScript常用正则函数用法示例
2017/01/23 Javascript
JS简单封装的图片无缝滚动效果示例【测试可用】
2017/03/22 Javascript
JavaScript实现离开页面前提示功能【附jQuery实现方法】
2017/09/26 jQuery
Vue封装Swiper实现图片轮播效果
2018/02/06 Javascript
浅谈django开发者模式中的autoreload是如何实现的
2017/08/18 Python
python 将对象设置为可迭代的两种实现方法
2019/01/21 Python
详解Python做一个名片管理系统
2019/03/14 Python
Pytorch中的VGG实现修改最后一层FC
2020/01/15 Python
python根据字典的键来删除元素的方法
2020/08/16 Python
python爬虫分布式获取数据的实例方法
2020/11/26 Python
python+opencv3.4.0 实现HOG+SVM行人检测的示例代码
2021/01/28 Python
HTML如何让IMG自动适应DIV容器大小的实现方法
2020/02/25 HTML / CSS
Ibatis如何调用存储过程
2015/05/15 面试题
教师党的群众路线教育实践活动学习心得体会
2014/10/30 职场文书
2014年工程部工作总结
2014/11/25 职场文书
独生子女证明范本
2015/06/19 职场文书
Python代码,能玩30多款童年游戏!这些有几个是你玩过的
2021/04/27 Python
zabbix agent2 监控oracle数据库的方法
2021/05/13 Oracle
python字符串的多行输出的实例详解
2021/06/08 Python
一篇带你入门Java垃圾回收器
2021/06/16 Java/Android
海贼王十大潜力果实,路飞仅排第十,第一可毁世界(震震果实)
2022/03/18 日漫