- 博客(76)
- 收藏
- 关注
RSS订阅原创 js 原型 + 原型链篇
原型定义： 原型是function对象的一个属性，它定义了构造函数制造出的对象的公共祖先。通过该构造函数产生的对象，可以继承该原型的属性和方法。原型也是对象。// Animal.prototype --原型// Animal.prototype = {} 是祖先Animal.prototype.Type = "mammal";function Animal() {}var dog = new Animal();var cat = new Animal();//控制台输
2021-01-12 14:11:24
155
原创 js 命名空间 + 对象枚举篇
命名空间作用： 管理变量，防止污染全局，适用于模块化开发。老版本的命名空间（对象解决命名空间）var org = { department1 : { wangjie : { name : "abc", age : 123 }, liangyunhu : { } }, department2 : { zhangsan : { },
2021-01-12 14:10:37
169
原创 js 继承模式篇
JS 继承模式继承发展史传统形式 ---- 原型链缺点： 过多的继承了没用的东西。不太实用。借用构造函数例如使用 call ( ) / apply ( ) 设置this的指向，来达到借用其他构造函数中的方法的目的。形似继承，实则不是缺点： 不能继承借用的构造函数的原型 每次构造函数都要多执行函数，因为使用call/apply时，被借用的构造函数也会执行。共有原型Father.prototype.lastName = "deng";function Fa
2021-01-12 14:03:13
102
原创 js 构造函数 + 包装类篇
构造函数例：var animal = new Object()animal.name = "阿虎";animal.sex = "male";//构造函数并不是一定为Object(),可以自己写构造函数，但是要遵循大驼峰规则，方便辨认function FoodList() { this.name = "meat"; this.color = "red"; this.money = 100; this.top = function () { thi
2021-01-12 13:59:25
173
1
原创 js call + apply 篇
call（） / apply（）作用 修改this的指向。call（） 任何方法后都可以加 .call( )//效果相同test() ----> test.call() 当 call( ) 括号中有参数时，他会将前面的方法中的所有的this指向都修改为括号中的第一个参数。其余参数作为实参传入。//使用call()借用别人的函数，完成自己的功能。function Person(name, age){ //this == obj this.name =
2021-01-12 13:54:59
65
原创 js 闭包篇
JS闭包相关要点内存泄漏过多的占用系统内存的行为，相当于攥着一团湿毛巾，流失的水越多，剩余的水越少，相当于内存剩余越少。何为功能一个真正的功能不应该依赖于外部的东西，自己本身就应该能独立完成这个事儿，这样的功能才是一个真正完整的功能。例：//一个简易累加器var count = 0;function test(){ count ++; console.log(count);}test();test();test();//输出123//该功能依赖
2020-12-22 09:22:11
109
原创 表单post请求小例
HTML 页面<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>04-http_post</title></head><body> <fieldset> <legend><h2>HTTP_POST请求</h2></lege
2020-12-11 11:36:21
144
原创 上传文件小例
html 页面<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>06-uploadFile</title></head><body> <!-- form表单文件上传 注意: 1. 请求方式必须是post 2. 传递数据的格
2020-12-10 09:10:51
116
1
原创 request小例
html 页面<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>05-http_request</title></head><body> <fieldset> <legend><h2>表单1-get请求</h2></lege
2020-12-10 09:10:12
192
原创 表单get请求小例
html 页面<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>03-http_get</title></head><body> <fieldset> <legend><h2>HTTP_GET请求</h2></legend&
2020-12-09 11:36:44
253
原创 events+http 模块续篇
events 模块详解注：events模块, 是node里众多模块的基类, 如http模块, fs模块, 都是events模块的子类，那就意味着, 如http, fs这些模块就会 拥有events模块的属性和方法, 可以直接调用events模块的这些属性或者方法.node里对同一个事件设置的监听者的数量有限制吗???默认 一个事件 最多设置10个监听者, 如果超过10个, 需要通过setMaxListener提高最高限制, 如果不提高, node提示可能会造成内存问题event.set
2020-12-09 11:35:11
291
1
原创 Module+exports+Package 简介篇
Module 模块模块化是NodeJS的核心思想之一Node允许我们在一个js文件里引入另外的js文件模块: 本质上就是一个文件, 大部分是js文件. 也可以是json文件实现原理: nodeJS的模块化遵循的是CommonJS规范CommonJS 规定了JS模块所需的语法规则require() 作用: 引入其他模块exports 对象, 作用: 作为当前模块的唯一出口对象当引入自定义的模块时, 路径以./开头, 而且系统会帮助我们省略后缀const stu = req
2020-12-09 10:03:52
600
原创 Http+fs+events+url+path 模块篇
HTTP模块http模块, 我们可以通过该模块,维护一个服务器步骤引入模块const http = require("http");创建服务对象, 并设置监听的回调函数const server = http.createServer(function (req, res) { // 该函数会在前端请求本服务器时触发, req 请求对象, 存储本次请求的所有数据; res 响应对象, 用于对本次请求做响应 console.log("服务器被请求了...");
2020-12-09 10:03:20
203
原创 Nodejs 初识篇
Nodejs 基础什么是nodejsNode.js 不是变成语言, 只是javascript的一个编译环境, 我们在这个环境里还是写javascript之前的javascript是依托于浏览器存在的, 无法单独运行，js缺少一些I/O操作Node里有 模块化的 概念 Node把每一类功能都封装成了一个模块(文件) node里采用了CommonJS规范Node为我们提供了 npm(包管理器). 可以让我们快速方便的管理第三方库喜欢处理高并发, 低逻辑运算的请求nodejs的特点非阻塞式
2020-12-09 10:02:48
122
原创 ES6 基础篇
ES6基础letES6中用来定义一个块级作用域变量，该变量的作用域只能作用于当前定义的块级范围。let定义的变量自带有一个检索，如果发现同一个作用域出现了两个同名变量的定义，此时会直接报错。从而保证变量定义的安全性。let age = 21;const用来定义一个常量，即在程序运行过程中不允许被修改的量const PI = 3.14;解构赋值赋值运算符左右两个结构完全一致，此时ES6会根据结构，将右侧对应结构的数据赋值给左侧对应结构的变量let a = 20;let b = 30
2020-12-09 08:28:14
100
原创 面向对象中的重点概念（JS相关）篇
面向对象中的重点概念注:JS推荐 在创建构造函数时, 在构造函数里只写不同的属性或者方法, 公共的属性或者方法不要写到构造函数里, 而是写给构造函数的原型对象!!!本文举例所用构造函数：function Student(name, age, sex) { this.name = name; this.age = age; this.sex = sex; };}var stu1 = new Student("张三", 20, "男");var stu2 = ne
2020-12-09 08:26:59
70
原创 面向对象初识（JS相关）篇
面向对象面向过程和面向对象对比面向过程编程(OPP): 以事件为中心, 侧重于完成整个需求所需的步骤代表语言:C语言面向对象编程(OOP): 以事物为中心, 侧重于完成整个需求的事物的特征和行为代表语言: Java, Objective-C, C++举例： 把大象装冰箱面向过程的思路：把冰箱门打开把大象装进去把冰箱门关上面向对象的思路：大象:(特征/属性:重量, 尺寸… ;行为/方法:走, 吃, 睡, 跑, 打架… )冰箱:(特征/属性:品牌, 价格, 颜色,
2020-12-09 08:26:32
65
原创 跨域及JSONP解决跨域
跨域什么是跨域？当一个请求的url的协议, 域名, 端口三者任意一个与当前页面url不同即为跨域例：<tr> <td>http://www.test.com/</td> <td>http://www.test.com/index.html</td> <td>否</td> <td>同源(协议, 域名, 端口一致)</td></tr><
2020-12-09 08:25:37
95
原创 JSON数据结构
JSON 数据结构基础JSON是什么？json本质上是一段字符串, 只不过是一种有固定语法写法的字符串，由于曾经的XMLXML 可扩展标记语言被设计用来传输和存储数据，不同于HTML，它用自定义的标签来存储数据，而不是预定义的html标签。例如：<student> <name>wj</name> <age>22</age> <sex>男</sex></student>
2020-12-08 14:34:59
264
原创 AJAX 基础篇
AJAX基础action属性: 发起请求时的服务器地址method属性: 发起网络请求 的方式(GET/POST)表单控件的name属性: 当提交数据时, 键值对的key值, 会与控件的value值拼接成键值对(key=value)传递到服务器<form action="http://127.0.0.1/AJAX01/server.php" method="get"> <input type="text" placeholder="请输入用户名" name="usern
2020-12-08 14:33:46
92
原创 JQ 元素创建插入删除篇
JQ 动态操作元素js写法：创建:createElement(),插入:appendChild()/insertBefore()删除: removeChild()JS的步骤创建元素 createElement设置所需要的属性或者样式插入到当前文档中JQ动态操作元素属性JQ在动态操作元素的整个过程中, 弱化了创建元素的步骤, 我们着重关心的是如何添加元素到文档创建元素, $()传入htmlstring 用于创建元素var jqDiv
2020-12-08 14:28:43
159
原创 JQ 事件篇
JQ 事件JQ的事件绑定jq对象 . 事件名( 回调函数 )$().click(function(){});//例：$("#div1").click(function(e){ var even = e || event; console.log("div1的事件触发!", even);});jq对象 . on()JQ推荐的 绑定事件的方式$().on()on() 基础绑定事件语法：$().on(“事件类型”, 回调函数);$("#div1").on
2020-12-08 14:28:14
136
原创 JQ 节点关系查找元素篇
JQ 通过节点间关系查找元素parent()查找节点的父节点 parent()$("#div3").parent().css("background-color", "#0000FF");parents()查找节点的所有直系祖先节点 parents()，还可以通过给parents()传入选择器进一步对要获取的祖先元素做筛选$("#div7").parents().css("background", "#0000FF");$("#div7").parents(".aaa").c
2020-12-08 14:27:40
343
原创 JQ 获取元素尺寸+方法的扩充篇
JQ获取元素尺寸获取元素的尺寸width(), height()返回的是元素的宽度和高度(不包含padding, border, margin)console.log($("#div3").width(), $("#div3").height());innerWidth(), innerHeight()返回元素的宽度和高度(包含padding, 不包含border和margin)console.log($("#div3").innerWidth(),$("#div3").inne
2020-12-08 14:26:14
160
原创 JQ 操作属性内容篇
JQ操作DOM获取元素js写法：getElementxxxx等方法, querySelector等方法jq写法: $(“选择器”)操作元素内容js写法: innerHTML, innerText, textContent, valuejq写法: html(), text(), val()jq对象.html() 相当于innerHTMLjq对象.text() 相当于innerTextjq对象.val() 相当于value注：html()在设置时, 如果jq对象里有多个do
2020-12-08 14:25:33
226
原创 JQ 操作class+动画篇
JQ 基础续JQ操作classjs操作classDOM元素 . classNamevar div1 = document.querySelector("div");div1.className = "bgc fontS fontC";div1.className = "fontS";JQ操作class设置classJq对象.addClass("class名1 class名2 ...");Jq对象.addClass(function(){});删除classJq对象
2020-12-08 14:16:32
739
原创 JQ css操作+与DOM转换+伪类选择器篇
JQ 基础Jquery 是对javascript的封装库, 可以让书写JS更快速更高效jq 1.x.x 支持低版本的ie浏览器jq 2.x.x 不支持低版本的ie 较稳定的版本jq 3.x.x 也不支持ie低版本JQ获取元素语法:$(“选择器”);返回值: 是一个jquery对象**注：**只要通过$()方法, 得到的一定是一个jq对象, 而不是dom元素或者元素的集合;jq对象 有自己的方法和属性, 如果当前得到的是一个jq对象, 那么只能去使用jq提供的方法和属性, 不能
2020-12-08 14:12:45
333
原创 JS 文档加载事件 + this指向修改篇
js书写位置script标签 并不是只能写到body里面的最后面, 也可以写到head里或者其他位置如果script标签里有操作当前文档dom的代码, 且这些代码可能先于html元素的代码执行. 此时, script标签要写到body里面的最后面; 除此之外的script标签可以放到其他地方文档加载事件load事件这是js提供的原生文档加载事件, 该事件会在整个文档加载完毕之后触发window.onload = function(){console.log(document.getEl
2020-12-08 14:10:55
278
原创 摄影网站推荐
ZCOOL站酷（变现快）https://www.zcool.com.cn/图虫网（简约风格）https://tuchong.com/CNU视觉联盟（胶片摄影）http://www.cnu.cc/500PX （国外摄影网站）https://web.500px.comhttps://500px.me/(国内版)magnum photos(世界级很牛)https://www.magnumphotos.com/1X(质量很高)https://beta.1x.com/..
2020-10-15 16:50:40
332
原创 JS Localstorage篇
Localstorage基础H5新增特性作用：本地存储, 解决了cookie存储空间不足的问题 cookie中每条cookie的存储空间只有4k，localStorage一般支持5M, 不同浏览器里localStorage可能会有不同优点：拓展了cookie的4k的限制localStorage就相当于前端的5M的数据库劣势：浏览器的大小不统一, 并且在IE8以上的浏览器才支持localStorage存储的数据的类型 默认都会转成string, 以后我们如果要存储复杂的数据结
2020-09-23 16:26:40
320
原创 JS 正则表达式篇
正则表达式h5给input新增了pattern属性, 用户直接传入正则规则对输入框的数据进行判断, 只适用于 type值为 text, password, url, email, search, tel值得input还可以配合title属性 来给用户提醒以帮助用户<form action="javascript:void(0)" method="post"> <input type="text" pattern="[\w]{6}" title="输入内容只能是大小写字母和
2020-08-06 00:07:48
393
原创 JS cookie篇
Cookie知识点: 数据持久化cookielocalStorage(H5提供的新的数据持久化方案)cookiecookie, 有使用cookies, 这是服务器保存在浏览器端的数据片段, 以键值对(key=value)的形式进行保存, 每次浏览器向客户端发起请求时, 会自动携带cookie 将其传递给服务器; 简单来说, cookie是服务器留给计算机用户浏览器端的小文件(字符串)HTTP协议(超文本传输协议)该协议是一个无状态协议, 每次浏览器向服务器发起请求时, 服务器没
2020-08-06 00:07:15
194
原创 JS 移动端篇
JS 移动端事件源对象:真正触发该事件的源头对象, 最终指向的是html元素。事件是会传播的 —> 事件代理, 利用事件冒泡的特点。box.onclick = function(e){ // 获取事件源对象 事件对象.target var even = e || event; console.log(even.target, this);}移动端优先级较高的事件：来电, 闹铃, 事件提醒移动端常用事件ontouchstart 开始触摸
2020-08-06 00:06:41
786
原创 JS BOM基础篇
BOM基础BOM: Borwser Object Model JS的浏览器对象模型, 主要用于客户端浏览器的管理BOM概念比较古老, 但是一直没有被标准化, 不过现在基本上主流浏览器都支持BOM, 也都遵循最基本的规则, W3C也将BOM的主要内容纳入了HTML5的规范BOM 是由一系列的对象组成的, 每个对象负责一类事务而BOM里的核心对象 是 window对象; 该对象既是核心对象也是顶层对象, 其余的对象都是由window延伸出来的由window延伸出来的对象:docu
2020-08-06 00:06:18
200
原创 JS 变量提升机制篇
JS 变量提升机制JS中, 系统会把所有的函数和变量的声明提升到其作用域的最上面这个提升 我们是感知不到的, 可以理解为, 系统"悄悄的"被提升到其作用域的最顶部造成的后果:变量可以先使用, 后声明; 同理, 函数也可以先调用, 再声明注意:变量提升, 提升的只是变量的声明, 其初始化不会被提升函数声明提升时, 函数体本身会被提升到其作用域的最上面, 但是, 函数表达式在执行时则不然, 只会提升变量, 不会提升函数体; 只是变量做提升, 暂时赋值为undefined, 原来赋值的函数和其
2020-07-27 14:25:33
109
原创 JS 事件篇
事件JS是一门以事件为驱动的脚本语言. 我们想要执行任何逻辑, 都需要借助事件为对应的触发条件.当一个事件被触发后, 系统会收集与该事件有关的所有数据信息, 并自动为我们创建一个 “事件对象”, 该对象里存储了所有与该事件有关的数据. 我们只需要获取既可. 在事件触发的函数里, 直接获取event既可注意: 部分火狐浏览器不支持event对象写法. 想要兼容, 火狐浏览器会把事件对象当做形参赋值给触发函数的第一个参数, 我们只需要在声明事件触发函数的时候给函数添加一个参数即可.例：//
2020-07-27 14:25:08
96
原创 JS dom基础三 操作元素尺寸位置+瀑布流
DOM基础续DOM还可以让我们不通过样式 还可以直接获取元素的尺寸和位置以下属性可以帮助我们直接获取元素的尺寸和位置, 可以直接通过DOM元素节点通过点语法获取.尺寸内尺寸clientWidth = width + 左右的paddingclientHeight = height + 上下的padding外尺寸offsetWidth = width + 左右的padding + 左右borderoffsetHeight = height + 上下的padding + 上下bo
2020-07-24 01:01:14
194
原创 JS dom基础二 操作节点属性+操作元素样式+动态增删节点篇
DOM基础续操作元素节点的属性通过点语法操作元素的属性 元素.style 元素.src 元素.value 元素.href通过点语法操作元素的属性, 这种写法是兼备读写性的点语法操作元素的属性存在的问题:需要分别到底是读还是写, 因为读写的语法是一样的;有些属性获得值与设置的值不一致. e.g: 元素的src属性;我们在设置属性时, 如果属性名没办法直接通过点语法写出来, 而是间接获取的; 或者需要的属性名是一个字符串. 这些情况都无法使用点语法操作属性.setAttribu
2020-07-24 01:00:20
111
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人