JavaScript 学习-35.jQuery 基础语法与事件
前言
jQuery 是一个轻量级的"写的少，做的多"的 JavaScript 库。极大地简化了 JavaScript 编程
jQuery 库包含以下功能：
- HTML 元素选取
- HTML 元素操作
- CSS 操作
- HTML 事件函数
- JavaScript 特效和动画
- HTML DOM 遍历和修改
- AJAX
- Utilities
环境准备
在网页中使用 jQuery 可以使用以下方法：
- 从 jquery.com 下载 jQuery 库
- 从 CDN 中载入 jQuery, 如从 Google 中加载 jQuery
jQuery 所有版本下载地址 https://www.jq22.com/jquery-info122
引用在线 CDN 示例
<head>
<meta charset="UTF-8">
<title>jquery 选择器与事件</title>
<!-- 引入jquery-->
<script src="https://s3.pstatp.com/cdn/expire-1-M/jquery/3.2.1/jquery.min.js"></script>
</head>
入口函数
为了防止文档在完全加载（就绪）之前运行 jQuery 代码，即在 DOM 加载完成后才可以对 DOM 进行操作。可以将 jQuery 代码位于一个 $(document).ready() 函数中
$(document).ready(function(){
// 执行代码
alert('页面加载完')
});
也可以用下面简写方式，与上面写法效果一样
// 简洁写法（与以上写法效果相同
$(function(){
alert('页面加载完2')
});
JavaScript 入口函数:
window.onload = function () {
// 执行代码
}
jQuery 入口函数与 JavaScript 入口函数的区别：
- jQuery 的入口函数是在 html 所有标签(DOM)都加载之后，就会去执行。
- JavaScript 的 window.onload 事件是等到所有内容，包括外部图片之类的文件加载完后，才会执行。
| 执行 | window.onload |
$(document).ready |
|---|---|---|
| 执行时机 | 必须等网页全部加载完毕，包含图片等，再执行onload | 只需等待页面中DOM结构加载完毕 |
| 执行次数 | 只执行一次，第二个会覆盖前面的 | 可以执行多次，后面的不会覆盖前面 |
| 简写 | 无 | $(function(){ // do something ....}） |
jQuery 基本语法
通过jQuery 可以对元素查询修改操作，也可以添加事件。基本语法结构
- 美元符号定义 jQuery
- 选择符（selector）"查询"和"查找" HTML 元素
- jQuery 的 action() 执行对元素的操作
$(selector).action()
隐藏和显示
jQuery 提供了隐藏和显示元素的基本方法
- hide() 隐藏元素
- show() 显示元素
- toggle() 切换显示和隐藏
示例
<body>
<p>如果你点击“隐藏” 按钮，我将会消失。</p>
<button id="hide">隐藏</button>
<button id="show">显示</button>
<button id="toggle">toggle</button>
<script>
$(document).ready(function(){
// 执行代码
$('#hide').click(function () {
$('p').hide();
})
$('#show').click(function () {
$('p').show();
})
// toggle 切换
$('#toggle').click(function () {
$('p').toggle();
})
});
</script>
事件
事件处理程序指的是当 HTML 中发生某些事件时所调用的方法。
| 鼠标事件 | 键盘事件 | 表单事件 | 文档/窗口事件 |
|---|---|---|---|
| click | keypress | submit | load |
| dblclick | keydown | change | resize |
| mouseenter | keyup | focus | scroll |
| mouseleave | blur | unload | |
| hover |
click 事件
如果需要对当前元素操作， 这里的this是你定位的元素对象
<button id="btn">点我</button>
<button id="submit">提交按钮</button>
<script>
$(document).ready(function(){
// 执行代码
$('#btn').click(function () {
console.log(this);
$(this).hide();
})
});
</script>
点击元素后，弹alert示例
<button id="btn">点我</button>
<button id="submit">提交按钮</button>
<script>
$(document).ready(function(){
// 执行代码
$('#btn').click(function () {
console.log(this);
//$(this).hide();
alert('提交成功！')
})
});
</script>
如果定位的是多个元素，可以一次性绑定同一事件
$(document).ready(function(){
// 绑定button标签click事件
$('button').click(function () {
console.log(this);
//$(this).hide();
alert('提交成功！')
})
});
但是通过id定位的元素，只会绑定第一个，因为一般id在页面上具有唯一性，不要重复，通过id查找的元素，只返回第一个
<button id="btn">点我</button>
<button id="btn">提交按钮</button>
<script>
$(document).ready(function(){
// 只会绑定第一个id为btn元素
$('#btn').click(function () {
console.log(this);
//$(this).hide();
alert('提交成功！')
})
});
</script>
鼠标事件
常用的一些鼠标事件
| 事件 | 触发时机 |
|---|---|
| mouseenter() | 鼠标指针穿过元素时 |
| mouseleave() | 当鼠标指针离开元素时 |
| mousedown() | 当鼠标指针移动到元素上方，并按下鼠标按键 |
| mouseup() | 松开鼠标按钮 |
| hover() | 光标悬停事件 |
| focus() | 获得焦点时，发生 focus 事件 |
| blur() | 失去焦点时，发生 blur 事件 |
示例：鼠标按在文本位置，弹窗提示：本文禁止复制
<p>mouse鼠标事件</p>
<h3>文章标题</h3>
<p>hello world</p>
<button id="btn">点我</button>
<script>
$(document).ready(function(){
// 匹配p 或h3标签
$('p, h3').mousedown(function () {
console.log(this);
//$(this).hide();
alert('本文禁止复制，开通会员可复制')
})
});
</script>
