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插件Echarts实现的渐变色柱状图
Mar 23 jQuery
jquery实现静态搜索功能(可输入搜索文字)
Mar 28 jQuery
jquery版轮播图效果和extend扩展
Jul 18 jQuery
jQuery模拟爆炸倒计时功能实例代码
Aug 21 jQuery
jquery实现限制textarea输入字数的方法
Sep 06 jQuery
jQuery获取所有父级元素及同级元素及子元素的方法(推荐)
Jan 21 jQuery
如何用input标签和jquery实现多图片的上传和回显功能
May 16 jQuery
jQuery实现的鼠标拖动浮层功能示例【拖动div等任何标签】
Dec 29 jQuery
jQuery实现的点击显示隐藏下拉菜单功能完整示例
May 17 jQuery
jQuery中使用validate插件校验表单功能
May 24 jQuery
jQuery 常用特效实例小结【显示与隐藏、淡入淡出、滑动、动画等】
May 19 jQuery
jQuery实现异步上传一个或多个文件
Aug 17 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
新52大事件
2020/03/03 欧美动漫
Terran兵种介绍
2020/03/14 星际争霸
php生成与读取excel文件
2016/10/14 PHP
js 实现无缝滚动 兼容IE和FF
2009/07/15 Javascript
Prototype源码浅析 String部分(二)
2012/01/16 Javascript
jQuery jcrop插件截图使用方法
2013/11/20 Javascript
Javascript数据结构与算法之列表详解
2015/03/12 Javascript
最精简的JavaScript实现鼠标拖动效果的方法
2015/05/11 Javascript
实例讲解JavaScript中instanceof运算符的用法
2016/06/08 Javascript
vuejs在解析时出现闪烁的原因及防止闪烁的方法
2016/09/19 Javascript
EsLint入门学习教程
2017/02/17 Javascript
jquery在vue脚手架中的使用方式示例
2017/08/29 jQuery
基于vue实现web端超大数据量表格的卡顿解决
2019/04/02 Javascript
通过Nodejs搭建网站简单实现注册登录流程
2019/06/14 NodeJs
vue路由分文件拆分管理详解
2020/08/13 Javascript
vue+Element-ui实现登录注册表单
2020/11/17 Javascript
javascript中闭包closure的深入讲解
2021/03/03 Javascript
[02:08]2014DOTA2国际邀请赛 430专访:力争取得小组前二
2014/07/11 DOTA
[06:24]DOTA2亚洲邀请赛小组赛第三日 TOP10精彩集锦
2015/02/01 DOTA
Python的高级Git库 Gittle
2014/09/22 Python
python中list列表的高级函数
2016/05/17 Python
node.js获取参数的常用方法(总结)
2017/05/29 Python
使用python将大量数据导出到Excel中的小技巧分享
2018/06/14 Python
Python3.5 Json与pickle实现数据序列化与反序列化操作示例
2019/04/29 Python
Python操作Mongodb数据库的方法小结
2019/09/10 Python
关于TensorFlow新旧版本函数接口变化详解
2020/02/10 Python
keras中的backend.clip用法
2020/05/22 Python
女子锻炼服装和瑜伽服装:Splits59
2019/03/04 全球购物
解释DataSet(ds) 和 ds as DataSet 的含义
2014/07/27 面试题
教师绩效考核方案
2014/01/21 职场文书
应届护士求职信范文
2014/01/26 职场文书
擅自离岗检讨书
2014/02/11 职场文书
捐助贫困学生倡议书
2014/05/16 职场文书
小学开学典礼新闻稿
2015/07/17 职场文书
纯html+css实现打字效果
2021/08/02 HTML / CSS
Python实战实现爬取天气数据并完成可视化分析详解
2022/06/16 Python