跳过JS直接JQUERY，“不愧是你”。

对就是我。

今天开始jQuery学习第一天。

click事件方法:

鼠标点击

dbl事件方法:

双击鼠标

mouseenter事件方法:

鼠标进入

mouseleave事件方法:

鼠标离开

hover:

光标悬停，多一个css可以产生和mouseenter、mouseleave接近的效果

alert:

弹出一个框

在事件之后。

keydown - 键按下的过程，变yellow

keypress - 键被按下,可用计数

keyup- 键被松开，变pink

submit事件方法:

当提交表单时，会发生 submit 事件。

该事件只适用于 <form> 元素。

submit() 方法触发 submit 事件，或规定当发生 submit 事件时运行的函数。

 $(document).ready(function(){

 $("form").submit(function(){

 alert("提交");

 });

 });

拓展:

 $(document).ready(function(){

 $("form").submit(function(event){

 event.preventDefault();

 alert("不许提交");

 });

 });

event.preventDefault阻止

change事件方法:

 $(document).ready(function(){

 $("input").change(function(){

 alert("文本已被修改");

 });

 });

input改变时，弹出alert

当元素的值改变时发生 change 事件（仅适用于表单字段）。

change() 方法触发 change 事件，或规定当发生 change 事件时运行的函数。

注意：当用于 select 元素时，change 事件会在选择某个选项时发生。当用于 text field 或 text area 时，change 事件会在元素失去焦点时发生。

拓展:onchange 事件会在域的内容改变时发生。

$(document).ready(function(){

  $("button").click(function(){

    $("input").change();

  });

});

</script>

</head>

<body>

<p>点击按钮触发 change 事件 (即使元素没有改变)。</p>

<button>输入框中触发 change 事件</button>

<p>输入你的名字: <input value="Runoob" onchange="alert(this.value)" type="text"></p>

focus事件方法:

当元素获得焦点时（当通过鼠标点击选中元素或通过 tab 键定位到元素时），发生 focus 事件。

focus() 方法触发 focus 事件，或规定当发生 focus 事件时运行的函数。

提示：该方法通常与 blur() 方法一起使用。

使用，点击input框或者其他TAP获取焦点，产生事件的方法

<script>

$(document).ready(function(){

  $("input").focus(function(){

    $("span").css("display","inline").fadeOut(2000);

  });

});

</script>

<style>

span

{

display:none;

}

</style>

</head>

<body>

<input>

<span>请输入你的电话号码?</span>

<p>点击输入框获取焦点。</p>

</body>

</html>

blur事件方法:

失去焦点，和focus方法对应，把$("span").focus换成$("span").blur就可以产生相反作用。

 $(document).ready(function(){

   $("input").blur(function(){

     alert("输入框失去了焦点");

   });

 });

 </script>

 </head>

 <body>

 输入你的名字: <input type="text">

 <p>在输入框写些东西，然后点击输入框外，让其失去焦点。</p>

 </body>

 </html>

Load事件:

当指定的元素已加载时，会发生 load 事件。

该事件适用于任何带有 URL 的元素（比如图像、脚本、框架、内联框架）以及 window 对象。

根据不同的浏览器（Firefox 和 IE），如果图像已被缓存，则也许不会触发 load 事件。

鉴于3.0.0以上版本已废弃，就不再赘述

jQuery学习笔记Fisrt Day的更多相关文章

jQuery学习笔记(一)jQuery选择器
目录 jQuery选择器的优点基本选择器层次选择器过滤选择器表单选择器第一次写博客,希望自己能够长期坚持,以写博客的方式作为总结与复习. 最近一段时间开始学习jQuery,通过写一个jQue ...
jQuery 学习笔记
jQuery 学习笔记一.jQuery概述宗旨: Write Less, Do More. 基础知识: 1.符号$代替document.getElementById( ...
jQuery学习笔记（一）：入门
jQuery学习笔记(一):入门一.JQuery是什么 JQuery是什么?始终是萦绕在我心中的一个问题: 借鉴网上同学们的总结,可以从以下几个方面观察. 不使用JQuery时获取DOM文本的操 ...
jQuery学习笔记 - 基础知识扫盲入门篇
jQuery学习笔记 - 基础知识扫盲入门篇 2013-06-16 18:42 by 全新时代, 11 阅读, 0 评论, 收藏, 编辑 1.为什么要使用jQuery? 提供了强大的功能函数解决浏览器 ...
JQuery学习笔记——层级选择器
JQuery学习笔记--层级选择器上一篇学习了基础的五种选择,分别是id选择器,class选择器,element选择器,*选择器和并列选择器.根据手册大纲,这篇学习的是层级选择器. 选择器: 1 ...
jQuery学习笔记之Ajax用法详解
这篇文章主要介绍了jQuery学习笔记之Ajax用法,结合实例形式较为详细的分析总结了jQuery中ajax的相关使用技巧,包括ajax请求.载入.处理.传递等,需要的朋友可以参考下本文实例讲述了j ...
jQuery 学习笔记：jQuery 代码结构
jQuery 学习笔记:jQuery 代码结构这是我学习 jQuery 过程中整理的笔记,这一部分主要包括 jQuery 的代码最外层的结构,写出来整理自己的学习成果,有错误欢迎指出. jQuery ...
jQuery学习笔记之插件开发（4）
jQuery学习笔记之插件开发(4) github源码地址插件:了让原有功能的增强. 1.插件的种类(3种):局部.全局.选择器插件 1.1封装对象方法的插件这种类型的插件是把一些常用或者重复使用 ...
jQuery学习笔记之jQuery的Ajax（3）
jQuery学习笔记之jQuery的Ajax(3) 6.jQuery的Ajax插件源码地址: https://github.com/iyun/jQueryDemo.git ------------- ...

随机推荐

ASP.NET MVC项目中EntityFramework"代码优先方法"的使用步骤
EF提供了三种方式来实现项目,分别是: (1)代码优先方法: (2)模型优先方法: (3)数据库优先方法: 本篇主要记录在Vs2010环境下使用代码优先的方式实现数据库和后端代码数据交互,语言为C#, ...
springIOC及设计模式
一．IOC的概念: 控制反转(inversion of control)和依赖注入(dependency injection)其实是同一个概念.当某个方法需要另外一个对象协助的时候,传统的方法就是有调 ...
JS---DOM---为同一个元素绑定多个不同事件指向同一个事件处理函数
为同一个元素绑定多个不同事件指向同一个事件处理函数 1. 用了switch(e.type){} 来修改 2. break <input type="button" value ...
使用VS2005编译安装openssl1.1.1c
1.首先获取openssl源码包 openssl-1.1.1c.tar.gz: 2.安装 ActivePerl: 2.解压源码包,打开vs2005命令行工具,通过命令行进入openssl源码包根目录: ...
安卓AlertDialog四种对话框的最科学编写用法
首先我们上图: xml的代码如下,用于编写按钮: <?xml version="1.0" encoding="utf-8"?> <Linear ...
IntelliJ IDEA 安装、配置和使用Lombok插件
Lombok 可用来帮助开发人员消除 Java 的重复代码,尤其是对于简单的 Java 对象(POJO),比如说getter/setter/toString等方法的编写.它通过注解实现这一目的.官网: ...
CSDN不限积分代下载，知网、万方、sci、IEEE论文代下载，智慧树、超星尔雅刷课
下载内容: 1.CSDN不限积分代下载. 2.知网.万方.sci.IEEE论文代下载. 3.超星尔雅,智慧树刷课. 注:由于本人手抖买一个CSDN会员,想挽回一点损失,所以创立了一个下载群,绝对不是骗 ...
ASP.NET Core身份验证
asp.net core 身份验证本文旨在演示如果使用内置的 identity 实现 asp.net core 的身份验证,不会进行其它扩展.本文将通过最简单的代码演示如何进行登录和身份验证操作. ...
webpack 配置babel-loader babel7
babel 7版本配置在webpack中默认只能处理部分 ES6的新语法,一些更高级的ES6或ES7的语法,webpack是处理不了的这个时候就需要借助第三方的loader 来帮助webpack ...
使用mysql-proxy实现mysql的读写分离
前言: MySQL读写分离是指让master处理写操作,让slave处理读操作,非常适用于读操作量比较大的场景,可减轻master的压力.使用mysql-proxy实现mysql的读写分离,mysq ...

jQuery学习笔记Fisrt Day