jQuery基础之事件方法，如下图：

代码实现：

 <script src="JS/jquery-1.12.4.min.js"></script>

     <script>

         $(function(){

             var $btn = $('#btn1');

             // 鼠标点击事件

             $btn.click(function(){

                 alert('使用JS实现鼠标单击事件！');

             });

             // 元素获取焦点事件

             var $txt = $('#txt1');

             $txt.focus(function(){

                 $txt.val('获取到焦点。')

             });

             // 元素失去焦点事件

             $txt.blur(function(){

                 $txt.val('元素失去焦点。')

             });

             // 鼠标进入范围mouseover()事件

             var $div = $('.div1');

             $div.mouseover(function(){

                 // this表示当前对象

                 $(this).css({

                     'width':'200px',

                     'height':'200px',

                     'background':'red'

                 });

             });

             // 鼠标离开范围mouseout()事件

             $div.mouseout(function(){

                 $(this).css({

                     'width':'100px',

                     'height':'100px',

                     'background':'blue'

                 });

             });

         });

         // ready()DOM加载完成后执行的事件

         $(document).ready(function(){

             alert('这是DOM加载完成后执行的事件！')

         });

     </script>

 <body>

     <input type="button" value="事件按钮" id="btn1">

     <hr>

     <input type="text"  id="txt1">

     <div class="div1">

             这是事件的范围

         </div>

 </body>

jQuery基础之事件的更多相关文章

  1. Jquery基础之事件操作

    事件是用户操作时页面或页面加载时引发的用来完成javascript和HTML之间的交互操作.常见的元素点击事件.鼠标事件.键盘输入事件等,较传Javascript 相比JQuery增加并扩展了基本的事 ...

  2. 【总结整理】JQuery基础学习---事件篇

    jQuery鼠标事件之click与dbclick事件 用交互操作中,最简单直接的操作就是点击操作.jQuery提供了两个方法一个是click方法用于监听用户单击操作,另一个方法是dbclick方法用于 ...

  3. jQuery基础笔记 事件（6）

    day56 参考:https://www.cnblogs.com/liwenzhou/p/8178806.html#autoid-1-9-6 事件 *****         1. 目前为止学过的绑定 ...

  4. JQuery基础与事件和动画

    JQuery语法 1.JQuery("选择器").action; 通过选择器调用时间函数 但Jquery可以用$符号代替,即$("选择器").action; ① ...

  5. 【jQuery基础学习】03 jQuery中的事件与动画

    关于jQuery中的事件 js与HTML之间的交互是通过用户和浏览器操作页面时引发的事件来处理的. jQuery增加并扩展了基本的事件处理机制,jQuery不仅提供了更加优雅的事件处理方法,而且极大地 ...

  6. JQuery基础教程：事件（上）

    在页面加载后执行任务      之前我们已经知道了$(document).ready()是jQuery基于页面加载执行任务的一种主要方式,但是要知道原生的window.onload事件也可以实现相同的 ...

  7. jQuery基础（三）事件

    1.鼠标事件 jQuery鼠标事件之click与dblclick事件 click方法用于监听用户单击操作,dbclick方法用于监听用户双击操作. 方法一:$ele.click() 绑定$ele元素, ...

  8. jQuery基础（4）- 位置信息、事件流、事件对象、事件代理、jquery事件

    一.jQuery的位置信息 jQuery的位置信是JS的client系列.offset系列.scroll系列封装好的一些简便api. 1.宽度和高度 a.获取宽度和高度,例如: .width() // ...

  9. jQuery基础（鼠标事件，表单事件，键盘事件，自定义事件 篇）

    1.jQuery鼠标事件之click与dbclick事件   方法一:$ele.click()(不带参数)   <div id="test">点击触发<div&g ...

随机推荐

  1. 《吊打面试官》系列-Redis哨兵、持久化、主从、手撕LRU

    你知道的越多,你不知道的越多 点赞再看,养成习惯 前言 Redis在互联网技术存储方面使用如此广泛,几乎所有的后端技术面试官都要在Redis的使用和原理方面对小伙伴们进行360°的刁难.作为一个在互联 ...

  2. 1、第一个TensorFlow程序

    import tensorflow as tf import os os.environ[' #去掉警告,将警告级别提升 a = tf.constant(2) #定义一个常量 b = tf.const ...

  3. 转载： ubuntu13.04下载android4.0.1源码过程

    转自:http://blog.csdn.net/zhanglongit/article/details/9263009,中间有些不行的地方进行了些小修改. 最初我参考的是老罗的博客http://blo ...

  4. 浅谈OI中的底层优化！

    众所周知,OI中其实就是算法竞赛,所以时间复杂度非常重要,一个是否优秀的算法或许就决定了人生,而在大多数情况下,我们想出的算法或许并不那么尽如人意,所以这时候就需要一中神奇的的东西,就是底层优化: 其 ...

  5. Linux Shell | 解析xml节点

    01 xml文件 # user.xml <user> <name>Toy</name> <sex>man</sex> <room/&g ...

  6. php 5.5使用 array_column的方法

    <pre>php 5.5使用 array_column的方法</pre> <pre> public function array_column($input, $c ...

  7. Linux中文件的SUID、SGID、Sticky权限说明

    1.SUID 首先我们要了解,在Linux中启动一个程序或者启动一个进程是需要有用户的,一个文件的存在是要有用户和组的,一个进程启动后,它的属主取决于进程的发起者,比如 我用root用户启动了一个 c ...

  8. CentOS7 reset脚本,用于初始化新的虚拟机

    能用,有待完善 CentOS7测试 哈哈 #!/bin/bash #************************************************************** #Au ...

  9. windows7设置定时任务运行ThinkPHP框架程序

    1. 设置Windows的任务计划 可以参考win7计划任务的设置方法 2. 新建Windows执行文件bat 新建cron.bat文件,内容如下: D: cd \wamp\www\tp32 D:\w ...

  10. Lab8：文件系统

    文件系统的概念 文件系统是操作系统中管理持久性数据的子系统,提供数据存储和访问功能 文件是具有符号名,由字节序列构成的数据项集合 文件系统的功能 分配文件磁盘空间 管理文件块(位置和顺序) 管理空闲空 ...