<!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. npm run dev时报错“events.js:160 throw er; // Unhandled 'error' event”

    经查,此问题由端口占用导致,node服务器默认端口8080已被其他程序占用,关闭占用端口的程序或者修改node服务器的默认端口即可解决此问题

  2. Linux的Transparent Hugepage与关闭方法

    Transparent HugePages是在运行时动态分配内存的,而标准的HugePages是在系统启动时预先分配内存,并在系统运行时不再改变. 因为Transparent HugePages是在运 ...

  3. 也许，这样理解HTTPS更容易

    http://kb.cnblogs.com/page/563885/ 本文尝试一步步还原HTTPS的设计过程,以理解为什么HTTPS最终会是这副模样.但是这并不代表HTTPS的真实设计过程.在阅读本文 ...

  4. 基于php-fpm的配置详解

    php5.3自带php-fpm/usr/local/php/etc/php-fpm.confpid = run/php-fpm.pidpid设置,默认在安装目录中的var/run/php-fpm.pi ...

  5. c++与matlab联合编程，调用Deploytool 生成exe文件和dll文件（转）

    转自:http://www.cnblogs.com/xlw1219/archive/2012/12/25/2832222.html 首先必须知道联合编程需要知道的一些命令解释: mcc 的作用是将 . ...

  6. eclipse 调试技巧收集

    1  eclipse启动tomcat无法访问 原因:部署路径没有选择 tomcat安装路径 解决:双击,设置server location即可 http://blog.csdn.net/wqjsir/ ...

  7. [2018HN省队集训D5T2] party

    [2018HN省队集训D5T2] party 题意 给定一棵 \(n\) 个点以 \(1\) 为根的有根树, 每个点有一个 \([1,m]\) 的权值. 有 \(q\) 个查询, 每次给定一个大小为 ...

  8. java String,StringBuilder和StringBuffer

    String:1.java语言中的字符串值属于String类,虽然有其它方法表示字符串(如字符数组),但java一般使用Sting类作为字符串的标准格式,java编译器把字符串值作为String对象. ...

  9. python第十四课--排序及自定义函数之自定义函数(案例五)

    演示函数的定义和使用细节: 默认参数:#在设计自定义函数的时候,就存在一个默认值,就算在调用的时候不显示的传入实参,也不会报错.#会用默认值来代替参与后期的运算 def m1(name='张三',ag ...

  10. 1034. [ZJOI2008]泡泡堂【贪心】

    Description 第XXXX届NOI期间,为了加强各省选手之间的交流,组委会决定组织一场省际电子竞技大赛,每一个省的代表 队由n名选手组成,比赛的项目是老少咸宜的网络游戏泡泡堂.每一场比赛前,对 ...