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 我不是很了解,应该原理都相同吧! 游戏大致是这样的,现在这在写 ...

随机推荐

Hive基础（3）---Fetch Task(转)
我们在执行hive代码的时候,一条简单的命令大部分都会转换成为mr代码在后台执行,但是有时候我们仅仅只是想获取一部分数据而已,仅仅是获取数据,还需要转化成为mr去执行吗?那个也太浪费时间和内存啦,所以 ...
ObjectSNMP
下面的例子,就是使用ObjectSNMP获取RFC1213-MIB的例子:其中的system和ifTable对象就是对应的SNMPMIB中的system组合interface中的ifTable表. p ...
使用docker部署standalone cinder
| 版权:本文版权归作者和博客园共有,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出原文连接.如有问题,可以邮件:wangxu198709@gmail.com 背景 OpenSta ...
CSS3D模型
html部分 <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> < ...
Python使用Scrapy爬虫框架全站爬取图片并保存本地(妹子图)
大家可以在Github上clone全部源码. Github:https://github.com/williamzxl/Scrapy_CrawlMeiziTu Scrapy官方文档:http://sc ...
ASP.NET没有魔法——ASP.NET MVC 与数据库之ORM
什么是ORM 对象关系映射(Object Relational Mapping,简称ORM,或O/RM,或O/R mapping),是一种程序技术,用于实现面向对象编程语言里不同类型系统的数据之间的转 ...
HDU1085 多重背包
Holding Bin-Laden Captive! Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 65536/32768 K (Ja ...
Python内置类型(2)——布尔运算
python中bool运算符按优先级顺序分别有or.and.not, 其中or.and为短路运算符 not先对表达式进行真值测试后再取反 not运算符值只有1个表达式,not先对表达式进行真值测试后再 ...
Jquery.Uploadify实现批量上传显示进度条取消上传后缩略图显示可删除
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="UpLoad.aspx.cs&q ...
张高兴的 Windows 10 IoT 开发笔记：BH1750FVI 光照度传感器
BH1750FVI 是一款 IIC 接口的数字型光强度传感器集成电路.下面介绍一下其在 Windows 10 IoT Core 环境下的用法. 项目运行在 Raspberry Pi 2/3 上,使用 ...