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基础（1）---Hive是什么
1. Hive是什么 Hive是基于Hadoop的数据仓库解决方案.由于Hadoop本身在数据存储和计算方面有很好的可扩展性和高容错性,因此使用Hive构建的数据仓库也秉承了这些特性. 这是来自官方的 ...
安卓App提交应用商店时遇到的两个小问题
陆陆续续做了一个半月左右的「喵呜天气」终于在今天下午成功提交到应用商店(腾讯应用宝).期间遇到两个小问题,记录如下: 1.上传安装包失败,提示「无法获取签名信息,请上传有效包(110506)」. 安装 ...
Jquery地图热点效果-鼠标经过弹出提示信息
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/ ...
menu菜单项和menubutton菜单按钮的结合使用
<a href="javascript:void(0)" id="m ...
超全面！这可能是最全面的 jQuery 知识总结
个人建议:学习 jQuery 前先掌握基本的 JavaScrpit 语法,特别是对函数要掌握,jQuery 基本上是使用函数. jQuery 简介 jQuery 是一个轻量级 JavaScript 库 ...
吾八哥学Python(六)：运算符与表达式
上篇简单学习了数学运算符,今天来学习下完整的Python运算符与表达式,具体看下面的表格吧! 表1 运算符与它们的用法运算符名称说明例子 + 加两个对象相加 3 + 5得到8.’a’ + ‘ ...
页面固定DIV层CSS代码
有时候为了用户体验更好些,网页设计师会把网站导航放在一个固定的DIV层里面,不随滚动条滚动.本方法是利用CSS,position:fixed属性来固定层,fixed是特殊的absolute,即fixe ...
【网络爬虫入门04】彻底掌握BeautifulSoup的CSS选择器
[网络爬虫入门04]彻底掌握BeautifulSoup的CSS选择器广东职业技术学院欧浩源 2017-10-21 1.引言目前,除了官方文档之外,市面上及网络详细介绍BeautifulSoup ...
vim-ultisnips补全功能失效，无法识别解决办法
昨天又给vim配了一堆插件发现了一个这个问题,vim的ultisnips插件不能用了! 首先,我先查看插件是否正常运行了 :script 从一堆正在运行插件里找到ultisnips的名字,说明插件正 ...
C语言指针的那些坑
那些年把我们坑惨的指针一.引言当我们使用c语言的时候,不可避免的就得用到指针,然后对于刚刚接触C语言的猿兄们,可能会有点不适应,特别是刚刚从python等离硬件很远的语言转过来的. 下面我为大家总 ...