jquery中的 ()是什么(jquery的$作用) 收藏 0

jQuery slideToggle() 方法用法详解

slideToggle() 是 jQuery 中用于实现滑动效果的动画方法。它可以在指定的元素上切换显示和隐藏状态，同时伴随着平滑的滑动动画。这个方法非常适合用于创建可折叠面板、菜单等交互组件。

• selector：选择器，用于指定要应用动画的元素。
• duration（可选）：动画执行的时间，以毫秒为单位。默认值是 400 毫秒。
• callback（可选）：动画完成后的回调函数。

以下是一些使用 slideToggle() 方法的示例：

在这个示例中，点击按钮时会触发 slideToggle() 方法，使内容区域在显示和隐藏之间切换。

在这个示例中，slideToggle() 方法带有一个持续时间参数（1000 毫秒），并在动画完成后弹出一个提示框。

1. 初始状态：如果目标元素的初始状态是 display: none，那么 slideToggle() 会将其显示出来；如果初始状态是 display: block 或其他可见状态，则会将其隐藏。
2. 高度依赖：slideToggle() 依赖于元素的当前高度来计算动画效果。因此，确保元素的高度是可计算的。
3. 性能考虑：对于大量元素的动画操作，要注意性能问题，避免频繁调用或在低性能设备上使用。

slideToggle() 是一个简单而强大的方法，适用于需要平滑过渡效果的场景。通过合理设置参数和回调函数，可以实现丰富的交互效果。

JavaScript学习笔记（三十二）—jQuery（中）

jQuery

• 昨天讲了 jQuery 的基本选择器筛选器和属性操作
• 今天来说一些 jQuery 别的东西

元素操作

• 创建一个元素

• 内部插入元素

• 外部插入元素

• 替换元素

• 删除元素

• 克隆元素

元素尺寸

• 操作元素的宽和高

• 获取元素的内置宽和高

• 获取元素的外置宽和高

元素位置

• 元素相对页面的位置

• 元素相对于父元素的偏移量

• 获取页面卷去的高度和宽度

元素事件

• 绑定事件的方法

• 移除事件

• 只能执行一次的事件

• 直接触发事件

可以直接使用的常见事件

• 可以直接使用的事件就是可以不利用 on 来绑定，直接就可以使用的事件方法
• click

• dblclick

• scroll

• hover

动画

• show

• hide

• toggle

• animate

• stop

• finish

jQuery是什么？

jQuery is a fast, small, and feature-rich JavaScript library — jQuery官方

jQuery官方解释的很清楚jQuery是一个快速、简洁、功能丰富的JavaScript库，重点在jQuery是一个库(library)

为什么jQuery是库？

库(library)就是一系列方法组成的集合，开发人员在使用库的过程中，想要什么功能就可以调用库中提供的对应方法就行。有点像图书馆中保存了各种类的图书，最近想要研究心理学，就可以在图书馆中查阅对应的书籍一个道理

jQuery就是一个js库，它里面就提供了很多的属性和方法供我们使用，

比如想操作样式，jQuery就提供了css等方法。比如想要制作一个动画，jQuery就提供了show()/slideDown()/animate()等方法。

例如：下面就相当于封装了一个简易的js库,当封装的方法一多就成了另外版本的jQuery

//数组转为字符串

function changStr(arr){

let str = arr.join(\’\’)

return str

}

//查找路径中的后缀名

function queryExtName(path){

let index = path.lastIndexOf(\’.\’)

let extname = path.substr( index + 1 )

return extname

}

库和框架的区别

库和框架都是别人编写的可复用代码, 都可以帮助我们快速的解决开发过程中出现的常见问题。但是两者之间还是存在着区别

3.1 框架和库的概念

库：library,简称lib。它是由一系列函数组成的集合,开发中想要什么功能就去调用库中提供的对应方法

框架：framework , 它是库的升级版，框架是为了解决同一类问题而制定的完整解决方案，只需按照它的规则去编写代码，框架会在适当的时机执行

3.2库和框架区别：

库和框架最大区别就是在于控制权，开发中谁站主导位置( you call Library Framework call you )

库：开发人员起来主导权力

库是没有主导权力，控制权在使用者手中，开发时库只是起了一个辅助作用，由开发人员说了算。开发人员起主导作用

框架：框架起了主导权力

使用框架开发时，有框架说了算，开发人员只能按照框架的语法进行编写，框架占有主导权力，开发人员会受到很多限制

库就相当于一个工具箱，里面有需要的各种工具，我们可以用这些工具给家里小孩制造出各种创意玩具。

框架就相当于我们在京东上买的乐高模型车，只需要按照图纸拼装好，喷上自己喜欢的颜色，贴上自己喜欢的贴纸就行。但是每个人拿在手里的乐高模型车都是一个样式，我们很难去改变它的结构样式

4.常见的库与框架

常见的库：

jQuery：是一个高效、精简并且功能丰富的 JavaScript 工具库

ramda：一款实用的 JavaScript 函数式编程库

lodash:是一个一致性，模块化，高性能的JavaScrip使用工具库

Moment:一个Javascript时间日期处理类库

DayJS:一个轻量级的Javascript时间日期处理类库

常见的框架：

Vue ：是一套用于构建用户界面的渐进式框架。

angular：完全使用JavaScript编写的客户端技术。使Web应用开发比以往更简单、更快捷

Flutter:是谷歌的移动UI框架，可以快速在iOS和Android上构建高质量的原生用户界面。

Taro:一套遵循React规范的多端统一开发框架（京东的凹凸实验室开发）

Chameleon：多端统一开发框架，一端所见即多端所见，你只需开发一次就能跑所有端（滴滴开发）

UIkit:是 YOOtheme 团队开发的一款轻量级、模块化的前端框架，可快速构建强大的web前端界面

layUI:是一款采用自身模块规范编写的前端 UI 框架，遵循原生 HTML/CSS/JS 的书写与组织形式

Amaze UI:是一个轻量级Mobile first 的前端框架， 基于开源社区流行前端框架编写

本文作者及来源:Renderbus瑞云渲染农场https://www.renderbus.com