目录
前言
JQuery简介
JQuery语法
JQuery入口函数
对比JavaScript 入口函数
JQuery选择器
元素选择器
JQuery事件
鼠标事件
键盘事件
前言
前言
JQuery简介
JQuery官网
官方描述:
jQuery是一个快速、小巧且功能丰富的JavaScript库。它使诸如HTML文档遍历和操作、事件处理、动画和Ajax等简单易用的应用程序接口可以在多种浏览器上工作。通过多功能性和可扩展性的结合,JQuery改变了数百万人编写JavaScript的方式。
我的理解:
JQuery是一个轻量级的JavaScript函数库。“写更少的代码,做更多的事情”。
JQuery库包含的功能:
HTML元素选取(操作)、CSS操作、HTML事件函数、JavaScript特效和动画、HTML DOM遍历和修改、AJAX异步请求方式等。
JQuery语法
JQuery通过选取HTML元素,并对选取的HTML元素进行某些操作。
语法:$(selector).action()
$(this).hide() //隐藏当前元素
$("p").hide //隐藏所有标签未P的元素
$("p.btn").hide //隐藏所有class = "btn" 的标签是p的元素
$("#btn").hide() //隐藏id="btn"的元素
JQuery入口函数
$(function(){
//执行代码
});
$(document).ready(function(){
//执行代码
});
就是在 DOM 加载完成后才可以对 DOM 进行操作。
对比JavaScript 入口函数
window.onload = function () {
// 执行代码
}
区别:
JQuery | JavaScript | |
执行时机 | jQuery入口函数可以书写多次 | window.onload只能书写一次,如果写多次,后面的会覆盖前面的 |
执行次数 | dom结构渲染完毕即可执行内部代码 | 等网页(页面文档、外部的js文件、css文件、图片)加载完毕才执行内部代码 |
JQuery选择器
1. JQuery允许对HTML元素组或者单个元素进行操作。
2. 基于已经存在的CSS选择器,也可以自定义选择器。
3. 所有的选择器都以$()开头。
元素选择器
jQuery 元素选择器基于元素名选取元素。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JQuery元素选择器</title>
<script src="https://cdn.staticfile.net/jquery/2.0.0/jquery.min.js">
</script>
<script>
$(document).ready(function(){
//$("button")选取button元素
$("button").click(function(){
//$("p")选取p元素
$("p").hide();
});
});
</script>
</head>
<body>
<h2>JQuery标题</h2>
<p>JQuery段落。</p>
<button>点我JQuery段落隐藏</button>
</body>
</html>
除此之外,JQuery还有#id 选择器、.class 选择器。
JQuery事件
页面对不同访问者的响应叫做事件。
常见 DOM 事件:
鼠标事件
1.click() 方法是当按钮点击事件被触发时会调用一个函数。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>点击事件</title>
<script src="https://cdn.staticfile.net/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$("p").click(function(){
$(this).hide();
});
});
</script>
</head>
<body>
<p>如果你点我,我就会消失。</p>
<p>点我消失!</p>
<p>点我也消失!</p>
</body>
</html>
2.dblclick()方法是当双击元素时,会发生 dblclick 事件
3.mouseenter()方法是当鼠标指针穿过元素时,会发生 mouseenter 事件。
4.mouseleave()方法是当鼠标指针离开元素时,会发生 mouseleave 事件。
5.mousedown()方法是当鼠标指针移动到元素上方,并按下鼠标按键时,会发生 mousedown 事件。
6.mouseup()当在元素上松开鼠标按钮时,会发生 mouseup 事件。
7.hover()方法用于模拟光标悬停事件。
8.focus()当元素获得焦点时,发生 focus 事件。
9.blur()当元素失去焦点时,发生 blur 事件。
键盘事件
- keydown- 键按下的过程,keypress 事件不会触发所有的键(比如 ALT、CTRL、SHIFT、ESC)
- keypress - 键被按下
- keyup - 键被松开