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插件HighCharts绘制2D饼图效果示例【附demo源码下载】
Mar 21 jQuery
jQuery EasyUI tree增加搜索功能的实现方法
Apr 27 jQuery
jquery dataTable 获取某行数据
May 05 jQuery
jquery.uploadView 实现图片预览上传功能
Aug 10 jQuery
利用jQuery实现简单的拖曳效果实例代码
Oct 20 jQuery
jQuery实现动态控制页面元素的方法分析
Dec 20 jQuery
JQuery元素快速查找与操作
Apr 22 jQuery
jQuery实现form表单序列化转换为json对象功能示例
May 23 jQuery
jQuery 实现批量提交表格多行数据的方法
Aug 09 jQuery
jQuery实现轮播图效果
Nov 26 jQuery
9种方法优化jQuery代码详解
Feb 04 jQuery
jquery实现手风琴案例
May 04 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读取图片内容并输出到浏览器的实现代码
2013/08/08 PHP
php+ajax实现无刷新分页的方法
2014/11/04 PHP
php连接与操作PostgreSQL数据库的方法
2014/12/25 PHP
Zend Framework自定义Helper类相关注意事项总结
2016/03/14 PHP
thinkphp制作404跳转页的简单实现方法
2016/09/22 PHP
php生成随机数/生成随机字符串的方法小结【5种方法】
2020/05/27 PHP
为数据添加append,remove功能
2006/10/03 Javascript
javascript事件模型代码
2007/07/01 Javascript
js每次Title显示不同的名言
2008/09/25 Javascript
Jquery 获取表单text,areatext,radio,checkbox,select值的代码
2009/11/12 Javascript
jQuery 跨域访问问题解决方法
2009/12/02 Javascript
ExtJs3.0中Store添加 baseParams 的Bug
2010/03/10 Javascript
js判断登录与否并确定跳转页面的方法
2015/01/30 Javascript
字符串反转_JavaScript
2016/04/28 Javascript
走进AngularJs之过滤器(filter)详解
2017/02/17 Javascript
微信扫码支付零云插件版实例详解
2017/04/26 Javascript
react native仿微信PopupWindow效果的实例代码
2017/08/07 Javascript
使用JQuery实现图片轮播效果的实例(推荐)
2017/10/24 jQuery
JS实现DOM删除节点操作示例
2018/04/04 Javascript
详解创建自定义的Angular Schematics
2018/06/06 Javascript
javascript数组去重方法总结(推荐)
2019/03/20 Javascript
webpack4实现不同的导出类型
2019/04/09 Javascript
vue Cli 环境删除与重装教程 - 版本文档
2020/09/11 Javascript
浅谈vant组件Picker 选择器选单选问题
2020/11/04 Javascript
解决vant框架做H5时踩过的坑(下拉刷新、上拉加载等)
2020/11/11 Javascript
Python3模拟curl发送post请求操作示例
2019/05/03 Python
python设置表格边框的具体方法
2020/07/17 Python
python使用布隆过滤器的实现示例
2020/08/20 Python
html5 localStorage本地存储_动力节点Java学院整理
2017/07/06 HTML / CSS
德购商城:德国进口直邮商城
2017/06/13 全球购物
公务员年总结的自我评价
2013/10/25 职场文书
《英英学古诗》教学反思
2014/04/11 职场文书
1000字打架检讨书
2014/11/03 职场文书
2015国庆节放假通知范文
2015/07/30 职场文书
Java后台生成图片的完整步骤
2021/08/04 Java/Android
SpringCloud项目如何解决log4j2漏洞
2022/04/10 Java/Android