半成熟、-CSDN博客

原创 javascript中的this用法

this 在javascript里面，this是一个特殊的对象，它不像其他编程语言那样，是存储在实例中的值，直接指向此实例。而是作为一个单独的指针，在不同的情况之下，指向不同的位置。 1、在一般函数方法中使用 this 指代全局对象 function hello(){ this.x = 1; console.log(this.x) } hello(); //此时控制台打印1 2.作为对象方法调用，this 指代上级对象 function hello(){ console.log(thi

2021-06-14 17:41:50 374 3

原创模板引擎的使用

模板引擎模板的诞生是为了将显示与数据分离，模板技术多种多样，但其本质是将模板文件和数据通过模板引擎生成最终的HTML代码。如图如下：模板引擎就是利用正则表达式识别模板标识，并利用数据替换其中的标识符。比如： Hello, <%= name%> 数据是{name: ‘木的树’}，那么通过模板引擎解析后，我们希望得到Hello, 木的树。模板的前半部分是普通字符串，后半部分是模板标识，我们需要将其中的标识符替换为表达式。模板的渲染过程如下：代码如下： function tmpl(str,

2021-06-14 17:25:51 385

原创登录注册界面如何判断输入的格式

一般网站都会有账号登录这个界面，而在输入完号码时，进行下一步或点击登录注册按钮时，若输入的号码不符合当前框的格式要求，一般会自动显示红字，显示输入的格式不正确。这方式一般用正则表达式来进行判断。正则表达式描述了一种字符串匹配的模式（pattern），可以用来检查一个串是否含有某种子串、将匹配的子串替换或者从某个串中取出符合某个条件的子串等。用人话说，正则表达式就是描述了一串数字的格式，格式能定义很多种，比如手机号格式、邮箱格式、密码6位数字到12位数字等等，也可以自己定义一串数字格式。 ...

2021-06-08 20:49:41 1046

原创 Vue基础

Vue是什么 Vue 是一套用于构建用户界面的渐进式框架。从历史的潮流来说，人们从之前的:原生JS -> Jquery之类的类库 -> 前端模板引擎 ,他们都有一个共同的特点需要我们去操作dom元素，vue 和这些不一样能够帮助我们减少不必要的DOM操作;提高渲染效。渐进式是什么渐进式就跟这个图片一样，开发可以根据需求，逐渐递增所要的方式，但每个方,式有不是依靠行特别强。 Vue的两个核心 1.响应式的数据绑定：当数据发生改变，视图可以自动更新，可以不用关心dom操作，而专心数据操作 2

2021-06-07 23:13:57 166 2

原创 AJAX

AJAX是什么 AJAX = Asynchronous JavaScript and XML（异步的 JavaScript 和 XML）。 AJAX 不是新的编程语言，而是一种使用现有标准的新方法。 AJAX 是与服务器交换数据并更新部分网页的艺术，在不重新加载整个页面的情况下。 AJAX技术 AJAX并非是一种新技术，是几种技术的组合。下列组合如下： 1.使用CSS和XHTML表示 2.使用DOM模型来交互和动态显示。 3.使用XMLHttpRequest来和服务器进行异步通信。 4.使用javascri

2021-04-25 19:59:04 96

原创用javascript实现简版2048小游戏

** 1、2048小游戏玩法和规则 ** 2048是一款休闲小游戏。 2048界面有16宫格，可以用键盘方向键选择上下左右四个方向进行操作，如果有相邻的两个数字相同就会合并，相加组成新数字，并且每次移动或合并后界面会自动增加一个数字。当16宫格中没有空格子，且四个方向都无法操作时，游戏会结束。目的是合并出2048这个数字，获得更高分数。 2、游戏界面截图 3、2048游戏实现原理 1、游戏界面由16宫格组成，可以看成是矩阵的形式。 2、在HTML中给每个格子添加类名以及属性，来记录每个格子的位置。 3、

2021-04-05 20:38:38 1865 4

原创 jquery和javascript的区别

** jquery和javascript的区别是什么 ** jquery 就对javascript的一个扩展，封装，就是让javascript更好用，更简单，为了说明区别，下面进行下JavaScript 与JQuery 常用方法比较 1、加载DOM区别 JavaScript： window.onload function first(){ alert('first'); } function second(){ alert('second'); } window.onload = first; windo

2021-04-05 20:10:40 1582

原创原型链的六种常见继承模式

一、原型链继承 function SuperType(){ this.colors = ["red", "blue", "green"]; } SuperType.prototype.Fun = function(){ }; function SubType(){ } //继承了SuperType SubType.prototype = new SuperType(); var instance1 = new SubType(); instance1.colors.push("black");

2021-04-05 11:08:55 2741

原创 JS原型链

一、原型构造函数构造函数是什么?构造函数与其他函数唯一的区别在于调用方式不同，任何函数只要通过new来调用久可以作为构造函数，它用来创造特定类型的对象。构造函数例子： function Female(name){ this.name=name; this.sex-'female'; } 通过new 命令来生成一个person实例： var person1=new Female(“Summer”) 这里，构造函数Female就是实例对象person1的原型！！！Female里的this关键字就指的是p

2021-04-05 11:01:17 81 1

原创 DOM基础

DOM是什么首先DOM全称 Document Object Model，即文档对象模型，它允许脚本(js)控制Web页面、窗口和文档。就是说DOM就是基于文档来执行的操作。也可以说DOM就是一张映射表，记录着一堆用代码操控document时的规章制度，直白点说，就是js操作html时的API。 HTML DOM树： DOM的基本功能 1.查询某个元素。 2.查询某个元素的祖先、兄弟以及后代元素。 3.获取、修改元素的属性。 4.获取、修改元素的内容。 5.创建、插入和删除元素。 DOM实际上是以面向对象

2021-04-04 16:09:56 264

原创原型与原型链

一、prototype 在JavaScript中，每个函数都有一个prototype属性，这个属性指向函数的原型对象。例如： function Person(age) { this.age = age } Person.prototype.name = 'kavin' var person1 = new Person() var person2 = new Person() console.log(person1.name) //kavin console.log(person2.n

2021-04-04 15:19:21 86

原创 JavaScript对象

JavaScript对象 JavaScript对象是基本数据类型之一，复合型数据； JavaScript中几乎所有事物都是作对象的； JavaScript的对象是拥有属性和方法的数据； JavaScript中的对象可以简单理解成“名称：值”对(name:value)。 JavaScript中的对象分类 1、内建对象：数据分装对象（object、object.prototype、Number、Boolean、String、Array、Function）；工具类对象（Math、Date、RegExp）；错

2021-04-04 14:41:57 80

原创 JavaScript中构造函数

**构造函数：**函数的另一种执行方法，执行后创建对象，并创建原型对象。 **原型链：**对象访问构造函数的指针。 **Function函数：**函数对象。 **Object函数：**所有创建对象的祖辈对象，也是由Function对象实现的。构造函数的特性： 1.构造函数声明时，语法与普通函数的完全一致， 2.在函数体中this指针不同 3.构造函数和普通函数相比，调用方式不同 4. 构造函数一般用作创建一个类，遵循C#的编码规范，首字母大写。 <!DOCTYPE

2021-04-04 13:29:23 141

原创闭包

1.闭包概念内部函数总是可以访问其所在的外部函数中声名的参数和变量，即使在其外部函数被返回（寿命终结）了之后。 2.闭包特点 1、让外部访问函数内部变量成为可能； 2、局部变量会常驻在内存中； 3、可以避免使用全局变量，防止全局变量污染； 4、会造成内存泄漏（有一块内存空间被长期占用，而不被释放）闭包创建闭包就是可以创建一个独立的环境，每个闭包里面的环境都是独立的，互不干扰。闭包会发生内存泄漏，每次外部函数执行的时候，外部函数的引用地址不同。都会重新创建一个新的地址。但凡是当前活动对象中有被内部子集引

2021-04-04 12:44:54 125

原创 jQuery

jQuery简介什么是jQuery？ js的插件库，也是javascript库, 全部都是函数并不是全新的东西与JS对比 JavaScript的入口函数要等到页面中所有资源（包括图片、文件）加载完成才开始执行。 jQuery的入口函数只会等待文档树加载完成就开始执行，并不会等待图片、文件的加载。 jQuery的特点 a.链式编程：原理：返回对象 b.隐式迭代：在方法的内部会为匹配到的所有元素进行循环遍历，执行相应的方法 jQuery对象与DOM对象的区别（1）DOM对象：使用JS方法获取页面元素返

2021-04-01 20:04:58 92

原创 JS作用域链

一、作用域在 Javascript 中，作用域分为全局作用域和函数作用域全局作用域：代码在程序的任何地方都能被访问，window 对象的内置属性都拥有全局作用域。函数作用域：在固定的代码片段才能被访问例如：作用域有上下级关系，上下级关系的确定就看函数是在哪个作用域下创建的。如上，fn作用域下创建了bar函数，那么“fn作用域”就是“bar作用域”的上级。作用域最大的用处就是隔离变量，不同作用域下同名变量不会有冲突。变量取值：到创建这个变量的函数的作用域中取值二、作用域链...

2021-03-01 20:03:55 83

原创魔方

魔方魔方效果主要用CSS3实现。效果如下：步骤：1.在HTML创建1个父级div，6个子级div，并加上颜色和数字。 2.搭建一个3D空间，如perspective: 800px。然后给父级div加上一个3D层，显示3D效果。 3.给每一面设置角度。如transform:translateY(-200px) transform:rotateX。调整成魔方状。 4.给前面4面设置观看的角度。如transform-origin:right。后面依次改成left、bottom、top。 5.给父级元素.

2021-01-25 19:42:46 290

原创点击产生随机图形

点击产生随机图形效果如下：用javascript来实现主要用canvas和随机函数完成各种图形第一步在HTML和CSS中创建出现图形的矩形和两个按钮。第一个按钮用来产生图形，第二个按钮用来清除产生的所有图形。 <style> *{ margin: 0; padding: 0; } #canvas{ border: solid 1px red;

2021-01-23 15:24:03 398 1

原创粒子效果

粒子效果粒子效果用javascript写在HTML中创建一个canvas，是整个屏幕的画布。 * { margin: 0; padding: 0; } #canvas { border: 1px solid red; } </style> </head> <body> <canvas id="canvas" width="" height=""></canvas> <

2021-01-23 11:29:54 247

原创手风琴动画

** 手风琴动画代码 ** 用javascript和css写简单的手风琴效果。 HTML部分： <body> <h2>手风琴动画</h2> <p>点击以下选项显示折叠内容</p> <button class="accordion">选项 1</button> <div class="panel"> <p>Lorem ipsum dolor sit amet, consectetur ad

2021-01-21 19:51:39 228

原创 js数组基础

1、什么是数组数组就是一组数据的集合其表现形式就是内存中的一段连续的内存地址数组名称其实就是连续内存地址的首地址 2、关于js中的数组特点数组定义时无需指定数据类型数组定义时可以无需指定数组长度数组可以存储任何数据类型的数据（比如说一个元素保存整型，一个元素保存字符串型，这个在JS中是可以的）创建数组的语法： var arr=[值1,值2,值3]; //隐式创建 var arr=new Array(值1,值2,值3); //直接实例化 var

2021-01-18 18:59:28 648

原创 JavaScript实现图片轮换效果

JavaScript实现图片轮换效果过程如下：在body中创建一个 div元素,在该div里定义两个图片,为图片添加超链接，并设置超链接标签 a 的name属性值为i。 <div id="tabs"> <a name="i" href="#"><img src="images/1.jpg" width="100%" height="350px" alt=""></a> <a name="i" href="#">&

2021-01-14 18:51:05 898 1

原创 JavaScript基础

## JavaScript基础知识 JavaScript是什么 Netscape在最初将其脚本语言命名为LiveScript，后来Netscape在与Sun合作之后将其改名为JavaScript。JavaScript最初受Java启发而开始设计的，目的之一就是“看上去像Java”，因此语法上有类似之处，一些名称和命名规范也借自Java。JavaScript与Java名称上的近似，是当时Netscape为了营销考虑与Sun微系统达成协议的结果。Java和JavaScript的关系就像张雨和张雨生的关系，只是名

2020-12-21 20:25:30 378

bs775926015的博客