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蛮的全栈之路-序章 技术栈选择与全栈工程师

    目录 C蛮的全栈之路-序章 技术栈选择与全栈工程师C蛮的全栈之路-node篇(一) 环境布置C蛮的全栈之路-node篇(二) 实战一:自动发博客 博主背景 985院校毕业,至今十年C++开发工作经验, ...

  2. Linux命令：chmod命令

    chmod命令:改变文件或目录的存取权限 #权限代号 -r 文件被读取 4 -w 文件被写入 2 -x 文件被执行 1 #权限范围 -u 文件所有者 -g 文件所有者所在组 -o 其他 -a 全部 # ...

  3. SGU 145.Strange People(无环K短路)

    时间:0.25s空间:4m 题意: 其实就是求无环第K短路. 输入: 给出n,m,k,分别代表,n个点,m条边,第k长路. 接下来m行,三个整数x,y,z,分别代表x,y之间有条费用为x的双向路.保证 ...

  4. 24种设计模式--代理模式【Proxy Pattern】

    什么是代理模式呢?我很忙,忙的没空理你,那你要找我呢就先找我的代理人吧,那代理人总要知道被代理人能做哪些事情不能做哪些事情吧,那就是两个人具备同一个接口,代理人虽然不能干活,但是被代理的人能干活呀. ...

  5. underscorejs-shuffle学习

    2.21 shuffle 2.21.1 语法 _.shuffle(list) 2.21.2 说明 返回一个随机乱序的list副本数组, 使用 Fisher-Yates shuffle 来进行随机乱序. ...

  6. JavaIO流——File类

    1.掌握File 类的作用 2.可以使用File 类中的方法对文件进行操作 所有的 io 操作都保存在 java.io 包中. 构造方法:public File (String pathname) 直 ...

  7. js时间戳转为日期格式

    转自:http://wyoojune.blog.163.com/blog/static/57093325201131193650725/ 这个在php+mssql(日期类型为datetime)+aja ...

  8. python之json

    import json import requests re = requests.get('http://wthrcdn.etouch.cn/weather_mini?city=成都') re.en ...

  9. CentOS 6.4编译安装淘宝web服务器Tengine

    Tengine 是由淘宝核心系统部基于Nginx开发的Web服务器,它在Nginx的基础上,针对大访问量网站的需求,添加了很多功能和特性.Tengine的性能和稳定性已经在大型的网站如淘宝网,淘宝商城 ...

  10. 解决方案-Microsoft Visual Studio 2012 已停止工作

    问题: 根本解决方案: 用管理员模式运行. 找到软件的安装目录 \Microsoft Visual Studio 11.0\Common7\IDE\devenv.exe 然后如何保存管理员权限运行呢? ...