小张小张啊-CSDN博客

原创 JavaScript 学习笔记（十）jQuery事件和 jQuery 的动画函数

一、jQuery绑定事件方法：on()、 one()、 hover() 、常用事件函数1. on() 方法绑定事件1-1. 基础绑定事件语法：元素集合.on('事件类型', 事件处理函数)$('div').on('click', function () { console.log('我是 div 的点击事件')})1-2. 事件委托绑定事件语法：元素集合.on('事件类型'，选择器，事件处理函数)把事件绑定给div 元素，当你在 div 内的 p 元素触发事件的

2022-04-02 20:56:50 937

原创 JavaScript 学习笔记（九）认识jQuery 和 jQuery的基本操作

一、认识jQueryjQuery 是一个大型的简单的第三方类库。或者说是JavaScript中最流行的一种框架。引用 jQuery：<script src="js/jquery.min.js"></script>//或者<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>　　//Google//或者<sc

2022-04-01 17:17:52 1030

原创前端面试题合集

目录一、css1. 实现水平垂直居中2. 文字如何实现水平垂直居中3. 盒模型4. flex布局5. em，rem，px区别6. 块状元素和行内元素7. 重绘和重排二、js1. 闭包的理解2. 原型和原型链3. new 关键字4. cookies、sessionStorage和localstorage区别5. 事件6. 深拷贝，浅拷贝7. this 指向的问题8. 延迟加载三、ES61. es6新增了哪些特性2....

2022-03-30 19:22:17 1066

原创 JavaScript 学习笔记（八）前后端交互；Ajax进行前后端交互

目录一、前后端二、前后端接口三、Ajax1. ajax接口步骤2. 返回为json格式四、请求方式五、案例：登录一、前后端前端：用户可以看见的界面，我们一般浏览网页时看到的界面，展现网页数据给用户看的地方。后端：要将前端的数据存储到数据库中，并且把数据库的数据传递给前端。数据库：存储数据的地方。前后端交互：前端将数据传递给服务端，并且能够从服务端接收到返回的数据的过程。二、前后端接口前端与后端进行数据交互的统称，也叫做数据接口，指前端通过HTTP..

2022-03-18 17:43:17 9653 1

原创 JavaScript案例（六）：前后端交互-登录案例

效果图：分析需求：问题1：什么时候进行发送请求？点击登录按钮的时候，需要给 form 标签绑定一个表单提交事件。问题2：需要拿到哪些信息？需要拿到用户填写的用户名和密码。问题3：需要如何发送给后端？按照接口文档的规范进行发送。问题4：请求完成以后，我们需要做些什么？根据后端返回的信息，进行一些后续的操作。如果后端返回的是登录成功，那么我们进行页面跳转；如果后端返回的是登录失败，那么我们提示用户错误...

2022-03-18 17:35:46 3589 1

原创 ES6 学习笔记

一、定义变量ES6 以前我们定义变量使用 var 关键字，ES6 新增了两个定义变量的关键字：let ==> 定义变量 const ==> 定义常量（特殊的变量）1. let / const 与 var 的区别var 会进行预解析，let 和 const 不会进行预解析 //1. 预解析 console.log(num) //undefined var num = 100 console.log(n...

2022-03-16 17:34:05 1075

原创 JavaScript 学习笔记（七）JavaScript基础；js原型以及原型链

一、原型原型解决的问题：当我们需要给实例对象添加方法时，直接在构造函数体内直接向实例对象添加方法，这种行为并不好，原型就是解决这一问题的。不好的原因：当把方法书写在构造函数体内，每次创建实例的时候，都会创建一个函数数据类型，多个函数方法，一模一样，就会占据多的存储空间。比如： <script> function Person(name, age) { //向实例对象内添加属性 this.name = name

2022-03-16 11:31:56 253

原创 JavaScript案例（六）：选项卡；JavaScript简单版面向对象案例：选项卡

简单版面向对象案例：选项卡1. 抽象内容一个能够完成选项卡的对象，需要有哪些属性和方法。属性：所有可以点击的按钮盒子；属性：所有可以切换的选项盒子；方法：能添加点击事件的方法。2. 书写构造函数能创建一个对象，包含两个属性和一个方法；属性直接写在构造函数体内；方法写在构造函数的原型上。<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8">

2022-03-12 16:34:26 1607

原创 JavaScript 学习笔记（六）JavaScript基础，JavaScript面向对象相关知识点及案例

目录一、了解面向对象二、创建对象的方式1. 字面量方式创建对象2. 内置构造函数创建对象3. 工厂函数创建对象4. 自定义构造函数创建对象一、了解面向对象面向对象是我们的一种开发方式。例子：一份烤鸭在面向过程中：所有事情都是自己来做，要考虑顺序（先杀鸭子，先烤鸭子，还是先切鸭子）；要考虑步骤（杀鸭子的时候，先干什么，后干什么）；要考虑细节（胡萝卜的宽窄程度，酱的咸甜口等）。而在面向对象中，我们只需要点一份烤鸭，等待烤鸭上桌就好。（会有专门的人来处理这些事情）.

2022-03-12 16:31:23 869

原创 JavaScript案例（五）：轮播图；html+css+js实现轮播图功能以及自动切换图片

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>轮播图</title> <style> * { margin: 0; padding: 0; } ul, ol, li { list-st.

2022-03-09 21:53:17 5016 1

原创 JavaScript案例（四）：鼠标移动跟随；html+css+js实现鼠标移动时小球跟随鼠标移动

鼠标移动跟随案例js知识点：JavaScript事件详见上一篇文章：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>案例：鼠标跟随</title> <style> img { width: 40px; height: 40px;

2022-03-07 17:07:41 991

原创 JavaScript 学习笔记（五）JavaScript基础，JavaScript的事件

文章目录前言一、事件绑定二、事件类型1.鼠标事件2.键盘事件3. 浏览器事件4. 触摸事件5. 表单事件三、事件对象总结前言事件：通过代码的方式和页面中的某些内容做好一个约定；用户触发指定行为的时候，就会执行代码一、事件绑定事件绑定的三要素：事件源：和谁做好约定事件类型：约定一个什么行为事件处理函数：当用户触发该行为的时候，执行什么代码。语法：事件源.on事件类型 = 事件处理函数<!DOCTYPE html><html lang="en"><h

2022-03-07 15:14:55 280

原创 JavaScript案例（三）：动态渲染页面；html+css+js实现动态渲染页面

前言将代码中已知的数据结构，通过代码的方式把数据渲染成一个表格显示在页面上如图：循环遍历users数组，有多少个成员执行多少回1. 创建一个tr标签2. 循环遍历 users内的每一个对象对象内有多少个成员，执行多少遍2-1.创建一个td标签2-2. 向 td标签内添加内容2-3. 把td标签插入到tr标签内3. 把tr 插入到tbody内部代码：<!DOCTYPE html><html lang="en"><h..

2022-03-05 16:28:59 3845

原创 JavaScript案例（二）：全选；html+css+js实现全选功能

代码逻辑∶1、给全选按钮绑定点击事件拿到自己的选中状态；给所有选项按钮设置选中状态2、给每一个选项按钮绑定点击事件判断是不是所有选项按钮都是选中的；根据判断结果给全选按钮设置选中状态<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>案例-2：全选</title> <style...

2022-03-05 15:20:32 1202

原创 javaScript案例（一）：回到顶部，html+css+js书写案例：回到顶部

提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档文章目录前言一、pandas是什么？二、使用步骤1.引入库2.读入数据总结前言提示：这里可以添加本文要记录的大概内容：例如：随着人工智能的不断发展，机器学习这门技术也越来越重要，很多人都开启了学习机器学习，本文就介绍了机器学习的基础内容。提示：以下是本篇文章正文内容，下面案例可供参考一、pandas是什么？示例：pandas 是基于NumPy 的一种工具，该工具是为了解决数据分析任务而创建的。二、使用步骤1.引入库代码

2022-03-05 14:40:15 179

原创 javaScript 学习笔记（四）JavaScript的定时器

文章目录javaScript学习笔记（二）JavaScript的定时器JavaScript的定时器1. 间隔定时器：2. 延时定时器：3. 定时器的返回值4. 关闭定时器总结定时器javaScript学习笔记（二）JavaScript的定时器JavaScript的定时器1. 间隔定时器：按照制定周期（毫秒）去执行制定的代码语法：setInterval(函数, 时间)函数：每次要执行的内容；时间：单位是毫秒。//每隔1000毫秒执行一次 setInterval(function ()..

2022-03-05 11:20:54 239

原创 JavaScript 学习笔记（三）JavaScript基础，JavaScript的基本DOM操作（三）

文章目录JavaScript 学习笔记（三）JavaScript基础，JavaScript的基本DOM操作（三）一、节点操作1. 创建节点2. 插入节点3. 删除节点4. 替换节点5. 克隆节点二、获取元素的尺寸总结一、节点操作1. 创建节点2. 插入节点3. 删除节点4. 替换节点5. 克隆节点二、获取元素的尺寸JavaScript 学习笔记（三）JavaScript基础，JavaScript的基本DOM操作（三）一、节点操作1. 创建节点创建一个页面中没有的节点（无中生有）语法：docu

2022-03-05 11:20:15 238

原创 JavaScript 学习笔记（二）JavaScript基础，JavaScript的基本DOM操作（二）

文章目录JavaScript 学习笔记（一）JavaScript基础，JavaScript的基本DOM操作（二）一、DOM介绍二、获取元素的方式1. 根据id名称获取2. 根据元素类名获取3. 根据元素标签名获取4. 根据选择器获取一个5. 根据选择器获取一组三、操作元素内容1.操作元素文本内容2. 操作元素超文本内容四、操作元素属性1. 原生属性2. 自定义属性五、操作元素类名六、操作元素行内样式七、获取元素非行内样式总结1.获取元素2.操作元素内容3. 操作元素原生属性4. ..

2022-03-02 15:53:17 395

原创 JavaScript 学习笔记（一）JavaScript基础，JavaScript的基本DOM操作

JavaScript 学习笔记（一）javaScript中的DOM操作1. 获取浏览器窗口尺寸宽度：widnow.innerwidth高度：widnow.innerHeight //获取浏览器可视窗口的宽度 var w = window.innerWidth //获取浏览器可是窗口的高度 var h = window.innerHeight console.log(w) console.log(h)2. 浏览器的弹出层提示框：window.a

2022-03-02 10:05:21 349

小张小张的博客