又双叒叕来一波

最新推荐文章于 2025-07-06 22:48:27 发布

昵称~

最新推荐文章于 2025-07-06 22:48:27 发布

阅读量344

点赞数 3

CC 4.0 BY-SA版权

分类专栏：前端

本文链接：https://blog.youkuaiyun.com/qq_42577408/article/details/86549405

前端专栏收录该内容

11 篇文章

订阅专栏

本文介绍了jQuery库的基本概念，详细解析了jQuery语法及其在网页元素选取与操作中的应用。特别聚焦于滑动事件的实现，包括slideUp(), slideDown()及slideToggle()方法，展示了如何通过这些方法在网页上创建动态滑动效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

jQuery

开发工具与关键技术：DW，jQuery滑动事件
作者：蛋蛋
撰写时间：2019年1月18日

一、
jQuery是一个javascript库，极大的简化了javascript编程。jQuery 库位于一个 JavaScript 文件中，其中包含了所有的 jQuery 函数可以通过下面的标记把 jQuery 添加到网页中：
在这里插入图片描述
请注意，script> 标签应该位于页面的 head> 部分
提示：您是否很疑惑为什么我们没有在 script> 标签中使用type=“text/javascript” ？
在 HTML5 中不必那样做了。JavaScript 是 HTML5 以及所有现代浏览器中的默认脚本语言！

二．
Jquery语法（jquery语法是为html元素的选取编制的，可以对元素执行某些操作）
基础语法是：$(selector).action()
a. 美元符号定义jquery
b. 选择符(selector)“查询”和“查找”HTML元素；
c. Jquery的action()执行元素的操作；

示例：
$(this).hide() - 隐藏当前元素
$(“p”).hide() - 隐藏所有段落
$(".test").hide() - 隐藏所有 class=“test” 的所有元素
$("#test").hide() - 隐藏所有 id=“test” 的元素

三.
我们接下来看一个例子: Juqery效果-滑动 通过 jQuery，您可以在元素上创建滑动
效果见图一：

在这里插入图片描述
Ø slideUp() 方法用于向上滑动
Ø slideDown()方法用于向下滑动
Ø slideToggle()而jQuery slideToggle() 方法可以在 slideUp()与slideDown()方法之间进行切换
接下来如图二：
再图三最终效果图：