06夯实基础之H5前端

文章目录

前端基础

一、项目开发流程

一般来说:

- 确定需求

- 效果图

- 前端工程师将图片效果转化成页面

- 后端工程师将页面静态效果实现动态效果

- 测试工程师测试代码是否有问题

- 运维工程师上线和后期维护

更规范的说:

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-4c8l0pZX-1637918210923)(C:\Users\24980\AppData\Roaming\Typora\typora-user-images\image-20211121191622770.png)]

二、HTML(超文本标记语言)

2.1 HTML基本结构

html的组成部分:标签—<标签名>

注:html的标签大多数都是成对出现的,包含开始标签和结束标签

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
	要展示给用户的内容(文字,视频,图片等)
</body>
</html>

2.2 页面的编码方式

gb2312-支持中文

UTF-8-中英文都支持(多用)

2.3 HTML常用标签

2.3.1 标题标签

<h1></h1>----<h6></h6>

特点:独立成行,文字加粗,h1最大,h6最小。

<h1>标题标签h1</h1>
<h2>标题标签h2</h2>
<h3>标题标签h3</h3>
<h4>标题标签h4</h4>
<h5>标题标签h5</h5>
<h6>标题标签h6</h6>

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-JFWOjB3o-1637918210924)(C:\Users\24980\AppData\Roaming\Typora\typora-user-images\image-20211121193105007.png)]

2.3.2 段落标签

<p></p>

特点:标记p标签中的文本属于同一段落,p标签结束后换行。

<p>怕麻烦、想偷懒和瞎糊弄的时候,千万要警惕。最好还是抓紧时间把一切都按部就班老老实实做了。无数次经验告诉我,人偷的懒全部都要还回来,还很有可能加1.5倍。怕麻烦、想偷懒和瞎糊弄的时候,千万要警惕。最好还是抓紧时间把一切都按部就班老老实实做了。无数次经验告诉我,人偷的懒全部都要还回来,还很有可能加1.5倍。</p>
<p>怕麻烦、想偷懒和瞎糊弄的时候,千万要警惕。最好还是抓紧时间把一切都按部就班老老实实做了。无数次经验告诉我,人偷的懒全部都要还回来,还很有可能加1.5倍。怕麻烦、想偷懒和瞎糊弄的时候,千万要警惕。最好还是抓紧时间把一切都按部就班老老实实做了。无数次经验告诉我,人偷的懒全部都要还回来,还很有可能加1.5倍。</p>

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Vq2lbnq3-1637918210925)(C:\Users\24980\AppData\Roaming\Typora\typora-user-images\image-20211121193650011.png)]

2.3.3 换行

<br>

特点:自封自闭标签,换行后不增加行间距,p标签换行存在行间距,斜杠可以省略

<p>怕麻烦、想偷懒和瞎糊弄的时候,千万要警惕。最好还是抓紧时间把一切都按部就班老老实实做了。无数次经验告诉我,人偷的懒全部都要还回来,还很有可能加1.5倍。怕麻烦、想偷懒和瞎糊弄的时候,千万要警惕。最好还是抓紧时间把一切都按部就班老老实实做了。无数次经验告诉我,人偷的懒全部都要还回来,还很有可能加1.5倍。</p>
<p>怕麻烦、想偷懒和瞎糊弄的时候,千万要警惕。最好还是抓紧时间把一切都按部就班老老实实做了。无数次经验告诉我,人偷的懒全部都要还回来,还很有可能加1.5倍。<br>怕麻烦、想偷懒和瞎糊弄的时候,千万要警惕。最好还是抓紧时间把一切都按部就班老老实实做了。无数次经验告诉我,人偷的懒全部都要还回来,还很有可能加1.5倍。</p>

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ft9coWGw-1637918210926)(C:\Users\24980\AppData\Roaming\Typora\typora-user-images\image-20211121194145553.png)]

2.3.4 水平线

<hr>

特点:水平线,默认居中,可以设置宽度(单位可以是百分比,也可以是像素)。

<hr>
<hr width="50%">

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-NRBfvDf2-1637918210927)(C:\Users\24980\AppData\Roaming\Typora\typora-user-images\image-20211121194341913.png)]

2.3.5 加粗、倾斜标签

加粗文字:<strong>文字</strong>
文字倾斜:<em>文字</em>

加粗文字:<strong>加粗文字</strong>
文字倾斜:<em>文字倾斜</em>

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-QKEiiMP8-1637918210927)(C:\Users\24980\AppData\Roaming\Typora\typora-user-images\image-20211121194751401.png)]

2.3.6 转义符

 &nbsp;空格
 &gt;大于号
 &lt;小于号
 &copy;版权符

2.3.7 图片标签

<img src="图片路径" width="宽度" height="高度" title="提示文本" alt="提示文本" />
title是在页面能正确加载的情况下显示的文字,alt是图片加载失败的时候显示的文字

2.3.8 font标签

<font color="颜色单词" size="文字大小"/>
文字值最大到7,默认是3,范围:1-7

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-OwmBSbhJ-1637918210928)(C:\Users\24980\AppData\Roaming\Typora\typora-user-images\image-20211121195348626.png)]

2.3.9 超链接标签

<a href="链接的页面或地址" target="链接页面的打开方式">文本或图片</a>
补充:target的值:
_self:指在自身页面中打开(默认)
_blank:新开一个窗口显示页面

超链接的功能:
1.实现多页面之间的跳转
2.实现指定位置的跳转(锚链接)
 实现步骤:
   1.先创建锚链接
     在要跳转的位置添加下列代码:<a name="自定义名称">文字</a>
   2.给链接建立指向
     <a href="#自定义的名称">文字</a>
扩展:当锚链接的地址不在本页面时,建立链接指向时,使用<a href="跳转的页面#自定义名称"></a>
     <a href="two.html#one"></a>  <!--two.html是跳转的页面,one是锚记点-->
3.发送邮件
<a href="mailto:收件人邮箱"></a>

2.3.10 列表标签

无序列表:
<ul>
    <li></li>
</ul>
有序列表:
<ol>
    <li></li>
</ol>
自定义列表:
 <dl>
    <dt>列表的标题</dt>
    <dd>列表项</dd>
 </dl>
2.3.10.1 无序列表(默认实心圆点):
<ul type="disc">
    <li>无序内容1</li>
    <li>无序内容2</li>
    <li>无序内容3</li>
    <li>无序内容4</li>
</ul>
<ul type="circle">
    <li>无序内容1</li>
    <li>无序内容2</li>
    <li>无序内容3</li>
    <li>无序内容4</li>
</ul>
<ul type="square">
    <li>无序内容1</li>
    <li>无序内容2</li>
    <li>无序内容3</li>
    <li>无序内容4</li>
</ul>

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-R2SS4W04-1637918210929)(C:\Users\24980\AppData\Roaming\Typora\typora-user-images\image-20211121202826186.png)]

2.3.10.2 有序列表(li独立成行):
<ol type="A">
    <li>有序内容1</li>
    <li>有序内容2</li>
    <li>有序内容3</li>
    <li>有序内容4</li>
</ol>
<ol type="a">
    <li>有序内容1</li>
    <li>有序内容2</li>
    <li>有序内容3</li>
    <li>有序内容4</li>
</ol>
<ol type="I">
    <li>有序内容1</li>
    <li>有序内容2</li>
    <li>有序内容3</li>
    <li>有序内容4</li>
</ol>
<ol type="i">
    <li>有序内容1</li>
    <li>有序内容2</li>
    <li>有序内容3</li>
    <li>有序内容4</li>
</ol>
<ol type="1">
    <li>有序内容1</li>
    <li>有序内容2</li>
    <li>有序内容3</li>
    <li>有序内容4</li>
</ol>

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-bl1X0iFI-1637918210930)(C:\Users\24980\AppData\Roaming\Typora\typora-user-images\image-20211121203230682.png)]

2.3.10.3 自定义列表:
<dl>
    <dt>一年级</dt>
    <dd>张三</dd>
    <dd>李四</dd>
    <dd>王五</dd>
    <dd>赵六</dd>
    <dt>二年级</dt>
    <dd>张三</dd>
    <dd>李四</dd>
    <dd>王五</dd>
    <dd>赵六</dd>
</dl>

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-7E9nRbjN-1637918210930)(C:\Users\24980\AppData\Roaming\Typora\typora-user-images\image-20211121203508215.png)]

2.3.11 表格标签

作用:实现页面内容的布局

<table>
     <tr>
       <td>内容</td>
     </tr>
</table>
<table border="1">
    <tr>
        <td>内容</td>
        <td>内容</td>
        <td>内容</td>
    </tr>
    <tr>
        <td>内容</td>
        <td>内容</td>
        <td>内容</td>
    </tr>
    <tr>
        <td>内容</td>
        <td>内容</td>
        <td>内容</td>
    </tr>
</table>

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-qFXYU51r-1637918210931)(C:\Users\24980\AppData\Roaming\Typora\typora-user-images\image-20211121205416585.png)]

注:

tr-行,td-单元格,有几个td就表示有几列

1.常用属性:(table标签中)

border=“1” --显示表框线

cellspacing=“0”-取消边框线之间的间距

width:宽度–单位像素/百分比

height:高度–单位像素/百分比

2.设置对齐方式:

<1>表格的对齐方式:

align=""(加在table标签中)

取值:left,center,right

<2>设置单元格内容的对齐方式:(加在tr或td中)

水平方向:

align=“left”/“right”/“center”;

垂直方向:

valign=“top”/“center”/“bottom”

3.合并单元格:写在td标签中

合并行:rowspan=“行数”

合并列:colspan=“列数”

说明:水平方向上的合并,是合并列

​ 垂直方向上的合并,是合并行

2.3.12 iframe框架(内联框架)

功能:在本页面中可以划分区域,显示其他页面内容,同时可以实现页面的共享

实现方式:

<iframe src="默认的链接页面" name="框架名" width="" height=""></iframe>

定义完成以后,使用a标签进行关联:

<a href="链接的页面" target="框架名"></a>

2.3.13 表单标签

用来手机用户信息的网页,都是用的是表单。

<form action="提交地址" method="提交方法">
    表单元素
</form>
<h1>表单form</h1>
<form action="请求地址" method="post/get">
    用户名:<input type="text" name="username">
    密码:<input type="password" name="password"><br>
    单选框:<br>
    性别:男<input type="radio" name="sex" checked="checked"><input type="radio" name="sex"><br>
    复选框:<br>
    爱好:篮球<input type="checkbox">
    足球<input type="checkbox">
    排球<input type="checkbox">
    羽毛球<input type="checkbox"><br>
    <select name="">
        <option>北京</option>
        <option>上海</option>
        <option selected="selected">南京</option>
        <option>杭州</option>
    </select>
    <br>
    多行文本域:<br>
    协议:<textarea rows="10" cols="10" readonly="readonly">协议内容协议内容协议内容协议内容协议内容协议内容协议内容</textarea>
    <br>
    上传头像:<input type="file"><br>
    <button type="reset">重置</button>&nbsp;<button type="submit">提交</button>
</form>

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-rRnsojMO-1637918210932)(C:\Users\24980\AppData\Roaming\Typora\typora-user-images\image-20211122160354654.png)]

value属性也是标签元素都有的一个属性,但是它主要用来设置默认值或表示提交的内容。

2.3.14 div标签

作用:实现页面布局

示例:

内容

<div>内容</div> <!--独立成行-->

独立成行

常用属性:

​ height(高度),width(宽度),

​ background-color(背景颜色)

​ background-image(背景图片)

​ background-repeat(背景重复):no-repeat,repeat,repeat-x,repeat-y

​ background-position:(背景位置) 先水平位置然后垂直位置,中间使用空格间隔

​ 单位:left,center right,top center bottom

​ 或 Xpx Ypx (X是水平方向的值,Y是垂直方向的值)

​ 示例: background-position:20px 30px

三、CSS样式

3.1 css层叠样式表

功能:美化页面,可以实现页面内容和表现的分离。

body中主要负责添加网页内容,css主要负责美化。

3.2 css的语法

选择器{
	样式1;
	样式2   
}

注:多个声明语句使用分号隔开,最后一个声明语句,分号可以省略

声明语句语法:属性名:属性值

示例:

h1{
  font-size:12px;  //设置文字大小12px
  color:red// 设置字体颜色红色
}       

3.3 css中选择器的类型

3.3.1 标签选择器:

​ 语法:标签名{声明}

​ 示例:p{color:red}

​ 特点:即时性,立即就能看到效果

3.3.2 类选择器:

​ 语法:.自定义类名{声明语句}

​ 注:需要在标签中使用class属性引用该类样式,才能起作用

​ 示例:

​ .c1{color:red}

在标签中引用:

<p class="c1"></p>

特点:先定义后引用

3.3.3 id选择器–使用标签中的id属性

注:id属性的值在同一页面中不允许重复

对比name和id属性的区别:

相同点:给标签起名字

不同点:在同一个页面中name属性值可以重复,id的属性值不可以重复

语法:

​ 1.在标签中定义id属性

<p id="自定义名"></p>

​ 2.定义id选择器

​ #id名{}

3.4 css定义的位置

<head>
    <style type="text/css">
        css声明语句
     </style>
</head>

1.行内样式:在标签中使用style属性

注:只能控制所在的标签

语法:<标签名 style=“属性名:属性值”>

示例:

<p style="color:red;font-size:12px"></p>

使用场合:当需要单独设置某一个标签内容的样式时

2.内部样式:在head标签中使用style标签

优点:方便修改页面样式

缺点:不能实现资源共享,不能完全的分离内容和样式

<head>
  <style></style>
</head>

3.外部样式:定义.css文件,然后再和页面进行关联

优点:内容和样式完全独立

导入css文件的方式:

1.链接式:在head标签添加link标签

<link rel="stylesheet"  type="text/css" href="css文件路径"/>

注:css文件中只有css样式,没有标签

2.导入式:在head标签中添加(现在很少用)

<style type="text/css">
    @import url("css文件的路径");
</style>

补充:

html中的注释:

<!--注释内容-->

注释:类似于代码的说明信息,给程序员看,但浏览器不执行

3.5 css优先级(高->低)

1.选择器:

id选择器>类选择器>标签选择器

2.样式导入-就近原则

最高级:行内样式

内部样式和外部样式,哪个在后,则以哪个为最后结果

3.6 高级选择器

使用场合:当页面标签出现嵌套时,做页面定位时使用

分类:

1.后代选择器:

语法:父标签(父选择器) 子标签(子选择器){样式}

含义:页面定位时,给父标签中的子标签设置样式

示例:p span{color:red}–只给p标签中的span设置红色

<p><span></span></p>

​ 注:中间使用空格间隔

2.交集选择器:

语法:标签名#id名{样式}

​ 标签名.类样式名{样式}

使用场合:当出现同名标签时,并且只能通过标签中的id或class属性进行区分时使用

注:中间没有空格,并且第一个选择器必须是标签选择器

示例:span#one{color:red}–id值是one的span标签

标签:

<span id="one"></span>

3.并集选择器:

语法:选择器1,选择器2…{样式}

使用场合:当页面中某些部分设置的是同样的样式时,可以使用并集选择器进行列举

注:选择器中间使用逗号隔开

示例:span,#one{color:red}

页面:

<span></span>
<p id="one"></p>

4.全局选择器: *{css}

3.7 CSS样式属性

3.7.1 文字样式

font-family:设置文字字体

font-size:文字大小(像素为单位)

font-style:是否倾斜

font-weight:是否加粗

3.7.2 文本样式

color:颜色

text-align:文本的水平对齐方式

text-indent:2em-首行缩进2个字符,也可以是像素单位

line-height:设置行高(单位:px),文本内容默认在行中间(居中)

text-decoration:文本装饰(取值:none,underline,line-through,overline)

vertical-align:垂直方向(top,middle,bottom(默认))

3.7.3 伪类

语法: 选择器:伪类名{样式}

伪类名的分类:

1.未点击时:

​ :link

2.鼠标放上时:

​ :hover

3.访问过后:

​ :visited

4.鼠标按下(不要释放鼠标):

​ :active

3.7.4 设置鼠标属性:cursor

​ 属性值:wait(等待),help(帮助),pointer(小手)

span {
	cursor: pointer
}

3.7.5 层标签

作用:实现页面布局

示例:

<div>内容</div>

独立成行

常用属性:

​ height(高度),width(宽度),

​ background-color(背景颜色)

​ background-image(背景图片)

​ background-repeat(背景重复):no-repeat,repeat,repeat-x,repeat-y

​ background-position:(背景位置) 先水平位置然后垂直位置,中间使用空格间隔

​ 单位:left,center right,top center bottom

​ 或 Xpx Ypx (X是水平方向的值,Y是垂直方向的值)

​ 示例: background-position:20px 30px

四、JS(JavaScript)

可以协助HTML,实现页面动态效果。

4.1 作用

\1. 做表单验证,减少服务器压力

\2. 页面特效

\3. Ajax异步请求

4.2 特点

将页面元素和语法绑定到一起,最终实现页面特效。js属于弱语言。

4.3 格式

js代码可以在html中的任何地方出现,只有在调用之前能加载到页面中即可.

<script type="text/javascript">
   	 document.write("输出内容<br/>");//等价于java中的system.out,并且可以在输出内容中添加html标签
</script>

4.4 定义位置

<!--内部js-->
<head>
    <script type="text/javascript"> 
    	js代码
    </script>
</head>
<!--行内js-->
<input type="button" 事件名称="函数名()">
<input type="button" onclick="javascript:alert('点击了按钮!')">
<!--外部js-->
先在外部创建 文件名.js 文件
然后通过如下方式引用:
<script type="text/javascript" src="文件路径/文件名.js"></script>

4.5 js语法

4.5.1 变量的定义

var 变量名;

变量名=变量值;

或: var 变量名=变量值;//字符串使用双引号引起来

示例: var str=“张三”;

​ var age=19;

注:var关键字可以省略,但是不建议这么写,同时注意变量名的大小写

4.5.2 布尔类型

取值为true,false 示例:var ishave=true;

4.5.3 字符串中常用属性和方法

属性:变量名.length 获得字符串长度

方法:

charAt(int index);//参数为下标,下标从0开始,获得指定下标位置的单个字符

indexOf(‘单个字符’);//判断指定的字符在字符串中首次出现的下标,未找到时返回-1

substring(int begin,int end);//截取字符串,包含开始位置,不包含结束位置

split(“拆分元素”);//将字符串拆分成数组

示例:

var str2=“张三,李四,王五”;

var strs=str2.split(",");

​ for(var i=0;i

​ document.write(strs[i]+"
");

​ }

4.5.4 数组

1.数组的定义:

var 数组名=new Array(长度);//长度可省略

var 数组名=[值1,值2,值3…];

2.数组的赋值:

数组名[下标]=值;//下标从0开始

3.数组的属性和方法:

属性:length 数组的长度

遍历数组:

for(var i=0;i<数组名.length;i++){} 

增强for循环:

for(var i in names){
 	document.write(names[i]+"-----");
}

方法:

插入符号:数组名.join("-");//返回的是字符串

升序排序:数组名.sort()//默认按首字母或首个数字排列

实例:

//先定义排序规则
function sortNumber(a, b){
     return a - b;
}
var arr3=[11,99,7,88,23,26];
arr3.sort(sortNumber);//传递排序方式
for(var i in arr3){
    document.write(arr3[i]+"");
}

4.5.5 js中的运算符:

1.算术运算符 + - * / % ++ –

赋值运算符 =

比较运算符 > < >= <= == !=

逻辑运算符 && || !

2.if,if-else,for,while,do-while,switch都和java一样

3.continue,break,return 也和java一样

4.单行注释://

多行注释:/**/

5.弹窗:

alert(‘弹出信息’);

prompt(“提示信息”,‘文本框中的默认值’);

示例:

<script type="text/javascript">
	function test(){
	var num= prompt("请输入值",'');
	alert("num="+num);
}
</script>
<input type="button" value="测试" onclick="test()" />

4.6 函数的定义

函数在java中称为方法

分类:系统函数和自定义函数

4.6.1 系统函数:

parseInt(“字符串”)//将字符串中的数值转换成数值类型的数值,“123”->123

parseFloat("")

示例:

var str="123";
var num=parseInt(str);
document.write(num+3);
isNaN(str);//当str是非数字时,返回true

4.6.2 自定义函数:无参方法和有参方法

语法:

function  方法名(参数列表){
	//js代码
}

调用:事件名=“方法名()” //注:当调取有参方法时,需要给定参数,定义有参方法时不需要指定数据类型

示例:

<script type="text/javascript">
  function test(a,b){
	   alert("abc///"+a+","+b);  
  }
</script>
<body>
<input type="button" value="测试"  onclick="test(555,66)"/>

4.6.3 程序调试

(1)浏览器的调试工具F12,firebug

(2)alert()弹窗辅助排错

4.6.4 匿名函数

(1) 定义:

​ var 变量名=function(参数){}

(2) 调用:

​ 事件名=“变量名(参数值)”

示例:

var a=function(){
     alert("匿名函数被调用!");
}

4.6.5 变量的作用域

var i=10;//全局变量
var a=function(){
    var i=20;//局部变量
    alert("i="+i);
}

4.7 JS的对象

4.7.1 BOM

浏览器对象模型(Browser Object Model)

浏览器对象(window),window对象的属性和方法见下。

4.7.2 window对象的常用属性

1.history:历史记录

<span onclick="javascript:window.history.go(-1)">后退/上一页</span>
<span onclick="javascript:window.history.go(1)">前进/下一页</span>

2.location:用于跳转到指定页面

<input type="button" value="去注册" onclick="javascript:window.location.href='b.html'" />

4.7.3 window常用方法

prompt( ) 显示可提示用户输入的对话框

alert( ) 显示带有一个提示信息和一个确定按钮的警示框

confirm( ) 显示一个带有提示信息、确定和取消按钮的对话框

​ 示例:

function a(){
    var rs=confirm('你确定要删除?');
    if(rs){
        alert("真的删除了");	 
    }else{
        alert("又不删除了");	
    }
}

close( ) 关闭浏览器窗口

<input type="button" value="close" onclick="javascript:window.close()" />

open() 打开一个新的浏览器窗口,加载给定 URL 所指定的文档

window.open("页面地址");:
window.open("页面","名称(可不写)","height=380,width=320,toolbar=0,scrollbars=0,location=0,status=0,menubar=0,resizable=0");

setTimeout( ) 在指定的毫秒数后调用函数或计算表达式

setInterval( ) 按照指定的周期(以毫秒计)来调用函数或表达式

4.7.4 onload一个页面或一幅图像完成加载

示例:

<body onload="">

onmouseover 鼠标移到某元素之上

onmouseout 鼠标离开的时候

onclick 当用户单击某个对象时调用的事件句柄

onkeydown 某个键盘按键被按下

onchange 域的内容被改变(一般用在下拉框)

onfocus 获得焦点

onblur 失去焦点

示例:

<span onmouseover="javascript:alert('谈谈谈');">fsfasfas </span>
<input type="text" onkeydown="javascript:alert('写写写')" />
<select onchange="javasript:alert('修改')">
	<option>北京</option>
   	<option>上海</option>
</select>

4.7.5 通过js操作页面元素

document–文档(DOM- (Document Object Model)文档对象模型)

主要操作的是页面元素(页面标签)

1.常用方法:获得页面元素内容的值

getElementById() 返回对拥有指定id的第一个对象的引用

示例:

function clearText(){
	// 点value获得的是文本框中的文本信息
    var uname=document.getElementById("uname").value; 
    if(uname=='请输入用户名'){  
        //value后加等号表示赋值(修改原来的value属性值)	
        document.getElementById("uname").value="";
    }
}

getElementsByName() 返回带有指定名称的对象的集合

示例:checked属性用来判断复选框是否被选中

function c() {
    var strs= document.getElementsByName("love");
    for(var i=0;i<strs.length;i++) {
        //判断用户选中了哪一个
        if(strs[i].checked==true){
            alert(strs[i].value);  
        }
    }
}

getElementsByTagName() 返回带有指定标签名的对象的集合

write() 向文档写文本、HTML表达式或JavaScript代码

4.8 js实现特效

4.8.1 内置对象

Array,Math,String,Date

var iNum=Math.floor(Math.random()*98+2); //2-99之间的值

4.8.2 动态时钟

function getTime() {//通过onload事件触发这个函数
	     var date = new Date();
		 var year = date.getFullYear();//得到年
		 var month = date.getMonth() + 1;//得到月份
		 var day = date.getDate();//获得几号
		 var week = date.getDay(); //得到星期
		 var hour = date.getHours(); //得到小时
		 var minutes = date.getMinutes();//得到分钟
		 var sec = date.getSeconds();//得到秒
		 var str = year + "年" + month + "月" + day + "日  星期" + week + " " + hour + ":" + minutes + ":" + sec;
		 document.getElementById("time").innerHTML = str;   
}

4.8.3 Dom操作(Document操作)

它操作的是页面的标签元素

document对象

getAttribute(“属性名”)

setAttribute(“属性名”,“属性值”)

示例:

var a=text.getAttribute("type");
text.setAttribute("type","button");	

4.8.4 操作节点

创建和增加节点的方法:

createElement("标签名"):创建节点,返回的是新节点对象 ,document对象调用
//下面的这些方法基本都是使用父元素对象调取
appendChild(新节点对象):末尾追加方式插入节点	
insertBefore(新节点对象,旧节点对象):在指定节点前插入新节点
cloneNode(false):克隆节点,false表示不克隆其之内容
removeChild(被删除节点的对象):删除节点  
replaceChild(替换的新节点,被替换的旧节点) :替换节点

4.8.5 (省市级联)二级联动

<script>
	function a1() {
        // 1.先获取用户选择的市信息
        var city = document.getElementById("city").value;
        if (city == "请选择") {
            alert("请先选择市的信息");
        } else if (city == "beijing") {
            // 给区的下拉框添加信息
            var region = document.getElementById("region");
            // 先清空原有下拉框
            region.length = 0;
            // 再添加新列表
            // new Option() 等价于 <option value="值">
            region.add(new Option("东城", "dongcheng"));
            region.add(new Option("西城", "xicheng"));
            region.add(new Option("朝阳", "chaoyang"));
        } else if (region == "shanghai") {
            var region = document.getElementById("region");
            region.length = 0;
            region.add(new Option("浦东", "pudong"));
        }
    }
</script>
<body>
    <h1>省市级联</h1>
    <select onchange="a1()" id="city">
        <option value="-1">请选择</option>
        <option value="beijing">北京</option>
        <option value="shanghai">上海</option>
    </select><select id="region">
        <option>请选择</option>
    </select></body>
  • 2
    点赞
  • 6
    收藏
  • 打赏
    打赏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
©️2022 CSDN 皮肤主题:岁月 设计师:pinMode 返回首页
评论

打赏作者

小白的Soda

你的鼓励将是我创作的最大动力

¥2 ¥4 ¥6 ¥10 ¥20
输入1-500的整数
余额支付 (余额:-- )
扫码支付
扫码支付:¥2
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值