Bootstrap5 列表组
大部分基础列表组都是无序的。
要创建列表组,可以在 <ul> 元素上添加 .list-group 类, 在
<li> 元素上添加 .list-group-item 类:
实例
<ul class="list-group">
<li class="list-group-item">第一项<……继续阅读 »
2年前 (2022-07-28) 359浏览 0评论
0个赞
JavaScript 和 HTML DOM 参考手册
<p这部分包含了完整的参考:
所有内置的JavaScript对象
所有浏览器对象
所有HTML DOM对象
JavaScript 对象参考手册
参考手册描述了每个对象的属性和方法,并提供了在线实例。
Array 对象
Boolean 对象
Date 对象
Math 对象
Number 对象
String 对象
RegExp 对象
全局属性和函数
……继续阅读 »
2年前 (2022-07-27) 274浏览 0评论
0个赞
Bootstrap5 提示框
提示框是一个小小的弹窗,在鼠标移动到元素上显示,鼠标移到元素外就消失。
如何创建提示框
通过向元素添加 data-bs-toggle=”tooltip”
来来创建提示框。
title 属性的内容为提示框显示的内容:
<button type="button" class="btn btn-primary" da……继续阅读 »
2年前 (2022-07-27) 330浏览 0评论
0个赞
Bootstrap5 分页
网页开发过程,如果碰到内容过多,一般都会做分页处理。
Bootstrap 5 可以很简单的实现分页效果。
要创建一个基本的分页可以在 <ul> 元素上添加 .pagination 类。然后在 <li> 元素上添加 .page-item 类,<li> 元素的 <a> 标签上添加 .page-link 类:
实例
<ul class……继续阅读 »
2年前 (2022-07-27) 310浏览 0评论
0个赞
JavaScript HTML DOM EventListener
addEventListener() 方法
实例
在用户点击按钮时触发监听事件:
document.getElementById(“myBtn”).addEventListener(“click”, displayDate);
addEventListener() 方法用于向指定元素添加事件……继续阅读 »
2年前 (2022-07-26) 282浏览 0评论
0个赞
Bootstrap5 Flex(弹性)布局
Bootstrap5 通过 flex 类来控制页面的布局。
弹性盒子(flexbox)
Bootstrap 3 与 Bootstrap 4/5 最大的区别就是 Bootstrap 4/5 使用弹性盒子来布局,而不是使用浮动来布局。
弹性盒子是 CSS3 的一种新的布局模式,更适合响应式的设计,如果你还不了解 flex,可以阅读我们的 CSS3 弹性盒子(Flex B……继续阅读 »
2年前 (2022-07-26) 89浏览 0评论
0个赞
JavaScript 函数定义
JavaScript 使用关键字
function 定义函数。
函数可以通过声明定义,也可以是一个表达式。
函数声明
在之前的教程中,你已经了解了函数声明的语法 :
function functionName(parameters) {
执行的代码
}
函数声明后不会立即执行,会在我们需要的时候调用到。
实例
function myFunction(a, b) {
……继续阅读 »
2年前 (2022-07-26) 166浏览 0评论
0个赞
JavaScript typeof, null, 和 undefined
typeof 操作符
你可以使用 typeof 操作符来检测变量的数据类型。
实例
typeof “John” // 返回 str……继续阅读 »
2年前 (2022-07-25) 193浏览 0评论
0个赞
JavaScript 调试
在编写 JavaScript 时,如果没有调试工具将是一件很痛苦的事情。
JavaScript 调试
没有调试工具是很难去编写 JavaScript 程序的。
你的代码可能包含语法错误,逻辑错误,如果没有调试工具,这些错误比较难于发现。
通常,如果 JavaScript 出现错误,是不会有提示信息,这样你就无法找到代码错误的位置。
通常,你在编写一个新的 JavaScr……继续阅读 »
2年前 (2022-07-25) 113浏览 0评论
0个赞
JavaScript 声明提升
JavaScript 中,函数及变量的声明都将被提升到函数的最顶部。
JavaScript 中,变量可以在使用后声明,也就是变量可以先使用再声明。
以下两个实例将获得相同的结果:
实例 1
x = 5; // 变量 x 设置为 5
elem = document.getElementById(“demo”); // 查找元素
elem.innerHTML……继续阅读 »
2年前 (2022-07-25) 144浏览 0评论
0个赞
JavaScript 闭包
JavaScript 变量可以是局部变量或全局变量。
私有变量可以用到闭包。
全局变量
函数可以访问由函数内部定义的变量,如:
实例
function myFunction() {
var a = 4;
return a * a;
}
函数也可以访问函数外部定义的变量,如:
实例
var a = 4;
function myFunction() {
retu……继续阅读 »
2年前 (2022-07-25) 294浏览 0评论
0个赞
Bootstrap5 按钮
Bootstrap 5 提供了不同样式的按钮。
实例
<button type="button" class="btn">基本按钮</button>
<button type="button" class="btn btn-primary">主要按钮</butto……继续阅读 »
2年前 (2022-07-24) 153浏览 0评论
0个赞
JavaScript HTML DOM – 改变 HTML
HTML DOM 允许 JavaScript 改变 HTML 元素的内容。
改变 HTML 输出流
JavaScript 能够创建动态的 HTML 内容:
今天的日期是:
document.write(Date());
在 JavaScript 中,document.write() 可用于直接向 HTML 输出流写内容。
实例
<……继续阅读 »
2年前 (2022-07-24) 422浏览 0评论
0个赞
JavaScript 类(class)
类是用于创建对象的模板。
我们使用 class 关键字来创建一个类,类体在一对大括号 {} 中,我们可以在大括号 {} 中定义类成员的位置,如方法或构造函数。
每个类中包含了一个特殊的方法 constructor(),它是类的构造函数,这种方法用于创建和初始化一个由 class 创建的对象。
创建一个类的语法格式如下:
class ClassName {
construct……继续阅读 »
2年前 (2022-07-23) 208浏览 0评论
0个赞
Bootstrap5 图像形状
圆角图片
.rounded 类可以让图片显示圆角效果:
实例
<img src="cinqueterre.jpg" class="rounded" alt="Cinque Terre">
尝试一下 »
椭圆图片
.rounded-circle 类可以设置椭圆形图片:
实例
<……继续阅读 »
2年前 (2022-07-22) 318浏览 0评论
0个赞
JavaScript JSON
JSON 是用于存储和传输数据的格式。
JSON 通常用于服务端向网页传递数据 。
什么是 JSON?
JSON 英文全称 JavaScript Object Notation
JSON 是一种轻量级的数据交换格式。
JSON是独立的语言 *
JSON 易于理解。
* JSON 使用 JavaScript 语法,但是 JSON 格式仅仅是一个文本。文本可以被任何编程……继续阅读 »
2年前 (2022-07-22) 163浏览 0评论
0个赞
JavaScript break 和 continue 语句
break 语句用于跳出循环。
continue 用于跳过循环中的一个迭代。
break 语句
我们已经在本教程之前的章节中见到过 break 语句。它用于跳出 switch() 语句。
break 语句可用于跳出循环。
break 语句跳出循环后,会继续执行该循环之后的代码(如果有的话):
实例
for (i=0;i<10;i++)
{
……继续阅读 »
2年前 (2022-07-21) 210浏览 0评论
0个赞
Bootstrap5 折叠
Bootstrap5 折叠可以很容易的实现内容的显示与隐藏。
实例
<button data-bs-toggle="collapse" data-bs-target="#demo">折叠</button>
<div id="demo" class="collapse">
……继续阅读 »
2年前 (2022-07-19) 235浏览 0评论
0个赞
JavaScript 对象 实例
使用内置 JavaScript 的对象实例。
Document 对象
使用 document.write() 输出文本
使用 document.write() 输出 HTML
返回文档中锚的数目
返回文档中第一个锚的 innerHTML
返回文档中表单的数目
返回文档中第一个表单的名字
返回文档中的图像数
返回文档中第一个图像的ID
返回文档中的链接数
返回文档中的第一个链接的I……继续阅读 »
2年前 (2022-07-19) 243浏览 0评论
0个赞
JavaScript Array(数组) 对象
数组对象的作用是:使用单独的变量名来存储一系列的值。
在线实例
创建数组, 为其赋值:
实例
var mycars = new Array();
mycars[0] = “Saab”;
mycars[1] = “Volvo”;
mycars[2] = “BMW”;
页面底部你可以找到更……继续阅读 »
2年前 (2022-07-18) 329浏览 0评论
0个赞
JavaScript 输出
JavaScript 没有任何打印或者输出的函数。
JavaScript 显示数据
JavaScript 可以通过不同的方式来输出数据:
使用 window.alert() 弹出警告框。
使用 document.write() 方法将内容写到 HTML 文档中。
使用 innerHTML 写入到 HTML 元素。
使用 console.log() 写入到浏览器的控制台。
使用 w……继续阅读 »
2年前 (2022-07-17) 236浏览 0评论
0个赞
JavaScript 类型转换
Number() 转换为数字, String() 转换为字符串, Boolean() 转换为布尔值。
JavaScript 数据类型
在 JavaScript 中有 6 种不同的数据类型:
string
number
boolean
object
function
symbol
3 种对象类型:
Object
Date
Array
2 个不包含任何值的数据类型:
nu……继续阅读 »
2年前 (2022-07-17) 359浏览 0评论
0个赞
JavaScript 对象
JavaScript 对象是拥有属性和方法的数据。
真实生活中的对象,属性和方法
真实生活中,一辆汽车是一个对象。
对象有它的属性,如重量和颜色等,方法有启动停止等:
对象
属性
方法
car.name = Fiat
car.model = 500
car.weight = 850kg
car.color = white
car.start()
ca……继续阅读 »
2年前 (2022-07-17) 296浏览 0评论
0个赞
JavaScript 简介
JavaScript 是互联网上最流行的脚本语言,这门语言可用于 HTML 和 web,更可广泛用于服务器、PC、笔记本电脑、平板电脑和智能手机等设备。
JavaScript 是脚本语言
JavaScript 是一种轻量级的编程语言。
JavaScript 是可插入 HTML 页面的编程代码。
JavaScript 插入 HTML 页面后,可由所有的现代浏览器执行。
JavaScri……继续阅读 »
2年前 (2022-07-17) 253浏览 0评论
0个赞
JavaScript Browser 对象 实例
使用JavaScript来访问和控制浏览器对象实例。
Window 对象
弹出一个警告框
弹出一个带折行的警告框
弹出一个确认框,并提醒访客点击的内容
弹出一个提示框
点击一个按钮时,打开一个新窗口
打开一个新窗口,并控制其外观
打开多个新窗口
确保新的窗口没有获得焦点
确保新的窗口获得焦点
关闭新窗口
检查新的窗口是否已关闭
返回新窗口的名字
传输一些文本到源(……继续阅读 »
2年前 (2022-07-16) 191浏览 0评论
0个赞
JavaScript 库
JavaScript 库 – jQuery、Prototype、MooTools。
JavaScript 框架(库)
JavaScript 高级程序设计(特别是对浏览器差异的复杂处理),通常很困难也很耗时。
为了应对这些调整,许多的 JavaScript (helper) 库应运而生。
这些 JavaScript 库常被称为 JavaScript 框架。
在本教程中,我们……继续阅读 »
2年前 (2022-07-16) 217浏览 0评论
0个赞
JavaScript Window Location
window.location 对象用于获得当前页面的地址 (URL),并把浏览器重定向到新的页面。
Window Location
window.location 对象在编写时可不使用 window 这个前缀。
一些例子:
一些实例:
location.hostname 返回 web 主机的域名
location.pathname 返回当前页面的路径和……继续阅读 »
2年前 (2022-07-02) 300浏览 0评论
0个赞
JavaScript HTML DOM 元素 (节点)
本章节介绍如何向文档中添加和移除元素(节点)。
创建新的 HTML 元素 (节点) – appendChild()
要创建新的 HTML 元素 (节点)需要先创建一个元素,然后在已存在的元素中添加它。
实例
<div id="div1">
<p id="p1">这是一个段落。</……继续阅读 »
2年前 (2022-07-01) 253浏览 0评论
0个赞
JavaScript 注释
JavaScript 注释可用于提高代码的可读性。
JavaScript 注释
JavaScript 不会执行注释。
我们可以添加注释来对 JavaScript 进行解释,或者提高代码的可读性。
单行注释以 // 开头。
本例用单行注释来解释代码:
实例
// 输出标题:
document.getElementById("myH1").innerHTML=&quo……继续阅读 »
2年前 (2022-07-01) 335浏览 0评论
0个赞
Bootstrap5 弹出框
弹出框控件类似于提示框,它在鼠标点击到元素后显示,与提示框不同的是它可以显示更多的内容。
如何创建弹出框
通过向元素添加 data-bs-toggle=”popover”
来来创建弹出框。
title 属性的内容为弹出框的标题,data-bs-content 属性显示了弹出框的文本内容:
<button type="button"……继续阅读 »
2年前 (2022-06-29) 226浏览 0评论
0个赞