window.onload：在浏览器加载web页面时触发，可以写多次onload事件，但后者覆盖前者
　　ready：在浏览器加载web页面时触发，可以写多次ready事件，不会后者覆盖前者，依次从上向下执行，我们常用$(函数)简化，ready和onload同时存在时，二者都会触发执行，ready先于onload执行

<body>

    <script type="text/javascript">

        //定义a()和b()二个方法

        function a() {

            alert("JS方式");

        }

        function b() {

            alert("JQUERY方式");

        }

        //使用JS方式加载a()

        window.onload = function() {

            a();

        }

        //使用jQuery方式加载b()方法

        $(document).ready(function() {

            b();

        });

        //使用jQuery最简方式加载b()方法

        $(function() {

            b();

        });

        //将js方式的onload与jquery方式的ready对比，看哪个执行快

        window.onload = function() {

            alert("传统");

        }

        $(function() {

            alert("现代");

        });

    </script>

</body>

　　change：当内容改变时触发

<body>

    <select id="city">

        <option value="bj">北京</option>

        <option value="sh">上海</option>

        <option value="gz">广州</option>

    </select>

    <script type="text/javascript">

        //当<select>标签触发onchange事件,显示选中<option>的value和innerHTML属性的值

        $("#city").change(function() {

            var $option = $("#city option:selected");

            var value = $option.val();

            var text = $option.text();

            alert(value + ":" + text);

        });

    </script>

</body>

　　focus：焦点获取
　　select：选中所有的文本值

<body>

    <input type="text" value="加载页面时获取光标并选中所有文字" size="50" />

    <script type="text/javascript">

        //加载页面时获取光标并选中所有文字

        $(function() {

            //光标定位文本框

            $(":text").focus();

            //选中文本框的所有文本

            $(":text").select();

        });

    </script>

</body>

　　keyup/keydown/keypress（这几个事件发生的顺序是:keydown,keypress,keyup）

<body>

    <script type="text/javascript">

        //当按键弹起时，显示所按键的unicode码

        $(function() {

            //IE浏览器会自动创建event这个事件对象，那么程序员可以根据需要来使用该event对象

            $(document).keyup(function() {

                //获取按钮的unicode编码

                var code = event.keyCode;

                alert(code);

            });

            $(document).keydown(function() {

                //获取按钮的unicode编码

                var code = event.keyCode;

                alert(code);

            });

            $(document).keypress(function() {

                //获取按钮的unicode编码

                var code = event.keyCode;

                alert(code);

            });

        });

    </script>

</body>

　　mousemove：在指定区域中不断移动触发
　　mouseover：鼠标移入时触发
　　mouseout：鼠标移出时触发

<body>

    X=<input type="text" id="xID" /><br />

    Y=<input type="text" id="yID" />

    <script type="text/javascript">

        //显示鼠标移动时的X和Y座标

        $(function() {

            $(document).mousemove(function() {

                var x = event.clientX;

                var y = event.clientY;

                $("#xID").val(x);

                $("#yID").val(y);

            });

        });

    </script>

</body>
<body>

    <table border="2" align="center" width="80%" id="tableID">

        <tr>

            <td>张三</td>

            <td>男</td>

            <td>22</td>

        </tr>

        <tr>

            <td>李四</td>

            <td>男</td>

            <td>24</td>

        </tr>

    </table>

    <hr />

    <img height="120px" src="../images/zgl.jpg" style="position:absolute;left:30%;border-style:dashed;border-color:white" />

    <img height="120px" src="../images/lb.jpg"  style="position:absolute;left:60%;border-style:dashed;border-color:white" />

    <script type="text/javascript">

        //鼠标移到某行上，某行背景变色

        $("table tr").mouseover(function() {

            $(this).css("background-color", "blue");

        });

        //鼠标移出某行，某行还原

        $("table tr").mouseout(function() {

            $(this).css("background-color", "white");

        });

        //鼠标移到某图片上，为图片加边框

        $("img").mouseover(function() {

            $(this).css("border-color", "red");

        });

        //鼠标移出图片，图片还原

        $("img").mouseout(function() {

            $(this).css("border-color", "white");

        });

    </script>

</body>

　　submit：在提交表单时触发，true表示提交到后台，false表示不提交到后台

<body>

    <form action="xxx.html" method="post">

        用户名：<input type="text" /> <input type="submit" value="表单提交" />

    </form>

    <script type="text/javascript">

        //浏览器加载web页面时触发

        $(function(){

            //将光标定位于文本框中

            $(":text").focus();

        });

        //检测是否为中文，true表示是中文，false表示非中文

        function isChinese(str){

            if(/^[\u3220-\uFA29]+$/.test(str)){

                return true;

            }else{

                return false;

            }

        }

        //当表单提交前检测

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

            var flag = false;

            //获取文本框的中内容

            var name = $(":text").val();

            //去二边的空格

            name = $.trim(name);

            //如果没有填内容

            if(name.length == 0){

                alert("用户名必填");

                //将光标定位于文本框中

                $(":text").focus();

                //清空文本框中的内容

                $(":text").val("");

            }else{

                //调用方法

                flag = isChinese(name);

                //如果不是中文

                if(!flag){

                    alert("用户名必须填中文");

                    //将光标定位于文本框中

                    $(":text").focus();

                    //清空文本框中的内容

                    $(":text").val("");

                }

            }

            return flag;

        });

    </script>

</body>

jQuery常用事件详解的更多相关文章

  1. [转]使用 jQuery Mobile 与 HTML5 开发 Web App —— jQuery Mobile 事件详解

    在前文<使用 jQuery Mobile 与 HTML5 开发 Web App —— jQuery Mobile 默认配置与事件基础>中,Kayo 对 jQuery Mobile 事件的基 ...

  2. JavaScript事件详解-jQuery的事件实现（三）

    正文 本文所涉及到的jQuery版本是3.1.1,可以在压缩包中找到event模块.该篇算是阅读笔记,jQuery代码太长.... Dean Edward的addEvent.js 相对于zepto的e ...

  3. 单选框radio改变事件详解（用的jquery的radio的change事件）

    单选框radio改变事件详解(用的jquery的radio的change事件) 一.总结 1.用的jquery的radio的change事件:当元素的值发生改变时,会发生 change 事件,radi ...

  4. logback 常用配置详解<appender>

    logback 常用配置详解 <appender> <appender>: <appender>是<configuration>的子节点,是负责写日志的 ...

  5. JavaScript事件详解-Zepto的事件实现（二）【新增fastclick阅读笔记】

    正文 作者打字速度实在不咋地,源码部分就用图片代替了,都是截图,本文讲解的Zepto版本是1.2.0,在该版本中的event模块与1.1.6基本一致.此文的fastclick理解上在看过博客园各个大神 ...

  6. 【转】logback logback.xml常用配置详解（三） <filter>

    原创文章,转载请指明出处:http://aub.iteye.com/blog/1110008, 尊重他人即尊重自己 详细整理了logback常用配置, 不是官网手册的翻译版,而是使用总结,旨在更快更透 ...

  7. logback 常用配置详解（二） <appender>

    logback 常用配置详解(二) <appender> <appender>: <appender>是<configuration>的子节点,是负责写 ...

  8. JavaScript事件详解-zepto的事件实现

    zepto的event 可以结合上一篇JavaScript事件详解-原生事件基础(一)综合考虑源码暂且不表,github里还有中文网站都能下到最新版的zepto.整个event模块不长,274行,我们 ...

  9. logback logback.xml常用配置详解（三）

    logback logback.xml常用配置详解 <filter> <filter>: 过滤器,执行一个过滤器会有返回个枚举值,即DENY,NEUTRAL,ACCEPT其中之 ...

随机推荐

  1. C# 线程数

    理论上,一个进程可用虚拟空间是2G,默认情况下,线程的栈的大小是1MB,所以理论上最多只能创建2048个线程,但是一般不会到这么大,因为主线程要占内存,可能还要多点.如果要创建多于2048的话,必须修 ...

  2. spring jdbctemplate调用procedure（返回游标）

    package cn.com.git.htsc.uac.core.repository.report; import cn.com.git.htsc.uac.core.api.dto.report.R ...

  3. 【POJ3580】【块状链表】SuperMemo

    Description Your friend, Jackson is invited to a TV show called SuperMemo in which the participant i ...

  4. linux之uniq

    Linux命令uniq的作用是过滤重复部分显示文件内容,这个命令读取输入文件,并比较相邻的行.在正常情况下,第二个及以后更多个重复行将被删去,行 比较是根据所用字符集的排序序列进行的.该命令加工后的结 ...

  5. CSS3中动画transform必须要了解的Skew变化原理

    transform是CSS3中比较安全的动画(对于性能来说),其中有一些动画属性,来执行不同的变化.今天我们来了解skew的变化原理. skew,其实使用的频率不是很高,当然也没有最低.但是往往,一直 ...

  6. YII 小部件实现的注册表

    今天来进行用户注册功能yii集成了很多验证框架,framework/validators下面,这个文件夹的最后一个文件CValidator.php 是总的验证信息,根据请求参数决定需要那种验证 如:u ...

  7. Day14 HTML补充

    一.认识前端 前端开发的核心语言: html - 超文本标记语言 结构 css - 层叠样式表 样式 javascript - 脚本语言 行为 <html></html> 双标 ...

  8. IIC 概述之1

    概述: I²C 是Inter-Integrated Circuit的缩写,发音为"eye-squared cee" or "eye-two-cee" , 它是一 ...

  9. xamarin fivechess

    网上的五子棋项目是java开发,先转为xamarin,有需要的请下载. FiveChess.7z

  10. C 和 OC 字符串转换 NSString 和 char * 转换 const char* 与 char *

    #import <Foundation/Foundation.h> int main(int argc, const char * argv[]) { char *s = "He ...