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. Java描述设计模式(17)：调停者模式

    本文源码:GitHub·点这里 || GitEE·点这里 一.生活场景 1.场景描述 在公司的日常安排中,通常划分多个部门,每个部门又会分为不同的小组,部门经理的一项核心工作就是协调部门小组之间的工作 ...

  2. MongoDB自学------（1）MongoDB4.0安装

    一.环境 操作系统 安装包 安装方式 Ubuntu18.04 mongodb4.0 apt安装 Ubuntu18.04 mongodb4.0 docker安装 二.apt安装 sudo apt-key ...

  3. ASP.NET Core主机地址过滤HostFiltering

    前言 在ASP.Net Core2.X调用的CreateWebHostBuilder和3.X的主要区别在于WebHost的调用,CreateDefaultBuilder被Host替换,另一个区别是对C ...

  4. python 类内部装饰器的实现 与 参数解构学习

    学习了函数的装饰器的写法,然后想到如果要在类中初始化或获取信息时能用装饰器做过滤和验证应该怎么写呢, 在网上查了下相关信息,感觉这样也是可以的,不知道会不会有什么问题class Ctj(): clas ...

  5. 基于c/s架构的远程登陆服务的步骤。

    1:上/下位机安装相应的服务程序.(确保内核支持该服务)2:上位机(作为服务器端)配置能够给下位机访问目录的所在地,及其读写权限.3:在/dev目录下创建该服务其所需要使用的虚拟文件设备,同时按照该服 ...

  6. 005.Kubernetes二进制部署kubectl

    一 部署 kubectl 1.1 安装kubectl [root@k8smaster01 ~]# cd /opt/k8s/work [root@k8smaster01 work]# wget http ...

  7. mysql忘记密码怎么办？？

    1.停掉mysql 1.1单实例停止方式 [root@qiuhom ~]# /etc/init.d/mysqld stop Shutting down MySQL. [ OK ] 1.2多实例停止方式 ...

  8. 原来JS是这样的 - 原型链

    上一篇提到属性描述符 [[Get]] 和 [[Put]] 以及提到了访问描述符 [[Prototype]],看它们的特性就会很容易的让人想到经典的面向对象风格体系中对类操作要做的事情,但带一些 int ...

  9. C++中对C的扩展学习新增语法——内联函数以及函数参数

    内联函数以及函数参数 内联函数 使用 inline 关键字必须和函数体放在一起. 内联函数具有内部链接属性. 内联函数会被编译器在编译阶段替换到函数调用的地方. 可以把内联函数定义写到头文件中,多个c ...

  10. MySql——使用where子句过滤数据

    示例使用的数据表在上一个博客中创建的https://www.cnblogs.com/lbhym/p/11895968.html 参考资料:<Mysql必知必会> 1.使用where子句 示 ...