前端学习
关注
分享
扫一扫
文章平均质量分 82
小青头
正在努力学习ing
展开
-
Object对象方法总结
Object对象方法总结主要是Object对象上的方法，以及其创建的实例上方法。 通常可以用在不同实例对象上的方法。Object方法Object.assign(targetObj,copyObg)将一个对象上的方法拷贝到另一个对象上function Fruit(name) { this.name = name;}Fruit.prototype.sayName = function () { console.log(this.name);}var Apple = {原创 2020-05-11 17:16:14 · 720 阅读 · 0 评论 -
JavaScript实现继承的几种方法
JavaScript实现继承的几种方法原型链继承prototype原型相当于一个对象的父类，所有实例都会共享原型上的属性和方法。constructor构造函数相当于一个创建对象的函数，同时也是对象实例的标识符。bigApple,smallApple使用Apple作为构造函数，初始化就会使用Apple方法；同时这两个实例对象也属于Apple类。// 原型链继承// fruit水果类function Fruit() { this.name = "水果"; this.color =原创 2020-05-09 15:12:44 · 369 阅读 · 0 评论 -
JavaScript比较几种创建对象的方法的优缺点及案例
js创建对象方法创建对象主要有字面量方式、工厂模式、构造函数模式、原型模式、组合模式字面量方式大括号创建对象直接使用大括号{}创建一个对象// 直接使用大括号创建变量var obj = { name:"apple", age:18, sayhi(){ // 对象中函数的一种简写，等价于sayhi:function(){} console.log(this.name); }}console.log(obj.__proto__ === Objec原创 2020-05-09 13:16:12 · 462 阅读 · 1 评论 -
javaScript关于原型链的理解
js原型链js主要由对象主要分为原型对象、构造函数对象、实例对象。new原理使用new可以根据构造函数创建对象，如果构造函数返回非对象值，则创建空对象；反之使用构造函数返回的值function f1() { this.a = "hello" return 1}function f2() { this.a = "hello" return { ...原创 2020-05-07 22:31:37 · 167 阅读 · 0 评论 -
关于JavaScript中的this指向问题
关于JavaScript中的this指向问题js中，this在不同情况下指向对象很复杂，分成很多种情况。this指向window情况注意：所有this指向window的情况，在严格模式下，this值为undefined严格模式下，apply(),call()第一个参数传递什么，this就指向什么1.全局环境下console.log(this); // window2.函数独立调用f...原创 2020-05-06 22:42:40 · 248 阅读 · 0 评论 -
JavaScript闭包使用场景
JavaScript闭包使用场景闭包就是外层函数将内层函数返回出去，并且内层函数执行时带着外层函数的作用域，可以使用外层函数内部的变量，这些变量始终保存在内存中本质：闭包相当于桥梁，连接函数内核函数外。特点：保存函数的诞生环境使用原因：函数外想要获取函数内部的变量，通过闭包形式注意事项：闭包会将作用域保存在内存中，不用时需要将变量设置为null，防止内存泄漏。闭包的形式返回值形式函...原创 2020-05-03 14:51:48 · 372 阅读 · 0 评论 -
深入理解JavaScript的作用域
JavaScript深入理解作用域作用域分为全局作用域和局部作用域作用域实现流程：编译、执行、查询、嵌套、异常编译阶段JavaScript为解释型语言，边解释边执行以var a = 1;为例1.分词编译器把程序分解成词法单元{ "var":"keyword", //关键字 "a":"indentifier", // 标识符 "=":"assignment"...原创 2020-05-03 10:17:26 · 195 阅读 · 0 评论 -
javascript深入理解函数
javascript深入理解函数函数声明方法1.function 函数声明语句function add(a,b){ return a+b;}console.log(add(1,2));2.函数表达式var add = function (a,b) { return a+b;}console.log(add(3,2));3.构造函数Function 关键字 ...原创 2020-05-02 13:11:31 · 1600 阅读 · 0 评论 -
javaScript动画项目案例
javaScript动画项目案例示例代码：我的github1.动画库编写匀速运动案例一<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, in...原创 2020-04-25 22:13:50 · 3841 阅读 · 1 评论 -
html页面常见布局
页面常见布局单列布局、两列布局、三列布局页面通常都会分为header、wrapper、footer三个部分单列布局<!DOCTYPE html><html><head> <title>单列布局</title> <link rel="stylesheet" type="text/css" href="reset.css...原创 2019-09-30 09:17:09 · 11881 阅读 · 0 评论 -
css画圆、半圆、椭圆、圆环
css画圆在css中利用border-radius可以画出我们想要的圆border-radius属性可以设置盒子四边的圆弧。从上左，上右，下右，下左顺时针依次设置四个属性也可以单独设置一个方向如border-radius-top-left1.css画一个圆首先我们需要一个正方形盒子，border-radius设置弧度的半径为其边长一半即可代码如下<!DOCTYPE html&...原创 2019-09-29 19:30:27 · 9918 阅读 · 0 评论 -
css实现文字或者div盒子水平垂直居中的方法
实现水平垂直居中的方法文本（文字）内容属于行内元素行内元素水平垂直居中方法方式一：设置文字外层的盒子text-align:center /*水平居中*/ height = 100px; /*垂直居中 */line-height = 100px; 垂直居中只要保证行高和盒子高度一致即可代码如下：<!DOCTYPE html><html>&...原创 2019-09-29 19:10:46 · 15698 阅读 · 0 评论 -
Ajax简单使用
Ajax简单使用通常向服务器发送请求的方法：使用浏览器地址栏，输入地址，get请求HTML的form表单发送请求，method属性可以设置get和post两种a标签的href可以发送get请求使用Ajax发送请求Ajax介绍Ajax（简称异步js和xml）请求支持get和post。特点：异步请求，局部刷新 异步请求：客户端发出一个请求后，无需等待服务器响应结束，...原创 2018-09-16 11:18:24 · 374 阅读 · 0 评论 -
css用border属性制作三角形
css用border制作三角形在css中，我们可以用边框制作一个三角形代码如下：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>三角形</title> <st原创 2018-07-17 09:03:04 · 1493 阅读 · 0 评论 -
javaScript知识汇总(基础)
javaScript知识汇总 这里只是一些简单的javascript知识javascript特点：脚本语言，解释型语言，弱语言类型，语法和c相似，一般用来编写客户端脚本用途：主要是在html中添加交互行为，制作页面特效；或者在客户端提交表单给服务器时，先做一个数据验证，减轻服务端压力。组成部分：ECMAScript、DOM、BOM 输入方式 函数名 作用...原创 2018-07-17 12:35:36 · 483 阅读 · 0 评论 -
javaScript项目案例
javaScript项目案例1.Dom操作2.项目案例javaScript项目案例储备知识，感觉玩dom主要是玩document这个类1.Dom操作在js中所有标签都属于节点。dom是一个倒着的树，树根为html标签创建节点 createElement():传入标签类型,创建一个结点 示例：var oP = document.createElement...原创 2018-07-17 22:37:34 · 45360 阅读 · 11 评论 -
HTML知识汇总
目录HTML知识汇总html标准结构table标签：表格标签form标签：表单标签标签属性汇总标签分类嵌套规则HTML知识汇总HTML：超文本标记语言，主要构成网页组成的结构其实主要通过标签来标记这个网页的结构（比如说：用header来标记网页头，body来标记网页主体，用p标签来标记这一块是段落）文件后缀：*.html或*.htm...原创 2018-07-15 13:27:05 · 1117 阅读 · 0 评论 -
css知识归纳
目录css知识归纳css引入方式选择器介绍字体属性文本属性文本和字体综合设置常用文字对齐方法背景的属性盒模型padding内边距border设置margin外边距*margin垂直方向塌陷问题*子盒子中设置margin-top导致父亲盒子也往下移动，从而设置不了清除页面padding、margin（常用）display属性标准文档...原创 2018-07-15 21:42:56 · 502 阅读 · 0 评论 -
关于input的value用法介绍
不同type下input的含义和用途使用jQuery选择器获取value值的注意事项radiocheckboxoptiontext不同type下input的含义和用途 type类型 input用途 value值的含义 text 单行文本框 文本框中默认初始内容 password 用来输入密码的单行文本框(文...原创 2018-07-27 16:16:23 · 4548 阅读 · 0 评论 -
jQuery框架简单介绍
jQuery框架介绍1. jQuery框架与javaScript之间的有什么关系？2. jQuery与原生javaSript对比，有什么优点？3. jQuery与javaScript之间的区别是什么？3.1 为什么要使用入口函数？4. 如何引入jquery文件？5. jquery中的选择器5.1 基本选择器5.2 层级选择器5.3 基本过滤选择器5.4 属性选择器5....原创 2018-07-27 22:30:28 · 8040 阅读 · 0 评论 -
CSS3的媒体查询@media
CSS3的媒体查询@media通过@media可以针对不同屏幕大小定义不同样式的网页，页面会根据浏览器长宽来渲染页面。 语法： @media mediaType and|not|only (media feature) { /*CSS-Code;*/}and|not|only:and放在mediaType后，连接属性，代表将多个media feature结合在一起；...原创 2018-08-01 19:38:02 · 2933 阅读 · 0 评论 -
Bootstrap框架介绍
Bootstrap框架介绍什么是相应式页面or自适应页面？1.Bootstrap使用方法1.1下载1.2复制基本模板2.基本模板3.组件和插件有什么区别？3.全局CSS样式3.1 布局容器3.2 栅格系统3.3 表格table3.4 表单Bootstrap框架介绍Bootstrap 是基于 HTML、CSS、javascript 的，它...原创 2018-08-01 22:50:02 · 7051 阅读 · 1 评论 -
css精灵图(雪碧图)切图
css精灵图为了节省网络资源，通常网页上小图标和图片都合成在一张图片上，到使用的时候再切图雪碧图切图简单过程：先在ps中打开，然后通过用矩形覆盖原来图标在图片中的位置，查到目标图标大小，设置宽高，通过position调整位置，找到目标图标示例：这是网上找到的精灵图 1.首先，打开ps，找到打开需要切的图片2.然后查看窗口选项卡下信息选项是否被选中，这里需要用到信息窗口...原创 2018-07-16 22:28:06 · 3766 阅读 · 0 评论