JavaScript
文章平均质量分 65
HansMa
一个还没对象的头顶掉毛程序猿大叔。
展开
-
JavaScript复习之数据类型
简单数据类型typeof获取变量的类型JavaScript共有六种类型的数据类型var age = 18;console.log(typeof age); // 'number'Number类型数值字面量:数值的固定值的表示法110 1024 60.5进制如果字面值中的数值超出了范围,那么前导零将被忽略,后面的数值将被当作十进制数值解析二进制...原创 2018-07-28 19:20:30 · 175 阅读 · 0 评论 -
JavaScript 面向对象之三:继承
什么是继承现实生活中的继承程序中的继承所谓的继承,其实就是在子类(子对象)能够使用父类(父对象)中的属性及方法;赋予后辈调用祖辈资源的权限,就是继承;原型链继承//声明构造函数Runfunction Run(){ this.p = function(){ console.log(this.name+'跑'); }}//声明构造函数Manfunc...原创 2018-08-19 20:50:48 · 170 阅读 · 0 评论 -
JavaScript 面向对象之四:作用域链
函数作为值重新认识 JS 的数据类型Number(数字)String(字符串)Boolean(布尔)Symbol(符号)(第六版新增)Object(对象)Function(函数)Array(数组)Date(日期)RegExp(正则表达式)Null(空)Undefined(未定义)null 与 Undefined都表示空,没有等含义历史原因:...原创 2018-08-19 21:16:05 · 203 阅读 · 0 评论 -
JavaScript 面向对象之五:闭包与this指向
闭包关于作用域的问题var n = 999;function f1() { console.log(n);}f1() // 999函数内部可以直接读取全局变量,函数 f1 可以读取全局变量 n。但是,在函数外部无法读取函数内部声明的变量。function f1() { var n = 99;}f1();console.log(n);...原创 2018-08-21 11:26:44 · 284 阅读 · 0 评论 -
前端的优化与JQuery懒加载
做前端的时候,把实现不了的效果切换成图片还有一些图标也会切成图片,会降低前端页面展示的性能,增加页面资源HTTP的请求,甚至有的页面存在几十个img的http请求 。1、降低图片的大小 首先我们目前常用的图片格式有png,gif,jpg等 是降低图片的大小kb,有很多方法可以做,压缩图片,选择更小kb的图片格式,以达到最优的显示效果 智图:一个图片优化平台...原创 2018-08-29 20:27:15 · 6065 阅读 · 2 评论 -
JQuery基础总结
JQuery选择器基本选择器(重点)• #id:根据元素的id属性来获取元素 • .class:根据元素的class属性来获取元素 • Element:根据元素的名称来获取元素 • selector1,selector2:群组选择器,可以同时匹配多个元素示例代码:<script> //定义页面载入事件 window.onload =...原创 2018-09-04 21:14:19 · 140 阅读 · 0 评论 -
商品图片放大镜的前端案例
优化原因现在的电商商城项目解决的主要是购买商品的问题,那么购买商品主要要看清楚商品表面外形的主要特征和细节,如果图片处理过小,或者细节过于模糊,就需要做一个商品高清图片放大局部的功能。技术关键点左侧和上侧距离,在一个水平位置和垂直位置中有我们可以挪动的区域,就是原图片区域,鼠标挪动位置是一个块状位置,他的左侧和上侧距离浏览器上侧和左侧分别有一个长度,我们叫它们 ClientX 和 Cl...原创 2018-10-03 08:02:29 · 1787 阅读 · 0 评论 -
前端案例之视频弹幕
基础版本&lt;!DOCTYPE html&gt;&lt;html lang="en"&gt;&lt;head&gt; &lt;meta charset="utf-8"&gt; &lt;style&gt; * { margin: 0; padding:原创 2018-10-11 20:16:25 · 1928 阅读 · 0 评论 -
切割轮播的前端案例
效果代码&lt;!DOCTYPE html&gt;&lt;html lang="en"&gt;&lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;Document&lt;/title&原创 2018-10-11 20:56:12 · 253 阅读 · 0 评论 -
JavaScript异形滚动轮播
运动过程研究让每个元素走到前一个标签的位置。3走到22走到11走到00走到6利用js动态获取每个类名对应的css样式对象,组成一个新数组。// 定义一个新数组,接收每个位置的css样式对象var styleArr = [];// 遍历数组添加样式对象for (var i =0; i <$('li').length; i++) { styleArr.push({ "...原创 2018-10-11 21:32:41 · 1732 阅读 · 0 评论 -
JavaScript 面向对象之一:构造函数
构造函数意义JavaScript 语言使用构造函数作为对象的模板。 所谓 ”构造函数”,就是一个函数,专门用它来生成对象;类似与Java中类的作用; 它提供模板,描述对象的基本结构。 一个构造函数,可以生成多个对象,这些对象都有相同的结构。function Person (name, age) { this.name = name this.age = age thi...原创 2018-08-13 21:25:02 · 181 阅读 · 0 评论 -
JavaScript 面向对象之二:原型链
构造函数的 prototype属性JavaScript 的每个对象都继承另一个父级对象,父级对象称为 原型 (prototype)对象。原型也是一个对象,原型对象上的所有属性和方法,都能被子对象 (派生对象) 共享 通过构造函数生成实例对象时,会自动为实例对象分配原型对象。 而每一个构造函数都有一个prototype属性,这个属性指向实例对象的原型对象。 null没有自己的原...原创 2018-08-15 10:05:15 · 124 阅读 · 0 评论 -
JavaScript复习之数据类型转换
转换成字符串toString()var num = 5;console.log(num.toString());String()var s = null;console.log(s.toString());console.log(String(s));// String()函数存在的意义:有些值没有toString(),// 这个时候可以使用String()。比如:un...原创 2018-07-28 19:23:42 · 124 阅读 · 0 评论 -
JavaScript复习之JavaScript特殊循环
下面总结一下与其他语言不同的循环语法。do…while 循环 do..while循环和while循环非常像,二者经常可以相互替代。 但是do..while的特点是不管条件成不成立,都会执行一次。do { // 循环体;} while (循环条件);案例:计算1+2+3+4+……+99+100 的结果// 初始化变量var i = 0;var sum =...原创 2018-07-28 19:33:59 · 90 阅读 · 0 评论 -
JavaScript复习之对象
什么是对象万物皆对象现实生活中:万物皆对象,对象是一个具体的事物,一个具体的事物就会有行为和特征。举例: 一部车,一个手机车是一类事物,门口停的那辆车才是对象特征:红色、四个轮子行为:驾驶、刹车JavaScript中的对象JavaScript中的对象其实就是生活中对象的一个抽象JavaScript的对象是无序属性的集合。其属性可以包含基本值、对象、数组或函数。对...原创 2018-07-28 19:43:36 · 120 阅读 · 0 评论 -
JavaScript复习之特殊的对象-数组
数组的创建// 字面量方式创建数组var arr1 = []; //空数组// 创建一个包含3个数值的数组,多个数组项以逗号隔开var arr2 = [1, 3, 4]; // 创建一个包含2个字符串的数组var arr3 = ['a', 'c']; console.log(arr1);console.log(arr2);// 构造函数方式创建数组var a1 = new ...原创 2018-07-28 19:49:10 · 220 阅读 · 0 评论 -
JavaScript复习之函数
把一段相对独立的具有特定功能的代码块封装起来,形成一个独立实体,就是函数,起个名字(函数名),在后续开发中可以反复调用 函数的作用就是封装一段代码,将来可以重复使用函数的声明及调用声明关键字声明function 函数名(){ // 函数体}表达式声明var fn = function() { // 函数体}特点:函数声...原创 2018-07-28 19:55:15 · 143 阅读 · 0 评论 -
JavaScript复习之作用域与运行原理
作用域: 变量可以起作用的范围和区域。 不使用 var 声明的变量是全局变量,不推荐使用。 变量退出作用域之后会销毁,全局变量关闭网页或浏览器才会销毁变量提升console.log(a); // undefinedvar a = 2;console.log(a); // a is not defined变量提升定义变量的时候,变量的声明会被...原创 2018-07-28 20:03:00 · 166 阅读 · 0 评论 -
JavaScript复习之内置对象
对象在底层讲实际上是带有属性和方法的特殊数据类型Math对象使用Math 是一个内置对象, 它具有数学常数和函数的属性和方法。不是一个函数对象。与其它全局对象不同的是, Math 不是一个构造器. Math 的所有属性和方法都是静态的. 跟数学相关的运算直接使用Math中的成员即可Math对象的属性(常量) 属性(常量) 描述 Math....原创 2018-07-28 20:15:52 · 190 阅读 · 0 评论 -
JavaScript复习之文档对象模型
JavaScript 操作文档对象模型 (DOM)基本概念 DOM 是 JavaScript 操作网页的接口,全称为文档对象模型(Document Object Model)。 它的作用是将网页转为一个 JavaScript 对象,从而可以用脚本对树形文档进行各种操作。 节点DOM 的最小组成单位叫做节点 (node)。文档的树形结构(DOM树),就是由各种不同类型的节点组...原创 2018-07-29 20:11:14 · 299 阅读 · 0 评论 -
JavaScript之正则表达式应用
正则表达式几个重要的概念子表达式 在正则表达式中,通过一对圆括号括起来的内容,我们就称之为“子表达式”。如: var reg = /\d(\d)\d/gi;捕获 在正则表达式中,子表达式匹配到相应的内容时,系统会自动捕获这个行为, 然后将子表达式匹配到的内容放入系统的缓存区中。我们把这个过程就称之为“捕获”。 反向引用 在正则表达式中,我们可以使用\n(n&gt;0...原创 2018-08-14 19:58:56 · 491 阅读 · 0 评论 -
JavaScript贪吃蛇游戏源码
蛇对象属性:方向、一组蛇节(div,div,div)、地图、食物方法:生成蛇,增加蛇头,计算新蛇头的位置,蛇移动食物对象属性:横向位置、纵向位置、div元素、地图方法:随机位置游戏对象属性:蛇,食物 方法:开始<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8...原创 2018-10-09 20:57:06 · 7596 阅读 · 3 评论