- 博客(76)
- 收藏
- 关注
RSS订阅原创 offset、client 和 scroll三大系列的属性及其作用
1. 元素偏移量 offset 系列1.1 offset 概述offset翻译过来就是偏移量，我们使用offset系列相关属性可以动态得到该元素的位置(偏移)、大小等。获得元素距离带有定位父元素的位置获得元素自身的大小(宽度高度)注意：返回的值都不带单位。offset系列常用属性element.offsetParent：返回作为该元素带有定位的父级元素，如果父级都没有定位则返回...
2020-04-04 21:34:11
1160
原创 立即执行函数，及其两种写法
立即执行函数1. 什么是立即执行函数？立即执行函数是不需要调用，马上能够自己执行的函数2. 立即执行函数的写法( function() { }) ()(function() { console.log(2)})();//这个小括号可以看做是调用函数里面可以写实参(function(a) { cnsole.log(a)// 打印1 a是形参})(1)// 1为实...
2020-04-04 20:38:43
1235
原创 BOM概述及其顶级对象window的属性和方法
1.BOM概述1.1 什么是BOMBOM(Browser Object Model)即浏览器对象模型，它提供了独立于内容而与浏览器窗口进行交互的对象，其核心对象是window。BOM由一系列相关的对象构成，并且每个对象都提供了很多属性和方法BOM缺乏标准，JavaScript语法的标准化组织是ECMA，DOM的变准化组织是W3C，BOM最初是Netscape浏览器标准的一部分DOM...
2020-04-04 10:51:27
1636
原创 事件绑定、解绑、DOM事件流、事件对象等事件高级介绍
事件高级1. 注册事件(绑定事件)1.1 注册事件概述给元素添加事件，称为注册事件或者绑定事件。注册事件有两种方式：传统方式和方法监听方式1. 传统注册方式利用on开头的事件，如onclick<button onclick = “alert(‘hi~’)”><button>btn.onclick = function() {}特点：注册事件的唯一性同一...
2020-04-03 21:50:30
287
原创 CSS—表单的样式设置
input常用属性type：input的类型text：文本输入框（明文输入）password：文本输入框（密文输入）radio：单选框checkbox：复选框button：按钮reset：重置submit：提交表单数据给服务器file：文件上传maxlength：允许输入的最大字数placeholder：占位文字readonly：只读属性disab...
2020-04-03 16:29:16
3449
原创 CSS设置圆角边框
在CSS3 中，新增了圆角边框的样式，可以使盒子变成圆角。原理：(椭)圆与边框相切形成圆角效果，长度越大，圆角角度越大语法border-radius:length;参数值可以设置为数值或百分比的形式如果是正方形，想要设置为一个圆，把数值改为高度或者宽度的一半即可，或者直接写50%如果是个矩形，设置为高度的一半就是圆角矩形。该属性是一个简写属性，可以设置四个值，分别代...
2020-04-03 15:50:01
909
原创 元素的显示与隐藏
1. 元素的显示与隐藏1.1 display 属性display属性用于设置一个元素应当如何显示。display:none; 隐藏对象display:block; 除了转换为块级元素之外，同时还有显示元素的意display隐藏元素后，不再占有原来的位置。(会搭配js做很多网页特效)1.2 visibilityvisibility属性用于指定一个元素应该可见还是隐藏。visi...
2020-04-03 15:41:14
137
原创 HTML5常用新特性
1. HTML5新特性HTML5的新特性主要针对以前的不足，增加了一些新的标签、新的表单和新的表单属性等。这些新特性都有兼容性问题，基本都是IE9以上版本才支持，如果不考虑兼容性问题，才可以使用这些新特性。1.1 HTML5 新增的语义化标签以前布局，基本都是用div来做。但是div对于搜索引擎来说，是没有语义的。<header>:头部标签<nav>：导航标签...
2020-04-03 15:17:47
971
原创 HTML常用标签
HTML常用标签1.img 元素src属性: sourse的缩写<img src="图片地址" alt="占位文字(图片加载失败的时候显示)" weight="100" height="100">远程图片地址：直接在浏览器复制的图片地址<img src="http://msnphoto.eastday.com/images/th...
2020-04-03 15:16:05
133
原创 HTML初识，什么是网页？HTML是什么？
1. 网页1.1 什么是网页网站 是指在因特网上根据一定的规则，使用HTML等制作的用于展示特定内容相关的网页集合。网页 是网站中的一”页“，通常是HTML格式的文件，它要通过浏览器来阅读。网页是构成网站的基本元素，它通常由图片、链接、文字、声音、视频等元素组成。通常我们看到的网页，常见以.htm 或 .html后缀结尾的文件，因此将其俗称为HTML文件。1.2 什么是HTMLHTML...
2020-04-03 15:06:37
3644
原创 DOM重点核心总结
DOM重点核心总结文档对象模型(DOM)，是W3C组织推荐的处理可扩展标记语言(HTML或者XML)的标准编程接口。W3C定义了一系列的DOM接口，通过这些DOM接口可以改变网页的内容、结构和样式对于JavaScript，为了能够使JavaScript操作HTML，JavaScript就有了一套自己的dom编程接口对于HTML，dom使得html形成一棵dom树，包含文档、元素、节点...
2020-04-02 22:02:23
378
原创 DOM—节点操作
6.节点操作6.1 为什么学节点操作获取元素通常使用两种方式：1. 利用DOM提供的方法获取元素document.getElementById()document.getElementByTagName()document.querySelector 等逻辑性不强，繁琐2. 利用节点层级关系获取元素利用父子兄节点关系获取元素逻辑性强，但兼容性稍差6.2 节点概述网页...
2020-04-02 18:16:26
207
原创 DOM—操作元素
.操作元素JavaScript的DOM操作可以改变网页内容、结构和样式，我们可以利用DOM操作元素来改变元素里面的内容属性等5.1 改变元素内容element.innerText//从起始位置到终止位置的内容，但它去除html标签，同时空格和换行也会换掉<body> <button>显示当前系统时间</button> <div&g...
2020-04-01 22:01:15
190
原创 DOM—事件基础
4.事件基础4.1 事件概述JavaScript使我们有能力创建动态页面，而事件是可以被JavaScript侦测到的行为4.2事件组成事件由三部分组成（事件三要素）：事件源：事件被触发的对象，谁，比如按钮事件类型：如何触发，什么事件，比如鼠标点击（onclick） 鼠标经过 键盘按下事件处理程序：通过一个函数赋值的方式完成<body> <button ...
2020-04-01 21:58:56
137
原创 DOM—获取元素的方法
3.获取元素3.1如何获取页面元素根据ID获取根据标签名获取通过HTML5新增的方法获取特殊元素获取3.2 根据ID获取使用getElementById()方法可以获取带有ID的元素对象document.getElementById('ID名');3.3 根据标签名获取使用getElementsByTagName()方法可以返回带有指定标签名的对象的集合document...
2020-04-01 21:57:39
164
原创 什么是API及DOM初识
1. Web APIs 和 JS基础的关联性1.1 JS 组成ECMAScript：JavaScript语法DOM：文档对象模型BOM：浏览器对象模型1.2 JS 基础阶段以及Web APIs阶段JS基础阶段学习ECMAScript标准规定的基本语法只学习语法做不了常用的网页交互效果JS基础是铺垫Web APIs阶段Web APIs 是W3C组织的标准主要学习DO...
2020-04-01 21:55:36
488
原创 JavaScript简单数据类型与复杂数据类型
1. 简单类型与复杂类型简单类型又叫做基本数据类型或者值类型，复杂数据类型又叫做引用类型值类型：在存储时变量中存储的是值本身，因此叫做值类型string , number , boolean , undefined , null// 简单数据类型 null var timer = null;console.log(typeof timer);// 返回的是一个空的对象//如果有个...
2020-04-01 12:03:34
406
原创 JavaScript常用内置对象
1. 内置对象JavaScript中的对象分为3种：自定义对象、内置对象、浏览器对象前面两种对象是JS基础内容，属于ECMAScript; 第三个浏览器对象属于JS独有的。内置对象就是JS语言自带的一些对象，这些对象供开发者使用，并提供了一些常用的功能(属性和方法)内置对象最大的优点就是帮助我们快速开发JavaScript提供了多个内置对象：Math、 Date、Array、Strin...
2020-04-01 11:09:29
472
原创 JS 对象
JS 对象1.1 什么是对象？现实生活中：万物皆对象，对象是个具体的事物，看得见摸得着的实物。在JavaScript中，对象是一组无序的相关属性和方法的集合，所有的事物都是对象，例如 字符串、数值、数组、函数等对象是由属性和方法组成的。属性：事物的特征，在对象中用属性表示(常用名词)方法：事物的行为，在对象中用方法来表示(常用动词)1.2 为什么需要对象保存一个值时，可以使用变...
2020-03-29 17:06:48
134
原创 JS 执行机制——预解析
1.预解析JavaScript代码是由浏览器中的JavaScript解释器来执行的。JavaScript解析器在运行JavaScript代码的时候分两步：预解析和代码执行。预解析：js 引擎会把 js 里面所有的var还有function提升到当前作用域的最前面代码执行：按照代码书写的顺序从上往下执行1.1 变量预解析(变量提升)就是把所有的变量声明提升到当前的作用域最前面(不提升赋...
2020-03-29 15:52:08
281
原创 JavaScript作用域及作用域链
JavaScript作用域就是代码名字(变量) 在某个范围内起作用 目的是为了提高程序可靠性，更重要的是减少命名冲突。1 全局作用域整个script标签 或者是一个单独的js文件2 局部作用域在函数内部就是局部作用域，只在函数内部起效果和作用3 变量的作用域根据作用域的不同，变量分为全局变量和局部变量全局变量在全局作用域下的变量，在全局下都可以使用注意：如果函数内部没有声...
2020-03-29 14:45:21
205
原创 JavaScript如何新增数组元素
1 修改length长度var arr = ['red', 'green', 'blue'];console.log(arr.length);//3arr.length = 5;// 修改数组的长度为5console.log(arr);// ['red', 'green', 'blue',empty * 2]console.log(arr[3]); //undefinedconsole...
2020-03-29 14:42:40
272
原创 JavaScript 数据类型及其相互转换
1. 数据类型1.1 为什么需要数据类型在计算机中，不同的数据所占用的存储空间是不同的，为了便于把数据分成所需内存大小不同的数据，充分利用存储空间，于是定义了不同的数据类型。1.2 变量的数据类型变量是用来存储值的所在处，它们有名字和数据类型。变量的数据类型决定了如何将代表这些值的位存储到计算机的内存中。JavaScript是一种弱类型或者说动态语言。这意味着不用提前声明变量的类型，在程序...
2020-03-25 18:08:04
346
原创 变量概述
1. 变量概述1.1 什么是变量变量是用于存放数据的容器。可以通过变量名获取数据和修改数据。1.2 变量在内存中的存储本质：变量是程序在内存中申请的一块用来存放数据的空间。1.3 变量的使用变量在使用时分为两步：1. 声明变量 2. 赋值声明变量// 声明变量var age;var是一个 JS 关键字，用来声明变量(variable变量的意思)。使用该关键字声明变量后，...
2020-03-25 16:01:50
362
原创 初识 JavaScript
1. 初识 JavaScript1.1 JavaScript 历史布兰登·艾奇（Brendan Eich,1962年~）布兰登·艾奇在1995年利用10天完成JavaScript设计。网景公司最初命名为LiveScript , 后来在与Sun合作的时候改名为JavaScript。1.2 JavaScript 是什么JavaScript是世界上最流行的语言之一，是一种运行在客户端的...
2020-03-25 15:42:28
168
原创 页面布局三大核心(三)—定位（position）
1.定位1.1 为什么需要定位提问：以下情况使用标准流或者浮动能实现吗？某个元素可以自由的在一个盒子内移动位置，并且压住其他的盒子。以上效果，标准流或者浮动都无法快速实现，此时需要定位来实现。所以：浮动可以让多个块级盒子一行都没有缝隙排列显示，经常用于横向排列盒子。定位则是可以让盒子自由的在某个盒子内移动位置或者固定屏幕中的某个位置，并且可以压住其他盒子。1.2 定位组成定位...
2020-03-22 11:53:27
828
原创 页面布局三大核心(二)—浮动（float）
页面布局三大核心(二)——浮动（float）1. 传统网页布局的三种方式网页布局的本质——用CSS来摆放盒子。把盒子摆放到相应的位置。CSS 提供了三种传统布局方式：普通流(标准流)浮动定位2. 标准流（普通流/文档流）所谓的标准流：就是标签按照规定好的默认方式排列，标准流是最基本的布局方式块级元素会独占一行，从上向下顺序排列。行内元素会按照顺序从左到右顺序排列，碰到父元...
2020-03-16 17:32:36
617
原创 页面布局三大核心(一)—盒子模型
页面布局三大核心(一)-盒子模型HTML中的每一个元素都可以看作是一个盒子，如下图所示，可以具备这4个属性1. content相关属性width：设置宽度min-width：设置最小宽度，无论内容有多少，宽度都>=min-widthmax-width：设置最大宽度,无论内容有多少，宽度都<=max-widthheight：设置高度min-height：设置最小高度,无...
2020-03-15 17:40:34
772
原创 CSS的三大特性
CSS的三大特性1.层叠性层叠性主要解决样式冲突的问题层叠性原则：样式冲突，遵循就近原则，哪个样式离结构近就执行哪个样式（后写的会覆盖前面的）样式不冲突，不会层叠div { color: red; font-size: 12px;} div { color: pink;}/*color属性值层叠为pink,font-size不会层叠*/2.继承性子标...
2020-03-15 15:37:33
635
原创 CSS选择器
CSS 选择器1. CSS 基础选择器：1.1 统配选择器：*<style> /*选取页面中所有的元素（标签）*/ * { color: red; }</style>1.2 元素选择器（标签选择器）type selectors：<style> /*可以选出所有相同的标签*/ div { colo...
2020-03-15 11:16:47
169
原创 Vue组件化开发
组件使用的三个步骤1.创建组件构造器2.注册组件3.使用组件<div id="app"> <!-- 使用组件 --> <cpn></cpn></div><script> // 1.创建组件构造器对象 const cpnC = Vue.extend({ template:` <...
2020-02-27 17:46:54
133
原创 邮箱列表练习
要求：１.默认显示状态２.光标在邮箱上显示状态３.光标在列表上的显示状态完整代码：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, in...
2020-02-15 12:15:03
429
原创 块级、行内级元素的划分及其特点
HTML元素的划分一、块级、行内级元素1.块级元素(block-level elements) 独占父元素一行，比如：div 、p 、pre、 h1~h6、 ul、 ol、 li 、dl 、dt 、dd、 table 、form、 article 、aside、 footer、 header 、hgroup、 main、 nav 、section、 blockquote 、hr等2.行内...
2020-02-15 11:02:38
892
原创 制作表单练习
制作如图所示表单1.完整代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <ti...
2020-02-14 12:11:50
1137
原创 引入CSS的三种方式
CSS的基本使用内联(行内)样式：inline style使用 style=“属性名:属性值; 属性名:属性值;”<h1 style="font-size:50px;color:red;">网页的标题</h1>文档样式表：document style sheet选择器 {属性名:属性值;}开发网页特性：结构和样式分离<style> ...
2020-02-09 16:24:51
210
原创 Web前端开发---HTML
一、 HTML概述HTML（HyperText Markup Language）超级文本标记语言是标准通用标记语言的下一个应用。它不是一种编程语言，它用于告诉浏览器如何构造网页，也是构造网页文档的主要语言。网页文件本身是一种文本文件，通过在文本文件中添加标记符，可以告诉浏览器如何显示其中的内容（如文字如何处理，画面如何安排，图片如何显示等）。浏览器按顺序阅读网页文件，然后根据标记符解释和显示器...
2020-01-14 11:21:46
424
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人