当前位置：首页 > news >正文

JavaScript学习教程，从入门到精通， jQuery浏览器事件和元素位置操作语法知识点及案例代码（35）

news 2025/7/4 18:37:54

jQuery浏览器事件和元素位置操作语法知识点及案例代码

本文将详细介绍与 返回页面顶部、浏览器事件 和 元素位置操作 相关的 jQuery 语法知识点，并提供详细的案例代码及其注释。

一、返回页面顶部

1. 语法知识点

1.1 `animate()` 方法

animate() 方法用于创建自定义动画效果。通过修改元素的 CSS 属性，可以实现平滑过渡效果。

语法：

$(selector).animate({ properties }, duration, easing, complete);

properties: 要动画化的 CSS 属性及其目标值。
duration: 动画持续时间，单位为毫秒（ms）或字符串（如 “slow”、“fast”）。
easing: 动画的缓动函数（可选）。
complete: 动画完成后的回调函数（可选）。

1.2 `scrollTop()` 方法

scrollTop() 方法用于获取或设置匹配元素的垂直滚动条位置。

语法：

// 获取当前滚动位置
var position = $(window).scrollTop();// 设置滚动位置
$(window).scrollTop(value);

2. 案例代码

以下示例展示了如何实现一个“返回顶部”按钮，点击按钮时页面平滑滚动到顶部。

<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><title>返回顶部示例</title><style>body {height: 2000px; /* 增加页面高度以启用滚动条 */padding: 20px;}#backToTop {position: fixed;bottom: 40px;right: 40px;display: none; /* 初始隐藏 */padding: 10px 15px;background-color: #007BFF;color: white;cursor: pointer;border-radius: 5px;}</style><!-- 引入 jQuery 库 --><script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body><button id="backToTop">返回顶部</button><script>$(document).ready(function(){// 当页面滚动时触发$(window).scroll(function(){// 如果垂直滚动位置大于 100 像素，显示按钮if ($(this).scrollTop() > 100) {$('#backToTop').fadeIn();} else {$('#backToTop').fadeOut();}});// 点击按钮时，平滑滚动到顶部$('#backToTop').click(function(){$('html, body').animate({ scrollTop: 0 }, 800); // 800 毫秒的动画});});</script></body>
</html>

代码说明：

HTML 部分：
- 一个按钮 #backToTop 用于触发返回顶部的操作。
CSS 部分：
- 页面高度设置为 2000px 以启用滚动条。
- #backToTop 按钮初始隐藏，固定在页面右下角。
jQuery 部分：
- $(document).ready() 确保 DOM 加载完成后再执行脚本。
- $(window).scroll() 监听滚动事件：
  - 当滚动位置超过 100 像素时，淡入显示“返回顶部”按钮。
  - 否则，淡出隐藏按钮。
- 点击按钮时，使用 animate() 方法将 html 和 body 的 scrollTop 属性设置为 0，实现平滑滚动到顶部，动画持续时间为 800 毫秒。

二、浏览器事件

1. 语法知识点

1.1 常见浏览器事件

鼠标事件:
- click: 单击鼠标。
- dblclick: 双击鼠标。
- mouseenter: 鼠标进入元素。
- mouseleave: 鼠标离开元素。
- mousemove: 鼠标在元素内移动。
- mousedown / mouseup: 鼠标按下/释放。
键盘事件:
- keydown: 按下键盘键。
- keyup: 释放键盘键。
- keypress: 键盘按键被按下并产生字符。
表单事件:
- submit: 表单提交。
- change: 表单元素值改变。
- focus / blur: 表单元素获得/失去焦点。
窗口事件:
- load: 页面加载完成。
- resize: 窗口大小改变。
- scroll: 滚动条位置改变。
其他事件:
- hover: 鼠标悬停。
- ready: DOM 加载完成。

1.2 事件绑定方法

.on() 方法

$(selector).on('event', handler);

例如：

$('#myButton').on('click', function(){alert('按钮被点击了！');
});

.click()、.hover() 等快捷方法

$(selector).click(handler);
$(selector).hover(handlerIn, handlerOut);

2. 案例代码

以下示例展示了不同类型的事件绑定及其处理。

<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><title>浏览器事件示例</title><style>#myDiv {width: 200px;height: 100px;background-color: #28A745;margin: 20px;padding: 10px;color: white;}#inputField {margin: 20px;padding: 5px;width: 200px;}</style><!-- 引入 jQuery 库 --><script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body><div id="myDiv">鼠标悬停在这里</div><input type="text" id="inputField" placeholder="输入内容"><button id="myButton">点击我</button><script>$(document).ready(function(){// 鼠标悬停事件$('#myDiv').hover(function(){$(this).css('background-color', '#FF5733');$(this).text('鼠标进来了');},function(){$(this).css('background-color', '#28A745');$(this).text('鼠标离开了');});// 输入框内容改变事件$('#inputField').on('change', function(){alert('输入内容改变了，当前内容为: ' + $(this).val());});// 按钮点击事件$('#myButton').click(function(){alert('按钮被点击了！');});// 窗口大小改变事件$(window).resize(function(){console.log('窗口大小改变了，当前宽度: ' + $(window).width());});// 键盘按下事件$(document).keydown(function(e){console.log('按下的键是: ' + e.key);});});</script></body>
</html>

代码说明：

HTML 部分：
- 一个 div 元素用于演示鼠标悬停事件。
- 一个输入框用于演示内容改变事件。
- 一个按钮用于演示点击事件。
CSS 部分：
- 为 div 元素设置样式，包括背景色、尺寸和文本颜色。
jQuery 部分：
- 鼠标悬停事件：
  - 使用 .hover() 方法绑定 mouseenter 和 mouseleave 事件。
  - 当鼠标进入 div 时，背景色变为橙色，文本变为“鼠标进来了”。
  - 当鼠标离开时，恢复原样，文本变为“鼠标离开了”。
- 输入框内容改变事件：
  - 使用 .on('change', handler) 绑定 change 事件。
  - 当输入框内容改变并失去焦点时，弹出提示框显示当前内容。
- 按钮点击事件：
  - 使用 .click() 方法绑定点击事件。
  - 点击按钮时，弹出提示框显示“按钮被点击了！”。
- 窗口大小改变事件：
  - 绑定 resize 事件到 window 对象。
  - 当窗口大小改变时，在控制台输出当前窗口宽度。
- 键盘按下事件：
  - 绑定 keydown 事件到 document 对象。
  - 当键盘按键被按下时，在控制台输出按下的键。

三、元素位置操作

1. 语法知识点

1.1 `offset()` 方法

offset() 方法用于获取或设置元素相对于文档的坐标。

语法：

// 获取元素的位置
var position = $(element).offset();// 设置元素的位置
$(element).offset({ top: value, left: value });

1.2 `position()` 方法

position() 方法用于获取元素相对于其最近的定位父元素的位置。

语法：

var position = $(element).position();

1.3 `scrollTop()` 和 `scrollLeft()` 方法

scrollTop() 和 scrollLeft() 方法用于获取或设置元素的滚动位置。

语法：

// 获取滚动位置
var top = $(element).scrollTop();
var left = $(element).scrollLeft();// 设置滚动位置
$(element).scrollTop(value);
$(element).scrollLeft(value);

1.4 `.css()` 方法

.css() 方法用于获取或设置元素的 CSS 属性。

语法：

// 获取 CSS 属性值
var value = $(element).css('property');// 设置 CSS 属性值
$(element).css('property', value);

2. 案例代码

以下示例展示了如何获取和设置元素的位置，以及如何实现元素的平滑移动。

<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><title>元素位置操作示例</title><style>#box {width: 100px;height: 100px;background-color: #FFC107;position: absolute;top: 50px;left: 50px;}#container {position: relative;width: 500px;height: 300px;border: 2px solid #333;margin: 20px;overflow: auto;}#innerContent {height: 800px; /* 增加内容高度以启用滚动条 */}#moveButton {margin: 20px;}</style><!-- 引入 jQuery 库 --><script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body><div id="container"><div id="innerContent"><div id="box"></div></div></div><button id="moveButton">移动盒子</button><script>$(document).ready(function(){// 获取元素相对于文档的位置var offset = $('#box').offset();console.log('盒子相对于文档的位置: ', offset);// 获取元素相对于其最近的定位父元素的位置var position = $('#box').position();console.log('盒子相对于定位父元素的位置: ', position);// 点击按钮时，移动盒子到新位置$('#moveButton').click(function(){// 设置新的位置$('#box').animate({ top: 200, left: 300 }, 1000); // 1秒内移动到 (200,300)});// 监听滚动事件$('#container').scroll(function(){var scrollTop = $(this).scrollTop();console.log('容器滚动位置: ', scrollTop);});});</script></body>
</html>

代码说明：

HTML 部分：
- 一个容器 #container 包含一个内部内容 #innerContent，其中有一个盒子 #box。
- 一个按钮 #moveButton 用于触发盒子的移动。
CSS 部分：
- #box 设置为绝对定位，初始位置为 (50px, 50px)。
- #container 设置为相对定位，并包含滚动条。
- #innerContent 增加高度以启用滚动条。
jQuery 部分：
- 获取位置：
  - 使用 .offset() 获取盒子相对于文档的位置，并输出到控制台。
  - 使用 .position() 获取盒子相对于其最近的定位父元素（#container）的位置，并输出到控制台。
- 移动盒子：
  - 点击按钮时，使用 .animate() 方法将盒子的 top 和 left 属性设置为新的值，实现平滑移动到 (200px, 300px)，动画持续时间为 1 秒。
- 监听滚动事件：
  - 绑定 scroll 事件到 #container，当容器滚动时，在控制台输出当前的滚动位置。

四、综合应用案例

<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><title>jQuery位置操作示例</title><style>body { height: 2000px; margin: 0; font-family: Arial, sans-serif; }#back-to-top {position: fixed;bottom: 30px;right: 30px;display: none;padding: 10px 15px;background: #333;color: white;text-decoration: none;border-radius: 5px;}#main-nav {background: #f8f8f8;padding: 15px;border-bottom: 1px solid #ddd;}.fixed-nav {position: fixed;top: 0;left: 0;right: 0;z-index: 1000;background: rgba(248, 248, 248, 0.9);}section {padding: 50px 20px;margin: 20px 0;border: 1px solid #eee;}.highlight {background-color: yellow;}</style>
</head>
<body><nav id="main-nav"><a href="#section1">第一部分</a> |<a href="#section2">第二部分</a> |<a href="#section3">第三部分</a></nav><section id="section1" style="height: 600px;"><h2>第一部分内容</h2><p>这里是第一部分的内容...</p></section><section id="section2" style="height: 800px;"><h2>第二部分内容</h2><p>这里是第二部分的内容...</p></section><section id="section3" style="height: 400px;"><h2>第三部分内容</h2><p>这里是第三部分的内容...</p></section><a href="#" id="back-to-top">返回顶部</a><script src="https://code.jquery.com/jquery-3.6.0.min.js"></script><script>$(document).ready(function() {// 1. 返回顶部按钮$('#back-to-top').click(function(e) {e.preventDefault();$('html, body').animate({scrollTop: 0}, 800);});// 滚动时显示/隐藏返回顶部按钮$(window).scroll(function() {if ($(this).scrollTop() > 300) {$('#back-to-top').fadeIn();} else {$('#back-to-top').fadeOut();}// 高亮当前可见部分$('section').each(function() {var sectionTop = $(this).offset().top;var sectionBottom = sectionTop + $(this).outerHeight();var scrollPosition = $(window).scrollTop() + ($(window).height() / 2);if (scrollPosition > sectionTop && scrollPosition < sectionBottom) {$(this).addClass('highlight');// 更新导航栏活动状态$('#main-nav a').removeClass('active');$('#main-nav a[href="#' + $(this).attr('id') + '"]').addClass('active');} else {$(this).removeClass('highlight');}});}).scroll(); // 立即触发一次// 2. 导航栏平滑滚动$('#main-nav a').click(function(e) {e.preventDefault();var target = $(this).attr('href');if ($(target).length) {$('html, body').animate({scrollTop: $(target).offset().top - $('#main-nav').outerHeight()}, 1000);}});// 3. 固定导航栏var nav = $('#main-nav');var navOffset = nav.offset().top;$(window).scroll(function() {var scrollPos = $(window).scrollTop();if (scrollPos >= navOffset) {nav.addClass('fixed-nav');$('body').css('padding-top', nav.outerHeight());} else {nav.removeClass('fixed-nav');$('body').css('padding-top', 0);}});// 4. 窗口大小改变时调整布局$(window).resize(function() {navOffset = nav.offset().top; // 重新计算导航栏偏移量});});</script>
</body>
</html>