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. iOS远程消息推送自我整理版

    @interface AppDelegate () <UIApplicationDelegate> @end @implementation AppDelegate - (BOOL)app ...

  2. sublime text snippet代码片断

    $0 代表补全代码后放的位置   0 的权重是最低的 $1 最高 也等于${1:}  ${1: name}    1输入点的序号(1权重最高) name 自动补全的默认值      <conte ...

  3. 关于c:\fakepath\的解决办法

    (2014.11.25 最后更新) 一.碎碎念:关于访问本地图片的路径的问题,比较典型的例子就是上传头像.在以往的解决办法中,我们大多是先将图片上传到服务器然后从服务器返回图片,显示在页面上以达到预览 ...

  4. Codeforces 543D Road Improvement（DP）

    题目链接 Solution 比较明显的树形DP模型. 首先可以先用一次DFS求出以1为根时,sum[i](以i为子树的根时,满足要求的子树的个数). 考虑将根从i变换到它的儿子j时,sum[i]产生的 ...

  5. fish code

    <embed width="272" height="180" type="application/x-shockwave-flash" ...

  6. js prototype __proto__ instanceof constructor

    JS中有两个特殊的对象:Object与Function,它们都是构造函数,用于生成对象. Object.prototype是所有对象的祖先,Function.prototype是所有函数的原型,包括构 ...

  7. css3 翻书效果

    div { -webkit-transform-origin: 285px 0; -webkit-transform: translate(1030px, 500px) rotate(32deg); ...

  8. Bootstrap_Javascript_图片轮播

    一 . 结构分析 一个轮播图片主要包括三个部分: ☑ 轮播的图片 ☑ 轮播图片的计数器 ☑ 轮播图片的控制器 第一步:设计轮播图片的容器.在 Bootstrap 框架中采用 carousel 样式,并 ...

  9. Canvas中点到点的路径运动

    /*随机生成两个点,然后以两点为端点,进行运动,主要使用了SetInterval,对画布进行不断的擦除描绘的操作*/1 <!DOCTYPE html> <html xmlns=&qu ...

  10. 利用Xilinx中的ROM构造查找表来计算sin和cos的方法探讨

    1.使用matlab制作.coe文件 查找表的构造 构造256点的正余弦表 exp(-j*2*pi*(0:255)/256),分别得到 cos和sin的查找表 matlab代码: 求sin fid = ...