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模拟点击以提交表单为例兼容主流浏览器
Nov 29 Javascript
为jquery的ajaxfileupload增加附加参数的方法
Mar 04 Javascript
javascript替换已有元素replaceChild()使用介绍
Apr 03 Javascript
Js实现简单的小球运动特效
Feb 18 Javascript
浅谈jquery的html方法里包含特殊字符的处理
Nov 30 Javascript
JS正则RegExp.test()使用注意事项(不具有重复性)
Dec 28 Javascript
Jquery EasyUI $.Parser
Jun 02 jQuery
JavaScript中错误正确处理方式小结你用对了吗
Oct 10 Javascript
微信小程序实现全局搜索代码高亮的示例
Mar 30 Javascript
vue组件(全局,局部,动态加载组件)
Sep 02 Javascript
JS闭包经典实例详解
Dec 20 Javascript
CKEditor扩展插件:自动排版功能autoformat插件实现方法详解
Feb 06 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和ACCESS写聊天室(六)
2006/10/09 PHP
php 应用程序安全防范技术研究
2009/09/25 PHP
PHP中文URL编解码(urlencode()rawurlencode()
2010/07/03 PHP
php学习笔记 [预定义数组(超全局数组)]
2011/06/09 PHP
zf框架的db类select查询器join链表使用示例(zend框架)
2014/03/14 PHP
session 加入redis的实现代码
2016/07/15 PHP
PHP 7安装调试工具Xdebug扩展的方法教程
2017/06/17 PHP
PHP数组常用函数实例小结
2018/08/20 PHP
让ie6也支持websocket采用flash封装实现
2013/02/18 Javascript
js改变文章字体大小的实例代码
2013/11/27 Javascript
使用node.js半年来总结的 10 条经验
2014/08/18 Javascript
jquery正则表达式验证(手机号、身份证号、中文名称)
2015/12/31 Javascript
基于jquery实现图片上传本地预览功能
2016/01/08 Javascript
总结jQuery插件开发中的一些要点
2016/05/16 Javascript
jQuery Checkbox 全选 反选的简单实例
2016/11/29 Javascript
vue-router路由简单案例介绍
2017/02/21 Javascript
Angular2中select用法之设置默认值与事件详解
2017/05/07 Javascript
详解vue-cli 本地开发mock数据使用方法
2018/05/29 Javascript
微信小程序自定义select下拉选项框组件的实现代码
2018/08/28 Javascript
Three.js实现3D机房效果
2018/12/30 Javascript
浅析Vue 防抖与节流的使用
2019/11/14 Javascript
JS实现的雪花飘落特效示例
2019/12/03 Javascript
通过微信公众平台获取公众号文章的方法示例
2019/12/25 Javascript
[01:13:18]Secret vs Infamous 2019国际邀请赛淘汰赛 败者组 BO3 第一场 8.23
2019/09/05 DOTA
Python编程之基于概率论的分类方法:朴素贝叶斯
2017/11/11 Python
Python中用psycopg2模块操作PostgreSQL方法
2017/11/28 Python
解决Python的str强转int时遇到的问题
2018/04/09 Python
使用Python快速制作可视化报表的方法
2019/02/03 Python
情人节快乐! python绘制漂亮玫瑰
2020/08/18 Python
Python创建一个元素都为0的列表实例
2019/11/28 Python
期末自我鉴定
2014/01/23 职场文书
校园安全标语
2014/06/07 职场文书
小兵张嘎电影观后感
2015/06/03 职场文书
2015年暑期社会实践方案
2015/07/14 职场文书
2016年党员学习廉政准则心得体会
2016/01/20 职场文书
如何通过一篇文章了解Python中的生成器
2022/04/02 Python