基于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中attr与prop的区别详解
May 27 jQuery
jQuery 添加样式属性的优先级别方法(推荐)
Jun 08 jQuery
jQuery 实现图片的依次加载图片功能
Jul 06 jQuery
使用jQuery实现动态添加小广告
Jul 11 jQuery
详解jQuery同步Ajax带来的UI线程阻塞问题及解决办法
Aug 09 jQuery
Mui使用jquery并且使用点击跳转新窗口的实例
Aug 19 jQuery
浅谈jquery中ajax跨域提交的时候会有2次请求的问题
Nov 10 jQuery
jQuery实现的卷帘门滑入滑出效果【案例】
Feb 18 jQuery
jQuery实现高级检索功能
May 28 jQuery
jQuery+PHP+Ajax实现动态数字统计展示功能
Dec 25 jQuery
jQuery实现手风琴效果(蒙版)
Jan 11 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使用token防止表单重复提交的方法
2016/04/07 PHP
PHP实现支付宝即时到账功能
2016/12/21 PHP
PHP中字符串长度的截取用法示例
2017/01/12 PHP
PHP 实现 WebSocket 协议原理与应用详解
2020/04/22 PHP
JavaScript 学习笔记(六)
2009/12/31 Javascript
Javascript 网页黑白效果实现代码(兼容IE/FF等)
2010/04/23 Javascript
推荐40款强大的 jQuery 导航插件和教程(上篇)
2012/09/14 Javascript
javascript解决innerText浏览器兼容问题思路代码
2013/05/17 Javascript
jquery弹出关闭遮罩层实例
2013/08/06 Javascript
js替代copy(示例代码)
2013/11/27 Javascript
jQuery中DOM树操作之复制元素的方法
2015/01/23 Javascript
jquery如何实现点击空白处隐藏元素
2017/12/05 jQuery
父组件中vuex方法更新state子组件不能及时更新并渲染的完美解决方法
2018/04/25 Javascript
基于vue-element组件实现音乐播放器功能
2018/05/06 Javascript
Vue-cli3项目配置Vue.config.js实战记录
2018/07/29 Javascript
Node如何后台数据库使用增删改查功能
2019/11/21 Javascript
解决removeEventListener 无法清除监听的问题
2020/10/30 Javascript
[01:06:43]完美世界DOTA2联赛PWL S3 PXG vs GXR 第二场 12.19
2020/12/24 DOTA
Python备份Mysql脚本
2008/08/11 Python
整理Python中的赋值运算符
2015/05/13 Python
tf.truncated_normal与tf.random_normal的详细用法
2018/03/05 Python
python pandas中对Series数据进行轴向连接的实例
2018/06/08 Python
python读取文本中的坐标方法
2018/10/14 Python
python实现图片中文字分割效果
2019/07/22 Python
python 实现多线程下载视频的代码
2019/11/15 Python
详解基于Facecognition+Opencv快速搭建人脸识别及跟踪应用
2021/01/21 Python
美国隐形眼镜网:Major Lens
2018/02/09 全球购物
一套比较完整的软件测试人员面试题
2012/05/13 面试题
工厂门卫的岗位职责
2014/07/27 职场文书
暑期培训班策划方案
2014/08/26 职场文书
就业协议书怎么填
2014/09/15 职场文书
党的群众路线教育实践活动先进个人材料
2014/12/24 职场文书
2015年秋季小班开学寄语
2015/05/27 职场文书
幼儿园卫生保健制度
2015/08/05 职场文书
阿里云 Windows server 2019 配置FTP
2022/04/28 Servers
浅谈css清除浮动(clearfix和clear)的用法
2023/05/21 HTML / CSS