- 博客(24)
- 收藏
- 关注
RSS订阅原创 npm与包
npm与包Node.js 中的第三方模块又叫做包。搜索自己所需要的包 ：https://www.npmjs.com/下载自己需要的包：https://registry.npmjs.org/npm： 包管理工具node_modules 文件夹用来存放所有已安装到项目中的包。require() 导入第三方包时，就是从这个目录中查找并加载包。 package-lock.json 配置文件用来记录 node_modules 目录下的每一个包的下载信息，例如包的名字、版本号、下载地..
2020-10-18 20:30:55
187
原创 模块化
模块化遵守固定的规则，把一个大文件拆成独立并互相依赖的多个小模块。优点：提高了代码的复用性 提高了代码的可维护性 可以实现按需加载模块化规范： 降低沟通成本，方便模块间的相互调用模块作用域： 防止全局变量污染的问题module.exports 对象 在自定义模块中，可以使用 module.exports 对象，将模块内的成员共享出去，供外界使用。 外界用 require() 方法导入自定义模块时，得到的就是 module.exports 所指向的对象。...
2020-10-17 21:05:15
508
原创 初识Node.js （fs,path, http）
初识Node.js （fs,path, http） Node.js 的官网地址： https://nodejs.org/zh-cn/含义：Node.js 是一个基于 Chrome V8 引擎的 JavaScript 运行环境。注意：Node.js 中无法调用 DOM 和 BOM 等 浏览器内置 API。node.js很强大基于 Express 框架（http://www.expressjs.com.cn/），可以快速构建 Web 应用基于 Electron 框架（https://el
2020-10-17 20:45:05
279
原创 call、apply、bind三者的异同
call、apply、bind三者的异同 共同点 : 都可以改变this指向 不同点: call 和 apply 会调用函数, 并且改变函数内部this指向. call 和 apply传递的参数不一样,call传递参数使用逗号隔开,apply使用数组传递 bind 不会调用函数, 可以改变函数内部this指向. 应用场景 call 经常做继承. apply经常跟数组有关系. 比如借助于数学对象实现数组最大.
2020-09-23 16:49:31
367
原创 jQuery 尺寸、位置操作
jQuery 尺寸、位置操作1. jQuery 尺寸操作 <script> $(function() { // 1. width() / height() 获取设置元素 width和height大小 console.log($("div").width()); // $("div").width(300); // 2. innerWidth() / inn.
2020-09-22 22:09:27
162
原创 jQuery 元素操作
jQuery 元素操作1. 遍历元素语法1：$("div").each(function (index, demEle) { xxx; })each()方法遍历匹配的每一个元素 主要用DOM处理 each：每一个 里面的回调函数有2个参数 index是每个元素的索引号； demEle是每个DOM元素对象 所以要想使用jQuery方法，需要给这个dom元素转换为jQuery对象 $(domEle)注意：此方法用于遍历 jQuery 对象中的每一项，回调函数中元素为 ...
2020-09-22 21:58:35
200
原创 jQuery 文本属性值
jQuery 文本属性值1 jQuery内容文本值常见操作有三种：html() / text() / val() ; 分别对应JS中的 innerHTML 、innerText 和 value 属性，主要针对元素的内容还有表单的值操作。1.普通元素内容HTML() (相当于原生inner HTML)html() // 获取元素的内容html("内容") // 设置元素的内容2.普通元素内容text() (相当于原生inner Text)tex...
2020-09-22 19:27:36
1393
原创 jQuery 属性操作
jQuery 属性操作1.元素固有属性值 prop()所谓元素固有属性就是元素本身自带的属性，比如 <a> 元素里面的 href ，比如 <input> 元素里面的 type。获取属性语法prop（'属性'）设置属性语法prop('属性','属性值')注意：prop() 除了普通属性操作，更适合操作表单属性：disabled / checked / selected 等。 2 元素自定义属性值 attr()用户自己给元素添加的属性，我们称为
2020-09-22 19:16:01
118
原创 JSON简单总结
JSON简单总结什么是JSON？概念： JSON 就是 Javascript 对象和数组的字符串表示法，它使用文本表示一个 JS 对象或数组的信息，因此，JSON 的本质是字符串。作用：JSON 是一种轻量级的文本数据交换格式，在作用上类似于 XML，专门用于存储和传输数据，但是 JSON 比 XML 更小、更快、更易解析。JSON的两种结构JSON 中包含对象和数组两种结构JSON语法注意事项① 属性名必须使用双引号包裹② 字符串类型的值必须使用双引号包裹.
2020-09-22 18:45:59
136
原创 XMLHttpRequest的基本使用
XMLHttpRequest的基本使用XMLHttpRequest( 简称 xhr ) 是浏览器提供的JavaScript对象，通过它，可以请求服务器上的数据资源。1.使用xhr发起GET请求步骤 创建 xhr 对象 调用 xhr.open() 函数 调用 xhr.send() 函数 监听 xhr.onreadystatechange 事 // 1. 创建 XHR 对象var xhr = new XMLHttpRequest()// 2. 调..
2020-09-22 18:22:20
964
原创 jQuery杂记
jQuery杂记DOM对象与jQuery对象转换// 1.DOM对象转换成jQuery对象，方法只有一种var box = document.getElementById('box'); // 获取DOM对象var jQueryObject = $(box); // 把DOM对象转换为 jQuery 对象// 2.jQuery 对象转换为 DOM 对象有两种方法：// 2.1 jQuery对象[索引值]var domObject1 = $('div')[0]// 2.2...
2020-09-19 19:40:53
128
原创 ES6的内置对象扩展
ES6的内置对象扩展1.Array的扩展方法扩展运算符可以将数组或者对象转换为用逗号分隔的参数序列let ary = [1, 2, 3];...ary // 1, 2, 3console.log(...ary); // 1 2 3,相当于下面的代码console.log(1,2,3);扩展运算符可以应用于合并数组// 方法一let ary1 = [1, 2, 3];let ary2 = [3, 4, 5];let ary3 = [...ary1,...
2020-09-16 18:46:33
170
原创 es6新增语法
es6新增语法1.let特点：1.let关键字就是用来声明变量的2.使用let关键字声明的变量具有块级作用域if (true) { let a = 10;}console.log(a) // a is not defined注意：使用let关键字声明的变量才具有块级作用域，使用var声明的变量不具备块级作用域特性。 3. 在一个大括号中 使用let关键字声明的变量才具有块级作用域 var关键字是不具备这个特点的4.防止循环变量变成全局变量...
2020-09-16 14:26:44
122
原创 函数内部的this指向问题与改变函数内部 this 指向方法
函数内部的this指向问题调用方式 this指向 普通函数调用 window 构造函数调用 实例对象 原型对象里面的方法也指向实例对象 对象方法调用 该方法所属对象 事件绑定方法 绑定事件对象 定时器函数 window 立即执行函数 window 改变函数内部 this 指向方法：1.call方法call()方法调用一个对象。简单理解为调用函数的方式，但是它可以改变函数的 this 指向应用场景: 经常做继承...
2020-09-15 19:50:31
421
原创 仿小米logo
仿小米logo图片链接：https://www.mi.com/代码如下：<style> .header-logo { position: relative; } /* 设置a标签的样式 */ .logo { display: block; width: 55px; height: 55px; .
2020-09-12 09:07:30
594
原创 太极图
太极图图片如下直接上代码 简单粗暴<style> body { background-color: #ccc; } div { position: relative; width: 150px; height: 300px; background-color: #fff; ...
2020-09-12 09:00:49
712
原创 记住用户名
记住用户名 把数据存起来，用到本地存储 关闭页面，也可以显示用户名，所以用到localStorage 打开页面，先判断是否有这个用户名，如果有，就在表单里面显示用户名，并且勾选复选框 当复选框发生改变的时候change事件 如果勾选，就存储，否则就移除 <script> var username = document.querySelector('#username'); var remember = docum
2020-09-11 19:48:20
232
原创 元素可视区 client 系列
元素可视区 client 系列client概述：client 翻译过来就是客户端，我们使用 client 系列的相关属性来获取元素可视区的相关信息。通过 client 系列的相关属性可以动态的得到该元素的边框大小、元素大小等。具体如图所示：...
2020-09-11 19:39:20
117
原创 offset 与 style 区别
offset 与 style 区别一，什么是offset ？offset 翻译过来就是偏移量， 我们使用 offset系列相关属性可以动态的得到该元素的位置（偏移）、大小等。 获得元素距离带有定位父元素的位置 获得元素自身的大小（宽度高度） 注意：返回的数值都不带单位 具体如图所示：offset 与 style 区别offset offset 可以得到任意样式表中的样式值 offset 系列获得的数值是没有单位的 ..
2020-09-11 19:35:31
651
原创 history对象
history对象window对象给我们提供了一个 history对象，与浏览器历史记录进行交互。该对象包含用户（在浏览器窗口中）访问过的URL。history对象方法 作用 back() 后退功能 forward() 前进功能 go(参数) 前进后退功能 参数如果是1 前进1个页面 如果是-1 后退1个页面 history对象一般在实际开发中比较少用，但是会在一些 OA 办公系统中见到。...
2020-09-11 19:25:41
107
原创 禁止选中文字和禁止右键菜单
禁止选中文字和禁止右键菜单1.禁止鼠标右键菜单contextmenu主要控制应该何时显示上下文菜单，主要用于程序员取消默认的上下文菜单//1.contextmenu我们可以禁用右键菜单document.addEventListener('contextmenu',function(e){e.preventDefault();})2.禁止鼠标选中(selectstart 开始选中)...
2020-09-11 18:58:10
312
原创 innerTHML和createElement效率对比
创建元素的三种方式 效率对比innerHTML字符串拼接方式（效率低）createElement方式（效率一般）innerHTML数组方式（效率高） <script> // 三种创建元素方式区别 // 1. document.write() 创建元素 如果页面文档流加载完毕，再调用这句话会导致页面重绘 var btn = document.querySelector('button'); ...
2020-09-11 18:47:07
273
原创 事件委托
什么是事件委托事件委托也称为事件代理，在 jQuery 里面称为事件委派。（说白了就是，不给子元素注册事件，给父元素注册事件，把处理代码在父元素的事件中执行。 ）事件委托的原理给父元素注册事件，利用事件冒泡，当子元素的事件触发，会冒泡到父元素，然后去控制相应的子元素。事件委托的作用 我们只操作了一次 DOM ，提高了程序的性能。 动态新创建的子元素，也拥有事件。 <ul> <li>知否知否，点我应有弹框在手！</
2020-09-11 18:28:43
100
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人