
javaScript
Cao_Mary
这个作者很懒,什么都没留下…
展开
-
获取、监听hash值和路径值
1.获取hash值location.hash:hash 属性是一个可读可写的字符串,该字符串是 URL 的锚部分(从 # 号开始的部分)2.获取路径值location.pathname:pathname 属性是一个可读可写的字符串,可设置或返回当前 URL 的路径部分...原创 2020-10-09 17:48:08 · 1959 阅读 · 0 评论 -
ES6模块化使用方式
ES6之前javascript比较怂巴巴,没有模块化的概念,是ES6的新特性。本文主要介绍js模块化的使用。ES6模块化一、ES6模块化的第一种方式:1.1 使用方法1.2.注意点:注意点1的案例:解构赋值案例:注意点2案例:通过as修改接收的变量名称二、ES6模块化的第二种方式:2.1 使用方法2.2 注意点:三、两种方式混合使用一、ES6模块化的第一种方式:1.1 使用方法导出数据:...原创 2020-03-02 14:00:36 · 761 阅读 · 0 评论 -
javascript判断对象是否是空对象
使用javascript判断对象是否是空对象原创 2019-10-17 17:37:44 · 185 阅读 · 0 评论 -
less使用方法
1、less可以在node.js环境下运行2、less可以在浏览器中直接运行2.1、浏览器中运行方式一步骤:(1)编写less文件(2)引入less文件(3)引入less.js下载地址(4)运行//引用文件<link rel="stylesheet/less" href="css/index.less"><script src="js/less.min.j...原创 2019-05-17 17:40:55 · 1154 阅读 · 0 评论 -
属性和属性节点
1.什么是属性?属性就是对象身上保存的变量只要对象身上都可以添加属性(无论是自定义对象,还是DOM对象)// 1.自定义一个对象var obj = {};console.log(obj);// 2.动态给自定义对象添加属性obj.name = "lnj"; // name就是对象obj的一个属性obj.age = 33; // age就是对象obj的一个属性console.log...原创 2019-05-28 16:39:56 · 3608 阅读 · 1 评论 -
javaScript同PHP基础语法对比(快速掌握php基础语法)
写这篇文章是为了刚入门前端的童鞋快速了解一门后端语言,选择php是因为php的大部分语法同js很相似,可以快速掌握。本人使用php是为了快速实验ajax的一些基本原理。1.php基本格式<?php 所有php代码都必须写在这里?>2.注释1.JS中有两种注释(php的注釋和js长相、功能都相同)1.1单行注释: //1.2多行注释: /* */3.定义变量...原创 2019-06-14 13:19:21 · 851 阅读 · 0 评论 -
JSONP解决跨域问题
同源策略、跨域1.什么是JSONP?JSONP让网页从别的地址(跨域的地址)那获取资料,即跨域读取数据。本质上就是script标签2.JSONP实现跨域访问的原理2.1、在同一界面中可以定义多个script标签2.2、同一个界面中多个script标签中的数据可以相互访问<script>let test= 2; function demo() { con...原创 2019-06-21 17:15:51 · 232 阅读 · 0 评论 -
真伪数组的转化及apply/call/slice方法
此篇文章前半部分都在介绍真伪数组转换的涉及的相关js方法,原理。想要直接看真伪数组转化的具体方法可以直接看文章的最后一节“总结真伪数组的转换”。补充this的含义:this:谁调用就是谁例如:function test() { console.log(this);//打印window。this是谁调用就是谁.此时this是window}test();js的apply与ca...原创 2019-06-12 12:19:39 · 403 阅读 · 0 评论 -
简述进程、线程、串行、并行基本概念,便于快速理解
1.静态数据、动态数据静态数据:静态数据是指一些永久性的数据,一般存储在硬盘中。计算机关闭之后再开启,这些数据依旧还在,只要你不主动删掉或者硬盘没坏,这些数据永远都在静态数据一般是以文件的形式存储在硬盘上,比如文档、照片、视频等。动态数据:动态数据指在程序运行过程中,动态产生的临时数据,一般存储在内存中。计算机关闭之后,这些临时数据就会被清除当运行某个程序(软件)时,整个程序就会...原创 2019-06-24 14:25:51 · 904 阅读 · 0 评论 -
promise对象基本使用。——使用同步流程表示异步操作
0.为什么要介绍promise因为js是串行,单线程语言。是同步流程,代码只能顺序执行。(详见:简述进程、线程、串行、并行基本概念,便于快速理解)企业开发中为了保存异步代码的执行顺序, 那么就会出现回调函数层层嵌套如果回调函数嵌套的层数太多, 就会导致代码的阅读性, 可维护性大大降低promise对象可以将异步操作以同步流程来表示, 避免了回调函数层层嵌套(回调地狱)顺序打印:1,2,...原创 2019-06-24 15:56:03 · 1157 阅读 · 0 评论 -
Canvas基本使用1
1.什么是CanvasCanvas是H5新增的一个标签,我们可以通过JS在这个标签上绘制各种图案Canvas拥有多种绘制路径、矩形、圆形、字符以及图片的方法2.绘制基本步骤2.1.在body中创建一个canvas标签<canvas></canvas>canvas标签有默认的宽高,默认width=300,默认height=150不能通过CSS设置画布的宽...原创 2019-07-22 11:51:50 · 279 阅读 · 0 评论 -
设备(物理)像素和CSS(逻辑)像素
1.什么是设备像素和CSS像素?1.1、设备像素又称为物理像素, 是"物理屏幕"上真实存在的发光点,只有屏幕一经出厂就固定不会改变1.2、CSS像素又称为逻辑像素,是编程世界中虚拟的东西, 我们通过代码设置的像素都是逻辑像素例如:iPhone3G/iPhone3GS3.5英寸逻辑像素320*480设备像素320*480iPhone4/4S3.5英寸逻辑像素3...原创 2019-09-16 11:46:39 · 1284 阅读 · 0 评论 -
前端页面适配移动端常用方案
本文写作顺序是按照实际编写移动端适配的顺序编写的。想要充分理解,需要童鞋们有rem,像素,媒体查询,的基础知识。若顺序阅读理解较为困难。可以按照标题3、2、1的顺序阅读。理解困难,可留言。1.js添加如下三行代码——解决设备像素同逻辑像素不同的问题let scale = 1.0 / window.devicePixelRatio;let text = `<meta name="v...原创 2019-09-16 12:01:48 · 960 阅读 · 0 评论 -
适配移动端解决思路
阅读本文前,先了解一篇文章 移动端视口1.适配移动端方法一:PC+ 移动端使用媒体查询PC端,移动端使用媒体查询,使用同一套代码html头部添加<meta name="viewport" content="width=device-width, initial-scale=1.0">内容区域:采用媒体查询的方式布局页面。主要是通过查询设备的宽度来执行不同的css代码,最终达...原创 2019-09-16 12:41:10 · 397 阅读 · 0 评论 -
Javascript语法精讲——BOM
1.JavaScript-BOM开篇1.什么是BOM?DOM就是一套操作HTML标签的API(接口/方法/属性)BOM就是一套操作浏览器的API(接口/方法/属性)2.BOM中常见的对象window: 代表整个浏览器窗口注意: window是BOM中的一个对象, 并且是一个顶级的对象(全局)Navigator: 代表当前浏览器的信息, 通过Navigator我们就...原创 2019-05-16 15:47:50 · 257 阅读 · 0 评论 -
LESS基本概念+fullpage使用方法简介
一、less基础1.1、less开篇1.什么是CSS预处理器?CSS预处理器就是用某一种语言用来为CSS增加一些动态语言的特性(变量、函数、继承等。js就是动态语言。)CSS预处理器可以让你的CSS更加简洁,适应性更强,代码更直观等诸多好处简而言之:CSS预处理器就是升级版CSS2.常见的CSS预处理器Less、Sass、Stylus3.为什么需要les...原创 2019-05-21 11:22:18 · 777 阅读 · 0 评论 -
同时使用jQuery多个版本冲突(不同框架使用$符号,后使用的覆盖先使用的,引发冲突)
使用jquery和其他框架,都遇到$来写的更少,做的更多时,会出现冲突解决方案:1.释放$的使用权释放“$”的使用权: jQuery.noConflict();注意点:释放操作必须在编写其它jQuery代码之前写释放之后就不能使用“$”,只能使用“jQuery”2.自定义一个访问符号自定义一个访问符号: var nj = jQuery.noConflict(); 释放$符号...原创 2019-05-24 17:11:39 · 316 阅读 · 0 评论 -
ES6定义变量的let 同 ES6之前的var对比
为了解决ES6之前老版本标准中的两个问题1.在JavaScript中如果定义了同名的变量,那么后定义的变量会覆盖先定义的变量。2.在老版本的标准的(ES6之前)JavaScript中可以先使用变量再定义变量,并不会报错。在ES6中就推出了一种新的定义变量的方式推出了定义变量的新方法:let格式:- ES6之前:var 变量名称;- ES6之后:let 变量名称;举例var和...原创 2019-04-11 12:43:27 · 408 阅读 · 0 评论 -
JS局部变量、全局变量、局部作用域、全局作用域以及块级作用域结合ES6讲解
1.在JavaScript中定义变量有两种方式ES6之前:var 变量名称;ES6开始:let 变量名称;2.两种定义变量方式的区别详细介绍见https://blog.youkuaiyun.com/Cao_Mary/article/details/892076052.1、是否能够定义同名变量var可以定义,let不可以定义同名变量2.2、是否能够先使用后定义var可以先使用后定义(预解析),l...原创 2019-04-22 10:42:06 · 2141 阅读 · 4 评论 -
预解析详解——为什么var定义的变量,可以在定义之前使用?
1.什么是预解析?浏览器在执行JS代码的时候会分成两部分操作:预计西以及逐行执行代码也就是说浏览器不会直接执行代码,而是加工处理之后再执行这个加工处理的过程,我们就称之为预解析2.预解析规则2.1、将变量声明和函数声明提升到当前作用域最前面2.2、将剩余代码按照书写顺序一次放到后面3.注意点:通过let定义的变量不会被提升(不会被预解析)4.var同let定义的变量预解析va...原创 2019-04-22 17:27:26 · 1106 阅读 · 0 评论 -
Javascript语法精讲——ECMAScript(二)
7.JavaScript基础-流程控制-if7.1、JavaScript流程控制基本概念- 默认情况下,浏览器会按书写从上至下顺序执行程序中的每一行代码,但是这并不能满足我们所有的开发需求;- 为了方便我们控制程序的运行流程,JavaScript提供3种流程结构,不同的流程结构可以实现不同的运行流程。这3种流程结构分别是顺序、选择、循环三种基本控制结构构造。1、顺序结构:默认的流程...原创 2019-05-01 21:53:34 · 300 阅读 · 0 评论 -
Javascript语法精讲——ECMAScript(三)
10.JavaScript-面向对象10.1、JavaScript-面向对象基本概念1.面向过程:强调的是功能行为关注的是解决问题需要哪些步骤每一个具体步骤中我们都是参与方,并且需要面对具体的每一个步骤和过程。2.面向对象Object Oriented Programming-OOP将功能封装进对象,强调具备了功能的对象关注的是解决问题需要哪些对象3.从面...原创 2019-05-01 21:56:06 · 692 阅读 · 0 评论 -
Javascript语法精讲——ECMAScript(一)
1.JavaScript基础-基本概念1.1、什么是JavaScript?JavaScript简称JS,是前端开发的一门脚本语言(解释型语言)。解释型语言:程序执行之前,不需要编译就可以直接运行, 运行时再边解析边执行的语言编译型语言:程序执行之前,需要一个专门的编译过程,把程序编译成为机器语言的文件,比如exe文件。(C、JAVA、C++)为什么JS不需要编译就可以直接执行?...原创 2019-05-01 21:57:23 · 2882 阅读 · 0 评论 -
JavaScript遍历数组的方法
下面由浅入深讲解遍历数组的方法,着急的读者可以直接看方法三和方法四。可以快速使用。需求:要求遍历数组方法一:利用传统循环来遍历数组let arr = [1, 3, 5, 7]//定义数组,数组本质是对象 for (let i = 0; i < arr.length; i++){ console.log(arr[i]); }方法...原创 2019-04-29 18:01:27 · 3058 阅读 · 0 评论 -
JavaScript查找数组内的元素
需求:查找数组内元素6是否存在let arr = [1, 3, 6, 5, 7, 6];方法1、indexOf方法从左往右查找,找到返回索引,找不到返回-1let index1 = arr.indexOf(6);console.log(index1);//2方法2、lastIndexOf方法从右至左查找,找到返回索引,找不到返回-1 let index2 = arr.lastI...原创 2019-04-29 18:50:46 · 12724 阅读 · 0 评论 -
JavaScript添加事件的三种方式(鼠标点击事件)
布局html页面,放入一个button按钮即可。<button id="btn">我是按钮</button>获取button按钮var oBtn = document.getElementById("btn");点击按钮的三种方式方式一:给对象的属性赋值注意点:由于是将函数(function)赋值给了一个对象(oBtn)的属性(onclick),所以后赋值的...原创 2019-05-08 13:34:44 · 32146 阅读 · 0 评论 -
元素居中显示(div等元素居中显示的方法)
方法一:div{ width: 200px; height: 200px; background: salmon; position: absolute; left: 50%; margin-left: -100px; }缺点:方式一不适合编码,因为需要我们自己口算元素宽度的一半是多少。方法二:div{ width: 200px; height: 200px; bac...原创 2019-05-19 16:46:17 · 556 阅读 · 0 评论 -
Javascript语法精讲——DOM(宿主对象)
一、JavaScript——DOM宿主对象:JS运行环境提供的对象。DOM(Document Object Model):JavaScript操作网页上的元素(标签)的API- DOM可以把HTML看做是文档树,通过DOM提供的API可以对树上的节点进行操作1.1、JavaScript——DOM开篇1.什么是windowwindow:是一个全局对象,代表浏览器中一个打开的窗...原创 2019-05-09 23:10:04 · 758 阅读 · 0 评论 -
JavaScript网页滚动距离
不同浏览器获取网页滚动距离的方法不同浏览器在渲染网页的时候有两种模式:“标准模式(CSS1Compat)”、“混杂模式/怪异模式(BackCompat)”默认情况下都是以标准模式来渲染的,如果网页没有书写文档声明就会按照”混杂模式/怪异模式“来进行渲染文档声明:<!DOCTYPE html>1.IE9以及IE9以上的浏览器window.pageXOffset;//水...原创 2019-05-15 11:23:25 · 3036 阅读 · 0 评论 -
JavaScript获取网页的宽高
获取网页可视区域的宽高,分不同情况下共计三种方式:可视区域:当前浏览器窗口可见的部分,不包括可以滚动的区域。方法一:IE9及IE9以上的浏览器使用innerWidth、innerHeight可以获取网页可视区域的宽高console.log(window.innerWidth);//可视区域的宽console.log(window.innerHeight);//可视区域的高方法二:...原创 2019-05-10 18:58:21 · 606 阅读 · 0 评论 -
jQuery 变量
1.定义一个变量numvar num;2.定义一个变量num并赋值为2var num = 2;3.连续定义变量var num1, num2, num3;4.局部变量numfunction test() { var num = 2; console.log(num);}5.局部变量变为全局变量function test() { v...原创 2019-01-10 18:53:25 · 2180 阅读 · 0 评论