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>

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

赞 (0)

相关推荐

  • Jquery选择器中使用变量实现动态选择例子

    例子一: <table> <tr> <th>用户名</th> <th>状态</th> <tr> <tr> <td>张三</td> <td data-uid="10000">正常</td> <tr> <tr> <td>李四</td> <td data-uid="10001"

  • jquery 中多条件选择器,相对选择器,层次选择器的区别

    一.Jquery常用的过滤选择器如下所示: 1.:first,选取第一个元素,比如$("div:first")选取第一个div元素 2.:last,选取最后一个元素,比如$("div:last")选取最后一个div元素 3.:not(选择器),选取不满足"选择器"条件的元素,比如$("div:not(.className)"),选取样式不是className的所有div元素 4.:even/:odd,选取索引为偶数/奇数的元素

  • JQuery中$之选择器用法介绍

    1.$.在jQuery 中$("<span>"),这个语法等同于$(document.createElement("span")) ,这是一种用法,在选择元素的时候还会这样子的用:[attribute$=value],匹配给定的属性是以某些值结尾的元素.下面举个例子来说明一下: HTML代码 <input name="newsletter" /> <input name="milkman" /&g

  • jquery选择器排除某个DOM元素的方法（实例演示）

    jquery选择器众多,使用选取某个DOM的方法有很多种,如何在选取的某个元素集上面做一些排除呢?下面通过几个实例说明: 1.选择所有的img元素,排除class=phpernote的元素的个数: 复制代码 代码如下: $('img:not(.phpernote)').length();//或者$('img').not('.phpernote').length(); 2.获取id=phpernote下面所有没有class=com的li元素的个数 复制代码 代码如下: $('#phpernote

  • jquery选择器-根据多个属性选择示例代码

    根据多个属性选择E[attr=val][attr=val] $("div[title='ttt'][class='aaaa']").click()................ 所有div元素下所有属性title值是等于ttt并且属性class等于aaaa的元素

  • 使用jquery选择器如何获取父级元素、同级元素、子元素

    一.获取父级元素 1. parent([expr]): 获取指定元素的所有父级元素 复制代码 代码如下: <div id="par_div"><a id="href_fir" href="#">href_fir</a> <a id="href_sec" href="#">href_sec</a> <a id="href_thr&qu

  • JQuery 选择器、过滤器介绍

    JQuery 选择器、过滤器介绍

    今日的学习再结合昨天的JavaScriptDOM的内容,让我对此十分清晰.JQuery原则:"write less, do more.",这句话已充分说明它对简化使用JavaScriptDOM编程的功力! 每位老师都有自己的教学方式,可能根据教授的内容的不同教学方式也有轻微的变化.老佟是一位非常有经验的软件教师,之前他在大连的软件公司做培训.经过多年的总结,他已经有自己一套成熟的教学方式.这个方式让我十分喜欢!至于是什么方式,你自己来体验吧!哈哈~~ 从学习JavaWEB.Struts

  • Jquery颜色选择器ColorPicker实现代码

    Jquery颜色选择器ColorPicker实现代码

    在CMS中通常都有给标题添加颜色的功能,但一般都比较简单,颜色支持也少,这里我要分享一个自己修改的颜色选择器.界面简洁,功能强大.在我们的日常项目中可以快速的部署. 复制代码 代码如下: $(".colorpicker").colorpicker({ target:'#title', success:function(o,color){ $("#color").val(color) }, reset:function(o){ $("#color"

  • jQuery Selector选择器小结

    //jQuery 选择器 $ //$(expression,[context]) return jQuery //Unit One //expression 之 CSS 定义符 就是以CSS语法表示所要选择的元素 // $("*"); // 表示页面所有元素标签 // $("th, td") // 表示所有<th><td>元素标签 // $("a") // 表示所有<a>元素标签 // $("div#

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

    本文实例为大家分享了jQuery表单元素选择器的具体代码,供大家参考,具体内容如下 <!DOCTYPE html> <html> <head> <meta http-equiv="Content-type" content="text/html; charset=utf-8" /> <title></title> <link rel="stylesheet" href=

  • jQuery表单元素过滤选择器用法实例分析

    本文实例讲述了jQuery表单元素过滤选择器用法.分享给大家供大家参考,具体如下: 前面jQuery内容过滤选择器与子元素过滤选择器,其中的例子稍微多一些解释也有点绕口,希望能帮助大家理解.今天学习表单元素过滤选择器,下面请看使用方法. 一.:enabled 选择器::enabled 描述:匹配所有可用元素 返回值:元素集合 示例: $("input.mini:enabled") //input.mini是DOM元素集合,:enabled是过滤条件 二.:disabled 选择器::d

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

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

    本文实例为大家分享了表单元素选择器,供大家参考,具体内容如下 <!DOCTYPE html> <html> <head> <meta http-equiv="Content-type" content="text/html; charset=utf-8" /> <title></title> <link rel="stylesheet" href="imooc

  • jQuery表单域选择器用法分析

    jQuery表单域选择器用法分析

    本文实例分析了jQuery表单域选择器用法.分享给大家供大家参考.具体如下: 表单域是指网页中的input,textarea, select和button元素. 1. :input选择器 复制代码 代码如下: $(":input") 2. :text选择器 复制代码 代码如下: $(":text") 3. :password选择器 复制代码 代码如下: $(":password") 4. :radio选择器 复制代码 代码如下: $("

  • JQuery表单元素取值赋值方法总结

    JQuery表单元素取值赋值方法总结

    一.普通文本框的赋值与取值 1.1.1赋值 <h2>jQuery 表单元素取值与赋值方法总结</h2> <input type="text" class="test1"/> <input type="button" value="赋值" onclick="get()"/> <input type="text" class="

  • jQuery 表单验证扩展代码(二)

    jQuery 表单验证扩展代码(二)

    一. 存在的问题 在上篇中我已经提到过,验证提示打算用文本和样式两种方式来显示提示消息,这两种提示都只能单独使用,于是新的跟新内容做了一些扩展,使得两者可以共用.前一篇写的是否必填项这个验证只是正对 Text, TextArea 这两个表单元素,在新的扩展中同时也支持了radio,checkbox 两个元素. 二. 验证参数的设计 基于多重选择的考虑,扩展了一些有必要的参数,参数列表如下: required: 是否为必填项,true 和 false ,true 表示为必填项 (*) onFocu

  • jQuery 处理表单元素的代码

    1.获取input类的值: $("input").val(); 2.获取textarea类的值: $("textarea").val(); 3.获取select类的值:$("select").val(); 当表单上含有多个input类(或者textarea类和select类),使用上述方法得到的将是一个数组.当然,你可以给这些控件加上ID,从而对某个特定的控件取值,例如:$("input#myID").val(). 下面将对每

  • jQuery 表单验证扩展代码(一)

    jQuery 表单验证扩展代码(一)

    再次申明,插件问题比较多,后期一个个来解决,请不要恶言相向.希望各位多多提好的建议善言. 一. 分析表单验证的基本情况 在我们做web开发的过程中,会遇到各种各样的验证.归纳一下基本可以分为一下几类: (1). 是否必填项 [这个是非常基本的] (2). 输入参数中的范围校验 (3). 输入参数与另外一个控件值的比较 (4). 输入的参数正则表达式验证 二. 是否必填项验证 有如下几种情况: (1) 输入框获得焦点提示 (2)输入框失去焦点验证错误提示 (3)输入框失去焦点验证正确提示 首先确定

  • jquery 获取表单元素里面的值示例代码

    jquery 笔记: 复制代码 代码如下: $("input[name='radio_name']:checked").val() <input type="radio" value="1" name="radio_name" />1 <input type="radio" value="2" name="radio_name" />2 <

  • jquery设置表单元素为不可用的简单代码

    本章节通过简单的实例代码介绍一下如何将表单元素设置为不可用状态. 代码实例如下: <!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name="author" content="http://www.jb51.net/" /> <title>我们</title> <script type=

随机推荐