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 相关文章推荐
jquery 读取页面load get post ajax 四种方式代码写法
Apr 02 Javascript
基于jquery &amp; json的省市区联动代码
Jun 26 Javascript
关于js注册事件的常用方法
Apr 03 Javascript
JS输入用户名自动显示邮箱后缀列表的方法
Jan 27 Javascript
初步了解javascript面向对象
Nov 09 Javascript
javascript中获取class的简单实现
Jul 12 Javascript
微信小程序图片自适应支持多图实例详解
Jun 21 Javascript
jQuery实现的粘性滚动导航栏效果实例【附源码下载】
Oct 19 jQuery
小程序Request的另类用法详解
Aug 09 Javascript
解决layui-open关闭自身窗口的问题
Sep 10 Javascript
vue中实现点击按钮滚动到页面对应位置的方法(使用c3平滑属性实现)
Dec 29 Javascript
详解在IDEA中将Echarts引入web两种方式(使用js文件和maven的依赖导入)
Jul 11 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
php 上传功能实例代码
2010/04/13 PHP
php中选择什么接口(mysql、mysqli)访问mysql
2013/02/06 PHP
php判断数组元素中是否存在某个字符串的方法
2014/06/14 PHP
php实现的zip文件内容比较类
2014/09/24 PHP
基于jquery的时间段实现代码
2012/08/02 Javascript
Javascript计算两个marker之间的距离(Google Map V3)
2013/04/26 Javascript
JavaScript自执行闭包的小例子
2013/06/29 Javascript
JavaScript 匿名函数和闭包介绍
2015/04/13 Javascript
jQuery结合CSS制作漂亮的select下拉菜单
2015/05/03 Javascript
jquery插件NProgress.js制作网页加载进度条
2015/06/05 Javascript
超级给力的JavaScript的React框架入门教程
2015/07/02 Javascript
不使用script导入js文件的几种方法
2016/10/27 Javascript
js实现界面向原生界面发消息并跳转功能
2016/11/22 Javascript
详解vue.js下引入百度地图jsApi的两种方法
2018/07/27 Javascript
[03:22]DSPL第一期精彩集锦:酷炫到底!
2014/11/07 DOTA
[09:47]2018DOTA2亚洲邀请赛4.5SOLO赛 No[o]ne vs Sumail
2018/04/06 DOTA
python使用urllib模块和pyquery实现阿里巴巴排名查询
2014/01/16 Python
python检测远程端口是否打开的方法
2015/03/14 Python
Python中subprocess模块用法实例详解
2015/05/20 Python
python实现冒泡排序算法的两种方法
2018/03/10 Python
对Python 检查文件名是否规范的实例详解
2019/06/10 Python
python实现动态创建类的方法分析
2019/06/25 Python
python读取dicom图像示例(SimpleITK和dicom包实现)
2020/01/16 Python
python 通过文件夹导入包的操作
2020/06/01 Python
Python定义一个Actor任务
2020/07/29 Python
Python之多进程与多线程的使用
2021/02/23 Python
使用CSS3制作饼状旋转载入效果的实例
2015/06/23 HTML / CSS
你可能不熟练的十个前端HTML5经典面试题
2018/07/03 HTML / CSS
巴西宠物店在线:Geração Pet
2017/05/31 全球购物
经典C++面试题一
2016/11/06 面试题
小学生自我评价范例
2013/09/24 职场文书
解除劳动合同协议书
2014/09/17 职场文书
2014年转正工作总结
2014/11/08 职场文书
2015年小学中秋节活动总结
2015/03/23 职场文书
2015年销售助理工作总结
2015/05/11 职场文书
html css3不拉伸图片显示效果
2021/06/07 HTML / CSS