jquery项目实战——爱创课堂专业前端培训

一、函数节流
函数节流：可以使一些频繁触发的函数事件受到限制，可以使函数在一定的时间之内或者满足某些条件之后再去执行。

设一个变量lock 取值是布尔值

var lock = true 函数可以执行

lock = false，函数不可以执行

举例：

1 // 定义锁
var lock = true;

2 function a() {

3 if (!lock) {

4 return;

5 }

6 lock = false;

7 }

1.1 延时器
可以比喻成定时炸弹，在一定的时间只会执行一次

使用方式：

setTimeout(fn, time)

fn: 要执行的函数

time: 要延迟的时间

举例：

1 var lock = true;

2 function b() {

3 if (!lock) {

4 return;

5 }

6 lock = false;

7 // 在3s之后打开锁，使用延时器
setTimeout(function() {

8 // 打开锁
lock = true;

10 }, 3000)

11 }

二、this
this表示触发事件的对象。

each()方法的参数是一个函数，函数中的this表示遍历到的该对象。

函数中也有this, 如果当函数自执行，this指向window.

举例：

1 // 定义一个函数

2 function fn() {

3 console.log(this) // window;

4 }

5 // 函数执行

6 fn();

改变函数的this指向可以使用call()方法

使用方式：

fn.call() 接受的参数就是要改变的this指向。

举例：

1 // 定义函数

2 function fun() {

3 console.log(this);

4 }

6 // 使用call方法改变函数中的this指向

7 fun.call($("#btn"));

8 fun.call(document);

9 fun.call(document.body);

输出结果：

1 图片1.png

三、each
each()方法：

第一种使用方式：

对象.each(funciton() {}) 接受一个参数就是匿名函数

1 // 使用each进行遍历

2 $(“li”).each(function(i) {

3 console.log(i);

4 })

图片2.png

第二种使用方式：

一般用于遍历数组或者遍历对象的时候

$.each(target, fn)

target: 要遍历的目标

fn: 执行的函数

函数中有两个参数

第一个参数索引值

第二个参数成员值

举例：

1 // 定义一个数组

2 var arr = [“a”, “b”, “c”, “d”];

3 // 使用each方法的第二种方式

4 $.each(arr, function(index, value) {

5 // console.log(index, value);

6 })

结果：

1 图片3.png

遍历对象：

1 // 定义一个对象

2 var obj = {

3 a: “1”,

4 b: “2”,

5 c: “3”

6 }

结果：

1 图片4.png

jquery项目实战——爱创课堂专业前端培训相关推荐

零基础能不能学习web前端开发？【爱创课堂专业前端培训】
web前端日趋火热,不只招聘市场需求量大,还有一个重要的原因便是,入行门槛低,入门简单.单是关于许多小白同学来说还是有点担心,不知道零基础能不能学习web前端开发? 以为没那么简单.其实web前端是一 ...
web前端源码笔记_canvas【爱创课堂专业前端培训】
爱创课堂前端源码笔记--canvas 一.canvas canvas是HTML5新增的标签用于提供"画布" 可以通过canvas元素获取对应的"上下文"(可以理 ...
小白前端学习流程【爱创课堂专业前端培训】
对于零基础非科班的同学来说,一个良好的前端学习流程和学习误区是需要我们去规避和计划的,爱创课堂目前专注于前端培训,总结了以下几点,给大家一个参考. 在开始学习之前你需要做到以下5点: 第一:需要达到什 ...
css源码笔记（四）【爱创课堂专业前端培训】
复习: 1.1 布局模型--前端培训机构与盒子模型一样是最基础.最核心的东西,但是布局模型是从盒子模型基础上进行布局的. 流动模型flow.浮动模型float.层模型:绝对定位.固定定位流动模型f ...
html5源码笔记（四）【爱创课堂专业前端培训】
一.响应式的实现-媒介查询 @media 实现方式一:把media限定到link中实现方式二:把media写到css代码中留活口,ie兼容 @charset "utf-8"; ...
前端开发——Ionic 3.0【爱创课堂专业前端培训】
一.Ionic 移动端有三种开发方向源生APP开发, 移动端web开发混合开发(介于以上两者之间的) 类微信小程序 reactNative,用react语法,开发app.但是与浏览器端不是同一套组 ...
JavaScript（第三天）—爱创课堂专业前端培训
一.条件语句条件语句格式一: if(条件表达式){ 条件表达式成立执行的语句; } 条件语句格式二: if(条件表达式){ 条件表达式成立执行的语句; }else{ 条件表达式不成立执行的语句; } ...
html5源码笔记（三）【爱创课堂专业前端培训】
一.常见的布局 1.1 固定布局(基本的布局方式) 1.2 百分比布局(流式布局) width.heigth.padding.margin使用百分比进行布局 width.padding.margin相 ...
html5源码笔记【爱创课堂专业前端培训】
一. 背景相关属性 Background-color Background-image Background-repeat Background-position Backgroound-attach ...

jquery项目实战——爱创课堂专业前端培训

jquery项目实战——爱创课堂专业前端培训相关推荐

最新文章

热门文章