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. UIDatePikcer的基本用法

    - (void)viewDidLoad { [super viewDidLoad]; _datePicker = [[UIDatePicker alloc] initWithFrame:CGRectM ...

  2. 英语学习[ZZ]

    本文作者三年间从四级勉强及格到高级口译笔试210,口试232.找工作面试时给其口试的老外考官听了一分钟就说你的英语不用考了.虽不敢说方法一定是最好的,但从现在开始随便谁不要再去找学习资料,每天花两个钟 ...

  3. POJ 2112.Optimal Milking （最大流）

    时间限制:2s 空间限制:30M 题意: 有K台挤奶机(编号1~K),C头奶牛(编号K+1~K+C),给出各点之间距离.现在要让C头奶牛到挤奶机去挤奶,每台挤奶机只能处理M头奶牛,求使所走路程最远的奶 ...

  4. js获取屏幕（设备）宽高

    平常获取设备的宽高无非就那几 <script language="javascript"> var h = ""; h += " 网页可见 ...

  5. html5系列.基础知识

    兼容性问题 创建一个html5页面 <!DOCTYPE html> <html> <head> <meta charset="UTF-8" ...

  6. python str + int

    TypeError: cannot concatenate 'str' and 'int' objects 1. print 'Is your secret number " + str(p ...

  7. 舵机的PWM控制学习随笔

    舵机的控制信号,对于脉宽调制信号的脉宽变换,常用的一种方法是采用调制信号获取有源滤波后的直流电压,但是需要50Hz(周期是20ms)的信号,这对运放器件的选择有较高要求,从电路体积和功耗考虑也不易采用 ...

  8. 01:A+B问题

    总时间限制:  1000ms 内存限制:  65536kB 描述 在大部分的在线题库中,都会将A+B问题作为第一题,以帮助新手熟悉平台的使用方法. A+B问题的题目描述如下:给定两个整数A和B,输出A ...

  9. bzoj3637: Query on a tree VI

    Description You are given a tree (an acyclic undirected connected graph) with n nodes. The tree node ...

  10. BZOJ 2432 兔农

    Description 农夫栋栋近年收入不景气,正在他发愁如何能多赚点钱时,他听到隔壁的小朋友在讨论兔子繁殖的问题. 问题是这样的:第一个月初有一对刚出生的小兔子,经过两个月长大后,这对兔子从第三个月 ...