- 博客(49)
- 收藏
- 关注
RSS订阅原创 048-Web前端+科技论文写作-DOM与科技论文写作
#6.28 JS-DOM与科技论文写作1-2现阶段开始对于web内容有的放矢的快速学习，所以笔记暂都手写整理不再往这里誊写了。仅放几张笔记截图留个纪念8。其他学习内容同。括号：以后就不往上传了...
2020-06-28 18:29:06
197
原创 047-Web前端-JS-事件处理与联动余
#6.28事件处理章节的剩余部分摘要三级联动知识点：1.select元素的option创建方式 [var option=new Option('显示的内容');]2.select元素添加option元素 [select.options.add(新建的option);]3.select元素清空option的方式：[select.options.length=0;]4.select元素改变时触发的事件：[select.onchange=function(){}]5.selec...
2020-06-28 12:28:49
170
原创 046-Web前端-JS-非IE的event事件
#6.25大纲：HTML event事件应用：1.非IE中的event事件2.IE中的event事件3.兼容性问题4.event一些其他常用属性5.event案例1.非IE中的event事件1.1 event对象及获取event对象方法1.2 event中常用的属性和方法1.1 event对象及获取event对象方法描述：当dom tree中某个事件被触发的时候，会同时自动产生一个用来描述事件所有的相关信息（比如出发事件的元素、或者是事件的类型）的对象，...
2020-06-25 16:42:23
182
原创 045-Web前端-JS-this对象
this对象#6.24概念：this代表 函数运行时 自动生成的一个 用来 指代函数调用者 的对象，this只能在函数内部使用。举例：function test(){ console.log(this); } test();//指向window，因为函数的调用者默认是window document.addEventListener(‘click’,test);//指向document节点 document.querySelector(‘div’).addEventListe
2020-06-24 20:58:57
123
原创 045-Web前端-JS-手机触摸事件
手机触摸事件#6.241.触摸事件描述：在移动端设备中由触摸操作触发的事件类型：(1)touchstart:当手指触摸屏幕时触发；即使已经有一个手指放在了屏幕上也会触发。(2)touchmove:当手指在屏幕上滑动时连续的触发。(3)touchend:当手指从屏幕上移开时触发。(4)*touchcancel:当系统停止跟踪触摸时触发。(如电话接入或者弹出信息,一般在这个操作中来做一些暂停游戏类的操作)注意： ps：如非特殊说明，事件均为冒泡事件 p...
2020-06-24 20:48:37
247
原创 044-Web前端-JS-键盘事件
键盘事件#6.241.键盘事件1.键盘事件 描述：键盘事件是指当用户在操作键盘的时候会自动被触发的事件 注意： (1)默认采用事件冒泡机制 (2)键盘事件一般绑定在需要用户输入的元素上(例如input) 键盘事件直接绑定在body之上也是允许的 类型： (1) keydown:用户按下任意键都可以触发这个事件。如果按住不放，事件会被连续触发 (2) keyup: 用户释放按键时触发 ...
2020-06-24 17:30:21
367
原创 043-Web前端-JS-主动操作样例
主动操作的两个样例#6.23一、注册界面（主动获取焦点）<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>主动操作样例1：注册界面2-主动获取焦点</title> <style> .borderGreen { border: 2px solid green
2020-06-23 19:29:49
123
原创 042-Web前端-JS-滚动事件
文档事件——滚动事件#6.23描述:scroll事件会在【文档】或【元素】发生滚动操作时触发。（1）文档滚动事件说明：属性scrollTop\scrollLeft表示文档滚动的距离:(没有单位)语法：IE：document.documentElement.scrollTop\Left 非IE：document.body.scrollTop\Left兼容性：（可以使用document.body.scrollTop||document.documentElement.scrollTop来解
2020-06-23 19:10:39
499
原创 041-Web前端-JS-样例：注册条件判断
文档事件案例：注册条件判断#6.22<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>注册用户案例</title> <style> .borderGreen { border: 2px solid lightgreen; } .col
2020-06-22 18:00:23
175
原创 040-Web前端-JS-焦点事件
文档事件——焦点事件#6.22焦点： js当前正在和用户发生交互的节点称为焦点。可以类比为人类目光汇聚的地方。描述： 焦点事件分为获取焦点和失去焦点事件，分别会在元素节点获得焦点和失去焦点时自动触发。语法： 获取焦点：节点.onfocus=function(){} 失去焦点：节点.onblur=function(){}注意： a.可以使用DOM0绑定也可以使用DOM2绑定 b.不支持事件冒泡 document.qu
2020-06-22 17:06:49
647
原创 039-Web前端-JS-文档事件
文档事件#6.22文档事件中主要是指添加给整个文档的事件。在这一类事件中，绝大部分并不需要用户主动去进行调用。而是通过文档的不同状态来进行自动执行。(1)加载成功\失败事件：load\error(2)当DOM加载完成时触发事件：DOMContentLoaded(3)页面(文档)发生卸载时触发的事件：beforeunload(4)文档加载状态判断事件：readystatechange(5)文档大小发生改变时的回调事件：resizeDOM文档加载的步骤为:解析HTML结构。加载外部脚本和样
2020-06-22 16:54:10
159
原创 038-Web前端-JS-样例：随动div
#6.18本节仍仍为鼠标事件的样例——随鼠标点击而移动div块具体理论相关标注在代码中<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <title>随动div</title> <style> div{ width: 100px; height: 100p
2020-06-18 19:59:00
178
原创 037-Web前端-JS-样例：导航栏
#6.18本节仍为鼠标事件的样例——实现css中hover变色类型的导航栏具体理论相关标注在代码中<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <title>带有hover样式的导航栏</title></head><body><script> var ul=document.creat
2020-06-18 19:40:37
170
原创 036-Web前端-JS-样例：滚动条
#6.18本节为鼠标事件的样例——提示文字滚动条具体理论相关标注在代码中<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <title>带有提示文字的滚动条</title> <style> div { width: 25px; height: 25px;
2020-06-18 19:02:42
145
原创 035-Web前端-JS-鼠标事件
鼠标事件#6.18 小篇鼠标事件类型鼠标单击触发：click鼠标双击触发：dblclick鼠标按下触发：mousedown鼠标抬起触发：mouseup鼠标移动触发：mousemove鼠标移入触发(不冒泡)： mouseenter鼠标移出触发(不冒泡)： mouseleave鼠标移入触发(冒泡)： mouseover鼠标移出触发(冒泡)： mouseout鼠标事件原则语法：元素.on+鼠标事件名称 = 调用函数说明：a.dom0级可以给同一个元素绑顶多个不同类型的事件b.事
2020-06-18 16:31:55
187
原创 034-PPT技巧-1
·DOC转PPTmac版Office365不带有发送功能。保存doc副本成RTF格式大纲，在PPT中新建幻灯片-大纲。·样式排版统一替换字体、常用取色器、蒙版添加·形状裁剪调色、横向分布、设置参考线5条·批量复制Ctrl+Shift，F4复制多个·多图排版表格/SmartArt，合影展示、剪影虚指。矢量图的操作。图片拼接器Shape Collage。·时间轴清单+选择+排序...
2020-06-17 17:31:50
139
原创 033-Web前端-JS-事件概述与绑定
事件概述与绑定#6.17 小篇1.事件概述 2.非IE浏览器中的【事件绑定】 3.IE浏览器中的【事件绑定】 4.解决浏览器中关于【事件绑定】兼容性问题1.事件概述1.1事件 1.2事件传递(1)事件描述：事件本质是一种交互操作，事件通常与函数配合使用，当事件发生时函数才会执行。(2)事件传递描述：事件不仅能够和触发者交互，还会在特定的情况下沿着dom tree逐级传递，和dom tree中的各个节点进行交互。而js中的这种机制被称为事件传递机制。说...
2020-06-17 14:03:44
200
原创 032-Web前端-JS-Node节点
#6.16 长而精致1. Node概述 2. Node的属性 3. Node的方法 4. HTML元素操作方法//了解 5. HTML内的元素的操作方法//了解，略1.Node概述DOM是文档对象模型的简称。它的基本思想是：把结构化文档解析成一系列的节点，再由这些节点组成一个树状结构（DOM Tree）。所有的节点和最终的树状结构，都有规范的对外接口，以达到使用编程语言操作文档的目的（比如增删内容）。所以，DOM可以理解成文档的编程接口。严格地说，DOM不属于JavaScri...
2020-06-16 21:50:27
198
原创 031-Web前端-JS-Document节点
DOM Document节点#6.15 1.DOM Document节点 2.Document节点属性 3.Document节点操作页面元素1.DOM Document节点 描述： (1) DOM全称为Document Object Model，即文档对象模型。 它是一套用来管理控制html文档的规则。 (2)document节点：document节点就是文档本身 说明： (1)节点是对象的另外一种叫法，在...
2020-06-15 17:50:14
253
原创 030-Web前端-JS-变量与内置对象
变量和内置对象#6.12 又一个加长版^2^1.变量 2.内存 3.Math对象 4.Date对象1.变量(1)变量提升(2)变量作用域(3)一等公民(4)函数名提升(5)函数内的变量提升(6)*函数参数的默认值(1)变量提升JavaScript引擎的工作方式是，先解析代码，获取所有被声明的变量，然后再一行一行地运行。这造成的结果就是所有的变量的声明语句，都会被提升到代码的头部。javascript的这种读取变量的机制就叫做变量提升。描述：...
2020-06-12 21:23:06
166
原创 029-Web前端-JS-对象和函数
对象和函数#6.11 第二篇 Javascript函数 & Javascript对象1.Javascript函数函数是由事件驱动的或者当它被调用时执行的可重复使用的代码块。语法： function 函数名(参数1，参数2...){ 函数体; }注意： a.函数可以没有参数 b.函数名的命名规则符合变量的命名规则即可 c.函数体允许有多句，它是函数在执行时执行的代码 d.函数在制作时有几...
2020-06-11 20:04:46
311
原创 028-Web前端-JS-数组
数组#6.11 ^1^又一个加长版1.数组的概念. 2.数组的特点. 3.数组的调用. 4.数组的方法. 5.二维数组1.数组的概念数组(array)是按照一定顺序排列的一组值，每个值都拥有自己的编号，编号从0开始。整个数组用方括号来表示。语法：var arr = [item1,item2,item3];上述代码中的item1、item2和item3元素就构成一个数组。两端的方括号是数组的标志。因为数组元素编号从0开始，所以item1是数组的第0个元素。ps：i...
2020-06-11 15:31:59
406
原创 027-Web前端-JS-字符串
字符串#6.10 加长版 ^u^1.字符串概述 2.字符串长度3.转义字符4.字符串对象 5.字符串方法1.字符串概述定义：字符串就是用单引号或者双引号包裹起来的，零个或多个排列在一起的字符。字符串注意事项： 1.在单引号包裹的字符串内部，应该使用双引号进行嵌套。 2.在双引号包裹的字符串内部，应该使用单引号进行嵌套。 3.如果非要在字符串中使用相同的标识，就需要使用转义字符。 4.字符串一般建议写在一行，不能分成多行。 ...
2020-06-10 18:23:07
275
原创 026-Web前端-JS-流程控制语句
流程控制语句#仍然是6.9 相似处太多 所以赶进度1.分支语句 2.循环语句 3.break和continue语句1.分支语句顺序结构的程序虽然能解决计算、输出等问题，但不能做判断再选择。对于要先做判断再选择的问题就要使用分支结构。分支结构的执行是依据一定的条件选择执行路径，而不是严格按照语句出现的物理顺序。分支结构的程序设计方法的关键在于构造合适的分支条件和分析程序流程，根据不同的程序流程选择适当的分支语句。分支语句通常有以下几种：(1)if条件语句(2)i...
2020-06-09 20:33:10
149
原创 025-Web前端-JS-运算符
JS运算符#6.9 二节(1)算数运算符(2)赋值运算符(3) 比较运算符(4)布尔运算符(5)三目运算符基本运算符1.typeof描述：获取变量的类型例子： var item=10; console.log(typeof item);2.赋值运算符(=) 描述：在js中，=代表的是把等号右边的值赋予左边的变量 例子： var item; item=15;3.判断是否相等运算符(== ===) 描述： ==表示...
2020-06-09 18:06:55
178
原创 024-Web前端-JS-引入/变量/数据类型
引入、变量、数据类型#6.9 节一 相似点有简写1.Javascript简介JavaScript是一种轻量级的脚本语言，可以部署在多种环境，最常见的部署环境就是浏览器。所谓“脚本语言”，指的是它不具备开发操作系统的能力，而是只用来编写控制其他大型应用程序的操作方法。JavaScript的核心部分相当精简，只包括两个部分：（1）基本的语法构造（比如操作符、控制结构、语句）；（2）标准库（就是一系列具有各种功能的对象比如Array、Date、Math等）。除此之外，还有提供的额.
2020-06-09 15:52:15
195
原创 023-Web前端-练习记录-8
练习记录-8#6.8还是6.9已经不重要了 柑橘要猝死了CSS实操的移动端 下代码块主页<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width-device-width,initial-scale=1"> <title>移动端</title&g
2020-06-09 00:40:43
144
原创 022-Web前端-练习记录-7
练习记录-7#6.8 移动端-上篇一点点点点点理论br hr别老混<script src="js/index.js"></script> JS的导入移动端的老抬头<meta name="viewport" content="width-device-width,initial-scale=1">还是注意复习意复习复习习两张张张张张截图...
2020-06-08 21:09:02
162
原创 021-Web前端-练习记录-6
练习记录-6#6.8 小米主页完主页<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>仿小米主页</title> <link rel="icon" href="images/favicon.ico"> <link rel="stylesheet" href="CSS/Reset.css
2020-06-08 17:14:16
457
原创 019-Web前端-练习记录-4
练习记录-4#6.5 仍然是小米尚且有点价值的理论摘要部分box-shadow: 5px 5px 10px rgba(0,0,0,.2);/*水平 垂直 模糊*/ padding-left: 30px; /*添加左内边距*//* 此处如果用margin则hover的时候高亮块会不全*/padding: 20px 0;/*添加上下内边距*/box-sizing: border-box; /*怪异盒子更容易计算*/没啥价值的练习部分...
2020-06-05 17:05:31
103
原创 018-Web前端-练习记录-3
练习记录-3#6.5 就酱尚且有点价值的理论摘要部分outline: none; /*取消外部线条*/.search>input:focus,.search>input:focus+button{ border-color:#ff6700;}没啥价值的练习部分
2020-06-05 11:48:12
98
原创 017-Web前端-练习记录-2
练习记录-2#6.4 接上篇尚且有点价值的理论摘要部分查错巨好用的快捷键Reformat：Option+Command+L垂直复选（可输入）：Shift+Option=（Alt）拖动块注释：Shift+Command+/#其余新理论于以前的相应板块笔记中添加不重要的练习部分...
2020-06-04 23:09:58
139
原创 016-Web前端-练习记录-1
练习记录1#6.4 练习记录也就是因为没有学新理论所以把做的实操滕上而已 有记录价值的东西就都放在前面了尚且有点价值的理论摘要部分margin等的重制CSS模板body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, fieldset, legend, input, textarea, button, p, blockquote, th, td{margin: 0;padding: 0;}body {pad
2020-06-04 17:41:01
149
原创 015-Web前端-CSS动画-Sprite图与滑动门
CSS动画：雪碧图与滑动门一、字符图标与切片 阿里巴巴网站可供下载。其中有用的部分为：link后即可。PS切片记得保存为Web所用格式。二、CSS Sprite（雪碧图）CSS Sprites(图片整合技术) 的目的就是通过整合图片，减少对服务器的请求数量，从而加快页面加载速度。原理： 把网页中的一些背景图片整合到一张图片文件中，再利用CSS的background-image、background-repeat、background-position属性，对这张大图进行..
2020-06-03 16:17:55
155
原创 014-Web前端-CSS动画-媒体查询与分栏
媒体查询与分栏#6.2 最后一篇 ：Media Query响应式布局—媒体查询、Multi-column多列一、Media Query响应式布局—媒体查询Def 响应式布局：一个网站能够兼容多个终端——而不是为每个终端做一个特定的版本。这个概念是为解决移动互联网浏览而诞生的。响应式布局可以为不同终端的用户提供更加舒适的界面和更好的用户体验，而且随着目前大屏幕移动设备的普及，越来越多的网站采用这个技术。如果预算充足且形势需要，做一个真正的“手机版”网站是首选。因为响应式设计没有专门设计一个手机
2020-06-02 21:58:37
233
原创 013-Web前端-CSS动画-绘制简单特殊图形
绘制简单特殊图形#6.2 仍然接上篇 （因为总是最近发的总是要审核不好意思一遍遍的改所以直接多发几篇）以CSS绘制三角形1.首先需要有个元素作为三角的容器<div></div>2.制作三角型使用的是border属性，内容区宽高值为0div{ width:0; height: 0; border-top:50px solid red; border-left...
2020-06-02 21:15:31
172
原创 012-Web前端-CSS动画-过度与动画
过度与动画#6.2 接上篇 ：过度与动画一、过度Transition使用css的属性值在一段时间内平滑的过渡1）指定四个要素：过渡属性，如background、color等过渡所需时间过渡函数，即过渡的速度、方式等过渡延迟时间，表示开始执行的时间2）触发过渡通过用户的行为触发，如点击、悬浮等1.过渡属性transition-property: none | all | property ; 多个属性用逗号隔开可设置过渡的属性：颜色属性 取值为数值的属性
2020-06-02 20:59:24
194
原创 011-Web前端-CSS动画-Transform
CSS动画-2#6.2 接上。 2D、3D转换 Transform转换TransformCSS3中的转换允许我们对元素进行旋转、缩放、移动或倾斜。它为分2D转换 或 3D 转换。2D转换通常的属性包含了属性名和属性值，而CSS3的transform属性是用函数来定义的。Transform 2D函数包括了translate( )、scale( )、rotate( )和skew( )。#移动/旋转/缩放/倾斜书写格式: transform:函数名(x轴值，y轴值);转换的效果...
2020-06-02 17:10:39
173
原创 010-Web前端-CSS动画- 圆角/阴影/渐变
CSS动画-1#6.2圆角、阴影、渐变CSS3是CSS（层叠样式表）技术的升级版本。CSS3完全向后兼容，不必改变现有的设计，浏览器将永远支持CSS2。W3C的CSS3规范仍在开发。但是，许多新的CSS3属性已在现代浏览器使用。圆角border-radiusborder-radius：value；四个角border-radius：value value；左上右下、右上左下border-radius：value value value value；代表设置对象左上、右上、右下、左下角.
2020-06-02 16:28:57
218
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人