- 博客(298)
- 收藏
- 关注
RSS订阅原创 jQuery 过滤
jQuery 的过滤方法可以允许我们根据特定元素在一组元素中的位置来选择该元素。关于 jQuery 过滤方法有以下几种，前三种是最基本的方法，后两种是其他方法，它们可以让我们选择与特定条件匹配或者是不匹配的元素：方法描述first()返回被选元素的首个元素last()返回被选元素的最后一个元素eq()返回被选元素中带有指定索引号的元素filter()规定一个标准，不匹配这个标准的元素会被从集合中删除，匹配的元素会被返回not()返回不匹配标准的所有元素
2021-10-18 21:37:15
549
原创 jQuery 遍历
本节我们学习 jQuery 的遍历。什么是遍历呢？遍历是指沿着某条搜索路线，依次对树中每个节点均做一次访问。访问结点所做的操作依赖于具体的应用问题， 具体的访问操作可能是检查节点的值、更新节点的值等。不同的遍历方式，其访问节点的顺序是不一样的。遍历是适用于多元素集合的情况，例如遍历数组、遍历集合等。jQuery 中的遍历其实就是根据其相对于其他元素的关系来查找 HTML 元素，以某项选择开始，并沿着这个选择移动，直到抵达所需要的元素为止，这一过程称为遍历。遍历DOMjQuery 提供了多种遍历 DO
2021-10-14 23:02:03
439
原创 jQuery 获取和设置元素的宽高
本节我们学习如何通过 jQuery 中提供的方法来获取或者设置元素的宽度和高度。jQuery 中用于获取设置宽高的方法有如下所示：方法描述width()设置或返回元素的宽度height()设置或返回元素的高度innerWidth()返回元素的宽度，包括内边距innerHeight()返回元素的高度，包括内边距outerWidth()返回元素的宽度，包括内边距和边框outerHeight()返回元素的高度，包括内边距和边框width()和
2021-10-10 22:35:03
4656
原创 jQuery CSS类
本节我们学习如何通过 jQuery 对 CSS 元素进行操作。jQuery 有以下四种操作 CSS 的方法：方法描述addClass()向指定元素中添加一个或多个 CSS 类removeClass()从指定元素中删除一个或多个 CSS 类toggleClass()对指定元素进行添加或删除 CSS 类的切换操作css()设置或返回样式属性addClass()方法addClass() 方法用于向指定元素添加一个或多个 CSS 类，我们在添加类时，可以选择
2021-10-07 22:08:37
98
原创 jQuery 添加和删除HTML元素
本节我们学习如何使用 jQuery 中的方法来添加和删除 HTML 元素。jQuery 中用于添加 HTML 元素的方法有如下几种：方法描述append()在所选元素的末尾插入内容prepend()在选定元素的开头插入内容after()在选定元素后插入内容before()在选定元素之前插入内容而用于删除元素的方法有：方法描述remove()删除被选元素容，包括子元素empty()删除被选元素的所有子节点和内容app
2021-10-05 20:07:08
411
原创 jQuery 获取和设置HTML元素
jQuery 中包含更改和操作 HTML 元素和属性的强大方法。我们可以通过这些方法来获取 HTML 元素中的文本内容、元素内容（例如HTML标签）、属性值等。text()方法text() 方法可以用于设置或获取所选元素的文本内容。示例：例如我们获取下列 <p> 标签中的文本内容：<!DOCTYPE html><html><head><meta charset="utf-8"><title>jQuery_侠课岛(9xk
2021-10-01 22:19:21
1082
原创 jQuery 回调函数和方法链接使用
在前面的章节中，我们也学习了一些 jQuery 的方法，大家有没有发现，这些方法大多都有一个共同点，就是有一个可选的 callback 参数，这个 callback 其实就是一个回调函数，回调函数作为参数传到另一个函数里面，一旦事件发生或者某一个任务完成时被执行，经常在异步代码中使用。回调函数的使用我们通过一个函数来举例，看一下当任务执行完成时，是如何执行回调函数的。示例：例如在执行 animate 函数时添加一个回调函数作为参数，在动画执行完毕后调用回调函数，弹出弹出层：<!DOCTYPE
2021-09-27 22:33:18
323
原创 jQuery 动画
我们可以通过 jQuery 中的 animate() 方法来创建自定义动画。animate()方法animate() 方法用于创建自定义动画。语法如下：$(selector).animate({params}, speed, easing, callback); params ：必需参数，定义要设置动画的 CSS 属性。speed：可选参数，指定效果的持续时间，可选值有 slow、fast、毫秒。easing：可选参数，规定在不同的动画点中设置动画速度的 easing 函数。内置的 eas
2021-09-23 21:07:26
96
原创 jQuery 滑动
本节我们学习 jQuery 中的滑动，我们可以通过 slideDown()、slideUp()、slideToggle() 方法来实现元素的滑动效果。slideDown()方法slideDown() 方法用于实现元素向下滑动效果。如果元素已隐藏，则显示被选元素。语法如下：$(selector).slideDown(speed,callback);参数 speed 用于规定效果的时长，可选值有 slow、fast、毫秒。参数 callback 是滑动完成后所执行的函数名称。示例：jQue
2021-09-15 22:45:34
193
原创 jQuery 实现淡入淡出效果
上一节我们学习了如何实现元素的显示与隐藏，本节我们来学习如何实现元素的淡入淡出效果。fadeIn()方法fadeIn() 方法用于淡入已隐藏的元素。语法如下所示：$(selector).fadeIn(speed,callback);speed：规定效果的时长，可选值有 slow、fast 或毫秒。callback：是 fading 完成后所执行的函数名称。示例：例如当我们点击按钮时，将紫色正方形设置为淡入效果：<!DOCTYPE html><html>&l
2021-09-12 21:59:45
682
原创 jQuery 实现显示与隐藏效果
本节我们来学习如何使用 jQuery 中的方法来实现元素的显示与隐藏效。hide()方法hide() 方法用于隐藏指定的元素，与 CSS 中的 display:none 效果类似。语法如下所示：$(selector).hide(speed,easing,callback)speed：可选，规定隐藏效果的速度。可选值为 slow、fast、毫秒。easing：可选，规定在动画的不同点上元素的速度，可选值为 swing、linear。callback：可选，hide() 方法执行完之后，要执行
2021-09-09 22:59:14
3385
原创 jQuery 事件
本节我们学习 jQuery 中的事件的使用，jQuery 是专门为响应 HTML 页面中的事件而设计的。我们在使用时，需要遵循以下原则：把所有 jQuery 代码置于事件处理函数中。把所有事件处理函数置于文档就绪事件处理器中。把 jQuery 代码置于单独的 .js 文件中。如果存在名称冲突，则重命名 jQuery 库。什么是事件首先我们要知道什么是事件，页面对不同访问者的响应叫做事件，例如点击某个按钮，选择单选框或复选框，滑动鼠标等，这些都可以称为事件。jQuery常用事件在 jQue
2021-09-06 22:54:42
236
1
原创 jQuery 选择器
本节我们来学习 jQuery 中的选择器，选择器是 jQuery 库中最重要的部分之一。jQuery选择器jQuery 选择器允许我们选取和操作 HTML 元素，它用于根据 HTML 元素的名称、ID、类、类型、属性和属性值等来查找 HTML 元素。除了基于现有的 CSS 选择器，它还有一些自己自定义的选择器。要注意 jQuery 中的所有选择器都以美元符号和圆括号开头，例如 $()。元素选择器jQuery 元素选择器是根据元素名称匹配相对应的元素。也就是说它是根据元素的标签名来选择的，指向的是
2021-09-02 23:18:12
82
原创 jQuery语法
本节我们学习 jQuery 的语法，通过 jQuery，我们可以选取 HTML 元素并对它们执行操作。jQuery语法jQuery 语法是为选取 HTML 元素和对元素执行某些操作而定制的。基本语法格式：$(selector).action()首先是美元符号 $，是 jQuery 的别名，表示 jQuery 对象。selector 是一个选择符，用于查询 HTML 元素。action() 表示要对元素执行的 jQuery 操作。示例：例如我们来看几个例子：$(this).hide(
2021-08-29 23:19:06
114
原创 jQuery的安装
我们在实际项目中，如果要使用 jQuery，则需要先下载 jQuery 库，然后把它引入到要使用的网页中。jQuery 有下面几种使用方法：从官网下载 jQuery 库，然后引入到页面中。使用命令安装 jQuery，例如 npm、bower 命令。从 CDN 中载入 jQuery， 比如从 Google 中加载 jQuery。jQuery下载我们 可以在 jQuery 的官网下载 jQuery，下载地址为：https://jquery.com/download/。有两个版本的 jQuer
2021-08-26 23:19:15
3503
原创 jQuery 简介
本教程我们来学习 JQuery 的基础入门知识。JQuery 是一个快速、简洁的 JavaScript 框架，是继 Prototype 之后又一个优秀的 JavaScript 代码库。jQuery 极大的简化了 JavaScript 编程，例如以前要一大段 JavaScript 代码才能实现的功能，使用 jQuery 很轻松就能完成。JQuery 发展历程历程发展2005年8月Prototype的 “Behaviour” 库的改进2006年1月John Resig 等人于
2021-08-24 23:11:13
384
原创 TypeScript 循环语句
本节我们学习循环，什么是循环呢，从字面意思就可以看就是重复多次执行代码。TypeScript 中的 for 循环和 for...in 循的使用就和 JavaScript 中的一样。此外，TypeScript 中还还支持 for…of 、forEach、every 和 some 循环。for循环TypeScript 语言中的 for 循环可以用于多次执行一个代码块。例如一句代码重复执行 10 次、100次、1000次等，都可以通过循环来实现。语法如下所示：for ( init; conditio
2021-08-21 22:25:36
2279
原创 TypeScript 条件语句
条件语句用于基于不同的条件来执行不同的动作。判断给出的条件，如果条件为真执行什么代码，如果条件为假又执行什么代码。TypeScript 中的条件语句其实和 JavaScript 中的条件语句一样，如果已经熟悉 JavaScript 中的条件语句，可以略过此节。if 条件语句TypeScript 中 if 条件语句由一个布尔表达式跟一个代码块组成。语法格式：if(expression){ // 当 expression 为 true 时执行代码块}示例：定义一个变量 age，根据给定
2021-08-18 22:43:49
119
原创 TypeScript 高级类型
前面我们学的数字类型、字符串类型、布尔类型、数组类型等等可能都是我们比较熟悉的数据类型，在其他计算机语言中也能经常见到。而本节我们要学习的是 TypeScript 中的高级类型，例如交叉类型、联合类型、类型别名、字面量类型等。交叉类型交叉类型是将多个类型合并为一个类型。可以通过 & 来实现合并，生成的新类型包含了所需的所有类型的特性。举一个例子，假设 A、B、C 是三种不同的数据类型， 我们将三种类型合并为一个新的交叉类型 A & B & C ，那么使用这个交叉类型声明的对象可
2021-08-15 23:46:33
115
原创 TypeScript 元组类型
TypeScript 语言中，数组中的元素一般只能是由相同数据类型组成（any[] 除外），如果我们想要存储不同类型的元素，则可以使用元组。TypeScript 中的元组（Tuple）从外形上来看和数组相差不多， 但是元组中允许存储不同类型的元素，数组中的元素必须是相同的类型。声明元组声明元组的语法：let tuple_name = [value1,value2,value3,…value n]示例：例如声明一个由数字类型、字符串类型、布尔类型构成的元素：let tup1:[number,
2021-08-12 21:23:28
683
原创 TypeScript 数组类型
和 JavaScript 语言一样，TypeScript 中也有数组类型。数组指的是有序的元素序列，例如 [1, 2, 3] 这样的就是一个数组，1、2、3 就是数组中的元素，中括号[] 内可以由任意数量的元素。但是每个元素之间的类型必须相同，比如数组中的是数字类型就必须全部元素都是数组类型，像 [1, 2, '3'] 这样突然夹杂一个字符串类型是不被允许的。数组是静态的，这意味着数组一旦初始化就无法调整大小。声明和初始化数组在 TypeScript 中声明和初始化数组也很简单，和声明数字类型和字符
2021-08-10 21:05:42
943
1
原创 TypeScript 字符串类型
字符串声明同 JavaScript 语言中一个，在 TypeScript 中我们也可以通过单引号 '' 或者双引号 "" 来声明一个字符串类型的变量。示例：let str1:string = 'xkd';let str2:string = "侠课岛";console.log(str1);console.log(str2);这其实和 JavaScript 中的字符串类型差不多，TypeScript 中。字符串新特性TypeScript 中的字符串类型和 JavaScript 中的字符串基
2021-08-08 22:28:56
554
原创 TypeScript 中的基本数据类型
本节我们学习 TypeScript 语言中的数据类型，有：数字类型、字符串类型、布尔值、数组、元组等等。TypeScript 支持与 JavaScript 几乎相同的数据类型，此外还提供了实用的枚举类型方便我们使用。数字类型与 JavaScript 中一样，TypeScript 中的所有数字都是浮点数。这些浮点数的类型为 number 类型。number 类型除了支持十进制和十六进制字面量，还支持 ECMAScript 2015 中引入的二进制和八进制字面量。示例：声明数字类型的变量，可以是二进制、
2021-08-06 22:38:16
163
原创 TypeScript 运算符
本节我们来讲 TypeScript 中的运算符的使用，运算符我们应该都知道，数学中我们也学过运算符，例如常见的加减乘除等。而计算机语言中的运算符，用于执行程序代码运算，会针对一个以上操作数项目来进行运算，例如 1 + 2，其中 + 就是一个运算符，而 1、2 则是操作数。TypeScript 中的运算符就大致和 JavaScript 中一样。TypeScript 中的运算符可以大致分为以下几种：算术运算符关系运算符逻辑运算符按位运算符赋值运算符三元运算符类型运算符算术运算符算术运算符
2021-08-04 22:31:51
806
原创 TypeScript 使用let和const声明变量
使用 let 声明变量关键字 let 是 ES6 中新增的特性，它的出现是为了解决 var 变量声明所存在的一些问题，let 声明变量的语法和 var 的很像，例如：let a = 1;其实 let 与 var 的关键的区别不在于语法，而在于语义。在 let 中引入了块级作用域（也可称为词法作用域）。块级作用域是什么意思呢？我们知道使用大括号 {} 包围代码可以叫做代码块，举个例子，比如说 if、for 等语句的执行代码都是通过一个大括号 {} 包围对吧，这个大括号中的就是代码块。如果我们在大括号
2021-08-02 22:24:11
210
原创 TypeScript 使用var声明变量
本节我们讲变量的声明，变量从字面意思来理解，就是可以改变的量。而从编程角度来说，变量就是内存中的命名空间，主要用于存储值，我们可以把它理解为程序中值的容器。我们知道 TypeScript 有一个特定就是变量是强类型的，也就是说在声明变量的时候必须给这个变量指定一个类型。这与 JavaScript 不同， JavaScript 是弱类型语言，在 JavaScript 中声明变量时不需要指定类型。声明变量的方式在 JavaScript 中可以通过关键字 var 、 let 、 const 来声明变量，当然
2021-07-31 22:39:16
488
原创 TypeScript 基础语法
首先我们来看一下注释，注释其实就是对代码的解释和说明，目的是让人们能够更加轻松地了解代码，在代码中添加注释只是为了提高代码可读性，注释不会被计算机编译。不同的语言中注释格式可能有些不同， TypeScript 中的注释其实和 JavaScript 中的一样，我们来看一下。TypeScript 的注释分为单行注释和多行注释：单行注释：后面的文字都是注释内容。// 这是一个单行注释多行注释 : 这种注释可以跨越多行。/* 这是一个多行注释 这是一个多行注释 这是一个多行注释
2021-07-28 23:48:46
178
1
原创 TypeScript 创建第一个TypeScript文件
上一节我们已经做好了准备工作，那么本节我们开始在 Visual Studio Code 中创建第一个 TypeScript 文件，并学习如何运行这个文件。TypeScript 文件后缀名在创建文件之前，我们来讲一下后缀名， TypeScript 中的文件都是以 .ts 为后缀名的，这和 JavaScript 文件是不同的，JavaScript 是以 .js 为后缀名，所以在这点上我们千万不要弄错哟。创建一个 TypeScript 文件首先可以在电脑指定路径创建一个文件夹，例如我创建一个名为 Demo
2021-07-25 22:31:31
252
原创 TypeScript介绍与安装
本节我们来学习 TypeScript 语言。 TypeScript 看名字就和 JavaScript 很像，事实上它们两者也确实有关联。TypeScript 是 JavaScript 的超集，它对 JavaScript 进行了一些规范和补充。TypeScript 介绍TypeScript 可以编译成纯 JavaScript，编译出来的 JavaScript 可以在任何游览器上运行。TypeScript 可以在任何浏览器，任何计算机和任何操作系统上运行，而且它是开源的。TypeScript
2021-07-23 22:55:40
227
原创 Babel register
本节我们来讲一下 @babel/register。使用 Babel 的方法之一就是通过 require 钩子（hook），require 钩子将自身绑定到 node 的 require 模块上，并在运行时自动编译文件。这和 CoffeeScript 的 coffee-script/register 类似。安装@babel/register 只有一个功能，就是重写 node 的 require 方法。安装命令如下所示：npm install @babel/core @babel/register --
2021-07-18 22:07:37
533
原创 Babel transform-runtime
Babel @babel/plugin-transform-runtime本节我们来学习 @babel/plugin-transform-runtime 和 @babel/runtime 。Babel 中使用辅助函数来实现常见功能，例如 _extend() 函数，每个编译后的文件都需要定义它所需要使用的辅助函数。但这样显然会造成很多重复，所以 Babel 把所有的辅助函数都封装于 @babel/runtime，每个编译后的文件只需要引用 @babel/runtime 即可。@babel/runtim
2021-07-16 22:43:19
622
原创 Babel @babel/polyfil
Babel 中默认只转换新的 JavaScript 句法，例如箭头函数、扩展运算符等。但是不会转换新的 API，像是Set、Maps、Iterator、Generator 、Symbol、Reflect 等全局对象，以及一些定义在全局对象上的方法都不会进行转译。如果想使用这些新的对象和方法，则需要为当前环境提供一个 polyfill 垫片。举一个例子，例如 ES6 在 Array 对象上有一个新增的 Array.from 方法，因为这个方法是全局对象上的方法，所以 Babel 就不会对这个方法进行转译。如
2021-07-13 23:17:26
373
原创 Babel 预设
本节我们来学习 Babel 中的预设 Presets。如果我们不想手动的组合插件，可以使用 preset 作为 Babel 插件的组合，或者共享 options 配置。Babel7.8 官方的插件和预设有一百多种，如果我们一个个学习那需要大量的时间。但是我们也没必要全部学习，因为在实际使用中，常用的预设和插件也只有那几个，我们重点掌握这些常用的即可，掌握后这样其他的插件和预设就变得简单啦。官方Preset官方针对常用的环境编写了一些 preset，如下所示：@babel/preset-env@b
2021-07-11 20:39:24
120
原创 Babel 插件
Babel 是一个编译器，和其他编译器一样，编译过程分为三个阶段，分别是解析（parsing）、转换（transforming）和生成（generate）。其中分析和生成阶段由 Babel 核心完成，而转换阶段，则由Babel插件完成。所以如果我们要实现代码的转换，需要为 Babel 添加插件。Babel 也提供了很多的接口来供我们编写自身的插件来转换我们的实际代码。插件的介绍下面是一个典型的 Babel 插件结构：export default function({ types: babelTypes
2021-07-06 15:46:18
857
原创 Babel 配置文件
本节我们学习 Babel 的配置，许多工具都有自己的配置文件，例如ESLint 的配置文件为 .eslintrc，Prettier 的配置文件为 .prettierrc。Babel 也有配置文件， Babel 的配置文件是 Babel 执行时默认会在当前目录寻找的文件，主要有 .babelrc、.babelrc.js、babel.config.js、package.json 文件。.babelrc.babelrc 文件前面我们使用过，我们可以在项目根目录下创建一个 .babelrc 文件，然后输入如下
2021-07-04 21:50:26
706
原创 Babel 编辑器
我们在学习 Babel 的使用可以选择一个编辑器。现在很多流行的编辑器都支持 ES2015+ 语法高亮显示，并且此功能开箱即用，然后有一些编辑器则需要安装额外的扩展。我们可以选择的编辑器有：Sublime Text 3AtomVimVisual Studio CodeWebStorm在这几个编辑器中，选择一个你喜欢的下载安装，例如 Visual Studio Code 编辑器。安装Visual Studio CodeVisual Studio Code 下载地址：h
2021-07-01 23:09:35
107
原创 Babel 安装
本节我们来学习如何安装 Babel。安装 Babel 后我们就可以将使用 ES2015 + 语法的 JavaScript 应用程序代码，编译为可在当前浏览器中使用的代码。本教程我们学习 Babel7 版本的知识。准备工作Babel 是基于 Node.js 的，如果我们要安装 Babel ，那么需要先安装好 Node.js。Node.js 的官网地址：https://nodejs.org/en/。然后按照提示进行安装即可。安装好后，我们可以在命令工具中输入 node -v 和 npm -v 来检测一下
2021-06-29 16:34:58
856
原创 Babel 简介
本教程我们学习 Babel 的基础知识，Babel 是一个用于 web 开发，且自由开源的 JavaScript 编译器、转换器。主要用于在当前和较旧的浏览器或环境中将 ECMAScript 2015+ 代码转换为 JavaScript 的向后兼容版本。Babel 使软件开发者能够以偏好的编程语言或风格来写作源代码，并将其利用 Babel 翻译成 JavaScript，是现今在浏览器最常用的编程语言。下列是 Babel 的使用场景：语法转换。目标环境中缺少的 Polyfill 功能。源代码转换（
2021-06-27 22:46:41
440
1
原创 webpack 热更新
本节我们学习 webpack 的模块热更新，也可以叫做模块热替换。其目的是为了加快用户的开发速度，提高编程体验，方便开发人员在不刷新页面的情况下，就能修改代码，并且直观地在页面上看到变化。这个功能主要用于开发过程中，对于生产环境没有任何帮助。什么是模块热更新HMR 全称为 Hot Module Replacement ，中文意思为模块热更新，是 webpack 提供的最有用的功能之一。它允许在运行时替换，添加，删除各种模块，而无需进行完全刷新重新加载整个页面。热更新中的“热”我们可以理解为这个模块正在运
2021-06-25 11:19:33
330
1
原创 webpack 图片处理和优化
本节我们来学习如何在 webpack 中处理和优化图片。前面我们讲过，webpack 中只有 JS 类型文件才能够被识别并直接打包，其他类型的文件，例如 CSS、JS、图片等，则需要通过特定的 loader 来进行加载打包。而在实际项目中，我们也会经常用到图片，所以本节我们就来看一下如何在 webpack 中打包图片。如何在webpack中打包图片在 webpack 中打包图片要用到 file-loader 或者 url-loader 加载器，这两个加载器的功能基本一样，但是还是存在一些区别：f
2021-06-23 22:28:31
387
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人