前端小布丁-CSDN博客

原创面向对象操作符

instanceof : 判断一个实例对象是否是某一个函数实例语法：对象名 instanceof 函数名 function Animal(){ this.name = "join"; } Animal.prototype.sex = "男"; Animal.prototype.eat = function(){ console.log(...

2020-02-08 16:42:12 152

原创面向对象—传址和传值

复杂的数据类型—传址：赋值数据类型会出现传址情况（传递了数据和地址，共享了一块内存空间）浅拷贝：没有拷贝地址节省内存，但是因为共享内存，所有相互影响数据let DadPro ={ name:"张三", age:"20", sex:"男",} let SonPro = DadPro;SonPro.name ="李四";// console.log(SonPr...

2020-02-08 15:18:29 201

原创面向对象—原型链及组合继承

原型链：当我们访问对象的一个属性和方法时，他会先在对象中寻找，如果有直接使用，如果没有则会去原型对象中寻找，如果找到则直接使用，如果还没有则去原型中寻找，直到找到object对象的原型，object对象的原型没有原型，如果在object原型中依旧没有找到，则返回undefined原型链继承：将父类的实例化对象，赋值给子类的原型。优点: 类似于复制了一个对象，构造函数和原型中所有的数据都可...

2020-02-08 14:03:30 172

原创面向对象—构造函数的继承

构造函数的继承：又叫类的继承继承：通过某种方法让一个对象，可以访问并使用到另一个对象中的内容，这种方法叫做继承。作用：节省了构造函数中大量重发声明的属性和方法，提高开发效率节省内存方法： call和apply方法达成了构造函数的继承作用优点：简约易使用；缺点：可以继承构造函数中的内容和方法，无法继承原型中的内容和方法 function fn(){ // th...

2020-02-08 12:34:38 142

原创对象原型

原型每次通过构造函数去实例化一个对象，都会生成一个新的内存空间，当项目开发中往往大量的内存使用，会严重影响性能。 function Person (name){ this.name = name; this.sex = sex; this.hobby= function(){ console.log("构造函数") }}原型：将共有的方法放到原型中，每次实例化对象，原型中的内...

2020-02-08 11:27:11 139

原创面向对象

面向对象：他是一个变成思路，不会改变我们预期的效果；优点：使用面向对象，会让代码的复用性大大提高，便于迭代；特征：封装、多态、继承、抽象举个栗子：面向过程：小花去餐厅点餐吃饭面向对象：小花 --去–吃餐厅–点餐小花.去餐厅.点餐小花.吃创建对象的方法：字面量 let obj = { name:"麻子", sex:"男", age:"88", hobby:(...

2020-02-07 20:54:11 72

原创 ES6 新增数组、新增字符串

Array.from()将类数组转化为数组，类数组：有下标、有长度，但是无法使用数组的方法（例：字符串，一组li）；参数1：需要转化的数组参数2：处理方式（可选）参数3：函数执行时this的指向（可选） let lis = document.querySelectorAll("li") // console.log(lis) 会报错 lis=Array.from(lis...

2020-02-07 19:56:42 399

原创 es6箭头函数

箭头函数：语法比函数表达式更加简洁，并没有自己的this，arguments，super，new，target。这些函数表达式更实用于那些本来需要匿名函数的地方，并且他们不能用作构造函数。语法： ()=>{};箭头函数的几种形式形参=>返回值 let fn = num => num*2 console.log(fn(10)) //输出20(形参,形参)=&g...

2020-02-07 16:32:41 114

原创 ES6基础

javascrit三大组成部分：ECMAScriptDOMBOMlet：写法与var一致，也是用来声明变量var ：可以重复声明作用域：全局作用域/函数作用域（局部作用域只能在函数中生成，只有在函数外生成的就是全局变量）if(true){ var c=10 //全局}console.log(c) //10可以预解析let：不可以重复声明，使用let 在...

2020-02-07 15:01:04 86

原创移动端rem和em

remrem和em基本类似区别点在于em相对自身父级的字体大小 rem相对html的字体大小rem：root-em跟元素的值，html的字体大小不管元素在哪都会去找根元素字体大小emem是一个相对的距离单位，相对父级的字体大小（font-size）1em = =父级的1font-size em是一个相对单位em通过自身父级的字体大小，转化px公式：实际大小px = = 1em父级字体的...

2020-02-07 11:59:19 147

原创移动端—响应式布局

移动端开发的两种主流方案之一：响应式布局兼容(1)内容没有受到(屏幕宽度)明显影响时，自适应宽高即可(2)内容受到明显的影响时，改变布局，来保证内容的清晰响应式布局：用于解决不同浏览器，不同分辨率及不同设备的不同显示效果优点：1)面对不同分辨率的设备灵活性很强2)能够快捷的解决多设备显示适应的问题缺点：1)兼容各种设备工作量大，效率低，页面加载时间长2)一定的程度上，会改变网站原...

2020-02-07 10:58:55 267

原创移动端

移动端适配IE（怪异）合模型：设置宽高后，占地面积就不会发生改变，增加padding后会压缩内容区域的大小，开启怪异合模型：box-sizing：border-box；标准合模型：宽高只是设置内容区域的大小，设置padding后总的占地面积会发生改变。弹性盒子弹性盒子：是css3中新的布局模式，又叫收缩合模型，开启弹性盒子display：flex；容器默认存在两根轴：水平轴main ax...

2020-02-06 20:56:26 109

原创 C3动画

2D动画的两个属性：transform：针对一个元素只能用一次不能一次写给多个元素。transition all 2s 过度效果，写在过度之前的样式里，不能写在hover里<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> ...

2020-02-06 19:42:20 219

原创 html5拖拽

拖拽属性是H5新特性：是指是指鼠标点击事件源后不松手，将其拖拽到目标对象或半途松手（释放）的过程源对象：指的鼠标点击的一个事件，例如，一个图片，一个元素目标对象：是指我们拖动源对象后，预计要进入的区域被拖动的对象可以触发的方法：ondragstart:事件源可以被拖动ondrag:被拖动过程中ondragend:源对象被拖动结束源对象进入目标对象可以触发的事件：ondragent...

2020-02-06 19:09:08 158

原创 jq动画

hide() / show()var flag= 1; $(".btn:first").click(function () { flag *= -1; if(flag == "-1"){ // 目标.hide() 让目标隐藏（修改的display属性） // 小括号中，可是设置动画执行的时间 $...

2020-02-06 18:13:14 84

原创 jq选择器

CSS选择器1）id选择器：$(".list").css("color","red");2）class选择器：$("#idd").css("color","green");3）标签选择器：$("li").css("color","yellow");4）通用选择器：$("*").css("color","red");5）层级选择器：$("*").css("color","red");6）...

2020-02-06 16:56:06 114

原创 js轮播图（原生）

<!DOCTYPE html><html><head> <meta charset="UTF-8"> <title></title> <style type="text/css"> *{margin: 0; padding: 0;} #containe...

2020-02-06 12:40:19 82

原创 js—DOM对象

DOM方法：1）获取父节点的方法（1）获取该节点的父节点console.log(ul_li[0].parentNode;)（2）获取该节点的父元素节点console.log(ul_li[0].parentElement;2）子节点的获取方法（1）获取该节点的子节点，获取所有的子节点，不分类型console.log(ul[0].childNodes);（2）获取并返回该节点的...

2020-02-06 11:11:52 95

原创 js事件

window.onland：当前页面加载完毕后执行的方法，该方法用于，包裹所有的内联js代码，解决js获取html标签时，标签还没有加载的情况，保证先加载页面，再加载js功能提高用户的体验。<body> <input type="text" class="inp"> <br> <input type="text" class="...

2020-02-05 22:05:38 108

原创 js字符串

string字符串传统方法创建一个字符串通过new：var str = new string（“zfc”）字面量方法：var strTwo = “acdefg”字符串中的方法：1）charAt()：返回指定位置的字符2）length：字符串的长度3）charCodeAt()：返回指定位子的字符串的Unicode编码4）fromCharCode()：接收一个UniCode编码...

2020-02-05 20:30:49 119

原创 js数组排序

数组排序，通过两个数值对比，若果前面一个数大，那么通过一个新变量（空的）来交换位置var arr = [19,4,2,54,12,1,3] for(var i=0; i<arr.length-1; i++){ for(var j=i+1; j<arr.length; j++){ if(arr[i]>arr[j]){ /...

2020-02-05 19:32:43 163

原创 js数组去重

去重代码示例：function arr(arrTwo){ for(var i=0; i<arrTwo.length; i++){ for(var j=i+1; j<arrTwo.length; j++){ //通过前一个数和后一个数的对比 if(arrTwo[i]==arrTwo[j]){ ...

2020-02-05 17:28:58 95

原创 js数组

数组的基本概念：1）什么是数组数组是存储一个或多个数据的容器，它是一组内存空间，通常用来批量处理数据，这组内存空间名字叫做数组。2）数组的特点数组是个不挑食的家伙，对齐自身储存的数据并没有什么要求，无论是数量还是类型，通过数组下标从来管理数组元素。3）.length数组名.length表示数组的长度，也是数组当前存储元素的个数，因为下标从0开始，所以数组长度-1表示数组最后一个元素的下...

2020-02-05 16:53:32 493

原创 js随机色

颜色的赋值方式：1、通过英文名2、通过rgb三原色调配比例，赋值大于0，小于255；3、通过16进制来匹配（一般不用）透明度：opacity；1为不透明，0为完全透明；随机色代码示例：<body> <div class="box"></div> <div style="width: 100px; height: 100px; ba...

2020-02-05 16:08:41 142

原创 js—Math对象

Math对象和js提供给开发者的一款内置常见数学公式对象，所有的Math对象中的方法，都会有返回值；随机数randomMath.random（）*（较大数-较小数）+较小数1、范围只确定终点的随机数起点默认为零：var one = Math.random()*10;console.log(one);2、范围两端都确定的随机数：var two = Math.random()*(10...

2020-02-05 15:18:36 116

原创 js变量的作用域

变量的声明：var s;变量的定义：var s = 10;全局变量：不在函数中声明或定义（之前的写法）；它的作用范围，是当前整个文件，任何地方都可以获取并修改它。局部变量：定义或声明在函数中的变量，当函数执行结束后，这个变量被回收。分支和循环结构，并不能产生局部变量，他们产生的是全局变量。 var s = 1; function num(){ var n = 10; s ...

2020-02-05 13:24:01 81

原创 js回调函数（函数嵌套）

函数嵌套：不允许嵌套定义，嵌套的是调用//比较两个数的大小function TwoNumber(av,bv){ return av>bv ? av:bv;}var sml = TwoNumber(1,2);//比较三个数的大小function ThreeNumber(a,b,c){ var s = TwoNumber(a,b); return s > c ?...

2020-02-05 13:10:08 1032

原创 js初见函数

函数的作用：避免重复性功能的代码，适用性更广。函数的整体语法：1.定义函数：声明函数的关键字函数名（参数） function myFun(){ arguments(内置对象）函数体（也就是，需要执行的功能）}重要事项：1）函数值定义，不调用的话是不执行的2）函数在哪里里调用，就在哪里执行3）函数调用的次数不限函数的四种形态...

2020-02-05 11:59:35 134

原创 js获取页面元素

获取页面元素的四种方式：1、通过标签名来获取：var box = document.getElementsByTagName("div"）[2];console.log(box);2、通过class名来获取var box2 = document.getElementsByClassName("div1")[0];console.log(box2);3、通过id名来获取var b...

2020-02-03 15:24:21 262

原创循环语句break和continue

break和continue:相同点：都可以改变循环执行的状态，都不能单独使用；之后的代码都不再执行不同点：1）break在分支语句中，用于结束整个分支语句；continue则不是2）在循环中，break结束当前整个循环，继续执行下一个功能；continue则是结束本轮循环，继续下一轮循环...

2020-02-02 16:33:07 154

原创 js—while循环、for循环

while循环语句：1）循环变量，记录循环的次数var x = 0;2）循环条件while ( x < 3 ){}3）循环体console.log（“武汉，加油”）；4）循环增量x++; }``for循环语句：for（1、循环变量；2）循环条件；4）循环增量）{3）循环体}for（var i = 0;i<2;i++）{ console.log（“...

2020-02-02 16:26:55 188

原创 js数据类型转换

1、隐式转换（自动转换）：变量里，存储的数据是什么类型，这个变量就是什么类型var a = 10;a="1";2、显示转换（手动转换）1）parseInt():将小括号中的内容，转换为Number类型，并返回console.log(typeof a);//stringconsole.log(typeof parseInt(a));//Number2）String():将括号中的内...

2020-02-02 12:32:06 102

原创 js—switch.case 多分支语句

switch分支语句作用：提供了多个分支，功能类似if-else级联式，但是代码的可读性更好语法：switch(表达式){ case 值1: 代码段1 break; case 值2: 代码段2 break; case 值3: 代码段3 break; default...

2020-02-02 12:17:19 1573

原创 js—if语句

分支语句或者分支结构if语句，语法：if(表达式）{ 代码段}如果表达式为真，执行大括号中的代码，否则直接跳过，不执行var x = 10;if ( x < 10 ){console.log(“我是真的”）}如果表达式为真，执行代码段1，否则执行代码段2if (表达式）{ 代码段1}else{ 代码段2}if语句的级联式：if (表达式1）{ 代码段...

2020-02-02 11:38:54 1467

原创 js逻辑运算符

逻辑与 &&语法：最后结果 = 表达式1 && 表达式2逻辑与：两个表达式，都为真，最后结果才是true,有一个是假的，结果就是false,一假即假var a = 2 < 3 && 6 < 5;console.log(a);//false逻辑或 ||语法和逻辑与一致注意点：逻辑与是一假即假，逻辑或是只要有一...

2020-02-01 20:20:26 114

原创 js关系运算符

关系运算符：> 大于var a = 1 > 2;console.log(a);< 小于var num = 19;var sum = 20;var maxNumber = suv < num;console.log(maxNumber);== 等于数值相同即可，哪怕数据类型不同，也会返回truevar s = 10;var m = "10";...

2020-02-01 19:50:37 200

原创 js算术运算符

1、创建变量（分两步）1）声明变量 var a; 向系统申请一块内存叫做a2）定义变量 a=1; 向已经存在的变量赋值数字13）声明且定义 var b = 2;var a = null;算术运算符可以操作常量，也可以操作并保存变量var a1 = 1+1;变量是可以修改的，多次赋值，会覆盖上一次的值。...

2020-02-01 19:32:24 606

原创创建一个javascript页面

js的外联引入方式：<script src="外联js.js"></script>js的内联样式：<script type="text/javascript"> var a = "王又又"; console.log(a); var a = "1"; console.log(a); alert(a); console.log(typ...

2020-01-31 20:34:36 936

原创了解JS

学习要点:1.什么是JavaScript2.JavaScript特点 3.JavaScript历史4.JavaScript核心5.JavaScript能做什么一、什么是JavaScript？JavaScript是一种具有面向对象能力的解释型语言。更具体一点，它是基于对象和事件驱动并具有相对安全性的客户端脚本语言，因为他不需要在一个语言环境下运行，只需要有一个浏览器即可。它的主要...

2020-01-31 20:10:22 194

原创 html页面布局—定位

相对定位：1）、相对的是自身原有的位置2）、相对定位移动后，会保留原有位置（可以使用定位占用，但普通写法时，无法占用）3）、不会影响文档流position:relative; — 开启该元素的定位具体的位置：left、top//父级.main{ width: 500px; height: 500px; border:1px solid; position: relative;...

2020-01-31 19:52:05 552