- 博客(39)
- 收藏
- 关注
RSS订阅原创 面向对象
面向对象基础面向对象，指的是一种新的编程思路，不会改变预期的效果，会提高代码复用性，便于迭代面向对象即将审视角度从总体转变为个体，从整体的框架转变为每个个体的对象创建对象：字面量方式：let sex = "性别";let obj = { name:"小明", sex:"男", age:"17", hobby:function(){ consol...
2020-02-07 15:29:53
245
原创 字符串、数组的新增方法
字符串的新增方法：str.startsWith： 判断是否用指定字符串开头参数1 ： 指定字符串参数2 ： 指定的开始位置 (从1开始)str.startsWith("qb",3)str.endWith： 判断是否用指定字符串结尾（参数与startswith相同）str.endsWith("学习",3)repeat： 将指定字符串重复指定次数str.repeat(3)模板字符串...
2020-02-07 12:09:06
554
原创 箭头函数
箭头函数： ES6新增的语法，简化版的函数，优化了写法箭头函数表达式更适用于那些本来需要匿名函数的地方,并且不能用作构造函数函数形式：1：var fn = () => 返回值;2：var fn = 形参 => 返回值;3：let fn3 = (形参，形参) => 返回值;//没有参数或多个参数时，都需要带有()。 只有一个参数的时候，可以省略()4：let fn ...
2020-02-06 15:37:26
161
原创 ES6
在ES6中，新增了两种声明空间的方法，即前文中提及到的let和const解构赋值解构： 解开目标的整体结构**赋值：**将目标中的数据 赋值到我们定义的变量中每一个对象每个对象都可以有 若干的属性 / 方法（冒号赋值，逗号间隔、 最后一个属性 / 方法 不需要逗号）可以通过点语法来访问对象中的变量let obj = { a:1, ==> let a = ...
2020-02-06 15:04:28
152
原创 原生touch事件
使用原因：click事件在移动端存在30毫秒的延迟，影响用户体验，故使用touch事件替换移动端的click事件原生事件：touchstart 开始触碰touchmove 触碰移动touchend 触碰结束上述三个原生事件每个都有三个触摸列表：touches 当前触摸到屏幕的手指列表targetTouches 触摸到当前绑定有事件的元素changedTouches 涉及到当...
2020-02-05 22:06:19
403
原创 移动端(视口、像素和rem)
meta标签： 告诉浏览器视口设置信息，是设置理想视口的重要元素，主要用于将布局视口的尺寸和理想视口尺寸相匹配其有五个具体的指令：width 设置布局视口宽度(一般都是device-width设备宽度)initial-scale 最初缩放比例maximum 最大缩放比例minimum 最小缩放比例user-scalable 是否允许用户缩放<meta name="viewp...
2020-02-05 20:42:46
375
原创 盒模型
设置元素盒模型：box-sizing：border-box怪异盒模型/context-box标准盒模型/inherit默认/initial继承怪异盒模型：怪异盒模型设置宽高后变不会再改变，使用padding属性会压缩其内容区域，而非扩大外边框弹性盒模型：开启弹性和模型： display：flex；将布局元素按照特定方式排列，而非默认方式根据主轴上的位置变化： justify-con...
2020-02-05 16:41:46
113
原创 CSS动画效果
css2D简单动画：添加过渡要想实现动画效果，需要在选择器中为该元素添加过渡效果添加过渡：transition：参数1 参数2；参数1：规定设置过渡效果的css属性名称参数2：规定完成过渡所需要的时间例如：.box{transiton:all 2s;};一个元素只有一个transform属性后面增加的transform属性会覆盖前面的属性设置动画transform:将元素应用...
2020-02-05 16:13:22
212
原创 CSS选择器（补充）
紧邻选择器div+pdiv后面紧邻的第一个p标签属性选择器div[id]所有带有id属性的div指定属性选择器p[class=box]所有class类名为box的p标签包含指定属性名div[class~=box]所有class名中包含box的div格式属性以指定属性名开头div[class|=en]所有class类名中以en开头的div(格式必须 en-glish,若是engl...
2020-02-05 15:01:43
224
原创 本地存储
本地存储分为：永久存储localStorage数据储存在浏览器，页面关闭后数据仍然存在,多数使用在用户自动登录； 客户端保存数据方面临时存储sessionStorage 数据仅临时存储，页面关闭时数据自动删除,多用于安全性使用较高的地方本地存储调用者必须统一例如：临时存储的信息无法用永久存储找到保存数据： setItem ( key , value );localStorage....
2020-02-04 22:32:10
155
原创 元素的拖拽属性drag
拖拽属性（drag）： 是指鼠标点击源对象后，不松手将其拖拽到目标对象或者半途释放的过程（是H5的新属性）源对象：指鼠标点击的内容目标对象：指拖动源对象预计进入的区域源对象可触发的事件：ondragstart 源对象开始被拖动ondrag 源对象拖拽中（松手时无法读取鼠标的坐标，x,y会变成0，需要添加if判断来选择将其不赋值给元素）ondragend 源对象拖拽结束源对象进...
2020-02-04 22:16:38
1219
原创 canvas画布
使用方法<canvas width = " " height = " " id = "draw" //使用canvas标签布置画布，其width和height也是标签，不能在style内书写<script> var draw = document.getElementById(" draw ");//获取标签 var bord = draw.getContext(" ...
2020-02-04 21:55:41
321
原创 音频、视频标签
音频： audio视频： videoconstrols 标签自带用户控制界面autoplay 自动播放loop 循环播放例：<audio src="音频/视频位置" controls autoplay loop id="music"></audio>音频/视频标签属性：currentTime 当前播放时间btn1.click = function ( )...
2020-02-04 18:41:16
255
原创 H5新特性
H5新增了语义化标签，旨在让标签语义化，见名思意优点：码结构清晰，方便阅读，有利提高开发效率方便其他设备解析，以语义的方式来渲染页面有利于搜索引擎优化（SEO）主体结构元素导航： <nav></nav>主体： <article></article>段/章节(模块) <section><...
2020-02-04 16:28:05
94
原创 Jquery
了解Jquery什么是JQueryjQuery是一个快速、简洁的JavaScript框架，是继Prototype之后又一个优秀的JavaScript代码库（或JavaScript框架）。jQueryJavaScript常用的功能代码，提供一种简便的JavaScript设计模式，优化HTML文档操作、事件处理、动画设计和Ajax交互。简单来说，Jquery是简化版的JSJquery的优点：...
2020-02-04 16:12:28
632
原创 事件委托
原理：通过事件冒泡原理，将事件绑定到父级，触发时子级执行效果例：为列表的每个选项绑定事件：var ul = document.getElementsByTagName("ul")[0]; //获取元素ul.addEventListener("click",function(event){ //为父元素绑定事件监听 var num = event.target.className; ...
2020-02-03 14:29:47
198
原创 事件冒泡、事件捕获与事件监听
事件冒泡与事件捕获页面和互动是通过事件来完成的，事件捕获是指从document一直到触发事件的节点事件冒泡则是从触发事件的事件源一直向上到document(好比气泡一直往水面冒，事件往父级元素方向冒)[^冒泡的只是事件，并不事件绑定的处理函数。]不管是父级以上元素是否绑定了事件，冒泡都是存在的,只有人为手动的添加代码去阻止。**阻止事件冒泡的方法：**在执行函数中添加代码event.st...
2020-02-03 14:09:43
644
原创 Tween
Tween.js：一个JS库，其效果是可以让元素平滑地执行简单的动画效果使用方式：<script src = "tween.js" > < /script>在文件中引入tween.js文件具体方法：Linear：线性 (匀速)Quad: 二次方缓动效果Cubic: 三次方缓动效果Quart：四次方缓动效果Quint：五次方缓动效果Sine：正弦缓动效果E...
2020-02-03 12:46:27
268
原创 事件对象
thisthis的指向：在普通函数外部调用时：this指向windowalert( this ) 指向windowalert( this.a )指向window.a在普通函数内部调用时：this指向windowfunction( ) { console.log( this.a ); 指向window，相当于window.a }呢new构造器结合使用时th...
2020-02-02 19:59:16
148
原创 作用域，作用域链、闭包与匿名函数
作用域：作用域，即为变量开始创建到被系统回收的可使用区域全局作用域：在函数外创建或声明的变量，可在整个文件中获取/修改局部作用域：在函数内创建或声明的变量，仅可在该函数中使用，函数运算结束后收回块级作用域：被一对花括号包括的区域，性质与局部作用域相同（是ES6新增的功能）ES5中，只有函数可以生成局部作用域作用域链：先在当前作用域中新招，找到即执行，如果没有找到，则向上...
2020-02-02 19:37:05
123
原创 DOM（文档对象模型）
在浏览器中，DOM是window的子级，是window下最常用的一部分。Dom是文档中的最高点，html则是标签的顶端。Dom节点包括了所有的标签、文本、属性。通常情况下，DOM节点有以下五类 ：Document 根节点 (文档节点)：整个文档树的顶层节点Element 元素节点：网页的各种HTML标签（比如、<a>等）Attribute 属性节点：网页元素的属性（比如cl...
2020-02-02 15:22:06
307
原创 正则表达式
正则表达式（正则对象）:用来匹配一段字符串的一些内容通常在注册页面使用，用于审核和约束用户输入的信息正则的创建：使用new关键字创建var reg = new RegExp( / 表达式 / );使用字面量方式创建var reg = / 表达式 /;正则的使用：1. 简单类：var reg = / a b c /; 表示所匹配的字符中含有abc字符即可var reg ...
2020-02-02 14:54:27
84
原创 定时器
普通定时器：setInterval 可设置重复触发的定时器var time = setInterval(function (){ 需要循环的代码串 },间隔时间); 每次执行定时器的间隔时间(单位为毫秒)单次定时器：setTimeout 仅会执行一次的定时器var time = setTimeout( function ( ){ 需要执行的具体任务...
2020-02-02 11:50:32
161
原创 时间
Date对象，是用来处理事件和日期的对象，内置一系列获取日期和时间的方法（他获取的时间是当前计算机的本地时间）创建date对象： var date = new Date ( );每次使用前都需要配合new关键字来生成date对象，然后通过date去调用各种方法toLocaleString 可以将事件对象转换为字符串格式date.toLocaleStringgetTime 可以返回一...
2020-02-02 11:34:23
152
原创 字符串的基本方法
1.字符串的创建传统方式var str = new String( " " );通过new关键字来创建新的对象，string对象来处理字符串字面量方式：var str = ' ';2.字符串的方法charAt 返回指定位置字符var s = str.charAt( 指定位置 )length 返回字符串的长度var long = str.lengthcharCod...
2020-02-01 18:43:12
112
原创 数组
1.定义：数组，是存储1个或多个数据的容器，是一组内存空间，通常用来批量处理数据，这组内存空间的名字叫做数据名存储数据管理：数组对其自身储存的数组没有限制，数量还是类型均可通过数组的下标来管理数组元素，不能直接通过数组名来操作数组元素，需要结合下标数组名0length：表示数组的长度，也就是数组当前存储的元素的个数（从0开始）2.数组的创建：var 数组名 = new Array( ...
2020-02-01 16:13:05
132
原创 math对象
math对象，是提供给开发者的内置常见数学公式的对象，所有math对象中的方法都会有返回值max( x , y ) 返回x、y中的最大值min( x , y ) 返回x，y中的最小值Math.random（ ） 返回0~1之间的随机数Math abs（ a ）返回a的绝对值Math. e xp ( a ) 返回e的a次方Math.log ( a ) 返回a的自然对数(底数为e)Ma...
2020-02-01 15:07:20
143
原创 js中函数（初解）
1.函数的定义函数是被设计为执行特定任务的代码块，在使用时被调用2.函数的使用1.定义函数：function 函数名 ( 参数 ) { 声明函数时需要声明函数关键字、函数名 函数体（即所需要的执行的功能） }注意：1.函数只定义，如果不调用的话就不会执行2.函数在哪里调用，就在哪里执行3.函数的调用次数没有限制4.函数的函数名不能以数字开头，建议使用字母2....
2020-02-01 14:42:55
197
原创 JS中事件类型
在页面运行中，通过触发特定元素的事件类型，可以触发该事件的绑定函数通用的事件类型有：onload 当页面加载完成时触发window.onload = function(){}当页面加载完成后用此方法包裹所有的内联js代码，可以解决js获取html标签时还未加载的情况，同时提高用户体验onblur 失去焦点时触发标签名.onblur = function( ){ }onfoc...
2020-02-01 13:51:48
734
原创 JS中获取页面元素
在JS中，有四种方式可以获取页面元素：通过标签名var box = document.getElementsByTabName(“div”);获取页面中所有的div元素并在js中将他们都赋值给box通过class名var box1 = document.getElementsByClassName(“div”);获取页面中所有class名为div的元素并在js中将他们都赋...
2020-01-31 16:34:21
1088
原创 JS中常见的语句结构
1.if语句判断小括号中的表达式，如果正确，则返回它后接的大括号中的表达式，否则跳过基础形式:if(表达式){ 代码段 }次 联 式:if(表达式1){ 若表达式1正确，则执行代码段1，否则跳过，判断表达式2 代码段1 }else if(表达式2){ 若表达式2正确，则执行代码段2，否则跳过，去判断下一个表达式 代码段2 }else if...
2020-01-31 16:11:11
323
原创 JS中number数字类型的算术运算符
1.算数运算符可以操作常量，也可以操作并保存变量基础的算术运算符包括加、减、乘、除四种，以级取余算符（取余运算符取的是被整除后的余数）变量赋值可以修改，多次赋值会覆盖上一次的值，每个变量只存在一个，且要注意：赋值一定是声明过的变量，每个变量只能声明一次注意：若+号两边任意一遍是字符串类型（即被双引号包裹），那么运行拼接而非运算，这种字符串拼接的情况只存在于+号，其他运算符都不会出现，即使出...
2020-01-31 14:39:15
1352
原创 JavaScript简介
1.定义：Java Script(简称JS)是一种具有面向对象能力的解释型语言，基于对象和事件驱动，具有相对安全性的客户端脚本语言（不需要语言环境，浏览器即可运行）主要目的：验证发往服务器的数据，增加web互动，增加用户体验面向对象：编程思维的一种，初期接触面向过程 解 释 型：直接读取代码运行，不是编译型的(如java文件变异成class文件直接执行)对 象：指面向对象：windo...
2020-01-28 19:37:33
252
原创 页面布局
1.标签显示方式在页面显示的元素，有两种形式：块元素：独占一行，可以设置宽高和内外边距，具备和元素属性，如div行元素：仅占内容大小区域，不可以设置宽高和内外边距，不具备盒元素属性，如span在平常编辑网页时，可以给标签添加display属性来更改元素的显示形式元素的显示方式：display：block 块元素（默认）inline 行元素inline-block 行内块元素n...
2020-01-28 14:18:09
228
原创 层叠样式表/CSS
css（层叠样式表）：用于改变元素在页面中的显示样式，使用时通过前文html标签中的标签选择器选择所需要的改变的标签编辑样式即可CSS的引入方式：1. 行间样式： 修改少数样式使用，书写在索要修改的标签后<标签名 style = " 修改样式 ">2. 内联样式： 开发小型项目时使用，书写在<head>中<head> <style> ...
2020-01-20 14:32:10
402
原创 网页内容标签
在编程过程中也会有一些特殊个数的标签1.图片标签图片的引用：引用处引用方法网页小图标<link rel = “icon”herf ="#" >（herf内接图片地址）网页正文<img src = “图片地址.格式” alt = " ">背景图background-image:url:(" ")图片有三种格式：jpeg /...
2020-01-20 12:55:41
414
原创 Html标签
1.什么是标签？标签，即Html标记标签，是html语言中最基本的单位，其作用主要为：标记html文档和html元素。Html有单标签和双标签两类2.标签的分类单标签：以 < 开头， /> 结尾，其中填写标签名例如：<input/>和<br/>双标签：以<标签名>开头，</标签名>结尾,中间存放文本例如：<di...
2020-01-16 10:03:00
247
原创 Html框架
超文本标记语言文件以.htm为扩展名。可以使用任何能够生成TXT类型源文件的文本编辑器来产生超文本标记语言文件Html超文本标记语言文件在使用时需要遵循规定的框架<!DOCTYPE html> 声明该文件为html文件<html><head> 页面头部信息，用于向浏览器提供整个页面的基本信息 <title><tit...
2020-01-14 18:09:23
179
原创 Web前端
1.Web前端的特点Web前端，相较于其他编程软件，更为简洁易入手，入门门槛更低，但是学习难度是一个逐渐困难的过程，入门容易精通难，适合作为从业的切入点。2.Web前端的作用现在的网页制作都更接近传统的网站后端开发，所以从业者又称为Web前端开发工程师主要进行网站的开发、优化、完善的工作，即将网站页面在各个端口更好地呈现给用户。3.Web的内容Web前端开发技术包括三个要素:HTM...
2020-01-14 17:18:48
172
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人