收藏本站 收藏本站
积木网首页 - 软件测试 - 常用手册 - 站长工具 - 技术社区
首页 > JavaScript > jQuery > 正文

首页 - PHP - 数据库 - 操作系统 - 游戏开发 - JS - Android - MySql - Redis - MongoDB - Win8 - Shell编程 - DOS命令 - jQuery - CSS样式 - Python - Perl

Access - Oracle - DB2 - SQLServer - MsSql2008 - MsSql2005 - Sqlite - PostgreSQL - node.js - extjs - JavaScript vbs - Powershell - Ruby

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实现可兼容IE6的遮罩功能详解
本文实例讲述了jQuery实现可兼容IE6的遮罩功能。分享给大家供大家参考,具体如下:最精简,最强大的jQuery遮罩层效果。当浏览器改变大小时,遮罩层

jquery实现倒计时小应用
本文实例为大家分享了jquery倒计时效果的具体代码,供大家参考,具体内容如下htmldivid="shop_rec"ulclass="cf"liimgsrc="image/goods.jpg"alt="小米Note顶配版"/divh5小米

jQuery实现倒计时功能 jQuery实现计时器功能
本文转载自jquery做一个小的倒计时效果在实际运用中,经常会使用到倒计时的效果。以下代码利用jQuery实现了一个倒计时计时器。!DOCTYPEhtmlhtmlheadmetachars

本周排行

更新排行

强悍的草根IT技术社区,这里应该有您想要的! 友情链接:b2b电子商务
Copyright © 2010 Gimoo.Net. All Rights Rreserved  京ICP备05050695号