基于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用noConflict代替$的实现方法
Apr 12 jQuery
jquery点赞功能实现代码 点个赞吧!
May 29 jQuery
jQuery 实时保存页面动态添加的数据的示例
Aug 14 jQuery
jQuery的时间datetime控件在AngularJs中的使用实例(分享)
Aug 17 jQuery
详解webpack3如何正确引用并使用jQuery库
Aug 26 jQuery
Vue引入jquery实现平滑滚动到指定位置
May 09 jQuery
jQuery实现图片上传预览效果功能完整实例【测试可用】
May 28 jQuery
jQuery实现基本淡入淡出效果的方法详解
Sep 05 jQuery
jquery分页插件pagination使用教程
Oct 23 jQuery
jQuery实现侧边栏隐藏与显示的方法详解
Dec 22 jQuery
jQuery实现高级检索功能
May 28 jQuery
Jquery 动态添加元素并添加点击事件实现过程解析
Oct 12 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批量缩放图片的代码[ini参数控制]
2011/02/11 PHP
php 利用array_slice函数获取随机数组或前几条数据
2015/09/30 PHP
Laravel 集成微信用户登录和绑定的实现
2019/12/27 PHP
javascript如何动态加载表格与动态添加表格行
2013/11/27 Javascript
JS实现统计复选框选中个数并提示确定与取消的方法
2015/07/01 Javascript
javascript中的 object 和 function小结
2016/08/14 Javascript
移动端点击图片放大特效PhotoSwipe.js插件实现
2016/08/25 Javascript
打字效果动画的4种实现方法(超简单)
2017/10/18 Javascript
js代码规范之Eslint安装与配置详解
2018/09/08 Javascript
详解Vue中使用插槽(slot)、聚类插槽
2019/04/12 Javascript
深度了解vue.js中hooks的相关知识
2019/06/14 Javascript
原生javascript自定义input[type=radio]效果示例
2019/08/27 Javascript
[01:08]DOTA2“血战之命”预告片
2017/08/12 DOTA
Python程序中的观察者模式结构编写示例
2016/05/27 Python
python+matplotlib实现动态绘制图片实例代码(交互式绘图)
2018/01/20 Python
详解Python3 中hasattr()、getattr()、setattr()、delattr()函数及示例代码数
2018/04/18 Python
python使用turtle库绘制时钟
2020/03/25 Python
华为校园招聘上机笔试题 扑克牌大小(python)
2020/04/22 Python
Mac在python3环境下安装virtualwrapper遇到的问题及解决方法
2019/07/09 Python
PowerBI和Python关于数据分析的对比
2019/07/11 Python
Python实现PyPDF2处理PDF文件的方法示例
2019/09/25 Python
Python数据可视化:泊松分布详解
2019/12/07 Python
pycharm使用技巧之自动调整代码格式总结
2020/11/04 Python
CSS3中border-radius属性设定圆角的使用技巧
2016/05/10 HTML / CSS
DJI大疆无人机官方商城:全球领先的无人飞行器研发和生产商
2016/12/21 全球购物
Ever New加拿大官网:彰显女性美
2018/10/05 全球购物
美国传奇滑手Paul Rodriguez创办的街头滑板品牌:Primitive Skateboarding
2019/10/29 全球购物
奥巴马胜选演讲稿
2014/05/15 职场文书
2015年度优秀员工推荐信
2015/03/23 职场文书
中秋节寄语2015
2015/03/24 职场文书
会计岗位职责范本
2015/04/02 职场文书
2015年音乐教研组工作总结
2015/07/22 职场文书
MySQL面试题讲解之如何设置Hash索引
2021/11/01 MySQL
Python可视化学习之matplotlib内置单颜色
2022/02/24 Python
Win11使用CAD卡顿或者致命错误怎么办?Win11无法正常使用CAD的解决方法
2022/07/23 数码科技
apache虚拟主机配置的三种方式(小结)
2022/07/23 Servers