- 博客(28)
- 收藏
- 关注
RSS订阅原创 JavaScript 事件类型
1. 鼠标事件鼠标事件指与鼠标相关的事件。1.1 鼠标事件的类型2. 键盘事件3. 表单事件4. 窗口事件5. 焦点事件6. 剪切板事件7. 网页状态事件8. Touch事件
2022-05-01 23:08:43
1405
原创 JavaScript事件处理程序和事件流
1. 事件处理程序的分类事件处理程序分为HTML事件处理、DOM0级事件处理、DOM2级事件处理和IE事件处理。2. HTML事件处理<body> <div id="div"> <button onclick="demo()">HTML事件处理</button> </div> <script> function demo(){ console.
2022-04-26 14:58:50
1271
原创 JavaScript Node节点
1. Node接口的属性1.1 Node.textContenttextContent属性返回当前节点和它的所有后代节点的文本内容。<body> <div id="divA">This is <span>some</span> text</div> <script> var myDiv = document.getElementById("divA"); console.lo
2022-04-25 22:24:38
885
原创 JavaScript Element对象
1. 什么是Element对象Element对象对应网页的 HTML 元素。每一个 HTML 元素，在 DOM 树上都会转化成一个Element节点对象（以下简称元素节点）。2. Element对象的属性2.1 Element.idElement.id属性返回指定元素的id属性，该属性可读写。<!DOCTYPE html><html lang="en"><head></head><body> <div id
2022-04-24 21:44:12
1952
原创 JavaScript document对象
1. 什么是document对象document对象是文档的根节点，每张网页都有自己的document对象只要浏览器开始载入 HTML 文档，该对象就存在了，可以直接使用。2. document对象的属性2.1 document.doctypedocument.doctype，指向<doctype>节点，即文档类型（Document Type Declaration，简写DTD）节点。HTML 的文档类型节点，一般写成<!DOCTYPE HTML>。如果网页没有声明
2022-04-23 20:11:10
3731
原创 JavaScript DOM简介
1. 什么是DOMDOM 是 JavaScript 操作网页的接口，全称为“文档对象模型”（Document Object Model）。它的作用是将网页转为一个 JavaScript 对象，从而可以用脚本进行各种操作。浏览器会根据 DOM 模型，将结构化文档（比如 HTML 和 XML）解析成一系列的节点，再由这些节点组成一个树状结构（DOM Tree）。所有的节点和最终的树状结构，都有规范的对外接口。DOM 只是一个接口规范，可以用各种语言实现。所以严格地说，DOM 不是 JavaScrip
2022-04-23 17:58:19
311
原创 JavaScript标准库Date
Date对象是 JavaScript 原生的时间库。它以1970年1月1日00:00:00作为时间的零点，可以表示的时间范围是前后各1亿天（单位为毫秒）。时间戳是指格林威治时间1970年01月01日00时00分00秒(北京时间1970年01月01日08时00分00秒)起至现在的总秒数。1. Date()Date对象可以作为普通函数直接调用，返回一个代表当前时间的字符串。注意，即使带有参数，Date作为普通函数使用时，返回的还是当前时间。Date(); // 'Sat Apr 23
2022-04-23 15:40:05
385
原创 JavaScript标准库Math
Math是 JavaScript 的原生对象，提供各种数学功能。该对象不是构造函数，不能生成实例，所有的属性和方法都必须在Math对象上调用。1. Math静态属性以下均为只读属性，不可修改。Math.E // 常数eMath.LN2 // 2的自然对数Math.LN10 // 10的自然对数Math.LOG2E // 以2为底的e的对数Math.LOG10E // 以10为底的e的对数Math.PI // 常数PiMath.SQRT1_2
2022-04-23 14:06:42
996
原创 JavaScript变量作用域和闭包
在执行num=1语句时，编译器会尝试在当前作用域链中解析num，如果在当前作用域链中找到num，则会对num属性赋值；在JavaScript中，变量分为全局变量和局部变量，与其他高级语言不同的是，JavaScript中的局部变量的作用域为函数级作用域，即，只有在函数中声明的变量为局部变量，其他的包括在条件判断语句和循环判断语句中声明的变量均为全局变量。需要注意的是，如果变量在函数中声明时未添加var关键词，则该变量为全局变量，更准确的说，创建的不是变量，而是window对象的一个属性。...
2022-04-23 12:39:48
226
原创 JavaScript对象
1. 对象的定义对象就是一组“键值对”（key-value）的集合，是一种无序的复合数据集合。var student = { name: "blank", no: 1470, sex: "male", call: function () { console.log("hello world"); }};上述代码中，name、no和sex称为键名（key），所有键名默认为字符串，所以可以不加引号。但是，需要注意的是，如果键名不加引号，那么键名的命名需遵守标识符的
2022-04-23 12:02:32
72
原创 JavaScript函数
1. 函数的声明1.1 function 命令function print(s) { console.log(s);}1.2 函数表达式var print = function(s) { console.log(s);};1.3 Function 构造函数了解即可，基本不会使用。var add = new Function( 'x', 'y', 'return x + y');// 等同于function add(x, y) {
2022-04-22 23:54:07
350
原创 JavaScript数组
1. 数组的定义var arr = ['a', 'b', 'c'];任何类型的数据，都可以放入数组。var arr = [ 100, [1, 2, 3], false];数组本质上属于一种特殊的对象。var arr = ['a', 'b', 'c'];console.log(typeof arr); // object2. 数组的length属性该属性可以通过赋值运算符重新赋值。① 当给数组的length赋值一个更小的值时，会相应地减少数组的成
2022-04-22 00:00:51
168
原创 JavaScript字符串
1. 转义字符使用转义字符将字符串中的双引号和单引号正常输出var myString = "hello \"world\"";console.log(myString); // hello "world"字符串只能写在一行，分成多行需要使用转义字符/* var myString = "hello world"; 错误的声明方式*/var myString = "hello\world";常用的转义符：① 换行符：\n ② 回车符：\r ③ 制表符
2022-04-20 17:31:19
500
原创 JavaScript数据类型和运算符
1. 数据类型① 数值（number）var a = 10;var b = 3.14;② 字符串（string）var a = 'hello world'; // 字符串为hello worldvar b = "hello"; // 字符串为hello worldvar c = "hello 'world'"; // 字符串为hello 'world'var d = '"hello" world'; // 字符串为"hello" world双引号和
2022-04-17 23:57:46
479
原创 JavaScript基础与变量
1. JavaScript介绍JavaScript是一种轻量级的脚本语言，不具备开发操作系统的能力。JavaScript的宿主环境有很多种，最常见的是浏览器，另外还有服务器环境，就是Node项目。2. JavaScript与ECMAScript的关系JavaScript是ECMAScript的一种实现，ECMAScript是JavaScript的规格。3. JavaScript语句语句以分号结尾，可以不写分号，但不建议。var num = 10;4. JavaScript标
2022-04-17 20:18:49
538
原创 CSS雪碧图
1. 定义CSS sprite也叫做CSS 雪精灵，CSS 雪碧图，是一种网页图片应用处理方式。它允许将一个页面涉及到的所有零星小图都包含到一张大图中去。2. 使用雪碧图的优点① 减少图片的字节。② 客户端每显示一张图片都会向服务器发送请求，所以图片越多，造成的延迟越大。使用雪碧图访问页面时，由从前的多次请求转换为一次请求，减少了网页的HTTP请求，从而大大提高了页面的性能。③ 减轻了对图片命名的困扰，提高了网页的制作效率。3. 使用雪碧图的原理① 设置一个有宽高的容器（因为雪碧
2022-04-16 14:37:11
2297
原创 CSS响应式布局
1. 媒体查询通过媒体查询media可以实现响应式设计。响应式设计是为了实现不同屏幕分辨率的终端上浏览网页的不同展示方式。2. 响应式设计的优缺点优点：① 面对不同分辨率设备灵活性强。② 能够快速解决多设备显示适应问题。缺点：① 兼容各种设备工作量大，效率低。② 代码累赘，会出现隐藏无用元素，加载时间加长。3. 响应式设计的步骤3.1 设置meta标签大多数移动浏览器将HTML页面放大为宽的视图（viewport）以符合屏幕分辨率。可以使用视图中的meta标签来进行重
2022-04-16 13:20:53
220
原创 CSS3新特性
1. border-radius属性：圆角利用border-radius属性可以给任何元素添加圆角。border-radius属性的取值：数字（不可以为负值）或百分比，取值越大，角的弧度越大。取值为百分比时圆角不平滑，因为取值为百分比时，宽的弧长为（容器的宽*百分比），高的弧长为（容器的高*百分比），如果容器的宽高不一致，那么生成的圆角就不平滑。百分比的作用：画圆形，先将容器的宽高设为同样的值，再将border-radius属性设置为50%。border-radius:10px 15p
2022-04-14 17:07:23
849
原创 CSS浮动和定位
1. float属性1.1 浮动的定义及理解任何元素浮动后都会变成块级元素。CSS的float使元素脱离文档流（指元素在文档中不占位置了），按照指定的方向发生移动，直到它碰到父元素的边框或者另一个浮动元素的边框为止（浮动不会重叠）。浮动最初是用于图像环绕文字，所以尽管元素设置浮动后不占据位置，但文字仍能环绕在浮动元素周围，而不是被浮动元素覆盖。① 浮动元素的外边缘碰到包含框的情况：框一向右浮动，直至它碰到了父元素的边框② 浮动元素碰到另一个浮动元素的边框的情况：框一、框二、框
2022-04-13 22:20:43
645
1
原创 CSS盒模型
1. 盒模型的概念CSS盒模型本质上是一个盒子，封装着周围的HTML元素，它包括外边距margin，边框border，内边距padding和实际内容content。把盒子模型看成一个快递，快递里面的物品就是content，快递里面的缓冲物就是padding，快递盒子就是border，两个快递间的距离就是margin。2. 标准盒模型根据W3C的规范，盒子实际内容content的宽度和高度等于我们设置的width和height，而盒子总宽度=width+padding+border+mar
2022-04-09 20:12:19
1410
原创 CSS3选择器
1. 关系选择器1.1 后代选择器① 定义：选择所有被A元素包含的B元素，连接符号是空格② 语法：A B{}<head> <style> div p{ color:red; } </style><head><body> <p>黑色的</p> <div> <p>红色的</p> <p&g
2022-04-06 17:58:06
472
原创 CSS基础样式
1. 背景属性1.1 background-color：设置背景颜色值 说明 color 颜色值 transparent 默认值，透明 inherit 从父元素继承 1.2 background-image：设置背景图像值 说明 url("url") 图像的url none 默认值，没有背景图像 inherit 从父元素继承 1.3 background-repeat：平铺背景图像的方式值 说明 rep
2022-04-05 23:34:21
539
原创 CSS简介
1. 为什么使用CSS美观一致的页面内容与格式分离，提高代码的可重用性和可维护性2. CSS样式表特征① 继承性：被包含在内部的标签可以用于外部标签的样式，如line-height，有些则不能继承，如margin。② 层叠性：层叠就是对同一元素多次设置同一样式，这将使用最后一次设置的值。③ 优先级：样式定义冲突时，按照不同样式规则的优先级定义样式。内联样式>内部样式=外部样式3. CSS的引入方式3.1 内联样式<p style="background:
2022-04-04 23:05:55
367
原创 HTML-form表单
1. 什么是表单表单是由窗体和控件组成的，一个表单一般应该包含用户填写信息的输入框，提交按钮等，这些输入框、按钮叫做控件。表单很像容器，它能容纳各种各样的控件。<form action="url" method="get|post" name="myform"></form>name：表单提交时的名称action：表单提交到的地址method：提交方式，默认值为getpost和get的区别：① url可以看到通过get提交的数据，而通过post的则不能。
2022-04-03 21:20:08
2122
原创 HTML基础元素
1. 标题标签：h1-h6<h1 align="center">这是标题</h1>不要为了加粗或者加大文字使用标题标签，搜索引擎根据标题为网页的结构和内容编制索引。align：设置对齐方式2. 段落标签：p<p align="left">这是一个段落</p>3. 换行标签：br<p>这是一个段落</p><br>4. 水平线标签：hr<hr color="" width=""
2022-04-03 13:58:46
411
原创 HTML简介
1. 什么是HTMLHTML指的是超文本标记语言，HTML不是编程语言，而是标记语言。HTML不区分大小写。2. 什么是标签HTML标签是由尖括号包围的关键词。HTML标签分为封闭类型标记（双标记）和非封闭类型标记（空标记）。3. <!DOTYYPE>的作用<!DOCTYPE>声明位于文档的最前面，处于标签之前，它不是HTML标签。<!DOCTYPE>声明主要作用是告诉浏览器的解析器使用的是哪种HTML规范或者XHTML规范来解析页面。
2022-04-03 13:11:37
765
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人