基于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+pjax简单示例汇总
Apr 21 jQuery
jquery仿微信聊天界面
May 06 jQuery
使用jQuery.Pin垂直滚动时固定导航
May 24 jQuery
jQuery实现鼠标响应式透明度渐变动画效果示例
Feb 13 jQuery
jQuery插件Validation表单验证详解
May 26 jQuery
jQuery实现的鼠标拖动浮层功能示例【拖动div等任何标签】
Dec 29 jQuery
jquery中attr、prop、data区别与用法分析
Sep 25 jQuery
JQuery 实现文件下载的常用方法分析
Oct 29 jQuery
jQuery Datatables 动态列+跨列合并实现代码
Jan 30 jQuery
jQuery实现移动端下拉展现新的内容回弹动画
Jun 24 jQuery
js和jquery判断数据类型的4种方法总结
Aug 28 jQuery
jquery插件实现悬浮的菜单
Apr 24 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
浅析Dos下运行php.exe,出现没有找到php_mbstring.dll 错误的解决方法
2013/06/29 PHP
Symfony2获取web目录绝对路径、相对路径、网址的方法
2016/11/14 PHP
浅谈php中curl、fsockopen的应用
2016/12/10 PHP
iis6手工创建网站后无法运行php脚本的解决方法
2017/06/08 PHP
ThinkPHP5+UEditor图片上传到阿里云对象存储OSS功能示例
2019/08/05 PHP
用php定义一个数组最简单的方法
2019/10/04 PHP
laravel-admin自动生成模块,及相关基础配置方法
2019/10/08 PHP
页面中iframe相互传值传参
2009/12/13 Javascript
js判读浏览器是否支持html5的canvas的代码
2013/11/18 Javascript
JavaScript异步回调的Promise模式封装实例
2014/06/07 Javascript
JS获得选取checkbox整行数据的方法
2015/01/28 Javascript
JS实现IE状态栏文字缩放效果代码
2015/10/24 Javascript
jquery UI Datepicker时间控件的使用方法(加强版)
2015/11/07 Javascript
jQuery实现选中弹出窗口选择框内容后赋值给文本框的方法
2015/11/23 Javascript
基于css3新属性transform及原生js实现鼠标拖动3d立方体旋转
2016/06/12 Javascript
Javascript随机标签云代码实例
2016/06/21 Javascript
利用原生js实现html5小游戏之打砖块(附源码)
2018/01/03 Javascript
详解关于JSON.parse()和JSON.stringify()的性能小测试
2019/03/14 Javascript
vue resource发送请求的几种方式
2019/09/30 Javascript
Js生成随机数/随机字符串的方法小结【5种方法】
2020/05/27 Javascript
Vue如何循环提取对象数组中的值
2020/11/18 Vue.js
python实现按长宽比缩放图片
2018/06/07 Python
python3.7 使用pymssql往sqlserver插入数据的方法
2019/07/08 Python
python+playwright微软自动化工具的使用
2021/02/02 Python
canvas简易绘图的实现(海绵宝宝篇)
2018/07/04 HTML / CSS
国际知名设计师时装商店:Coggles
2016/09/05 全球购物
英国最大的在线床超市:Bed Star
2019/01/24 全球购物
一些PHP的面试题
2015/05/06 面试题
学生励志演讲稿
2014/01/06 职场文书
巧克力蛋糕店创业计划书
2014/01/14 职场文书
清洁工岗位职责
2014/01/29 职场文书
副科级后备干部考察材料
2014/05/15 职场文书
法院信息化建设方案
2014/05/21 职场文书
火灾现场处置方案
2014/05/28 职场文书
在职人员跳槽求职信
2015/03/20 职场文书
分析Python感知线程状态的解决方案之Event与信号量
2021/06/16 Python