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和C#的异同
May 31 Javascript
jquery插件制作 图片走廊 gallery
Aug 17 Javascript
javascript测试题练习代码
Oct 10 Javascript
javascript SpiderMonkey中的函数序列化如何进行
Dec 05 Javascript
js操纵跨frame的三级联动select下拉选项实例介绍
May 19 Javascript
JS通过分析userAgent属性来判断浏览器的类型及版本
Mar 28 Javascript
JavaScript如何动态创建table表格
Aug 02 Javascript
原生 JS Ajax,GET和POST 请求实例代码
Jun 08 Javascript
vue-cli3.0 环境变量与模式配置方法
Nov 08 Javascript
jquery使用echarts实现有向图可视化功能示例
Nov 25 jQuery
JavaScript位置参数实现原理及过程解析
Sep 14 Javascript
JavaScript canvas实现跟随鼠标移动小球
Feb 09 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
成本8450万,票房仅2亿,口碑两极分化,又一部DC电影扑街了
2020/04/09 欧美动漫
php5编程中的异常处理详细方法介绍
2008/07/29 PHP
php实现的mongoDB单例模式操作类
2018/01/20 PHP
javascript之锁定表格栏位
2007/06/29 Javascript
JavaScript面象对象设计
2008/04/28 Javascript
filters.revealTrans.Transition使用方法小结
2010/08/19 Javascript
jquery.fileEveryWhere.js 一个跨浏览器的file显示插件
2011/10/24 Javascript
原生JS封装Ajax插件(同域、jsonp跨域)
2016/05/03 Javascript
用NodeJS实现批量查询地理位置的经纬度接口
2016/08/16 NodeJs
js数组操作方法总结(必看篇)
2016/11/22 Javascript
如何利用JQuery实现从底部回到顶部的功能
2016/12/27 Javascript
TableSort.js表格排序插件使用方法详解
2017/02/10 Javascript
nodejs+mongodb aggregate级联查询操作示例
2018/03/17 NodeJs
使用淘宝镜像cnpm安装Vue.js的图文教程
2018/05/17 Javascript
微信小程序云开发修改云数据库中的数据方法
2019/05/18 Javascript
小程序表单认证布局及验证详解
2020/06/19 Javascript
[47:08]OG vs INfamous 2019国际邀请赛小组赛 BO2 第一场 8.15
2019/08/17 DOTA
[02:23]完美世界全国高校联赛街访DOTA2第一期
2019/11/28 DOTA
python常见数制转换实例分析
2015/05/09 Python
python读取文本绘制动态速度曲线
2018/06/21 Python
Python当中的array数组对象实例详解
2019/06/12 Python
PyQt5固定窗口大小的方法
2019/06/18 Python
python命令行参数用法实例分析
2019/06/25 Python
django+echart数据动态显示的例子
2019/08/12 Python
通过实例了解Python str()和repr()的区别
2020/01/17 Python
Python读取excel文件中带公式的值的实现
2020/04/17 Python
python datetime时间格式的相互转换问题
2020/06/11 Python
python 实现超级玛丽游戏
2020/11/25 Python
移动端适配 使px自动转换rem
2019/08/26 HTML / CSS
英国时尚家具、家居饰品及礼品商店:Graham & Green
2016/09/15 全球购物
单位工作证明范文
2014/09/14 职场文书
防溺水主题班会教案
2015/08/12 职场文书
Python爬虫之爬取二手房信息
2021/04/27 Python
Java循环队列与非循环队列的区别总结
2021/06/22 Java/Android
恶魔之树最顶端的三颗果实 震震果实上榜,第一可以制造岩浆
2022/03/18 日漫
利用Python脚本写端口扫描器socket,python-nmap
2022/07/23 Python