jQuery选择器之表单元素选择器详解


Posted in jQuery onSeptember 19, 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" rel="external nofollow" 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", "1px groove red"); 
  </script>

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

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

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

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

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

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

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

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

</body>

</html>

jQuery选择器之表单元素选择器详解

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

jQuery 相关文章推荐
jQuery实现select下拉框获取当前选中文本、值、索引
May 08 jQuery
JQuery.dataTables表格插件添加跳转到指定页
Jun 09 jQuery
jQuery扩展_动力节点Java学院整理
Jul 05 jQuery
jQuery制作input提示内容(兼容IE8以上)
Jul 05 jQuery
jQuery扇形定时器插件pietimer使用方法详解
Jul 18 jQuery
JQuery 选择器、DOM节点操作练习实例
Sep 28 jQuery
基于jQuery实现Ajax验证用户名是否可用实例
Mar 25 jQuery
jQuery实现适用于移动端的跑马灯抽奖特效示例
Jan 18 jQuery
jquery简单实现纵向的无缝滚动代码实例
Apr 01 jQuery
Easyui 关闭jquery-easui tab标签页前触发事件的解决方法
Apr 28 jQuery
jQuery实现王者荣耀手风琴效果
Jan 17 jQuery
jquery css实现流程进度条
Mar 26 jQuery
jQuery实现简单日期格式化功能示例
Sep 19 #jQuery
使用vue与jquery实时监听用户输入状态的操作代码
Sep 19 #jQuery
jQuery选择器之属性筛选选择器用法详解
Sep 19 #jQuery
基于jQuery选择器之表单对象属性筛选选择器的实例
Sep 19 #jQuery
jQuery选择器之子元素选择器详解
Sep 18 #jQuery
jQuery实现的表格前端排序功能示例
Sep 18 #jQuery
jQuery实现对网页节点的增删改查功能示例
Sep 18 #jQuery
You might like
php将数组存储为文本文件方法汇总
2015/10/28 PHP
weiphp微信公众平台授权设置
2016/01/04 PHP
Zend Framework实现具有基本功能的留言本(附demo源码下载)
2016/03/22 PHP
Smarty模板类内部原理实例分析
2019/07/03 PHP
php多进程中的阻塞与非阻塞操作实例分析
2020/03/04 PHP
不间断滚动JS打包类,基本可以实现所有的滚动效果,太强了
2007/12/08 Javascript
获取div编辑框,textarea,input text的光标位置 兼容IE,FF和Chrome的方法介绍
2012/11/08 Javascript
js中escape对应的C#解码函数 UrlDecode
2012/12/16 Javascript
jquery滚动组件(vticker.js)实现页面动态数据的滚动效果
2013/07/03 Javascript
js对table的td进行相同内容合并示例详解
2013/12/27 Javascript
js格式化金额可选是否带千分位以及保留精度
2014/01/28 Javascript
js中window.open打开一个新的页面
2014/08/10 Javascript
js+css实现tab菜单切换效果的方法
2015/01/20 Javascript
DOM操作一些常用的属性汇总
2015/03/13 Javascript
JavaScript中操作字符串之localeCompare()方法的使用
2015/06/06 Javascript
JQuery实现Ajax加载图片的方法
2015/12/24 Javascript
JavaScript数组的栈方法与队列方法详解
2016/05/26 Javascript
jQuery组件easyui基本布局实现代码
2016/08/25 Javascript
jQuery实现的简单排序功能示例【冒泡排序】
2017/01/13 Javascript
JS原型继承四步曲及原型继承图一览
2017/11/28 Javascript
用原生 JS 实现 innerHTML 功能实例详解
2019/04/03 Javascript
vue 对axios get pust put delete封装的实例代码
2020/01/05 Javascript
[01:03:27]Optic vs VGJ.S 2018国际邀请赛小组赛BO2 第一场 8.17
2018/08/20 DOTA
NumPy 如何生成多维数组的方法
2018/02/05 Python
谈谈Python中的while循环语句
2019/03/10 Python
Python values()与itervalues()的用法详解
2019/11/27 Python
CSS3常用的几种颜色渐变模式总结
2016/11/18 HTML / CSS
突袭HTML5之Javascript API扩展3—本地存储全新体验
2013/01/31 HTML / CSS
Hawes & Curtis官网:英国经典品牌
2019/07/27 全球购物
护士检查书
2014/01/17 职场文书
特色蛋糕店创业计划书
2014/01/28 职场文书
关于安全的标语
2014/06/10 职场文书
故意伤害罪辩护词
2015/05/21 职场文书
Python数据可视化之用Matplotlib绘制常用图形
2021/06/03 Python
Android自定义ScrollView实现阻尼回弹
2022/04/01 Java/Android
Mybatis-Plus 使用 @TableField 自动填充日期
2022/04/26 Java/Android