jQuery_事件学习

一、click事件

click事件----鼠标单击事件

$('.bt').click(function() { alert("本身的事件");})

当class为bt的div被但单击时执行函数体的内容部分

 $('.bt').click(function() {

          $('.bt2').click();

        })
当class为bt的div被但单击时执行class为bt2的div的click（）事件

栗子：

<!DOCTYPE html>

<html>

<head>

    <meta http-equiv="Content-type" content="text/html; charset=utf-8" />

    <title></title>

    <style>

   .bt{

       background:#F00;

   }

   .bt2{

       background:#f0f;

       display:none;

   }

    </style>

    <script src="http://libs.baidu.com/jquery/1.9.1/jquery.js"></script>

</head>

<body>

    <div class="bt">click（）鼠标单击事件</div>

     <div class="bt2">间接响应</div>

    <script type="text/javascript">

        $('.bt').click(function() {

            alert("本身的事件");

          $('.bt2').click();

        })

         $('.bt2').click(function() {

          alert("调用其他对象绑定的事件");

        })

</script>

</body>

</html>

二、mousemove（）和mousemout（）

鼠标移入（当鼠标移入到该元素的内部时触发）和移出事件（当鼠标移出元素的内部时触发）

栗子：

<!DOCTYPE html>

<html>

<head>

    <meta http-equiv="Content-type" content="text/html; charset=utf-8" />

    <title></title>

    <style>

    </style>

    <script src="http://libs.baidu.com/jquery/1.9.1/jquery.js"></script>

</head>

<style>

    .test{

        height:100px;

        width:100px;

        background:#F00;

    }

</style>

<body>

    <h2>.mousemove()方法</h2>

    <div class="test"></div>

    <script type="text/javascript">

    //鼠标移入事件

    $(".test").mousemove(function(){

         $(".test").css({"background":"blue","width":"100px","height":"100px"});

    });

    //鼠标移出事件

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

         $(".test").css({"background":"yellow","width":"50px","height":"50px"});

     });

    </script>

</body>

</html>

三、hover事件

hover()方法是同时绑定 mouseenter和 mouseleave事件。

使用：hover(function(){

　　鼠标移入元素时触发的内容

　　},function(){

　　鼠标移出元素时触发的内容

})

栗子：

<!DOCTYPE html>

<html>

<head>

    <meta http-equiv="Content-type" content="text/html; charset=utf-8" />

    <title></title>

    <style>

    .test{

        width:100px;

        height:100px;

        background:#000;

        color:#FFF;

    }

    </style>

    <script src="http://libs.baidu.com/jquery/1.9.1/jquery.js"></script>

</head>

<body>

    <div class="test">hover()事件</div>

    <script type="text/javascript">

    $(".test").hover(function(){

        $(".test").css("background","red");

    },function(){

        $(".test").css("background","blue");

    });

    </script>

</body>

</html>

四、focusin（）聚焦事件和focusout（）失焦事件

聚焦事件--当该元素获得聚焦时触发

失焦事件---当该元素失去焦点时触发

栗子：

<!DOCTYPE html>

<html>

<head>

    <meta http-equiv="Content-type" content="text/html; charset=utf-8" />

    <title></title>

    <script src="http://libs.baidu.com/jquery/1.9.1/jquery.js"></script>

</head> 

<body>

    <p>聚焦事件：<input class="in"/></p>

    <p>失焦事件：<input class="ot"/></p>

    <script type="text/javascript">

        //input聚焦元素增加一个边框

        $(".in").focusin(function() {

             $(this).css('border','2px solid red');

        });

        $(".ot").focusout(function(){

            alert("真的要放弃填写吗?");

        });

    </script>

</body>

</html>

五、change事件

change事件--当元素的内容发生变化时触发：

栗子：

<!DOCTYPE html>

<html>

<head>

    <meta http-equiv="Content-type" content="text/html; charset=utf-8" />

    <title></title>

    <script src="http://libs.baidu.com/jquery/1.9.1/jquery.js"></script>

</head>

<body>

    <h2>input、textarea与select</h2>

      <p>请输入输入姓名：<input class="name" type="text" value="请输入姓名" />

      </p>

      <p>选择性别<select class="sex">

                <option value="男" selected="selected">男</option>

                <option value="女">女</option>

            </select>

    </p>

    <p>个人简介： </p><textarea class="jianjie" rows="3" cols="20">简介</textarea>

    <div id="info"></div>

    <script type="text/javascript">

    //监听input值的改变

    $('.name').change(function(e) {

        $("#info").text("您的姓名是："+e.target.value)

    });

    $(".name").focusin(function(){

        $(".name").select();

    });

    //监听select：

    $(".sex").change(function(e) {

        $("#info").text("您的性别是："+e.target.value)

    })

     //监听textarea：

    $(".jianjie").change(function(e) {

        $("#info").text("个人简介："+e.target.value)

    })

    </script>

</body>

</html>

六、submit事件

表单提交事件：

栗子：

<!DOCTYPE html>

<html>

<head>

    <meta http-equiv="Content-type" content="text/html; charset=utf-8" />

    <title></title>

   <script type="text/javascript" src="http://libs.baidu.com/jquery/1.9.1/jquery.js"></script>

</head>

<body>

       <form id="f1" action="aa.html">

                <input type="text" value="input" />

                <input type="submit" value="提交" />

        </form>

        <form id="f2" action="bb.html">

                <input type="text" value="input2" />

                <input type="submit" value="提交" />

        </form>

    <script type="text/javascript">

    //提交表单并跳转

    $('#f1').submit(function(e) {

        alert('submit事件被触发，页面跳转')

    });

    //提交表单阻止页面跳转

    $('#f2').submit(function() {

        alert('submit事件被触发，通过return false阻止页面跳转')

        return false;

    });

    </script>

</body>

</html>

keydown()是在键盘按下就会触发
keyup()是在键盘松手就会触发

on()的多事件绑定

$("#elem").on('click',function(){}) //on方式
 $("#elem").on({
        mousedown: function(e) {
            $(this).text('触发事件：')
        },
        mouseup: function(e) {
            $(this).text('触发事件：')
        }
    })

jQuery_事件学习的更多相关文章

Mysql事件学习
出自:http://blog.chinaunix.net/uid-20639775-id-3323098.html Mysql事件学习在系统管理或者数据库管理中,经常要周期性的执行某一个命令或者SQ ...
C#委托与事件学习笔记
委托事件学习笔记本文是学习委托和事件的笔记,水平有限,如有错漏之处,还望大神不吝赐教. 什么是委托?从字面意思来解释,就是把一个动作交给别人去执行.在实际开发中最常用的就是使一个方法可以当做一个参数 ...
C# event 事件学习
C# event 事件学习运行环境:Window7 64bit,.NetFramework4.61,C# 6.0: 编者:乌龙哈里 2017-02-26 章节: 简单事件编写模拟 WPF 控件传递 ...
《JS高程》事件学习笔记
事件:文档或浏览器窗口中发生的一些特定的交互瞬间,也即用户或浏览器自身执行的某种动作. -------------------------------------------------------- ...
JS 点击事件学习总结
废话篇: 在我们编写无论什么网页内容的时候我们总是或多或少的要接触到点击事件这一范畴的,写过几个简短的demo和网页之后,感觉自己对电机事件一类的东西了解也更为的清楚了,之前写过很多零零散散的东西现在 ...
android touchEvent事件学习
学习网址:http://www.apkbus.com/forum.php?mod=viewthread&tid=44296 1:Android Touch事件传递机制解析 android系统中 ...
jQuery事件学习
1.JS事件的基本知识 <!DOCTYPE html> <html lang="en"> <head> <meta charset=&qu ...
jQuery Mobile的学习时间bottonbutton的事件学习
程序猿都非常懒.你懂的! 生命的绝唱来机仅仅争朝夕,如诗的年华更需惜时如金. 不要让今天的懈怠成为一生的痛. 每天都在进步. 近期在学习jquery mobile开发.使用的button,绑定事件,和 ...
Java的事件自定义事件学习
课程设计要做一个游戏,由于对C++不是很熟悉,老师也准许使用java 或者其他的语言,在.net我学过事件,一种委托回调,但是在java 我不是很了解,应该原理都相同吧! 游戏大致是这样的,现在这在写 ...

随机推荐

hdu1698线段树的区间更新区间查询
Just a Hook Time Limit: 4000/2000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Others) Tota ...
bzoj3209 花神的数论题 (二进制数位dp)
二进制数位dp,就是把原本的数字转化成二进制而以,原来是10进制,现在是二进制来做,没有想像的那么难不知到自己怎么相出来的...感觉,如果没有一个明确的思路,就算做出来了,也并不能锻炼自己的能力,因 ...
玩转 sublime3 第二弹 ES6环境
安装node: node作为JS的运行环境必须安装文件下载:https://nodejs.org/dist/v6.11.4/node-v6.11.4-x64.msi 备注:可以去官网 https:/ ...
css常见布局方式
CSS常见布局方式以下总结一下CSS中常见的布局方式.本人才疏学浅,如有错误,请留言指出. 如需转载,请注明出处:CSS常见布局方式目录: 使用BFC隐藏属性 float + margin abs ...
H264 NAL解析
NAL全称Network Abstract Layer,即网络抽象层.在H.264/AVC视频编码标准中,整个系统框架被分为了两个层面:视频编码层面(VCL)和网络抽象层面(NAL).其中,前者负责有 ...
Maven打包Jar
现状该项目使用了Maven,并且引入了Spring,包含代码.配置文件.Jar包,使用的是IDEA来作为开发工具,项目的产出物是要打包成一个可运行的Jar包.通过IDEA的打包工具也可以打包成功,只 ...
JavaScript设计模式--简单工厂模式
一,介绍工厂模式创建对象(视为工厂里的产品)时无需指定创建对象的具体类. 工厂模式定义一个用于创建对象的接口,这个接口由子类决定实例化哪一个类.该模式使一个类的实例化延迟到了子类.而子类可以重写接口 ...
SAP文件的上传下载 SMW0，二进制文件
TCODE: SMW0 选择:二进制数据输入包名和对象名新建维护文件类型文件参数信息下载: DATA: LS_WWWDATA_ITEM LIKE WWWDATATAB, " LV_ ...
[js高手之路]html5 canvas动画教程 - 自己动手做一个类似windows的画图软件
这个绘图工具,我还没有做完,不过已经实现了总架构,以及常见的简易图形绘制功能: 1,可以绘制直线,圆,矩形,正多边形[已完成] 2,填充颜色和描边颜色的选择[已完成] 3,描边和填充功能的选择[已完成 ...
张高兴的 Xamarin.Android 学习笔记：（四）常用控件
示例地址 GitHub : https://github.com/ZhangGaoxing/xamarin-android-demo/tree/master/ControlsDemo