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

随机推荐

【maven插件】maven-shade-plugin
概述该插件提供了将artifact打包到一个本地jar包的能力,包括其依赖关系以及一些参数如 shade -rename重命名依赖关系的包. 目标 shade:shade 绑定到建生命周期中的pac ...
hdu 4468 spy 极其精彩的一道kmp灵活运用题
出的超级好的一道题.至于好在哪里,请思考题目: 题意抽象出来为给定一个字符串r,找出它的一个最短后缀s,使得这个r可以被 s的某前缀+s的某前缀+......+s的某前缀+s本身构造出来. 具体题目描 ...
NOIP2017SummerTraining0717
个人感受:自己水平是真的差劲,和他们不是一个档次的,第二题,如果不是陈载元暴力过了,我也不会那么早去A了第二题,第一题真的是无语,以前做到过,还想到了每个对应值a[i]-i,但是没想出来,真的是可惜 ...
Deep learning：一(基础知识_1)
本文纯转载: 主要是想系统的跟tornadomeet的顺序走一遍deeplearning; 前言: 最近打算稍微系统的学习下deep learing的一些理论知识,打算采用Andrew Ng的网页教程 ...
SpringMVC的一点理解
1.MVC(Model-View-Controller) 用慕课网上的一个图来看看MVC Front Controller(前端控制器):把客户的请求分发给不同的控制器去生成业务数据,将生成的业务数据 ...
unserialize() [function.unserialize]: Error at offset
$a = 'a:1:{i:0;s:12:"1,10,93,";}'; var_dump( unserialize( $a ) ); 运行之后页面上显示Notice: unseria ...
php用PHPWord库生成word文档的例子
<?php require_once '../libs/PHPWord/PHPWord/IOFactory.php'; require_once '../../config.php'; $PHP ...
There is no getter for property named xxx' in 'class java.lang.xxx'
在xxxMapper.xml我们使用sql片段来提高sql代码的复用性,当时新手传入参数时常常出现这样的错误: There is no getter for property named xxx' i ...
C#无限级分类递归显示示例
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="RoleDemo20150305 ...
使用邮件监控Mxnet训练
1. 前言受到小伙伴的启发,就自己动手写了一个使用邮件监控Mxnet训练的例子.整体不算复杂. 2. 打包训练代码需要进行监控训练,所以需要将训练的代码打包进一个函数内,通过传参的方式进行训练.还 ...