HTML
一、页面基本信息
1.1 语法标签
<!-- 注释 快捷键ctrl+/ -->
<html>
<!--head 标签代表网页头部-->
<head>
<!--meta描述性标签，他用来描述网站的一些信息 -->
<!--一般用来做SEO-->
<meta charset="UTF-8">
<meta name="meta标签说明" content="此处是文本内容">
<meta name="" content="">
<!--网页的名字-->
<title>第一个页面</title>
</head>
<!--body标签代表网页主体 -->
<body>
<a name="top">顶部</a>
你好网页！
<!--标题标签-->
<h1>一级标签</h1>
<h2>二级</h2>
<h3>三级</h3>
......
<h6>六级</h6>
<!--段落标签 p标签自带换行功能,行与行之间间隔较大，正常文本比较紧凑-->
<p>一去二三里</p>
<!--换行标签 <br/> -->
烟村四五家<br/>
<!--粗体，斜体-->
<strong>强壮</strong>
<em>身正不怕影子斜</em>
<!--水平线-->
<hr>
<!--特殊符号，记忆方式-->
&+字母+；
& ；
<!--空格-->
空 格
<!--大于号，小于号-->
><
<!--版权符号-->
©版权所有，违反必究！
<!--图像标签 JPG GIF PNG BMP 前三者用的比较多-->
<img src="path图像地址" alt="text图像显示失败时的替代文字" title="text鼠标悬停提示文字" width="x图像宽度" height="h图像高度"/>
<!--超链接标签
href：必填，表示要跳转的页面
target：表示窗口在哪里打开
_blank 打开一个新的页面
_self 在自己本页面打开
-->
<a href="https://www.baidu.com" target="_blank">百度链接</a>
<a href="https://www.qqzone.com" target="_self"><img src="../壁纸01.jfif" alt="壁纸01" title="点击进入QQ空间" width="200" height="100" /></a>
<!--锚链接，适用页面比较长，在本页面跳转，适用符号：#
比如：回到顶部
比如：直接跳转另一个页面的某个位置（<a href="https://www.某博客.com#bot">）
组合适用
<a href="#bot" name="top">去底部</a>
<a href="#top" name="bot">去顶部</a>
-->
<a href="#top">回到顶部</a>
<!--功能性标签
邮件链接：mailto:
QQ超链接：百度QQ推广，打开官网登录，点击推广工具，选择样式，把代码贴回来。
-->
<a href="mailto:1607484105@qq.com">点击向我发送邮件</a>
<!--
块元素：无论内容多少，独占一行，带换行效果(p、h1~h6...)
行内元素：内容撑开宽度，左右都是行内元素的可以排在一行（a、strong、em、）
-->
<!--列表
有序列表
无序列表
自定义列表
-->
<!--有序-->
<ol>
<li>目录</li>
<li>第一节：XXX</li>
<li>第二节：XXX</li>
<li>第三节：XXX</li>
</ol>
<!--无序-->
<ul>
<li>java</li>
<li>json</li>
<li>sevelt</li>
<li>session</li>
</ul>
<!--自定义列表
dl：标签
dt：列表名称（第一行标题）
dd：列表名称
-->
<dl>
<dt>资源分类</dt>
<dd>电子类</dd>
<dd>手工类</dd>
<dd>曲艺类</dd>
</dl>
<!--表格table
行 tr
标题行（表头） th
列 td
边框 border
跨行 rowspan
跨列 colspan
-->
<table border="1">
<tr>
<td></td>
<td colspan="4" height="25">星期</td>
</tr>
<tr>
<td rowspan="3">上下午</td>
<td>第一天</td>
<td>第二天</td>
<td>第三天</td>
<td>第四天</td>
</tr>
<tr>
<td>上午</td>
<td>萝卜</td>
<td>西红柿</td>
<td>玉米</td>
</tr>
<tr>
<td>下午</td>
<td>没吃</td>
<td>番茄</td>
<td>拉肚子</td>
</tr>
</table>
<!--音频和视频 video audio
src: 资源路径
controlse：控制条
autoplay：自动播放
muted：静音播放
-->
<video src="../2486.MP4" controls autoplay muted="muted"></video>
<audio src="../3686.MP4" controls autoplay></audio>
</body>
</html>
1.2 页面结构
| 元素名 | 描述 |
|---|---|
| header | 标题头部区域的内容（用于页面或页面的一块区域） |
| footer | 标记脚部区域的内容（用于整个页面或页面的一块区域） |
| section | Web页面中的一块独立区域 |
| article | 独立的文章内容 |
| aside | 相关内容或应用（常用于侧边栏） |
| nav | 导航类辅助内容 |
1.3 样式（css）
行内样式
<p color = "red">这是一段文本</p>
内部样式
<head>
<title></title>
<style>
#div1 {
border: red solid 1px;
}
</style>
</head>
<body>
</body>
外部样式
<head>
<title></title>
<link rel="stylesheet" href="css/resume.css">
</head>
<body>
</body>
优先级：行内>内部>外部
1.4 选择器
/*id选择器*/
#div{}
/*类选择器*/
.pic {}
/*标签选择器*/
p{}
/*通用选择器(选中整个页面)*/
*{}
/*分组选择器(当几个元素样式属性一样时，可以共同调用一个声明，元素之间用逗号分隔。)*/
#name,.pic,ul,p{}
/*后代选择器（派生选择器）*/
#div1 ul li{}
/*子代选择器*/
#div>h2{}
/*兄弟选择器*/
#div #div:nth-child(3)+div{}
/*所有兄弟选择器*/
#div:last-chid~span{}
/*伪类选择器*/
#div li:first{}
#div li:first-child{}
#div li:nth-child(n){}/*第n个*/
#div div:nth-of-type(n){}
#div li:last-child{}
/**/
/**/
/**/
1.5 CSS常用属性
1.5.1 超链接鼠标操作
：link 用来表示未访问过的链接
：visited 用来表示访问过的链接
：hover 鼠标移入的效果
：active 鼠标点击效果
注意： 1：link visited 只对a标签产生效果
2：hover active 对所有标签都可以产生效果
3：如果要同时设置这四个伪类，那么伪类是有顺序要求的
a:link{}
a:hover{}
a:visited{}
a:active{}
| 值 | 描述 |
|---|---|
| repeat | 默认。背景图像将在垂直和水平方向重复 |
| no-repeat | 背景图像仅显示一次 |
| repeat-x | 背景图像水平方向重复 |
| repeat-y | 背景图像垂直方向重复 |
/*背景*/
/*
背景颜色
*/
body{
background-color:gray;
/*or*/
background:gray;
}
/*背景图片*/
body{
background-img:url(img/danli.jpg);
backgroung-repeat:no-repeat;
/*or*/
background:url(img/danli.jpg);
}
/*文本*/
/*颜色*/
body{
color:blue;
}
h1{
color:#ooffoo;
}
h2{
color:rgb(255,0,0);
}
/*文本对齐方式 center（居中） left(左对齐) right(右对齐)*/
body{
text-align:center;
}
/*
文本修饰
规定添加到文本的修饰，属性值：none、underline、overline、line-through
- underline：对文本添加下划线。
- overline：对文本添加上划线
- line-through：对文本添加中划线（删除线）
- none：关闭原本应用到元素上的所有横线样式。
*/
h2{
text-decoration:none;
}
/*
字体
字体："后备机制"，如果不支持第一种字体，会尝试后面的字体。
注意：- 只有当字体名字含有空格或者符号或者汉字，才需要在font-family声明中加引号
- 多个字体系列用逗号分隔。
*/
body{
font-family:"arial black","微软雅黑";
}
/*
大小：
*/
body{
font-size:50px;
}
/*
加粗： 100~900,400等于normal，700等于bold.
*/
body{
font-weight:100;
font-weight:900;
/*下面两种方式效果一致*/
font-weight:700;
font-weight:blod;
/*下面两种方式效果一致*/
font-weiht:400;
font-weight:normal;
}
| 值 | 描述 |
|---|---|
| none | 无标记 |
| disc | 默认，标记是实心圆 |
| circle | 标记是空心圆 |
| square | 标记是实心方块 |
| decimal | 标记是数字 |
| decimal-leading-zero | 标记是0开头数字（01,02,03…） |
| lower-roman | 标记是小写罗马数字（i,ii,iii…） |
| upper-roman | 标记大写罗马数字（I,II,III…） |
| lower-alpha | 标记是小写英文字母（a,b,c） |
| upper-alpha | 标记是大写英文字母（A,B,C…） |
.food li ul li{
list-style:none;
}
1.5.2 对齐方式
text-align：left
| 值 | 描述 |
|---|---|
| left | 默认值，文本左对齐 |
| right | 文本右对齐 |
| center | 文本居中 |
| justify | 文本两端对齐 |
1.6 display
display属性用于定义元素的显示类型
| 值 | 描述 |
|---|---|
| none | 该元素不会被显示 |
| block | 该元素将被显示为块级元素，该元素前后会带有换行符 |
| inline | 该元素被显示为内联元素，元素前后没有换行符 |
| inline-block | 行内块元素，li中使用会变为类似导航的效果。 |
display:none;
1.7 边框
可以同时设置边框的宽度、样式、颜色
div{
border:red solid 1px;/*红色实线 粗细为1px*/
width：200px;/*宽*/
height:100px;/*高*/
}
/*或者单独设置*/
div{
border-width:1px;
border-style:solid;
border-color:red;
}
style属性分别有：none无边框、dotted点状边框、dashed虚线边框、solid实心线边框、double双实线边框。
1.8 padding(内边距)
设置元素所有内边距的宽度，默认按照上右下左（顺时针）的顺序设定，或者设置各边上内边距的宽度。
单独设置各边的内边距：padding-top、padding-left、padding-bottom、padding-right。
内边距：本体内容大小不变，会往外撑开，使div变大。
/*设置上右下左的内边距*/
div{
padding:10px 5px 15px 20px;
}
/*设置上右下左的内边距*/
div{
padding-top:10px;
padding-right:5px;
padding-bottom:15px;
padding-left:20px;
}
margin（外边距）
两个空的div之间如果没有内容，margin的上下边距设置不生效
需要两者之间有东西
<head>
<style>
#div1{
background-color: skyblue;
width: 300px;
height: 300px;
}
#div2{
background-color: brown;
width: 100px;
height: 100px;
margin: 10px 15px 20px 25px;
}
</style>
</head>/>
<body>
<div id="div1">
<h4>大家好</h4><!--如果此处没有这个h4，css就只会生效左右边距-->
<div id="div2">
这是文本
</div>
</div>
</body>
/*
设置上右下左外边距
auto可以设置居中效果
缺少的默认和对称位置数值相同
*/
div{
margin: 10px 5px 15px 20px;
}
div{
margin-top:10px;
margin-right:5px;
margin-bottom:15px;
margin-left:20px;
}
div{
/*margin:0px auto; 0或者0px表示上下间距为0px，auto表示左右外边距自动计算，表现为居中状态*/
margin:0px auto;
}
1.9 CSS定位和浮动
CSS 有三种基本的定位机制：普通流、浮动和定位
1.9.1 定位position
定位参考就近原则，两个空的div嵌套最好中间有东西，不然会很奇怪
| 值 | 描述 |
|---|---|
| static | 默认值，普通流 |
| relative | 相对定位，其子元素如果使用定位相对于他的位置改变 |
| absolute | 绝对定位，相对于其父元素的位置作为参照物 |
| fixed | 固定定位，相对于浏览器窗口作为参照物 |
static：默认值，普通流（忽略 left ， top ， right ， bottom 或者 z-index 声 明）。
relative：生成相对定位的元素，相对于其原本正常位置进行定位。元素的位置通过 left ， top ， right ， bottom 属性进行改变，其子元素如果使用定位相对于它的位置改变。
absolute：生成绝对定位的元素，相对于其第一个父元素进行定位，如果父元素没有设置 relative 属性，则向上继续寻找，直到body元素。元素的位置通过 left ， top ， right ， bottom 属性进行规定。
如果一直向上一级找不到relative，最终会以浏览器作为参考系
fixed：生成绝对定位的元素，相对于浏览器窗口进行定位。元素的位置通过 left ， top ， right ， bottom 属性进行规定。
绝对定位要和相对定位配合使用，将相对定位元素作为参考系。并且必须是包含（上下级）关系。
固定定位以浏览器窗口作为参考系
<head>
<style>
#div1{
background-color: skyblue;
width: 300px;
height: 300px;
/*添加relative作为#fu的参考系*/
position: relative;
}
#div2{
background-color: brown;
/*添加relative作为自身的参考系*/
position: relative;
width: 100px;
height: 100px;
top: 20px;
left: 20px;
}
#fu{
background-color: darkmagenta;
width: 100px;
height: 100px;
/*添加absolute绝对定位，参考系是#div1*/
position: absolute;
top: 100px;
right: 100px;
}
</style>
</head>
<body>
<div id="div1">
<!-- <h4>大家好</h4> -->
<div id="div2">
这是文本
</div>
<div id="fu">
</div>
</div>
</body>
1.9.2 浮动float
float的属性值有none、left、right。
块级元素添加浮动后，会在同一行显示，直到浏览器容量达到才会换行。（相当于行元素）
| 值 | 描述 |
|---|---|
| none | 默认值，不浮动 |
| left | 左浮动，元素从左边开始并列显示为一行 |
| right | 右浮动，元素从右边开始并列显示为一行 |
1.10 表单
<!-- 表单form
action:表单提交的位置，可以是网站，也可以是请求处理地址
method:提交方式 get ,post
get提交：可以在url(网址栏)看到我们的提交信息，不安全，不高效，不能传输大文件
post提交：不会暴露信息，安全，可以传输大文件
name: 组，性别男和女name需要一致，是同一个组
readonly：只读，默认值无法更改
disabled：禁用，不能选择该选项
hidden：隐藏，隐藏文本框，传递一些默认值时使用
placeholder：输入框内灰色提示信息
required：非空判断
-->
<!--增强鼠标的可用性，点输入框前面的文字也会选中输入框
<label for="某处的id"></label>:
-->
<form action="Html第一页.html" method="get">
<p>
</p>
<!-- 文本输入框：input type="text" -->
<p>姓名：<input type="text" name="username" value="张大锤" readonly></p>
<!-- 密码框：input type="password" -->
<p>密码：<input type="password" name="pwd" value="1234" hidden></p>
<p>性别：
<input type="radio" value="boy" name="sex" checked disabled>男
<input type="radio" value="girl" name="sex">女
</p>
<p>爱好:
<input type="checkbox" name="hobby" value="sleep">睡觉
<input type="checkbox" name="hobby" value="game">游戏
<input type="checkbox" name="hobby" value="fish">钓鱼
<input type="checkbox" name="hobby" value="chat">唠嗑
</p>
<p>
<input type="image" src="../壁纸01.jfif" width="200" alt="点击跳转到壁纸页面" title="悬停显示：点击跳转壁纸页面">
<br>
<input type="button" name="btn1" value="点击领取新人礼包">
</p>
<p>国籍：
<select name="下拉框" >
<option value="1">中国</option>
<option value="2">印度</option>
<option value="3" selected>法国</option>
<option value="4">宾夕法尼亚</option>
</select>
</p>
<!-- 只是说显示出来10X40个单位的文本，并不是说只能写这么多，文本域可以拖拉
rows="10" cols="40"
-->
<p> <label for="textin">评价：</label>
<textarea id="textin" name="textarea" rows="10" cols="40" placeholder="此处填写评价">此处填写评价</textarea>
</p>
<!-- 文件域
input type="file" name="files"
-->
<p>
<input type="file" name="file">
<input type="button" name="upload" value="上传">
</p>
<!-- 邮件验证 -->
<p>邮箱：
<input type="email" name="email" >
</p>
<p>自定义邮箱：
<input type="text" name="diyemail" pattern="/^([a-z0-9_\.-]+)@([\da-z\.-]+)\.([a-z\.]{2,6})$/">
</p>
<!-- url验证 -->
<p>网址：
<input type="url" name="url" value="">
</p>
<!-- 数字验证
max:最大值
min：最小值
step：一次加减的数量
-->
<p>购买数量：
<input type="number" name="namber" max="1000" min="0" step="10">
</p>
<!-- 滑块 -->
<p>音量：
<input type="range" name="voice" max="100" min="0" step="1">
</p>
<!-- 搜索框 -->
<p>搜索框：
<input type="search" name="search">
</p>
<input type="submit" value="提交"><br>
<input type="reset" >
</form>
| 属性 | 说明 |
|---|---|
| type | 指定元素的类型。text、password、checkbox、redio、submit、reset、file、hidden、image和button,默认为text |
| name | 指定表单元素的名称（必填） |
| value | 元素的初始值。type为radio时必须指定一个值 |
| size | 指定表单元素的初始宽度。当type为text或password时，表单元素的大小以字符为单位。对于其他类型，宽度以像素为单位 |
| maxlength | type为text或password时，输入的最大字符数 |
| checked | type为radio或CheckBox时，指定按钮是否被选中 |
表单初级验证
- placeholder 提示信息
- required 非空判断
- pattern 正则表达式（脚本之家，常用正则表达式www.jb51.net）
1.11 Javascript
通过
- 的
1.11.1 语法
一个页面可以有很多个
变量名命名规则：
规则：由`Unicode字母`、`_`、`$`、`数字`、`中文`组成
1. 不能以数字开头
2. 不能是关键字和保留字
3. 严格区分大小写
规范：
1. 见名知意
2.驼峰命名（userName,userNameInfo）
1.11.2 变量
a. 若只声明而没有赋值，则该变量的值为undefined。
b. 变量要有定义才能使用，若变量未声明就使用，JavaScript会报错，告诉你变量未定义
c. var可以同时声明多个变量
d. 若使用var重新声明一个已经存在的变量，是无效的。
e. 若使用var重新声明一个已经存在的变量且赋值，则会覆盖掉前面的值
f. JavaScript是一种动态类型、弱类型语言，也就是说，变量的类型没有限制，可以赋予各种类型的值。
<script type = "text/javascript">
var name = "张三";
var age = 18 ;
console.log("我叫"+name+",今年"+age);
</script>
1.11.3 类型转换
数值
parseInt();
parseFloat();
<script type = "text/javascipt">
//113，只会识别前面的数字，后面即使有也不识别
console.log(parseInt("113abd35"));
//2 小数返回整数
console.log(parseInt("2.147"));
//只要有字符串，全部识别为拼接。全部是数字，识别为计算。
console.log(parseInt("blue"+10))；//blue10
console.log(parseInt())
console.log()
console.log()
</script>
字符串
toString();
几乎每个数对象都提供了toString()函数将内容转换为字符串形式。
最为简单的转换为字符串的方式，直接在任意数据后面 + ''或""即可。
注：toString()不能对null和undefined使用
1.11.4 数据类型
-
undefined
undefined类型的值是undefined。
其是一个表示“无”的原始值，表示不存在。
当声明了一个变量而没有初始化时，变量的值就是undefined
-
null
undefined派生自null，所以等值比较返回的是true
undefined == null // 返回true
-
boolean true or false
-
数值 整型和浮点型
-
字符串 使用 ‘ ’ 或 “ ” 引起来。使用加号 “+” 进行字符串的拼接
-
对象
//对象 //键全是字符串。如：“name" "age" var obj = { "name":"zhangsan", "age":18, "test":{ "a":"123" } };
1.11.5 运算符
算数运算符
| + | 加 |
|---|---|
| - | 减 |
| * | 乘 |
| / | 除 |
| % | 取余 |
| ++ | 自增 |
| – | 自减 |
<body>
<!--自增和自减，看符号在前还是变量在前，谁在前面先算谁-->
<script type="text/javascript">
var x = 5;
var y = 5;
var z = 5;
var d = 5;
console.log(++x);//先自增1，然后再赋值给X
console.log(y++);//先赋值给y，再自增1
console.log(--z);//先自减1，再赋值给z
console.log(d--);//先赋值给d，再自减1
</script>
</body>
赋值和扩展运算符
| x = y | 将y的值赋给x |
|---|---|
| x + = y | x = x + y |
| x - = y | x = x - y |
| x * = y | x = x * y |
| x / = y | x = x / y |
| x % = y | x = x % y |
比较运算符
| == | 值比较，js在比较字符串类型的数值时，会进行自动类型转换，将字符串转换成数字 |
|---|---|
| === | 全等，判断值和类型 |
| != | 不等于 |
| > < | 大于、小于 |
| >= <= | 大于等于、小于等于 |
逻辑运算符
| && | 并且 |
|---|---|
| || | 或者 |
| ！ | 非 |
三目运算符
判断条件？ 满足判断条件执行语句：不满足判断条件执行语句
<script>
var score = 50;
//判断分数有没有达到60分及格线，达到了执行“恭喜”，否则执行“没及格”
var result = score >=60 ? "恭喜你及格":"你没有及格";
console.log(result);
</script>
1.11.6 控制语句
//单选泽
if(判断条件){
满足条件执行语句
}
//双选择
if(){
}else{
}
//多选择
if(){
}else if(){
}else if(){
}else{
}
//for循环
for(var i = 0;i <10;i++){
}
//break contiune
break://停止本层循环
contiune://停止本次循环，开始下一次循环
1.11.7 数组
var sum = [] ;//空数组
var sum = [1,2,3,4];//声明一个数组并赋值
var sum = new Array(1,2,3,4);//实例化数组对象
var sum = new Array(size);//声明一个指定长度的数组
var num = sum.length;//获取数组的长度
sum.length = 5 ;//修改数组的长度，多出的位置读取会获得empty
var i = sum[2];//获取数组中下标为2的内容。
sum[2] = "糖葫芦";//给数组中下标为2的位置重新赋值
//获取下标越界的数据不会报错，只会提示undefined
var arr2 = [1,2,3,4];
console.log(arr2[4]);
1.11.8 函数
函数入参有形参和实参。
声明的变量分全局变量和局部变量。
<script>
//1、函数声明语句
function swim(people,days){
console.log("游个蛋");
//return;
//return price;
}
//2、函数声明表达式
var swim = function (people,days){
console.log("游个鸡蛋");
//return;
//return price;
}
</script>
函数的调用
//如果没有返回值，直接调用
//如果有返回值，需要声明变量接收
<script>
funcition swim (){
}
swim();//没有返回值，接收的是return的结果
var sum = swim();//有返回值
</script>
函数的参数
a. 实参可以省略，那么对应形参为undefined
b. 若函数形参同名（一般不会这么干），在使用时以最后一个值为准。 传参从左到右。
c. 可以给参数默认值：当参数为特殊值时，可以赋予默认值。
d. 参数为值传递，传递副本；引用传递时传递地址，操作的是同一个对 象。
return 语句
- 没有返回值的方法中，用来结束方法
- 有返回值的方法中，一个使用里来结束方法，一个是将值带给调用者。
1.11.9 内置对象
String
只能对String类型的字符串使用
<script>
charAt(idex)//返回指定下标位置的字符内容
indexOf(char)//返回指定字符串的位置，从左到右。找不到返回-1
substr(m,n)//从m位置开始，取n个字符。如果参数n是省略，意味着一直取到字符串末尾。
substring(m,n)//从m位置开始，到n位置结束，不包含n位，如果参数n省略，则意味着取到字符串的末尾。（左闭右开）
toLowerCase()//字符串转小写
toUpperCase()//字符串大写
replace(s1,s2)//将s1换成成s2
length//属性，返回字符串的长度
</script>
Math
Math.random()//生成随机数
Math.ceil()//向上取整
Math.floor()//向下取整
Math.round()//四舍五入取整
Date
获取日期时间
getFullYear()//年
getMonth()//月 get/setMonth()获取的值范围是0~11.所以需要+1
getDate()//日
getDay()//一周里的第几天(星期几)
getHours()//时
getMinutes()//分
getSeconds()//秒
//可根据本地时间把Date对象转换为字符串，并返回结果
toLocaleString()// 2022/11/9 14:33:16
设置时间
setFullYear()
setMonth()
...
setSeconds()
toLocaleString()//可根据本地时间把Date对象转换为字符串，并返回结果
Bom对象
window对象，浏览器实例，全局对象
-
系统对话框
-
消息框：alert（“内容”）
alert()用于显示一条指定消息和一个ok按钮的警告框
-
输入框 prompt()
prompt()方法用于显示可提示用户进行输入的对话框
参数（可选）
- 第一个参数：要在对话框中显示的纯文本。
- 第二个参数：默认的输入文本
-
确认框 confim
confirm（）方法用于显示一个带有指定消息和ok及取消按钮的对话框.
返回的是一个布尔值
<body> <input type="button" onclick="sendInfo()" value="按钮" /> <script type="text/javascript"> function sendInfo(){ alert("你点击了按钮"); prompt("请输入","");//第一个参数是提示信息，第二个是输入框 var flag = confirm("Are you sure delete this message ？"); if(flag){ alert('Delete Success ！'); }else{ alert("不删你点什么玩意儿？！"); } } </script> </body> -
-
打开窗口
window.open() 方法，既可以导航到一个特定的URL，也可以用来打开一个新的窗口
<script type = "text/javascript"> function openWindow(){ //window.open();//打开一个空白窗口 //第二个参数可以不写，默认另外打开一个窗口，也可以注明“_self”表示在本窗口打开新网页 window.open("http://www.baidu.com","_self"); } </script> -
时间函数
- setTimeout() 在指定的毫秒数后，调用函数或计算表达式，只执行一个。
- setInterval() 在指定的毫秒数后不停的调用函数或计算表达式，多次执行
通过返回的标识，也可以 clearTimeout()，clearInterval()来清除指定函数的执行
<script> function hello(){ alert("侬好伐"); } //延迟2000毫秒（2秒）后，执行hello（）方法 // window.setTimeout("hello()",2000); //延迟2000毫秒后，弹窗“hello” setTimeout(function(){ alert("hello"); },2000); //屏幕时间自动走，特定条件下变色 showTime(); function showTime(){ var time = new Date(); // document.write(time.toLocaleString()); var mes = document.getElementById("h1"); var tim = time.toLocaleString(); //document.write(mes);//object HTMLHeadingElement // document.write(tim);//2022/11/9 15:51:45 mes.innerHTML = tim; var sec = time.getSeconds(); if(sec==0){ h1.innerHTML ="<span style='color:red'>"+tim+"</span>"; }else if(sec%2 == 0){ h1.innerHTML ="<span style='color:lightgreen'>"+tim+"</span>"; }else if(sec%2!=0){ h1.innerHTML ="<span style='color:purple'>"+tim+"</span>"; } } //间隔500毫秒，重复执行showTime方法。括号里参数是方法名，不能带括号。 setInterval(showTime,500);//不接收返回值也能执行，但是如果要配合clear使用，就需要接收返回值 var keyone = setInterval(showTime,500);//返回值供给清除计时器方法使用。 //清除计时器 function stopTime(){ clearInterval(keyone);//clear的参数由set提供 } </script> -
location对象
-
location 对象的属性 href，设置或返回完整的URL
location.href = “跳转地址”
-
location 对象的方法 reload（）重新加载当前文档（刷新）
location.reload();
-
function toBaidu(){
// location.href="http://www.baidu.com";
// window.location="http://www.baidu.com";
location.assign("http://www.baidu.com");
}//实际前两种都是通过调用第三种实现的。这样就可以在浏览器中打开一个新的URL并在历史记录中生成一条记录，因此用户可以通过“后退”按钮回到前一个页面。
//用户可以通过“后退”按钮回到前一个页面。如果想禁止这种后退行为，可以使用replace()方法。该方法只接受一个参数，即URL，然后会跳转到该URL，但不会在历史记录中生成记录。这样用户不能回到前一页了
location.replace("http://www.baidu.com");
dom对象
-
document对象
document.write(“”);
ps:控制台输出语句：console.log()
ps的ps:控制台输出，相同的结果会重叠。如：三行相同的内容，会显示为
3 *******。需要换行才能正常显示
function reload(){ /* 如果调用该方法时不带参数，页面会以最有效的方式加载页面， 也就是说，如果浏览器有该页面的缓存，则会从缓存里面加载该页面。 如果不想从缓存中重新加载页面，需要传入true参数，即绕开浏览器缓存， 强制从服务器去获取页面数据。 */ location.reload();//相当于浏览器F5刷新，有可能从缓存中加载 location.reload(true);//相当于Ctrl+F5,从服务器中加载 }2.获取节点
方法 描述 getElementById() 根据id获取dom对象，如果id重复，以第一个为准 getElementByTagName() 根据标签名获取dom对象数组 getElementByClassName() 根据样式名获取dom对象数组 getElementByName() 根据name属性值获取dom对象数组，常用语多选获取值。 3.创建和插入节点
创建节点
方法 描述 createElement() 创建一个新的节点，需要传入节点的标签名称，返回常见的元素对象 createTextNode() 常见一个文本节点，可以传入文本内容 innerHTML 也能达到创建节点的效果，直接添加到指定位置了 <script> // 创建option元素节点 var opt = document.createElement("option"); // 设置option标签的value与text opt.value = optNum; opt.text = name; </script>插入节点
方法 描述 write() 将任意的字符串插入到文档中 appendChild() 向元素中添加新的子节点，作为最后一个子节点。 4.间接查找节点
方法属性 描述 childNodes 返回元素的一个子节点的数组 firstChild 返回元素的第一个子节点 lastChild 返回元素的最后一个子节点 previousSibling 返回元素的上一个兄弟节点 nextSibling 返回元素的下一个兄弟节点 parentNode 返回元素的父节点 5.删除节点
方法|属性 描述 removeChild（） 从元素中移除子节点 6.属性操作
方法|属性 描述 getAttributl() 返回指定元素的属性值 getAttributeNode() 返回指定属性节点 element.id 设置或者返回元素的id setAttribute() 设置或者改变指定属性并指定值 setAttributeNode() 设置或者改变指定属性节点 element.style 设置或返回元素的样式属性 element.className 设置或返回元素的class属性 element.classList 返回元素的类名
扫一扫
1041
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
