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

2024-04-04 23:39:26

本文实例为大家分享了表单元素选择器，供大家参考，具体内容如下

<!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选择器之表单对象属性筛选选择器的实例

<!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 n
JQuery中$之选择器用法介绍

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

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

本文实例为大家分享了jQuery子元素选择器,供大家参考,具体内容如下 <!DOCTYPE html> <html> <head> <meta http-equiv="Content-type" content="text/html; charset=utf-8" /> <title></title> <link rel="stylesheet" href="
jQuery选择器之属性筛选选择器用法详解

在这么多属性选择器中[attr="value"]和[attr*="value"]是最实用的 [attr="value"]能帮我们定位不同类型的元素,特别是表单form元素的操作,比如说input[type="text"],input[type="checkbox"]等 [attr*="value"]能在网站中帮助我们匹配不同类型的文件 <!DOCTYPE html> <
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 Selector选择器小结

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

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

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

前言在大多数项目中用户界面的时间选择是必不可少的,在项目的用户体验友好度这个大前提下,不让用户自己输入时间就显得格外的重要.而且用户输入时间还会存在格式不固定的问题,加大后台的开发量. 在这个时候就需要用到时间输入插件了,格式由我们自己设置,还减少了用户的输入环节提高了用户体验友好度使用 bootStrap的时间插件datetimepicker支持界面多元化有专门的的一个网址来说明这个时间选择器 BootStrap时间选择器 Demo 利用插件所带的方法和时间.可以做一个简单的demo d
jQuery表单元素选择器代码实例

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

本文实例讲述了jQuery实现form表单元素序列化为json对象的方法.分享给大家供大家参考,具体如下: 这段代码序列化form表单元素为json对象: <!Doctype html> <html xmlns=http://www.w3.org/1999/xhtml> <head> <title>jQuery扩展--form序列化到json对象</title> <meta http-equiv=Content-Type content=&
SpringMVC实现表单验证功能详解

本章节内容很丰富,主要有基本的表单操作,数据的格式化,数据的校验,以及提示信息的国际化等实用技能. 首先看效果图项目结构图接下来用代码重点学习SpringMVC的表单操作,数据格式化,数据校验以及错误提示信息国际化.请读者将重点放在UserController.java,User.java,input.jsp三个文件中. maven 项目必不可少的pom.xml文件.里面有该功能需要的所有jar包. <?xml version="1.0" encoding="UTF
BootStrap智能表单实战系列(八)表单配置json详解

本章属于该系列的高级部分,将介绍表单中一些列的配置 1.config列的配置: 主要用于控制布局 :config:{autoLayout:true|'1,2,2,4'} true:根据配置项最里层的数量来自动使用不同的栅格, '1,2,2,4':使用指定的栅格来布局,如果配置的列数不足的情况将使用第一项(n,n 为一项) 2.hides的配置项 hides:[{id:'xxx',value:''}] 此项是可选的,主要用于编辑时存放一些不可见的列(如主键ID的值) 3.eles 表单元素的配置(
PHP实现动态表单生成工具详解

目录 Form介绍特点项目主页链接安装方法快速使用链式操作创建块表单数组配置创建块表单行内表单 table表单表单包含多种input类型,包括 hiiden类型 ,text类型,radio类型,checkbox类型,textarea类型,file类型,select类型等基础类型,手写表单就是累耗时耗力开发销量太低而且代码量大了还容易写出bug,每个页面的表单遇到改动的时候恨不得长十双手去改,于是我自己开发了一个php写的表单生成工具,在业务逻辑通过配置或者链式操作去初始表单结构和
React事件处理和表单的绑定详解

目录一.事件处理 1.1 React事件 1.2 事件对象 1.3 事件传参 1.4 函数组件事件处理二.表单一.事件处理 1.1 React事件 React 元素的事件处理和 DOM 元素类似.但是有一点语法上的不同: React 事件绑定属性的命名采用驼峰式写法,而不是小写. 例如onclick属性应该写成onClick. 如果采用 JSX的语法你需要传入一个函数作为事件处理函数,而不是一个字符串(DOM 元素的写法).例如已经定义了一个名为handleClick的函数,应该这样调用:
Angular4表单验证代码详解

背景: 最近在itoo页面调整的时候,发现页面表单或者是文本框没有做基本的判断操作,所以着手demo一篇,希望对大家有帮助!! -------------------------------------------------------------------------------- 1.创建表单组件: ng g c login1 2.1单规则验证: <label>用户名:</label> <input type="text" #userNameRe

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

相关推荐

随机推荐