跳过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的更多相关文章

  1. jQuery学习笔记(一)jQuery选择器

    目录 jQuery选择器的优点 基本选择器 层次选择器 过滤选择器 表单选择器 第一次写博客,希望自己能够长期坚持,以写博客的方式作为总结与复习. 最近一段时间开始学习jQuery,通过写一个jQue ...

  2. jQuery 学习笔记

    jQuery 学习笔记   一.jQuery概述    宗旨: Write Less, Do More.    基础知识:        1.符号$代替document.getElementById( ...

  3. jQuery学习笔记(一):入门

      jQuery学习笔记(一):入门 一.JQuery是什么 JQuery是什么?始终是萦绕在我心中的一个问题: 借鉴网上同学们的总结,可以从以下几个方面观察. 不使用JQuery时获取DOM文本的操 ...

  4. jQuery学习笔记 - 基础知识扫盲入门篇

    jQuery学习笔记 - 基础知识扫盲入门篇 2013-06-16 18:42 by 全新时代, 11 阅读, 0 评论, 收藏, 编辑 1.为什么要使用jQuery? 提供了强大的功能函数解决浏览器 ...

  5. JQuery学习笔记——层级选择器

    JQuery学习笔记--层级选择器 上一篇学习了基础的五种选择,分别是id选择器,class选择器,element选择器,*选择器 和 并列选择器.根据手册大纲,这篇学习的是层级选择器. 选择器: 1 ...

  6. jQuery学习笔记之Ajax用法详解

    这篇文章主要介绍了jQuery学习笔记之Ajax用法,结合实例形式较为详细的分析总结了jQuery中ajax的相关使用技巧,包括ajax请求.载入.处理.传递等,需要的朋友可以参考下 本文实例讲述了j ...

  7. jQuery 学习笔记:jQuery 代码结构

    jQuery 学习笔记:jQuery 代码结构 这是我学习 jQuery 过程中整理的笔记,这一部分主要包括 jQuery 的代码最外层的结构,写出来整理自己的学习成果,有错误欢迎指出. jQuery ...

  8. jQuery学习笔记之插件开发(4)

    jQuery学习笔记之插件开发(4) github源码地址 插件:了让原有功能的增强. 1.插件的种类(3种):局部.全局.选择器插件 1.1封装对象方法的插件 这种类型的插件是把一些常用或者重复使用 ...

  9. jQuery学习笔记之jQuery的Ajax(3)

    jQuery学习笔记之jQuery的Ajax(3) 6.jQuery的Ajax插件 源码地址: https://github.com/iyun/jQueryDemo.git ------------- ...

随机推荐

  1. python网络编程socketserver模块(实现TCP客户端/服务器)

    摘录python核心编程 socketserver(python3.x版本重新命名)是标准库中的网络编程的高级模块.通过将创建网络客户端和服务器所必须的代码封装起来,简化了模板,为你提供了各种各样的类 ...

  2. Linux 实验 [Day 01]

    目录 1. Linux 简介(略过) 2. Linux 基本概念及操作:命令.快捷键与通配符 2.1 基础命令 2.2 终端快捷键 2.3 通配符 2.4 帮助命令 3. 用户及文件权限管理 3.1 ...

  3. Mysql性能优化之参数配置(转)

    前言: Mysql作为数据库中广泛应用的开源产品,需要面对不同的生产压力,而有些性能问题通过配置优化就可以得到解决,优化可以分为几个方向:1.优化参数配置.2.优化数据库索引.3.优化数据库结构,如分 ...

  4. 【zabbix监控】zabbix监控tomcat服务

    服务器配置(zabbix_server) 1. 安装jdk 版本需要1.7以上,我这边安装的是1.8的,可以参考我jdk安装的文章 # 上传到zabbix_server服务端.安装(jdk-8u171 ...

  5. C++调用bat并实现传值

    1.设置环境变量,这一类为路径 C++ void bat(const string& sDirC, const string& sDirD) { char Ddir[256]; Ddi ...

  6. table表格中的 colspan rowspan cellpadding cellspacing

    横跨两列的单元格: colspan  属性规定单元格可横跨的列数 colspan="2" <table border="1"> <tr> ...

  7. vue render函数解析

    一.render 函数的作用: 写一些vue.js的template太繁琐,利用render,可以使用js来生成模板,更加灵活和简便. 二.使用render前提: 官网也说了.在深入渲染函数之前推荐阅 ...

  8. 数据库学习笔记day04

    --row_number()over(partition by xxx order by xxx)分组排序函数 特点:组内连续且唯一select ename,sal,deptno,row_number ...

  9. 最近几周,写了个微信好友检测助手App

    版权声明:本文为xing_star原创文章,转载请注明出处! 本文同步自http://javaexception.com/archives/130 微信好友检测助手App 最近几周,写了个微信好友检测 ...

  10. 【Java基础】String 相关知识点总结

    String 相关知识点总结 字符串的不可变性 概述 String 被声明为 final,因此它不可继承 在 Java8 中,String 内部使用 char 数组存储数据 public final ...