jQuery学习笔记Fisrt Day
跳过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 ------------- ...
随机推荐
- c++-多态小案例
多态小案例 C面向接口编程和C多态 函数类型语法基础 函数指针做函数参数(回调函数)思想剖析 函数指针做函数参数两种用法(正向调用.反向调用) 纯虚函数 抽象类 抽象类基本概念 抽象类在多继承中的应用 ...
- JavaFX如何制作鼠标多击事件?
JavaFX制作鼠标双击或者多击事件需要用到getClickCount()方法,这个方法需要添加addEventHandler()方法,addEventHandler()是事件方法. 1 scene. ...
- HTTP认知（请求与响应）
web的工作是:浏览器发送请求报文 + 服务端返回响应报文 通俗的说一下web工作的一个流程: 浏览器向服务端发送HTTP请求报文:这条请求报文组成由请求行.请求头.请求体三大部分组成: 1.请求行 ...
- java之生产者和消费者问题
package testThread; public class Test3 { public static void main(String[] args) { Clerk c = new Cler ...
- 使用PHP生成并导出CSV文件
CSV文件是以纯文本形式存储的,一般以逗号为分隔符.这里主要简单介绍下如何导出CSV文件. 一.浏览器导出CSV文件格式 /** * 导出CSV文件 */ function exportCsv() { ...
- Python爬虫基础——正则表达式
说到爬虫,不可避免的会牵涉到正则表达式. 因为你需要清晰地知道你需要爬取什么信息?它们有什么共同点?可以怎么去表示它们? 而这些,都需要我们熟悉正则表达,才能更好地去提取. 先简单复习一下各表达式所代 ...
- java开发，入职半年。对未来迷茫，如何发展？
蛮多人私密我一些问题,关于面试,关于技术的,我只能说有些路只能靠自己去走,没人可以帮到自己,哪怕偶尔帮一到两次,但是技术的路这么长,总归需要自己独自成长的.附一张自己藏书的照片,与各位共勉 工作三年多 ...
- VUE程序调试的方法
目录 VUE程序调试的方法 1.写本文的背景 2.调试与测试 3.Console调试法 3.1 添加console.log指令 3.2 调出温度界面如下 3.3 Google浏览器的Console窗口 ...
- 一、VUE项目BaseCms系列文章：项目介绍与环境配置
一.项目效果图预览: 二.项目介绍 基于 elementui 写一个自己的管理后台.这个系列文章的目的就是记录自己搭建整个管理后台的过程,希望能帮助到那些入门 vue + elementui 开发的小 ...
- MySQL5.7脚本自动安装
脚本里面没有把同步时间写进去,这个写在最前面yum install -y ntp ntpdatecp -f /usr/share/zoneinfo/Asia/Shanghai /etc/localti ...