- 博客(149)
- 收藏
- 关注
RSS订阅原创 JavaScript（七十六）Jquery的案例练习
放大镜：<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <script src="../js/jquery-3.4.1.js" type="text/javascript" charset="utf-8"></script> <style type="text/css"> *{
2021-06-26 10:29:58
334
原创 Javascript（七十五）jquery的ajax和cookie
JQ的cookie使用下载jquery.cookie.js文件 下载地址：https://plugins.jquery.com/cookie/$.cookie（） （与我们之前封装的cookie函数类似，可以看我之前的博客，有讲cookie使用）$.cookie(name) 取值$.cookie(name,value) 设置cookie 键名和键值$.cookie(name,value,option) 设置cookie 键名和键值以及cookie可选项，option必须是对象$
2021-06-26 10:25:30
535
原创 JavaScript(七十四)JQuery插件方法
$.extend 拓展工具方法 调用方式：$.xxx()参数：对象，属性名为函数名，属性值为函数体$.fn.extend 拓展jquery的函数库，调用 $().xxx()注：为了满足jquery链式操作的思想，在设置新增方法和工具方法的时候，返回this。...
2021-06-24 10:28:21
173
原创 Javascript(七十三)jquery工具方法
JQ的工具方法和我们自己封装的js方法没有区别。jq方法调用$().xxx() 必须是JQ对象调用jq工具方法调用 $.xxx() 与普通封装的js方法没区别.type()输出当前数据的数据类型功能类似于typeof但是.type() 输出当前数据的数据类型 功能类似于typeof 但是.type()输出当前数据的数据类型功能类似于typeof但是.type（）更加的完善。$.trim() 删除字符串首尾空格 功能类似于 ECM5删除首尾空格 .trim（）参数：
2021-06-24 10:25:01
199
原创 Javascript（七十二）jquery中的animate方法
.animate 实现动画效果 ，这与我们之前封装的完美运动框架差不多的。但是他这个默认的运动形式不是缓冲运动，是属于慢快慢。第一个参数：对象，样式名：样式最终效果第二参数：动画持续时间第三参数：运动形式：仅有两种 ‘linear’:匀速 ‘swing’：慢快慢（默认）可省略。第四个参数：回调函数，动画结束时执行。如果想拓展更多的运动形式，可以引入jquery-ui框架（类似于boostrap，通过class名，添加样式），但是基本被淘汰了。https://www.jqueryui.or
2021-06-23 06:25:37
1337
2
原创 Javascript(七十一)jQuery特效函数
移入移出**.hover（functionOver,functionOut）:移入移出效果，functionOver表示移入函数，functionOut表示移出效果。隐藏显示：.hide() 元素隐藏，功能：style.display=‘none’。隐藏过程，从左上角收起第一个参数：（动画持续的毫秒数）第二个参数：（回调函数，动画结束时执行）.show() 元素显示,功能：style.display=‘block’。显示过程，从左上角展开第一个参数：（动画持续的毫秒数）第二个参数：（
2021-06-23 06:06:01
92
原创 JavaScript(七十) jquery(二)
jquery常用的方法筛选结点.filter() 过滤：对我们已经获取到的网页元素进行过滤，选择符合（）内条件的元素。.not() 反过滤：选择与filter相反的元素，选择不符合（）内条件的元素。.has（）拥有，直接判定该节点是否是否有符合条件的子节点元素，如果有，该节点被选中（注：不是子节点，而是父节点）.next() 选择同级节点的下一个元素节点（类似于nextElementSibling）.prev() 选择同级节点的下一个元素节点（类似于previousElementSib
2021-06-22 08:03:33
156
2
原创 JavaScript(六十九) jquery（一）
JQuery简介1.一个快速、简洁的JavaScript框架；2.设计的宗旨是‘write Less，Do More’（写的更少，做得更多）；3.JQuery兼容各种主流浏览器，如IE 6.0+、FF 1.5+、Safari2.0+、Opera 9.0+JQuery好处1.简化JS的复杂操作；2.不再需要关心兼容性；3.提供大量实用方法Jquery版本区别1.x 可以兼容到IE8以下2.x 只兼容IE8以上如何学习JQ？1.https://jquery.com/ JQ的官方网
2021-06-21 08:37:50
282
7
原创 JavaScript(六十八)版本控制工具 git
安装git1.安装git客户端（去网上搜索下载就好了，很简单）window系统安装之后，在菜单的应用程序下就会有一个git文件夹。git文件夹下面有三个主要的控制台git Bash:支持linux命名的git控制台 （最常用）git CMD：支持window命令的控制台git GUI: git可视化界面苹果自带git2.VSCode 安装git插件 快捷键 ctrl+~ 迅速打开终端，并且当前路径是我当前页面所在路径下载安装完毕git之后，就可以github官网地址（
2021-06-21 08:18:50
295
1
原创 Javascript(六十七)模块化
模块就是实现特定功能的一组方法原始写法只要把不同的函数（以及记录状态的变量）简单地放在一起，就算是一个模块。缺点：全局变量污染对象写法缺点：虽然没有造成全局变量污染，但是对外暴露，外部可以随意更改对象内的元素。闭包（立即执行函数）达到不暴露私有成员的目的，外部无法随意更改函数内的变量以及函数，因为根本访问不到，函数内部变量对外都是不可见的。缺点：无法二次拓展，就是在原有基础上拓展放大模式缺点：拓展的基础，必须是先有一个原型，如果原型是在后面运行的，就无法拓展了宽放大模式解决
2021-06-20 08:46:00
143
原创 Javascript(六十六) 项目开发工具Gulp
https://www.gulpjs.com.cngulp是基于node.js的一个前端自动化工具，开发这可以使用它构建自动化工作流程（前端集成开发环境）。使用glup你可以简化工作量，让你把重点放在功能的开发上，从而提高你的开发效率和工作质量。下载glup1.进入node.js中文文档下载nodejs（http://nodejs.cn/download/）2.点击安装包一路点击下载即可3.启动nodejswindows： 点击windows键（开始键）=>nodejs文件=>n
2021-06-19 06:56:07
361
原创 Javascript（六十五）闭包
凡是满足以下三个特点，都属于闭包1.函数嵌套函数2.内部函数使用外部函数的形参和变量3.被引用的形参和变量就不会被垃圾回收机制所回收垃圾回收机制:调用函数时，系统会分配一定的内存空间给这个函数使用（空间大小由这个函数里声明的变量和形参决定）。调用完毕之后，这个内存空间要释放，还给系统。var a=0 function show(){ console.log(a); a++; } show() show() //a的空间没被释放 alert(a)
2021-06-17 09:06:54
384
8
原创 JavaScript(六十四)本地存储技术cookie （会话跟踪技术）
什么会叫会话跟踪技术？在一次会话从开始到结束的整个过程，全程跟踪记录客户端的状态（例如：是否登录，购物车信息、是否已下载、是否已点赞、视频播放进度等等）你把cookie就当成第一次跟服务器连接后，服务器发给你的身份牌，上面旧纪录跟你相关的信息 以后只要在跟服务器通信，必须带着这个身份牌，这样一来，关于你是谁？是否登录过购物车里有什么信息？服务器当然就很容易知道了。cookie与localStorage以及sessionStorage区别localStorage（客户端微型数据库）：1.永久存储；2
2021-06-16 13:47:15
164
原创 Javascript(六十三)网络协议
网络分层的概念OSI 7层的网络分层通用 5层网络分层网络传输协议：网络数据在互联网进行传输，遵从的传输规则传输层：TCP/UDP port端口号（确定来自哪个软件）网络层：IP协议 确定传输给哪台电脑（IP）数据链路层：数据信号（1.0）物理层：数据信号->光信号。http协议（超文本传送协议）：功能：使万维网客户程序与万维网服务器程序之间的交互遵守严格的协议。连接方式：HTTP是一个的面向事务的应用层协议，使用TCP连接进行可靠传输。注：事务：一系列的信息交换，而
2021-06-16 13:25:24
373
原创 JavaScript(六十二)认识JSONP跨域
请求数据同服务器下请求：我们试试不同服务器下请求，能够看到我们的请求被拦截了，原因是少了“Access- control - allow - origin”头信息，这就涉及到了跨域请求的问题同源策略解决跨域请求，首先要知道同源策略是什么。同源策略：1.同协议 2.同IP/同域名 3.同端口号如果我们下载的数据url和网页的url满足以上三个条件，那么我们就能确定他们就是同源的，我们就能够下载数据了。ajax只能下载同源数据，跨源的数据禁止下载之所以会这样，就是为了保证服务器的安全
2021-06-15 09:00:33
450
7
原创 JavaScript（六十一）mysql和php 前后端项目
1.登陆格式限制2.数据传输3.请求判断4.加密5.发送请求6.返回提示完整代码:github :
2021-06-15 08:10:44
448
3
原创 Javascript（六十)mysql
假设我们的各个网站的数据保存在文档当中,那么就会存在以下弊端。1.文件的安全性2.文件不利查询和对数据的管理3.文件不利于存放海量数据4.文件在程序中控制不方便为了解决以上问题：因此有了数据库的出现。数据库本质也是文件。功能主要是保存数据并且配套一套数据管理系统，更有利于对数据的管理，比如增删改查。数据库水平衡量一个程序员水平的重要指标。我自己使用的Phpnow软件是mysql、php、apache集成环境，大家要是想单独使用mysql，可以单独去下载使用。（phpnow安装完之后会自带mys
2021-06-14 08:08:19
198
1
原创 Javascript(五十九)JSON对象
json数据传输格式：字符串的一种格式xml数据传输格式：使用标签和属性形式存储，传的数据种类和数据量多前端 传输 后端数据结构 字符串（运输成本低，传输数据，无法传输结构） 数据结构JSON对象：前端方法：JSON.par
2021-06-14 07:18:03
265
原创 JavaScript(五十八)AJAX
节省用户操作，事件，提高用户体验。减少数据请求，传输获取数据ajax：异步的javascript和数据传输（传输格式：xml、json）使用Ajax 使用ajax获取某一文件的内容Ajax过程详解 创建对象XMLHttpRequest（） ActiveXObject（‘Microsoft.XMLHTTP）xml:数据传输格式（大型门户网站：新浪、网易、凤凰网）优点：标签名和行间属性由用户自定义，种类丰富；传输量非常大缺点：解析麻烦；不太适合轻量级数据json数据传输格式（字符串）：（95%移
2021-06-13 09:34:58
176
原创 JavaScript（五十七）PHP语法
PHP简介PHP语言的特点1.PHP（超文本语文处理器）是一种通用开源语言2.PHP脚本在服务器上运行3.PHP可在不同平台上运行（window、Linux、Mac、OSX）4.PHP与目前拒户所有的正在被使用的服务器兼容（Apache、IIS等），全球95%以上的网站都是由PHP开发5.PHP是免费的，可以同官网上下载它“www.php.net6.PHP提供广泛的数据库支持7.PHP易于学习，并可高效的运行在服务器端。php代码兼容html和css所有代码php=》数据库php=》编
2021-06-12 12:05:22
228
4
原创 JavaScript(五十六)服务器入门以及安装
软件构架：C/S (客户端->服务端)B/S(浏览器端->服务端)服务器 apache这个软件运行在你的电脑上，那么你电脑上某一个磁盘就对外可见，别人可以通过IP或者域名访问服务器：资源提供方客户端 ：资源受益方服务器和客户端都是 相对概念，服务器可以是客户端，客户端可以是服务器。服务器安装因为apache的安装比较繁琐，所以一般我们都是安装的集成开发环境：WAMP、PHPnow、LAMP哪些技术可以开发网站php、jsp、asp、python、nodejs、c/c++
2021-06-12 11:55:24
701
2
原创 JavaScript(五十五)运动与游戏开发
动画：图像原理：能够识别的最小的时间间隔是18帧，一般情况下电影院里放映的电影24帧匀速运动简单匀速运动：从左到右再上图，当我们利用setInterval进行简单的匀速时，有以下问题需要解决的。1.停不下来解决： clearIntervel注：每个定时器最好对应一个变量存储，多个定时器要实现多个变量存储。后续有讲到。clearInterval(that)2.当速度取某些值时，不满足界限时停不下来解决： >=if(obox.offsetLeft>=500)3.到达
2021-06-11 08:46:44
303
1
原创 Javascript(四十七)新增数组方法和合并对象
新增数组方法和合并对象Array.from()功能：将伪数组转成真实数组，原元素组不变返回值：新的真实数组数组.find（）功能：在数组中查找符合条件的元素，短路操作：只要找到第一个符合条件的元素，就终止遍历。与数组的filter功能类似，只不过filter返回数组，而它以为短路操作，返回单个元素。返回值：找到符合条件的元素数组.findIndex功能：在数组中查找符合条件的元素的下标，短路操作：只要找到第一个符合条件的元素，就终止遍历。返回值：找到符合条件的元素的下标数组.co
2021-06-10 10:38:50
118
原创 Javascript（五十四）class定义构造函数
普通构造函数的定义：class定义：所有的属性写在constructor构造器中，原型方法（省略function）直接写在构造函数体中普通构造函数继承：class继承：class 子级构造函数名名 extend 父级函数名 {}属性继承：super（父级属性1，父级属性2，…）原型继承继承结果与普通函数Object.create()作用一样。直接将子一级的原型指向父一级的原型，值拷贝。整体比较：官方构造函数方法function Person(name,sex,age){
2021-06-10 10:17:21
1290
5
原创 Javascript（五十三）面向对象的多态和继承
面向对象，继承、封装、多态。面向对象是一个编程思想，支撑面向对象编程思想的语法是类（ES6之前没有这个概念）和对象。构造函数充当类的角色。构造函数和对象实现面向对象程序的时候，体现封装，继承，多态的特点。封装：封构造函数继承继承：分类更加细分的构造函数1.继承父一级的所有属性（改变父级构造函数的this指向）Teddy无法直接继承Dog的原型对象，也就无法调用Dog的方法。因为本身不是通过new创建的Teddy，Teddy的也就无法直接共享到父一级上的方法。2.继承父一级的原型对象（方法）
2021-06-10 09:59:43
130
1
原创 Javascript（五十二）proto__和instanceof关键字
构造函数构造出来的对象，有一个属性__ proto__,指向构造函数的原型instanceof关键字：功能：判断某一个构造函数对象是否是某一个构造函数构造出来的的以上面例子为例：
2021-06-10 09:45:17
113
原创 Javascipt(五十一)构造函数
当我们想要去创建一个对象时，定义好相关的属性和功能。但是如果我创建的另外一个对象时，它具备了和我第一个创建的对象中有相似的属性和功能的话，大部分人的想法可能就是复制粘贴第一个对象的创建过程如下图：但是如果我创建多个对象具有一些相同属性和方法的话，使用这种方法，无疑造成代码冗余。解决这种问题的办法就是封装创建对象的函数步骤：1.创建一个空对象2.为该对象增加属性和方法3.返回该对象上述封装创建对象的函数过程与工厂模式类似工厂模式：1.原料 2.加工 3.出厂 凡是满足上述三个步骤创建对
2021-06-10 09:36:27
90
原创 Javascript（五十）回顾面向对象概念
1.历史面向过程编程语言：汇编语言，c语言面向对于先：C++，Java，JvaScript，Python2.思想面向过程编程思想：只关心数学逻辑面向对象编程思想：1.找出实体2.分析实体属性和功能3.让实体之间相互作用3.代码例子 ：有一辆60km、h，跑在一条1000m的路，多久才跑完？面向过程：var hour=1000/60;console.log(hour)面向对象：4.语法类：具有相同特征十五的抽象概念对象：具体的某一个示例，唯一的某一个个体5.数据结构
2021-06-10 09:12:15
194
2
原创 Javascrpt(四十九)数组和对象遍历
for循环for in：通常用于遍历数组和对象，遍历键名，原型上的方法也会遍历到forEach：普通的遍历，将整个数组遍历一遍filter：过滤，符合条件返回，长度可能改动，返回一个新数组map：映射，返回一个长度不变，值更新的新数组for …of：一般用于遍历集合，也可用于遍历数组（遍历键值）对象 for …ofset for…ofmap for…of...
2021-06-09 08:21:53
105
原创 Javascript(四十八)集合
集合和数组区别：集合不重复、无序Setset类似于对象，但是只能存储除函数以外的数据，并且键名和键值(属性和属性值）必须一致，key=value。返回值是一个伪数组声明变量：new Set();赋值：1.变量.add(值)2.new Set(数组) ：数组转集合功能：去重注：如果传入的值是一个对象或者数组的话，因为地址不一样，所以即使里面定义的属性值一致，也不会去重集合遍历：forEachfor …of 默认遍历键值通过键名遍历 set集合.keys（）通过键值
2021-06-09 08:10:09
134
1
原创 Javascript（四十七）解构与ECM6字符串
中括号解构：大括号解构：大括号解构的原理是：首先先了解以下，在对象当中如果键名和键值变量名相同时，可以省略键值，直接使用一个键名表示。因此在做大括号解构时，其实是键名匹配，键值赋值。解构的好处：1.交换两个数的值2.函数可以返回多个值3.函数定义参数，和传入参数的顺序改变注：可以附带默认值普通情况下，传入实参顺序，必须与形参的顺序一致，才能能够保证输出对应的值但是如果使用大括号解构，那么我们可以忽略形参的顺序而去随意定义实参顺序在没有设置某参数的值时，可以设置默认值
2021-06-08 08:47:34
232
原创 Javascript（四十六）箭头函数
箭头函数：新增函数写法功能：适当省略function和return关键字箭头函数的特殊：1.this指向上一层函数的主人（因此无法改变this指向2.箭头函数，不能用new3.箭头，如果返回值是一个对象，一定要加（）。否则会将对象大括号当作函数大括号处理箭头函数与数组方法结合filtermap...
2021-06-08 08:36:31
61
原创 Javascript(四十五)let 和const关键字
var 关键字声明变量，将变量或者形参所在函数的大括号作为作用域处理。局部作用域let关键字：let 声明变量：只要遇到大括号就形成作用域let 关键字声明的变量，所在作用域叫做块级作用域var声明变量i不存在独占一个作用域，每一次定时器触发，都是用的同一个i，所以上面例子中的当事件处理函数发生时，其实for循环早就结束了，而i永远都是5。把上面的例子相当于下面的而let相当于每次都会重新定义一个i进行赋值let案例：保存定时器中变量i添加索引和使用this：使用let：
2021-06-07 09:01:23
154
1
原创 Javascript（四十四）强制改变this指向的函数
每一个函数都有一个内置的变量this，this指向当前函数的主人，函数的主人要根据上下文关系进行判断。【注】一般情况下this指向当前函数的主人。常见的this（不包括特殊情况）：1.全局函数注：一般情况下，在全局模式下声明的变量和函数，this指向都是window（除了严格模式是undefined）2.对象属性this指向的是对象3.事件处理函数this指向 绑定的事件对象强制改变this指向：一般情况下，在全局模式下声明的函数的this指向都是windowcall格式：函
2021-06-07 08:43:36
117
2
原创 Javascript（四十三）localStorage本地缓存
本地存储技术包含：localStorage（客户端微型数据库）：1.永久存储；2.最大存储5M 3.只能去存储字符串和数字，如果存储内容多的话会消耗内存空间，导致页面变卡。4.localStorage不能被爬虫抓取到。5.在浏览器的隐私模式下面是不可读取的cookie1.可以设置过期时间2.最大可以存储4KB3.每一个域名下面可以存储50条数据（如果已经4kb，可能不到50条，但是也不可以继续存储）sessionStorage（结合后台使用）1.存储容量小 2.只能存储一次会话（窗口打开和
2021-06-06 07:42:18
1130
原创 Javascript（四十二）正则表达式
概念：假设用户需要在HTML表单中填写姓名、地址、出生日期等。那么在将表单提交到服务器进一步处理前，JavaScript程序会检查表单已确认用户确实输入了信息并且这些信息符合要求的正则表达式，super string正则表达式（regular expression）是一个描述字符模式的对象。ECMASscript的RegExp类表示正则表达式，而String和正则表达式都定义了进行强的模式匹配和文本检索与替换函数。创建正则表达式的方式。创建正则表达式和创建字符串类似，创建正则表达式提供了两种方法
2021-06-06 07:35:11
218
原创 Javascript（四十一）Event事件监听器
事件监听器：addEventListener（）方法用于向指定元素添加事件监听，IE8以下不支持，火狐和谷歌支持。普通的事件绑定：元素节点.on+事件类型=匿名函数缺点：1.重复事件会被覆盖缺点2：事件移除使用简单粗暴的null代替事件处理函数addEventListener事件绑定：target.addEventlistener(‘事件类型’，匿名函数/执行函数名，false/true)注：匿名函数名没有双引号第三个参数是否使用捕获（捉)(反向冒泡)，默认为false，为冒泡好处：可
2021-06-03 07:20:04
824
原创 Javascript(四十)事件委托
一般我们实现一堆相同节点去添加点击时事件的时候用的都是上述方法。但是上述方法有比较多的缺点：缺点1：我们给每个li都设置了同样的函数，浪费资源。缺点2：新增的节点并没有获取到点击事件。原因是因为我们给按钮触发点击事件新增li时，循环已经结束了。此时只能遍历到已有的节点。解决：事件委托委托：A委托B做某事：A发布任务 委托方B执行任务 代理方事件委托： 1.找到当前节点的父节点或者祖先节点 2.将事件添加到你找到的这个父节点或者祖先节点上 3.找到触发对象，判断出发的触发.
2021-06-03 07:10:11
57
原创 Javascript(三十九)事件冒泡
事件流：事件流是描述从页面接收事件的顺序，当几个都具有事件的元素层叠在一起的时候，那么你点击其中一个元素，并不是只有当前点击的元素会触发事件，而层叠在你点击范围的所有元素都会触发事件。事件流包括两种模式：冒泡和捕获事件冒泡：现代浏览器默认情况下都是冒泡模式上图：我只点击box3 应该只是触发box3的事件处理函数，可是box2，box也跟着触发了。这就是由子元素冒泡形成从里到外的层级影响，也就是事件冒泡。下图可以看到，只有点击box的时候，才不会出现冒泡。因为box没有祖先元素了。注：这是浏览器天生
2021-06-03 07:01:38
77
原创 Javascript（三十八）事件对象和事件对象属性
事件对象事件绑定“元素节点.on+事件类型=匿名函数注：系统会在事件绑定一旦完成，生成一个事件对象普通函数：声明->调用->执行。function fn(){ console.log(1) } fn()事件处理函数：var obtn=document.getElementsByTagName('button')[0] obtn.onclick=function(){ console.log('事件处理函数') }注：触发事件的时候，系统会
2021-06-01 09:28:49
314
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人