qq_46579440的博客

原创 事件（上）

事件一、事件的介绍事件的组成事件源：obox，绑定事件的元素。注意：事件目标，不是任何时候都等同于事件源。一般情况下是一个。绑定事件的方式：on，赋值式绑定事件类型：click，行为方式赋值：= ，赋值式绑定事件的标志之一事件处理函数：function(){console.log(“点了一下”)}，触发指定行为时，要做的事情隐藏的部分：事件对象事件对象的介绍事件发生时产生的对象，用来记录事件发生时产生的信息默认隐藏，需要主动获取事件对象的获取兼容obox.

原创 事件和正则表达式

一、事件事件的组成，赋值式绑定事件举例obox.onclick = function(eve){}obox：事件源on：绑定事件的方式click：事件类型function：事件处理函数eve：事件对象，有兼容，需要主动获取事件对象的获取方式var e = eve || window.event;事件对象身上的属性鼠标类坐标类…button：配合鼠标的按下事件，检测鼠标的按键键盘类var kc = e.keyCode || e.which功能键…

原创 DOM（下）

DOM（下）DOM 树就是我们 html 结构中一个一个的节点构成的不光我们的标签是一个节点，我们写的文本内容也是一个节点，注释，包括空格都是节点DOM节点DOM 的节点我们一般分为常用的三大类 元素节点 / 文本节点 / 属性节点什么是分类，比如我们在获取元素的时候，通过各种方法获取到的我们叫做元素节点（标签节点）比如我们标签里面写的文字，那么就是文本节点写在每一个标签上的属性，就是属性节点元素节点我们通过 getElementBy... 获取到的都是元素节点属性节点我

原创 BOM / DOM（上）

BOM / DOM（上）今天开始我们开始使用 js 去操作浏览器和页面中的 html 元素了BOMBOM（Browser Object Model）： 浏览器对象模型其实就是操作浏览器的一些能力我们可以操作哪些内容获取一些浏览器的相关信息（窗口的大小）操作浏览器进行页面跳转获取当前浏览器地址栏的信息操作浏览器的滚动条浏览器的信息（浏览器的版本）让浏览器出现一个弹出框（alert/confirm/prompt）BOM 的核心就是 window 对象window 是浏览器内

原创 Math 和 Date

Math 和 DateMath 是 js 的一个内置对象，提供了一堆的方法帮助我们操作 数字Date 是 js 的一个内置对象，提供了一堆的方法帮助我们操作 时间Math没有什么多余的东西，就是一堆的方法来操作数字randomMath.random() 这个方法是用来生成一个 0 ~ 1 之间的随机数每次执行生成的数字都不一样，但是一定是 0 ~ 1 之间的生成的数字包含 0 ，但是不包含 1var num = Math.random()console.log(num

原创 字符串的操作

ES5/String严格模式（了解）我们都知道 js 是一个相对不很严谨的语言而且开发的时候，一些代码也不是很严格要求而严格模式就是对开发的时候写的一些内容做了要求开启严格模式想开启严格模式，直接在代码最开始的位置写上字符串 use strict<script> 'use strtic' // 下面代码书写就要按照严格模式来书写</script>严格模式的规则声明变量必须有 var 关键字'use strtic'var num = 10

原创 数组

数组什么是数组？字面理解就是 数字的组合其实不太准确，准确的来说数组是一个 数据的集合也就是我们把一些数据放在一个盒子里面，按照顺序排好[1, 2, 3, 'hello', true, false]这个东西就是一个数组，存储着一些数据的集合数据类型分类number / string / boolean / undefined / null / object / function / array / …数组也是数据类型中的一种我们简单的把所有数据类

原创 函数

函数（上）我们代码里面所说的函数和我们上学的时候学习的什么三角函数、二次函数之类的不是一个东西函数的概念对于 js 来说，函数就是把任意一段代码放在一个 盒子 里面在我想要让这段代码执行的时候，直接执行这个 盒子 里面的代码就行先看一段代码// 这个是我们以前写的一段代码for (var i = 0; i < 10; i++) { console.log(i)}// 函数，这个 {} 就是那个 “盒子”function fn() { // 这个函数我们以前

原创 循环结构

循环结构（重点）循环结构，就是根据某些给出的条件，重复的执行同一段代码循环必须要有某些固定的内容组成初始化条件判断要执行的代码自身改变WHILE 循环while，中文叫 当…时，其实就是当条件满足时就执行代码，一旦不满足了就不执行了语法 while (条件) { 满足条件就执行 }因为满足条件就执行，所以我们写的时候一定要注意，就是设定一个边界值，不然就一直循环下去了// 1. 初始化条件var num = 0;// 2. 条件判断while (num &l

原创 分支结构

分支结构我们的 js 代码都是顺序执行的（从上到下）逻辑分支就是根据我们设定好的条件来决定要不要执行某些代码IF 条件分支结构（重点）if 语句通过一个 if 语句来决定代码是否执行语法： if (条件) { 要执行的代码 }通过 () 里面的条件是否成立来决定 {} 里面的代码是否执行// 条件为 true 的时候执行 {} 里面的代码if (true) { alert('因为条件是 true，我会执行')}// 条件为 false 的时候不执行 {} 里面的代

原创 JavaScript基础语法

JavaScript基础语法HTML ：标记语言JavaScript ：编程语言序言JavaScript发展历史（JS）1. 1994年，网景公司(Netscape)发布了Navigator浏览器0.9版，这是世界上第一款比较成熟的网络浏览器，轰动一时。但是这是一款名副其实的浏览器--只能浏览页面，浏览器无法与用户互动,当时解决这个问题有两个办法，一个是采用现有的语言,许它们直接嵌入网页。另一个是发明一种全新的语言。 liveScript ==> javaScript ==> E

原创 图片整合、css精灵、精灵图、雪碧图、CSS sprites

图片整合、css精灵、精灵图、雪碧图、CSS sprites优势：        1：减少请求次数，缓解服务端得压力        2：减少图片得质量，     &nbsp...

原创 媒体查询和移动端准备工作

媒体查询：由设备类型、监测设备特性表达式构成。语法：        @media 设备类型[all\screen]  and (条件表达式){           ...

原创 怪异盒模型和弹性盒子

怪异盒模型：   box-sizing:        属性值：            box-sizing:content-box;  常规盒...

原创 文本阴影和换行以及盒子阴影

文本阴影：text-shadow: x轴位置 Y轴位置 阴影大小 阴影颜色 注：如果想添加多个阴影 每一组阴影以逗号分隔。盒子阴影：box-shadow: x y 阴影的模糊度 阴影扩散的大小 阴影颜色 内阴影(inset 可选)添加多阴影：以逗号分隔的形式添加多阴影文本换行：英文或者数字默认显示：如果没有换行的情况下：尝试把下一个长单词放在下一行显示。word-w...

原创 选择器

1：新增加的type类型        email        url        number    &n...

原创 HTML5语义化结构标签和新增的type属性

HTML5:语义化结构标签：section 更偏于划分区域。（网页的外围结构…更类似与div）article 更偏向于内容的展示aside 侧边栏（在一旁的）header 网页头部或者是内容块头部footer 网页的顶部或者内容快的底部nav 导航区域。figure 代表一个独立的区域figcaption figure区域的标题ma...

原创 3D旋转和缩放及动画关键帧

3d旋转：        rotateZ();        rotate3d(x,y,z,度数)           &n...

原创 2D缩放和3D位移

2D: 平面空间的元素变形。    变形属性：        transform:        transform的属性值为功能函数。2d功能函数：  &nb...

原创 浏览器兼容和渐变

很多css3属性 最初的预览版没有形成最终的正式版，但是浏览器为了对这些新属性形成支持，主流浏览器提供属于自己的语法规则 “浏览器前缀”-webkit-     谷歌、苹果 浏览器前缀    -moz-      &...

原创 表格丶BFC布局以及触发条件

1:表格的数据行分组：（ 下面《》改成<>）《thead》《/thead》 表头《tbody》《/tbody》 表体《tfoot》《/tfoot》 表尾 注：一个表格有一个表头和表尾 ，但是可以包含多个表体2:列标题标签 <th></th> 默认的样式：左右居中 文本加粗3:表格标题 <cap...

原创 高度塌陷及解决方案

正常项目中：最小高度直接用min-height即可。    如果考虑兼容：min-height  iE6不兼容。 IE6默认把height解析成最小高度注：如果height 和 min-height同是出现，执行height固定高度！高度塌陷出现的场景：    ...

原创 定位和布局流丶锚点

定位属性：        position属性值：        static        absolute   &n...

原创 定位

position（定位）的属性值：1: position:static 【静态定位】 (默认值：添加和不设置的效果一样的)2: position:absolute  【绝对定位】            a:&nbs...

原创 置换元素与非置换元素

行内块元素：        input        img当作行内块使用 -> 特殊的存在：拥有行内块的特点。        ...

原创 CSS标签元素分类及特点

css的显示对标签分类：        块状元素        内联元素（行内元素）        争议点：   &nbs...

原创 空白空间的处理和溢出属性

1:结构：a:如果新闻后面有时间：(下面都删除了一个尖角号）<li<a href="#“新闻条新闻条新闻条新闻条新闻条<a<span2020-03-25</span</lib:如果没有时间<li<a href=”#"新闻条新闻条新闻条新闻条新闻条</a</li2: 给li添加宽高，高度量取的时候，量行高就行。3: 给...

原创 Margin Padding的用法

padding的用法：        1: padding是长在内容和盒子之间的，在盒子内部。        2：padding是为了调整 子元素 在 父元素里面位置关系。      &nbsp...

原创 盒模型及背景图

浮动：1：添加浮动的元素不占据空间2：只要子元素有浮动，父元素必须添加高度页面布局：设计图： 版式宽度：1920 1680 。。。网页的版心：960-1200结构规则：ID名称：网页外围结构PC端  版心宽度不能用百分比版心剧中：margin：0 auto；CSS列表属性：列表的列表符号：（了解）1：list-st...

原创 选择符的权重和CSS属性

选择符的权重：  id>class> 标签用四个数字表示权重：内部样式表------1000   id-----100  class------10   标签-----1    通配符-----0包含选择符的权重为权重之和eg：&...

原创 CSS选择符

css选择符：一：类型选择符（标签选择符）div/p/em/b/strone。。。二：ID选择符起名字：<标签 ID=”名称“   具有唯一性用名字写样式：#名称{属性：属性值；}三：类选择符（class选择符）<标签 class=“名称  名称2  名称3“></标签&...

原创 表格表单属性和类型

在这里插入图片描述

原创 H5基本结构和语法

原创 网页的组成

DAY1学习内容：1：网页的组成： 结构丶表现丶行为2：计算机语言： 结构（html） 表现（css） 行为（js）3：web的标准：规范（一系列标准的集合）w3c制定了结构和表现得标准ECMA制定了行为的标准4：html xhtml HTML5 html的发展5：vscode的使用学习感悟：不懂的时候看这些字母一头雾水，听了老师的讲解之后...