脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript类库 → jquery → jQuery表单元素选择器

jQuery表单元素选择器代码实例

 更新时间：2017年02月06日 10:50:20   投稿：lijiao  
这篇文章主要为大家详细介绍了jQuery表单元素选择器代码实例，具有一定的参考价值，感兴趣的小伙伴们可以参考一下

本文实例为大家分享了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>

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。

您可能感兴趣的文章:

相关文章

  • jquery 学习笔记一

    jquery 学习笔记一

    jquery是javascript的类库，提供了大量的javascript的类库和API，方便javascript开发。
    2010-04-04
  • jQuery实现表单步骤流程导航代码分享

    jQuery实现表单步骤流程导航代码分享

    这篇文章主要介绍了jQuery实现表单步骤流程导航，代码实现效果简单精致，推荐给大家，有需要的小伙伴可以参考下。
    2015-08-08
  • jQuery实现侧边导航栏及滑动电梯效果(仿淘宝)

    jQuery实现侧边导航栏及滑动电梯效果(仿淘宝)

    这篇文章主要介绍了如何利用JQuery+CSS模拟淘宝实现侧边导航栏以及滑动电梯效果，文中的示例代码讲解详细，感兴趣的小伙伴可以动手试一试
    2022-03-03
  • 使用隐藏的new来创建对象

    使用隐藏的new来创建对象

    JQ中发现的，jQuery.Event类。估计作者是为了减少代码量。定义一个类，但不用new关键字去创建该类对象，而使用方法调用()方式去创建该对象。
    2011-03-03
  • 让新消息在网页标题闪烁提示的jQuery代码

    让新消息在网页标题闪烁提示的jQuery代码

    可能有一些站长会注意到这样的效果，到收到的新消息会闪烁标题提示，那么新消息在网页标题闪烁显示的效果如何实现，下面有个不错的示例，感兴趣的朋友可以参考下
    2013-11-11
  • jquery图片滚动放大代码分享（1）

    jquery图片滚动放大代码分享（1）

    这篇文章主要介绍了jquery图片滚动放大效果，功能实现非常简单，推荐给大家，有需要的小伙伴可以参考下。
    2015-08-08
  • jquery focus(fn),blur(fn)方法实例代码

    jquery focus(fn),blur(fn)方法实例代码

    jquery focus(fn),blur(fn)方法实例代码，需要的朋友可以参考下。
    2011-12-12
  • jQuery Ajax方法调用 Asp.Net WebService 的详细实例代码

    jQuery Ajax方法调用 Asp.Net WebService 的详细实例代码

    我在这里将jQuery Ajax 调用Aspx.Net WebService 的几个常用的方法做了一个整理，提供给正在找这方面内容的博友，希望能给学习jQuery的朋友一点帮助，可以直接复制代码运行。
    2011-04-04
  • jQuery提示效果代码分享

    jQuery提示效果代码分享

    这里给大家分享几段JQuery提示效果的代码，非常的简单实用，有需要的小伙伴直接拿走吧
    2014-11-11
  • 基于jquery的商品展示放大镜

    基于jquery的商品展示放大镜

    这两天帮朋友的网站做个放大镜，就是淘宝上的那种，两个框，一个框放小图，另外一个框放大图。本来说想从网上直接载一个拿来Hack，但是找好半天都没有找到，看了看JQ的插件也好像不对，干脆就自己写了。
    2010-08-08

最新评论