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. mysql数据库中编码问题（续）

    其实之前的数据库中文乱码问题并没有彻底的解决,虽然在网页上显示正常,但是在数据库中却是乱码,虽然用户看起来没问题,但是自己就遭罪了,而且也是个极大的问题 究其原因,是没注意到一点,就是数据库中表的结构 ...

  2. 通过移位与或非运算获取整形最大值，最小值，以及获取输入的int类型整数的二进制表示

    以上是最终效果 实现类: package com.corejava.chap02; public class IntBin { private int value; public IntBin(int ...

  3. QWidget QMainWindow QDialog 三者区别

    Qt类是一个提供所需的像全局变量一样的大量不同的标识符的命名空间.通常情况下,你可以忽略这个类.QObject和一些其它类继承了它,所以在这个Qt命名空间中定义的所有标识符通常情况下都可以无限制的使用 ...

  4. js作用域与作用域链

    一直对Js的作用域有点迷糊,今天偶然读到JavaScript权威指南,立马被吸引住了,写的真不错.我看的是第六版本,相当的厚,大概1000多页,Js博大精深,要熟悉精通需要大毅力大功夫. 一:函数作用 ...

  5. java获取数据库数据表的元数据

    Connction conn; DatabaseMetaData dmd=conn.getMetaData();//获取数据库元数据 PreparedStatment ps; ps.getParame ...

  6. asp.net将数据导出到excel

    本次应用datatable导出,若用gridview(假设gridview设为了分页显示)会出现只导出当前页的情况. protected void btnPrn_Click(object sender ...

  7. springMVC整合memcached，以注解形式使用

    睡不着,深夜写点博客.闲下来有一个月了,心里多少有点…… 在北京找工作一再受阻,这个时间点也不好找 再接再厉 之前没有用过memcached,没有什么实战经验,看了一些关于memcached的博客,写 ...

  8. easyui tree 判断点击的节点是否还存在子节点

    有些业务需求是要求tree一次性全部加载,有些是需要异步加载的. 如果是一次性全部加载的tree,那怎么判断点击的节点是否还存在子节点? function loadTree(){ $('#tree') ...

  9. js以json形式提交数据，后台接受

    $("#savename").click(function(){ var fananname=$("#editname").val(); var jsonLis ...

  10. Explain语法

    EXPLAIN SELECT -- 变体: 1. EXPLAIN EXTENDED SELECT -- 将执行计划"反编译"成SELECT语句,运行SHOW WARNINGS 可得 ...