0
点赞
收藏
分享

微信扫一扫

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>

JavaScript 学习-35.jQuery 基础语法与事件_jquery

鼠标事件

常用的一些鼠标事件

事件

触发时机

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>

JavaScript 学习-35.jQuery 基础语法与事件_ide_02

举报

相关推荐

0 条评论