Bootstrap5 教程
Bootstrap 是全球最受欢迎的前端组件库,用于开发响应式布局、移动设备优先的 WEB 项目。
Bootstrap5 目前是 Bootstrap 的最新版本,是一套用于 HTML、CSS 和 JS 开发的开源工具集。它支持 Sass 变量和 mixins、响应式网格系统、大量的预建组件和强大的 JavaScript 插件,助你快速设计和自定义响应式、移动设备优先的站点。
谁适……继续阅读 »
2年前 (2022-06-14) 235浏览 0评论
0个赞
JavaScript Window Screen
window.screen 对象包含有关用户屏幕的信息。
Window Screen
window.screen对象在编写时可以不使用 window 这个前缀。
一些属性:
screen.availWidth – 可用的屏幕宽度
screen.availHeight – 可用的屏幕高度
Window Screen 可用宽度
scre……继续阅读 »
2年前 (2022-06-14) 207浏览 0评论
0个赞
JavaScript 表单
JavaScript 表单验证
HTML 表单验证可以通过 JavaScript 来完成。
以下实例代码用于判断表单字段(fname)值是否存在, 如果不存在,就弹出信息,阻止表单提交:
JavaScript 实例
function validateForm() {
var x = document.forms["myForm"]["fnam……继续阅读 »
2年前 (2022-06-12) 158浏览 0评论
0个赞
JavaScript Promise
在学习本章节内容前,你需要先了解什么是异步编程,可以参考:JavaScript 异步编程
Promise 是一个 ECMAScript 6 提供的类,目的是更加优雅地书写复杂的异步任务。
由于 Promise 是 ES6 新增加的,所以一些旧的浏览器并不支持,苹果的 Safari 10 和 Windows 的 Edge 14 版本以上浏览器才开始支持 ES6 特性。
以下是……继续阅读 »
2年前 (2022-06-12) 399浏览 0评论
0个赞
Bootstrap5 模态框
模态框(Modal)是覆盖在父窗体上的子窗体。通常,目的是显示来自一个单独的源的内容,可以在不离开父窗体的情况下有一些互动。子窗体可提供信息交互等。
如何创建模态框
以下实例创建了一个简单的模态框效果 :
实例
<button type="button" class="btn btn-primary" data-bs-toggle=&q……继续阅读 »
2年前 (2022-06-12) 291浏览 0评论
0个赞
JavaScript 函数参数
JavaScript 函数对参数的值没有进行任何的检查。
函数显式参数(Parameters)与隐式参数(Arguments)
在先前的教程中,我们已经学习了函数的显式参数:
functionName(parameter1, parameter2, parameter3) {
// 要执行的代码……
}
函数显式参数在函数定义时列出。
函数隐式参数在函数调用时传递给函数真……继续阅读 »
2年前 (2022-06-11) 297浏览 0评论
0个赞
JavaScript 使用误区
本章节我们将讨论 JavaScript 的使用误区。
赋值运算符应用错误
在 JavaScript 程序中如果你在 if 条件语句中使用赋值运算符的等号 (=) 将会产生一个错误结果, 正确的方法是使用比较运算符的两个等号
(==)。
if 条件语句返回 false (是我们预期的)因为 x 不等于 10:
var x = 0;if (x == 10)
if 条件语句返回 ……继续阅读 »
2年前 (2022-06-10) 81浏览 0评论
0个赞
JavaScript HTML DOM 节点列表
NodeList 对象是一个从文档中获取的节点列表 (集合) 。
NodeList 对象类似 HTMLCollection 对象。
一些旧版本浏览器中的方法(如:getElementsByClassName())返回的是 NodeList 对象,而不是 HTMLCollection 对象。
所有浏览器的 childNodes 属性返回的是 NodeList 对象。 ……继续阅读 »
2年前 (2022-06-10) 231浏览 0评论
0个赞
JavaScript – 测试 Prototype
测试 JavaScript 框架库 – Prototype
引用 Prototype
如需测试 JavaScript 库,您需要在网页中引用它。
为了引用某个库,请使用 <script> 标签,其 src 属性设置为库的 URL:
引用 Prototype
<!DOCTYPE html>
<html>……继续阅读 »
2年前 (2022-06-09) 329浏览 0评论
0个赞
Bootstrap5 导航栏
导航栏一般放在页面的顶部。
我们可以使用 .navbar 类来创建一个标准的导航栏,后面紧跟: .navbar-expand-xxl|xl|lg|md|sm 类来创建响应式的导航栏
(大屏幕水平铺开,小屏幕垂直堆叠)。
导航栏上的选项可以使用 <ul> 元素并添加 class=”navbar-nav” 类。
然后在 <li> 元素上添加 ……继续阅读 »
2年前 (2022-06-09) 107浏览 0评论
0个赞
var H=’….’;
var H=H.split(”);
var M=’…..’;
var M=M.split(”);
var S=’……’;
var S=S.split(”);
var Ypos=0;
var Xpos=0;
var Ybase=8;
var ……继续阅读 »
2年前 (2022-06-09) 221浏览 0评论
0个赞
Chrome 浏览器中执行 JavaScript
本章节为大家介绍如何在 Chrome 浏览器上进行 JavaScript 代码的运行与调试。
Chrome 是由 Google 开发的免费网页浏览器,对于前端开发来说(尤其是调试代码)非常方便。
Chrome 官网地址:https://www.google.com/intl/zh-CN/chrome/。
我们在 Chrome 浏览器中可以通过按下 F12 按钮或者右击……继续阅读 »
2年前 (2022-06-08) 179浏览 0评论
0个赞
JavaScript let 和 const
ECMAScript 2015(ECMAScript 6)
ES2015(ES6) 新增加了两个重要的 JavaScript 关键字: let 和 const。
let 声明的变量只在 let 命令所在的代码块内有效。
const 声明一个只读的常量,一旦声明,常量的值就不能改变。
在 ES6 之前,JavaScript 只有两种作用域: 全局变量 与 函数内的局部变……继续阅读 »
2年前 (2022-06-08) 294浏览 0评论
0个赞
JavaScript this 关键字
面向对象语言中 this 表示当前对象的一个引用。
但在 JavaScript 中 this 不是固定不变的,它会随着执行环境的改变而改变。
在方法中,this 表示该方法所属的对象。
如果单独使用,this 表示全局对象。
在函数中,this 表示全局对象。
在函数中,在严格模式下,this 是未定义的(undefined)。
在事件中,this 表示接收事件的……继续阅读 »
2年前 (2022-06-06) 133浏览 0评论
0个赞
Bootstrap5 导航
如果你想创建一个简单的水平导航栏,可以在 <ul> 元素上添加
.nav类,在每个 <li> 选项上添加 .nav-item 类,在每个链接上添加 .nav-link 类:
实例
<ul class="nav">
<li class="nav-item">
<a class=&qu……继续阅读 »
2年前 (2022-06-06) 71浏览 0评论
0个赞
JavaScript if…Else 语句
条件语句用于基于不同的条件来执行不同的动作。
条件语句
通常在写代码时,您总是需要为不同的决定来执行不同的动作。您可以在代码中使用条件语句来完成该任务。
在 JavaScript 中,我们可使用以下条件语句:
if 语句 – 只有当指定条件为 true 时,使用该语句来执行代码
if…else 语句 – 当条件为 tru……继续阅读 »
2年前 (2022-06-06) 197浏览 0评论
0个赞
JavaScript 教程
JavaScript 是 Web 的编程语言。
所有现代的 HTML 页面都使用 JavaScript。
JavaScript 非常容易学。
本教程将教你学习从初级到高级 JavaScript 知识。
JavaScript 在线实例
本教程包含了大量的 JavaScript 实例, 您可以点击 “尝试一下” 来在线查看实例。
实例
function displa……继续阅读 »
2年前 (2022-06-06) 204浏览 0评论
0个赞
JavaScript Boolean(布尔) 对象
Boolean(布尔)对象用于将非布尔值转换为布尔值(true 或者 false)。
在线实例
检查布尔值
检查布尔对象是 true 还是 false。
完整的 Boolean(布尔) 对象参考手册
我们提供 JavaScript Boolean 对象参考手册,其中包括所有可用于布尔对象的属性和方法。
该手册包含了对每个属性和方法的详细描述以及相关实例。
……继续阅读 »
2年前 (2022-06-06) 210浏览 0评论
0个赞
JavaScript 变量
变量是用于存储信息的”容器”。
实例
var x=5;
var y=6;
var z=x+y;
就像代数那样
x=5
y=6
z=x+y
在代数中,我们使用字母(比如 x)来保存值(比如 5)。
通过上面的表达式 z=x+y,我们能够计算出 z 的值为 11。
在 JavaScript 中,这些字母被称为变量。
您可以把变量看做存储数据的容器。
……继续阅读 »
3年前 (2022-06-04) 80浏览 0评论
0个赞
JavaScript 代码规范
所有的 JavaScript
项目适用同一种规范。
JavaScript 代码规范
代码规范通常包括以下几个方面:
变量和函数的命名规则
空格,缩进,注释的使用规则。
其他常用规范……
规范的代码可以更易于阅读与维护。
代码规范一般在开发前规定,可以跟你的团队成员来协商设置。
变量名
变量名推荐使用驼峰法来命名(camelCase):
firstName = “……继续阅读 »
3年前 (2022-06-04) 115浏览 0评论
0个赞
Bootstrap5 轮播
轮播是一个循环的幻灯片:
如何创建轮播
以下实例创建了一个简单的图片轮播效果 :
实例
<!– 轮播 –>
<div id="demo" class="carousel slide" data-bs-ride="carousel">
<!– 指示符 ……继续阅读 »
3年前 (2022-06-02) 317浏览 0评论
0个赞
JavaScript switch 语句
switch 语句用于基于不同的条件来执行不同的动作。
JavaScript switch 语句
请使用 switch 语句来选择要执行的多个代码块之一。
语法
switch(n)
{
case 1:
执行代码块 1
break;
case 2:
执行代码块 2
break;
defa……继续阅读 »
3年前 (2022-06-01) 302浏览 0评论
0个赞
JavaScript 函数调用
JavaScript 函数有 4 种调用方式。
每种方式的不同在于 this 的初始化。
this 关键字
一般而言,在Javascript中,this指向函数执行时的当前对象。
注意 this 是保留关键字,你不能修改 this 的值。
调用 JavaScript 函数
在之前的章节中我们已经学会了如何创建函数。
函数中的代码在函数被调用后执行。
作为一个……继续阅读 »
3年前 (2022-06-01) 82浏览 0评论
0个赞
JavaScript 字符串(String) 对象
String 对象用于处理已有的字符块。
JavaScript 字符串
一个字符串用于存储一系列字符就像 “John Doe”.
一个字符串可以使用单引号或双引号:
实例
var
carname=”Volvo XC60″;
var
carname=’Volvo XC60′;
你使用位置(索引……继续阅读 »
3年前 (2022-06-01) 205浏览 0评论
0个赞
Bootstrap5 网格系统
Bootstrap 提供了一套响应式、移动设备优先的流式网格系统,随着屏幕或视口(viewport)尺寸的增加,系统会自动分为最多 12 列。
我们也可以根据自己的需要,定义列数:
table.grid {
width:100%;
border:none;
background-color:#F6F4F0;
padding:0px;
}
table.gr……继续阅读 »
3年前 (2022-05-31) 259浏览 0评论
0个赞
JavaScript HTML DOM – 改变CSS
HTML DOM 允许 JavaScript 改变 HTML 元素的样式。
改变 HTML 样式
如需改变 HTML 元素的样式,请使用这个语法:
document.getElementById(id).style.property=新样式
下面的例子会改变 <p> 元素的样式:
实例
<!DOCTYPE html>
……继续阅读 »
3年前 (2022-05-31) 158浏览 0评论
0个赞
JavaScript prototype(原型对象)
所有的 JavaScript 对象都会从一个 prototype(原型对象)中继承属性和方法。
在前面的章节中我们学会了如何使用对象的构造器(constructor):
实例
function Person(first, last, age, eyecolor) {
this.firstName = first;
this.lastName = last……继续阅读 »
3年前 (2022-05-31) 167浏览 0评论
0个赞
JavaScript 异步编程
异步的概念
异步(Asynchronous, async)是与同步(Synchronous, sync)相对的概念。
在我们学习的传统单线程编程中,程序的运行是同步的(同步不意味着所有步骤同时运行,而是指步骤在一个控制流序列中按顺序执行)。而异步的概念则是不保证同步的概念,也就是说,一个异步过程的执行将不再与原有的序列有顺序关系。
简单来理解就是:同步按你的代码顺序执行,异步不按照代码……继续阅读 »
3年前 (2022-05-30) 183浏览 0评论
0个赞
Bootstrap5 侧边栏导航(Offcanvas)
Bootstrap5 侧边栏侧边栏类似于模态框,在移动端设备中比较常用。
创建滑动导航
我们可以通过 JavaScript 来设置是否在 .offcanvas 类后面添加 .show 类,从而控制侧边栏的显示与隐藏:
.offcanvas 隐藏内容 (默认)
.offcanvas.show 显示内容
可以使用 a 链接的 href 属性或者 button ……继续阅读 »
3年前 (2022-05-30) 211浏览 0评论
0个赞
Bootstrap5 Jumbotron
Jumbotron(超大屏幕)会创建一个大的灰色背景框,里面可以设置一些特殊的内容和信息。
在 Bootstrap 3 中引入了一个 jumbotron 来创建一个大的背景框,用于显示一些重要的信息。
在 Bootstrap 5 中,已经不再支持 Jumbotron。但是,我们可以使用 <div> 元素添加一些辅助类与颜色类来达到相同的效果:
提示: Jumb……继续阅读 »
3年前 (2022-05-29) 229浏览 0评论
0个赞