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>input、text、password、radio、checkbox</h3>
  <h3>submit、image、reset、button、file</h3>
  <div class="left first-div">
    <form>
      <input type="text" value="text类型"/>
      <input type="password" value="password"/>
      <input type="radio"/> 
      <input type="checkbox"/>
      <input type="submit" />
      <input type="image" />
      <input type="reset" />
      <input type="button" value="Button" />
      <input type="file" />
    </form>
  </div>

  <script type="text/javascript">
    //查找所有 input, textarea, select 和 button 元素
    //:input 选择器基本上选择所有表单控件
    $(":input").css("border", "1px groove red"); 
  </script>

  <script type="text/javascript">
    //匹配所有input元素中类型为text的input元素
    $(":text").css("background", "#A2CD5A");
  </script>

  <script type="text/javascript">
    //匹配所有input元素中类型为password的input元素
    $(":password").css("background", "yellow");
  </script>

  <script type="text/javascript">
    //匹配所有input元素中的单选按钮,并选中
    $(":radio").attr('checked','true');
  </script>

  <script type="text/javascript">
    //匹配所有input元素中的复选按钮,并选中
    $(":checkbox").attr('checked','true'); 
  </script>

  <script type="text/javascript">
    //匹配所有input元素中的提交的按钮,修改背景颜色
    $(":submit").css("background", "#C6E2FF");
  </script>

  <script type="text/javascript">
    //匹配所有input元素中的图像类型的元素,修改背景颜色
    $(":image").css("background", "#F4A460");
  </script>

  <script type="text/javascript">
    //匹配所有input元素中类型为按钮的元素
    $(":button").css("background", "red");
  </script>

  <script type="text/javascript">
    //匹配所有input元素中类型为file的元素
    $(":file").css("background", "#CD1076");
  </script>

</body>

</html>

jQuery选择器之表单元素选择器详解

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

jQuery 相关文章推荐
jQuery自定义图片上传插件实例代码
Apr 04 jQuery
jQuery Validate表单验证插件实现代码
Jun 08 jQuery
jQuery 实现图片的依次加载图片功能
Jul 06 jQuery
JQuery 获取Dom元素的实例讲解
Jul 08 jQuery
jQuery实现手势解锁密码特效
Aug 14 jQuery
jQuery.Sumoselect插件实现下拉复选框效果
Nov 09 jQuery
jQuery中复合选择器简单用法示例
Mar 31 jQuery
jQuery中图片展示插件highslide.js的简单dom
Apr 22 jQuery
为jquery的ajax请求添加超时timeout时间的操作方法
Sep 04 jQuery
jQuery序列化form表单数据为JSON对象的实现方法
Sep 20 jQuery
Jquery $.map使用方法实例详解
Sep 01 jQuery
jQuery实现日历效果
Sep 11 jQuery
jQuery实现简单日期格式化功能示例
Sep 19 #jQuery
使用vue与jquery实时监听用户输入状态的操作代码
Sep 19 #jQuery
jQuery选择器之属性筛选选择器用法详解
Sep 19 #jQuery
基于jQuery选择器之表单对象属性筛选选择器的实例
Sep 19 #jQuery
jQuery选择器之子元素选择器详解
Sep 18 #jQuery
jQuery实现的表格前端排序功能示例
Sep 18 #jQuery
jQuery实现对网页节点的增删改查功能示例
Sep 18 #jQuery
You might like
jquery+php+ajax显示上传进度的多图片上传并生成缩略图代码
2014/10/15 PHP
php pdo连接数据库操作示例
2019/11/18 PHP
thinkphp5.1 框架导入/导出excel文件操作示例
2020/05/25 PHP
javascript返回顶部效果(自写代码)
2013/01/06 Javascript
jquery用data方法获取某个元素上的事件
2014/06/23 Javascript
jQuery控制TR显示隐藏的三种常用方法
2014/08/21 Javascript
JavaScript中扩展Array contains方法实例
2020/08/23 Javascript
js实现带按钮的上下滚动效果
2015/05/12 Javascript
IE8 内存泄露(内存一直增长 )的原因及解决办法
2016/04/06 Javascript
js获取客户端操作系统类型的方法【测试可用】
2016/05/27 Javascript
基于Bootstrap的Metronic框架实现条码和二维码的生成及打印处理操作
2016/08/29 Javascript
Vuex实现计数器以及列表展示效果
2018/03/10 Javascript
浅谈Angularjs中不同类型的双向数据绑定
2018/07/16 Javascript
vue router 跳转时打开新页面的示例方法
2019/07/28 Javascript
使用p5.js临摹动态图片
2019/11/04 Javascript
解决vue-router 切换tab标签关闭时缓存问题
2020/07/22 Javascript
Pycharm编辑器技巧之自动导入模块详解
2017/07/18 Python
python+selenium识别验证码并登录的示例代码
2017/12/21 Python
Pygame框架实现飞机大战
2020/08/07 Python
超级实用的8个Python列表技巧
2020/08/24 Python
python进行OpenCV实战之画图(直线、矩形、圆形)
2020/08/27 Python
Django中使用Celery的方法步骤
2020/12/07 Python
Kendra Scott官网:美国领先的时尚配饰品牌
2020/10/22 全球购物
新闻编辑自荐信
2013/11/03 职场文书
签约仪式主持词
2014/03/19 职场文书
学校工作推荐信范文
2014/07/11 职场文书
亲子阅读的活动方案
2014/08/15 职场文书
个人委托书范本
2014/09/13 职场文书
党支部三严三实对照检查材料思想汇报
2014/09/29 职场文书
2014年大学班级工作总结
2014/11/14 职场文书
2015年社区中秋节活动总结
2015/03/23 职场文书
2015年度对口支援工作总结
2015/07/22 职场文书
2016教师校本研修心得体会
2016/01/08 职场文书
入门学习Go的基本语法
2021/07/07 Golang
JS前端轻量fabric.js系列物体基类
2022/08/05 Javascript
windows server2012 R2下安装PaddleOCR服务的的详细步骤
2022/09/23 Servers