jQuery表单元素选择器代码实例


Posted in Javascript onFebruary 06, 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" 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", "3px groove blue"); 
  </script>

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

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

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

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

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

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

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

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

</body>

</html>

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

Javascript 相关文章推荐
javascript encodeURI和encodeURIComponent的比较
Apr 03 Javascript
Extjs显示从数据库取出时间转换JSON后的出现问题
Nov 20 Javascript
javascript 实现 秒杀,团购 倒计时展示的记录 分享
Jul 12 Javascript
Javascript操作URL函数修改版
Nov 07 Javascript
ie浏览器使用js导出网页到excel并打印
Mar 11 Javascript
详解AngularJS中的filter过滤器用法
Jan 04 Javascript
JS实现的自定义水平滚动字体插件完整实例
Jun 17 Javascript
微信小程序之仿微信漂流瓶实例
Dec 09 Javascript
JavaScript求一个数组中重复出现次数最多的元素及其下标位置示例
Jul 23 Javascript
了解前端理论:rscss和rsjs
May 23 Javascript
使用Angular9和TypeScript开发RPG游戏的方法
Mar 25 Javascript
Webpack3+React16代码分割的实现
Mar 03 Javascript
Jquery鼠标放上去显示全名的实现方法
Feb 06 #Javascript
如何获取元素的最终background-color
Feb 06 #Javascript
a标签置灰不可点击的实现方法
Feb 06 #Javascript
最常见和最有用的字符串相关的方法详解
Feb 06 #Javascript
jquery uploadify隐藏上传进度的实现方法
Feb 06 #Javascript
Javascript中的prototype与继承
Feb 06 #Javascript
canvas实现粒子时钟效果
Feb 06 #Javascript
You might like
打造计数器DIY三步曲(下)
2006/10/09 PHP
Laravel中注册Facades的步骤详解
2016/03/16 PHP
thinkPHP删除前弹出确认框的简单实现方法
2016/05/16 PHP
PHP实现基于图的深度优先遍历输出1,2,3...n的全排列功能
2017/11/10 PHP
php curl优化下载微信头像的方法总结
2018/09/07 PHP
Laravel框架实现抢红包功能示例
2019/10/31 PHP
javascript mouseover、mouseout停止事件冒泡的解决方案
2009/04/07 Javascript
Mootools 1.2教程 滚动条(Slider)
2009/09/15 Javascript
url 特殊字符 传递参数解决方法
2010/01/01 Javascript
javascript 程序库的比较(一)之DOM功能
2010/04/07 Javascript
jQuery getJSON()+.ashx 实现分页(改进版)
2013/03/28 Javascript
js运动动画的八个知识点
2015/03/12 Javascript
jQuery中 prop() attr()使用详解
2015/05/19 Javascript
Backbone.js 0.9.2 源码注释中文翻译版
2015/06/25 Javascript
js随机生成字母数字组合的字符串 随机动画数字
2015/09/02 Javascript
关于backbone url请求中参数带有中文存入数据库是乱码的快速解决办法
2016/06/13 Javascript
基于bootstrap风格的弹框插件
2016/12/28 Javascript
微信小程序文章详情页面实现代码
2018/09/10 Javascript
vue中轮训器的使用
2019/01/27 Javascript
jquery轻量级数字动画插件countUp.js使用详解
2019/10/17 jQuery
nodejs实现的http、https 请求封装操作示例
2020/02/06 NodeJs
基于Vue2实现移动端图片上传、压缩、拖拽排序、拖拽删除功能
2021/01/05 Vue.js
[01:56]《DOTA2》中文配音CG
2013/04/22 DOTA
python定时检查启动某个exe程序适合检测exe是否挂了
2013/01/21 Python
python字符串排序方法
2014/08/29 Python
Python利用前序和中序遍历结果重建二叉树的方法
2016/04/27 Python
Python3实现的字典遍历操作详解
2018/04/18 Python
python中下标和切片的使用方法解析
2019/08/27 Python
python实现飞机大战小游戏
2019/11/08 Python
python函数不定长参数使用方法解析
2019/12/14 Python
python实现指定ip端口扫描方式
2019/12/17 Python
python requests.get带header
2020/05/05 Python
基于FME使用Python过程图解
2020/05/13 Python
Dr. Martens马汀博士澳大利亚官网:马丁靴鼻祖
2019/07/02 全球购物
高三学生评语大全
2014/04/25 职场文书
个人四风问题整改措施思想汇报
2014/10/04 职场文书