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 相关文章推荐
JS获取IUSR_机器名和IWAM_机器名帐号的密码
Dec 06 Javascript
javascript背投广告代码的完善
Apr 08 Javascript
JQuery 绑定select标签的onchange事件,弹出选择的值,并实现跳转、传参
Jan 06 Javascript
javascript 判断中文字符长度的函数代码
Aug 27 Javascript
js操作滚动条事件实例
Jan 29 Javascript
AngularJS数据源的多种获取方式汇总
Feb 02 Javascript
详解vue项目优化之按需加载组件-使用webpack require.ensure
Jun 13 Javascript
vue-cli3.0 脚手架搭建项目的过程详解
Oct 19 Javascript
如何在vue里面优雅的解决跨域(路由冲突问题)
Jan 20 Javascript
element-ui 本地化使用教程详解
Oct 28 Javascript
Node.js API详解之 os模块用法实例分析
May 06 Javascript
vue-admin-template配置快捷导航的代码(标签导航栏)
Sep 04 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出错界面
2006/10/09 PHP
Javascript开发之三数组对象实例介绍
2012/11/12 Javascript
单击复制文字兼容各浏览器的完美解决方案
2013/07/04 Javascript
jquery获取子节点和父节点的示例代码
2013/09/10 Javascript
javascript制作的网页侧边弹出框思路及实现代码
2014/05/21 Javascript
js 判断图片是否加载完以及实现图片的预下载
2014/08/14 Javascript
使用jquery实现放大镜效果
2014/09/02 Javascript
jQuery mobile转换url地址及获取url中目录部分的方法
2015/12/04 Javascript
JQuery中attr属性和jQuery.data()学习笔记【必看】
2016/05/18 Javascript
AngularJS 执行流程详细介绍
2016/08/18 Javascript
Vue2实现组件props双向绑定
2016/12/02 Javascript
详解Vue-cli 创建的项目如何跨域请求
2017/05/18 Javascript
vue脚手架vue-cli的学习使用教程
2017/06/06 Javascript
js断点调试心得分享(必看篇)
2017/12/08 Javascript
Vue2.0系列之过滤器的使用
2018/03/01 Javascript
p5.js入门教程之平滑过渡(Easing)
2018/03/16 Javascript
jQuery点击页面其他部分隐藏下拉菜单功能
2018/11/27 jQuery
javascript实现蒙版与禁止页面滚动
2020/01/11 Javascript
vue-cli设置publicPath小记
2020/04/14 Javascript
原生JS实现无缝轮播图片
2020/06/24 Javascript
python3 遍历删除特定后缀名文件的方法
2018/04/23 Python
解决vscode python print 输出窗口中文乱码的问题
2018/12/03 Python
Python实现带参数的用户验证功能装饰器示例
2018/12/14 Python
python Gabor滤波器讲解
2020/10/26 Python
搭建pypi私有仓库实现过程详解
2020/11/25 Python
Python经典五人分鱼实例讲解
2021/01/04 Python
美国家居装饰网上商店:Lulu & Georgia
2019/09/14 全球购物
冰淇淋开店创业计划书
2014/02/01 职场文书
新年抽奖获奖感言
2014/03/02 职场文书
写自荐信的注意事项
2014/03/09 职场文书
高中军训感言600字
2014/03/11 职场文书
志愿者活动总结报告
2014/06/27 职场文书
心得体会的写法
2014/09/05 职场文书
关于迟到的检讨书
2015/05/06 职场文书
志愿者工作心得体会
2016/01/15 职场文书
详解Flutter和Dart取消Future的三种方法
2022/04/07 Java/Android