<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title>表单事件</title>

        <style>

        .me{

            position: absolute;

            left: %;

            top: %;

            margin-left: -200px;

            margin-top: -;

            width: 400px;

            height: 100px;

            background-color: #ccc;

            overflow: auto;

            padding: 10px;

        }

        input[type='text'], select{width: 200px;}

        #tips{color: red;}

        .focusin{

            background-color: lightgreen;

            font-weight: bold;

        }

        </style>

        <script src="js/jquery.js"></script>

        <script type="text/javascript">

        //页面加载完成简写形式

            $(function(){

            //输入框获得焦点 改变其背景色和字体

            $("input[name='name']").on("focus",function(){

                $(this).addClass("focusin");

            });

            //失去焦点时候 还原背景色和字体-删除添加的CSS类

            $("input[name='name']").on("blur",function(){

                $(this).removeClass("focusin");

            });

            //文本改变时显示在页面上

            $("input[name='name']").on("change",function(){

              $("#tips").text("姓名:"+$(this).val());

            });

            //性别选择改变时显示在页面上

            $("select[name='sex']").on("change",function(){

              $("#tips").text("性别:"+$(this).val());

            });

            //表单提交前检查

            $("form").on("submit",function(){

                var name = $("input[name='name']").val();

                var sex = $("select[name='sex']").val();

                if(name!=""&&sex!="请选择")

                {

                    return true;

                }

                else

                {

                    alert("表单验证不通过！");

                    return false;

                }

            });

            })

            </script>

    </head>

    <body>

    <div class="me">

        表单测试事件

        <div id="tips">这里显示提示信息</div>

        <form action="#" method="post">

            姓名:<input type="text" name="name"  /><br>

            性别:<select name="sex">

                <option selected="selected">请选择</option>

                <option>男</option>

                <option>女</option>

            </select>

            <input type="submit" value="提交表单" />

        </form>

    </div>

    </body>

</html>

jQuery学习- 表单事件的更多相关文章

  1. Jquery学习(表单-Button)-----jQuery1.4.2

    <html> <head> <base href="<%=basePath%>"> <title>My JSP 'jqu ...

  2. jQuery基础（鼠标事件，表单事件，键盘事件，自定义事件 篇）

    1.jQuery鼠标事件之click与dbclick事件   方法一:$ele.click()(不带参数)   <div id="test">点击触发<div&g ...

  3. bootstrap+jQuery.validate表单校验

    谈谈表单校验 这大概是一种惯例,学习前台后台最开始接触的业务都是用户注册和登录.现在社会坚持以人为本的理念,在网站开发过程同样如此.User是我们面对较多的对象,也是较核心的对象.最开始的用户注册和登 ...

  4. jQuery.validate表单校验+bootstrap

    谈谈表单校验 这大概是一种惯例,学习前台后台最开始接触的业务都是用户注册和登录.现在社会坚持以人为本的理念,在网站开发过程同样如此.User是我们面对较多的对象,也是较核心的对象.最开始的用户注册和登 ...

  5. Day050--jQuery表单事件 轮播图 插件库 ajax

    表单控件的事件 change()表单元素发生改变时触发事件 select()文本元素发生改变时触发事件 submit()表单元素发生改变时触发事件 .focus() 获取焦点 .blur() 释放焦点 ...

  6. sbadmin表单事件

    Form表单 自定义表单 <from action="" method="'><!---      这里可以用表单组件快速生成表单元素哦        ...

  7. jQuery-3.事件篇---表单事件

    jQuery表单事件之blur与focus事件 在之前2.8与2.9节我们学过了表单处理事件focusin事件与focusout事件,同样用于处理表单焦点的事件还有blur与focus事件 它们之间的 ...

  8. 第一百六十八节，jQuery，表单选择器

    jQuery,表单选择器 学习要点: 1.常规选择器 2.表单选择器 3.表单过滤器 表单作为 HTML 中一种特殊的元素,操作方法较为多样性和特殊性,开发者不但可以 使用之前的常规选择器或过滤器,也 ...

  9. $().each 和表单事件的坑

    在用each循环时 1.想结束循环 return false 2.想跳过某循环 return 3.想跳出function 不行,请切换成其他循环如 for 使用form表单事件 1.必须要有submi ...

随机推荐

  1. 使用 Azure 门户创建 Linux 虚拟机

    可以通过 Azure 门户创建 Azure 虚拟机. 此方法提供一个基于浏览器的用户界面,用于创建和配置虚拟机和所有相关的资源. 本快速入门介绍了如何创建虚拟机并在 VM 上安装 webserver. ...

  2. Hybris阶段总结（1）何为hybris

    按照谷歌出来的结果,大体意思是“Hybris  Commerce是一套完善的电子商务解决方案,基于开放标准构建,功能强大,且具有模块化的特点,旨在为满足企业的商务需求提供坚实的基础”. 当然对于我这样 ...

  3. 线性规划 Matlab

    线性规划的 Matlab 解法 形式 s.t.( subject to) c和 x为n 维列向量, A. Aeq 为适当维数的矩阵,b .beq为适当维数的列向 量. 函数: linprog(c,A, ...

  4. Java基础知识强化之集合框架笔记79：HashMap的实现原理

    1. HashMap的实现原理之 HashMap数据结构: HashMap是对数据结构中哈希表(Hash Table)的实现, Hash表又叫散列表.Hash表是根据关键码Key来访问其对应的值Val ...

  5. 1934. [SHOI2007]善意的投票【最小割】

    Description 幼儿园里有n个小朋友打算通过投票来决定睡不睡午觉.对他们来说,这个问题并不是很重要,于是他们决定发扬谦让精神.虽然每个人都有自己的主见,但是为了照顾一下自己朋友的想法,他们也可 ...

  6. [SDOI2014]LIS

    这道题还是非常好的 首先第一问可以让我们联想到某网络流二十四题里的一道题,发现建图方式应该和这道题差不多啊 所以首先跑一遍\(dp\),求出\(dp[i]\)表示\(i\)位置结束的\(LIS\)长度 ...

  7. Hadoop学习之路（十五）MapReduce的多Job串联和全局计数器

    MapReduce 多 Job 串联 需求 一个稍复杂点的处理逻辑往往需要多个 MapReduce 程序串联处理,多 job 的串联可以借助 MapReduce 框架的 JobControl 实现 实 ...

  8. Hadoop学习之路（三）Hadoop-2.7.5在CentOS-6.7上的编译

    下载Hadoop源码 1.登录官网 2.确定你要安装的软件的版本 一个选取原则: 不新不旧的稳定版本 几个标准: 1)一般来说,刚刚发布的大版本都是有很多问题 2)应该选择某个大版本中的最后一个小版本 ...

  9. 【JavaScript】赛码网前端笔试本地环境搭建

    参考:https://hoofoo.me/article/2017-04-11/%E8%B5%9B%E7%A0%81%E7%BD%91%E5%89%8D%E7%AB%AF%E7%AC%94%E8%AF ...

  10. Python自动化之django model验证（很弱，感觉应用场景不多）

    django model的数据验证 使用full_clean进行验证 obj = models.UserInfo(name="alex",email="tiantian& ...