html & CSS & JavaScript的学习
html & CSS & JavaScript的学习
Rochester
发布于 2020-09-01 11:10:56
发布于 2020-09-01 11:10:56
一、HTML
1. 概念：
是最基础的网页开发语言
* Hyper Text Markup Language 超文本标记语言
* 超文本：
* 超文本是用超链接的方法，将各种不同空间的文字信息组织在一起的网状文本。
* 标记语言：
* 由标签构成的语言。<标签名称> 如 html，xml
* 标记语言不是编程语言2. 快速入门：
* 语法：
1. html文档后缀名为.html或者 .htm
2. 标签分为：
1. 围堵标签：有开始标签和结束标签。如 <html></html>
2. 自闭和标签：开始标签和结束标签在一起。如<br/>
3. 标签可以嵌套：
需要正确嵌套，不能你中有我，我中有你
错误：<a><b></a></b>
正确：<a><b></b></a>
4. 在开始标签中可以定义属性。属性时由键值对构成，值需要用引号(单双都可)引起来
5. html的标签不区分大小写，但是建议使用小写。3. 标签：
1. 文件标签：
* 文件标签：构成html最基本的标签
* html：html文档的根标签
* head：头标签。用于指定html文档的一些属性。引入外部的资源
* title：标题标签
* body：体标签
* <!DOCTYPE html>：html5中定义该文档是html文档2. 文本标签：
* 和文本有关的内容
* 注释：<!-- 注释内容 -->
* <h1>to<h6>：标题标签
* h1~h6：字体大小逐渐递减
* <p>：段落标签
* <br>：换行标签
* <hr>：展示一条水平线
* 属性：
* color：颜色
* width：宽度
* size：高度
* align：对其方式
* center：居中
* left：左对齐
* right：右对齐
* <b>：字体加粗
* <i>：字体斜体
* <font>：字体标签
* <center>：文本居中
* 属性：
* color：颜色
* size：大小
* face：字体
* 属性定义：
* color：
1.英文档次：red,green,blue
2.rgb(值1，值2，值3)：值的范围：0~255 如：rgb(0,0,225)
3.#值1值2值3：值的范围：00~FF之间。如：#FF00FF
* width：
1.数值：width='20',数值的单位，默认是(像素)
2.数值%：占比相当于父元素的比例(屏幕)- 案例简介：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<h1>公司简介</h1>
<hr color="#ffcc66">
<p>
<font color="red">”中关村黑马程序员训练营”</font>是由<b><i>传智播客</i></b>联合中关村软件园、CSDN ,并委托传智播客进行教学实施的软件开发高端培训机构,致力于服务各大软件企业,解决当前软件开发技术飞速发
展，而企业招不到优秀人才的困扰。
</p>
<p>
目前，"中关村黑 马程序员训练营"已成长为行业”学员质量好、课程内容深、企业满意"的移动开发高端训练基地,并被评为中关村软件园重点扶持人才企业。
</p>
<p>
黑马程序员的学员多为大学毕业后,有理想、有梦想,想从事IT行业,而没有环境和机遇改变自己命运的年轻人。黑马程序员的学员筛选制度,远比现在90%以上的企业招聘流程更为严
格。任何-名学员想成功入学”黑马程序员” ,必须经历长达2个月的面试流程,这些流程中不仅包括严格的技术测试、自学能力测试,还包括性格测试、压力测试、品德测试等等测试。
毫不夸张地说.黑马程序员训练营所有学员都是精挑细选出来的。百里挑- -的残酷筛选制度确保学员质量,并降低企业的用人风险。
</p>
<p>
中关村黑马程序员训练营不仅着重培养学员的基础理论知识,更注重培养项目实施管理能力，并密切关注技术革新,不断引入先进的技术,研发更新技术课程,确保学员进入企业后不仅能独
立从事开发工作,更能给企业带来新的技术体系和理念。
</p>
<p>
一直以来,黑马程序员以技术视角关注IT产业发展,以深度分享推进产业技术成长,致力于弘扬技术创新,倡导分享、开放和协作,努力打造高质量的IT人才服务平台。
</p>
<hr color="#ffcc66">
<font size="2" color="gray">
<center>
江苏传智播客教育科技股份有限公司<br>
版权所有Copyright©2006-2018, All Rights Reserved苏ICP备16007882
</center>
</font>
</body>
</html>
3. 图片标签：
* img:展示图片
* 相对路径
* 以.开头的路径
* ./:代表当前目录 ./image/1.jpg
* ../：代表上一级目录 ../image/2.jpg
eg:<img src="../image/img100.jpg" width="800" height="800">4. 列表标签：
* 有序列表：
* ol：有序
* li：列表项
* 代码示例：
** 早上起床做的事情
<ol type="A">
<li>睁眼</li>
<li>看手机</li>
<li>穿衣服</li>
</ol>
**
* 无序列表：
* ul：
* li：
* 代码示例：
早上起床做的事情
<ul type="disc">
<li>睁眼</li>
<li>看手机</li>
<li>穿衣服</li>
</ul>5. 链接标签：
* a：定义一个超链接
* 属性：
* href：指定访问资源的URL(统一资源定位符)
* target：指定打开资源的方式
* _self：默认值，在当前页面打开
* _blank：在空白页面打开- 示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>链接标签</title>
</head>
<body>
<!--超链接标签-->
<a href="http://www.baidu.com">点我</a>
<br>
<a href="http://www.baidu.com" target="_blank">在空白窗口打开</a>
<br>
<a href="http://www.baidu.com" target="_self">默认值，在当前页面打开</a>
<br>
<a href="5_列表标签.html">跳转本地链接</a>
<br>
<a href="maileto:308619965@qq.com">联系我们，自动打开本地邮箱工具</a>
<!-- 点击图片跳转链接-->
<a href="http://www.baidu.com"><img src="../image/img100.jpg"</a>
</body>
</html>6. 块标签：div和span
* div：每一个div占满一整行。块级标签
* span:文本信息在一行展示。行内标签，内联标签7. 语义化标签：
* html5中为了提高程序的可读性，提供了一些标签。
1.<header>
2.<footer>8. 表格标签：
* table：定义表格
* width:宽度
* border:边框
* cellpadding：定义内容和单元格的距离
* cellspacing：定义单元格之间的距离。如果指定为0，则单元格的线会合为一条
* bgcolor：背景色
* align：对齐方式
* tr：定义行
* td：定义单元格
** colspan：合并列
** rowspan:合并行
* th：定义表头单元格，有居中效果
* <caption>：表格标题
* <thead>：表示表格的头部分
* <tbody>：表示表格的体部分
* <tfoot>：表示表格的脚部分
-- - -----------------------------------------------------
* 代码示例：
<table border="1" width="200" cellspacing="0" cellpadding="0" bgcolor="gray" align="center">
<tr>
<!-- <td>序号</td>-->
<!-- <td>姓名</td>-->
<!-- <td>成绩</td>-->
<th>序号</th>
<th>姓名</th>
<th>成绩</th>
</tr>
<tr>
<td>1</td>
<td>鲁臭臭</td>
<td>100</td>
</tr>
<tr>
<td>2</td>
<td>牛胖胖</td>
<td>100</td>
</tr>
</table>- 合并单元格示例：
<table border="1" width="200" cellspacing="0" cellpadding="0" bgcolor="gray" align="center">
<caption>学生成绩表</caption>
<tr>
<!--合并行-->
<th rowspan="2">序号</th>
<th>姓名</th>
<th>成绩</th>
</tr>
<tr>
<td>鲁臭臭</td>
<td>100</td>
</tr>
<tr>
<td>2</td>
<!-- 合并列-->
<td colspan="2">牛胖胖</td>
</tr>9. 表单标签：
1. 基本操作：
* 概念：用于采集用户输入的数据的。用于和服务器进行交互。
* form：用于定义表单的。可以定义一个范围，范围代表采集用户数据的范围。
* 属性：
* action：提交指定数据的URL(地址)
* method:指定提交方式
* 分类：一共7种，2种比较常用
* get：
1.请求参数会在地址栏中显示。会封装到请求行中(HTTP协议后讲解)
2.请求参数大小是有限制的
3.不太安全。
* post：
1.请求参数不会在地址栏中显示，会封装在请求体中(HTTP协议后讲解)
2.请求参数的大小没有限制
3.较为安全。
* 表单项中的数据要想被提交：必须制定其name属性- 示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>表单标签</title>
</head>
<body>
<!--<form action="#" method="get">-->
<form action="#" method="post">
用户名：<input name="username"><br>
密码：<input name="password"><br>
<input type="submit" value="登录">
</form>
</body>
</html>2. 表单项标签input
* input：可以通过type属性值，改变元素展示的样式；
* type属性：
* text：文本输入框，默认值
* placeholder：指定输入框的提示信息，当输入框的内容发生变化，会自动清空提示信息；
* password：密码输入框
* radio：单选框
* 注意：
1.要想让多个单选框实现单选的效果，则多个单选框的name属性值必须一致；
2.一般会给每一个单选框提供value属性，指定其被选中后提交的值；
3.checked属性，可以指定默认值。
*checkbox：复选框：
* 注意：
1.一般会给每一个单选框提供value属性，指定其被选中后提交的值；
2.checked属性，可以指定默认值
* label：指定输入项的文字描述信息
* 注意
* label的for属性一般会和input的id属性值对应。如果对应了，则点击label区域，会让input输入框获取焦点。
* file:文件选择框
* hidden：隐藏域，用于提交一些信息
* 按钮：
* submit：提交按钮，可以提交表单
* button：普通按钮
* image：图片提交按钮
* src属性指定图片的路径
** 示例中再展示一些属性，或参考文档 - 示例：
<body>
<form action="#" method="get">
<lable for="username">用户名</lable>：<input name="username" placeholder="请输入用户名" id="username"><br>
密码：<input type="password" name="password" placeholder="请输入密码"><br>
性别：<input type="radio" name="sex" value="man">男
<input type="radio" name="sex" value="women">女<br>
爱好:<input type="checkbox" value="game" name="hobby">游戏
<input type="checkbox" value="java" name="hobby">Java
<input type="checkbox" value="singing" name="hobby">唱歌
<br>
<input type="submit" value="登录">
<input type="button" value="单纯的一个按钮"><br>
<input type="image" src="../image/hot_tel.jpg">
文档选择框：<input type="file" name="file"><br>
隐藏域：<input type="hidden" name="id" value="aaa"><br>
取色器：<input type="color" name="color"><br>
生日：<input type="date" name="birthday"><br>
时间(精确到时分)：<input type="datetime-local" name="time"><br>
</form>
</body>3. select：下拉列表
* 下拉列表
* 子元素：option，指定列表项
-- - ------------------------------------------
* 代码示例：
<select name="address" id="">
<option value="">--请输入地区--</option>
<option value="1">北京</option>
<option value="2">上海</option>
<option value="3">西安</option>
</select>4. textarea：文本域
* cols：指定列数，每一行有多少个字符
* rows：默认多少行。
* 行数不够的话会自动增长
-- ----------------------------------------------
* 代码示例：
自我描述：<textarea cols="20" rows="5" name="des"></textarea>注册页面案例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>注册页面</title>
</head>
<body>
<form action="#" method="post">
<table border="1" align="center" width="500">
<tr>
<td><label for="username">用户名</label></td>
<td><input name="username" placeholder="请输入用户名" id="username"></td>
</tr>
<tr>
<td><label for="password">密码</label></td>
<td><input type="password" name="password" placeholder="请输入密码" id="password"></td>
</tr>
<tr>
<td><lable for="email">Email</lable></td>
<td><input type="email" placeholder="请输入email" id="email" name="email"></td>
</tr>
<tr>
<td><lable for="name">姓名</lable></td>
<td><input type="text" name="name" placeholder="请输入真实姓名" id="name"></td>
</tr>
<tr>
<td><lable for="tel">手机号</lable></td>
<td><input type="text" name="tel" id="tel" placeholder="请输入手机号"></td>
</tr>
<tr>
<td>性别</td>
<td><input type="radio">男
<input type="radio">女</td>
</tr>
<tr>
<td><lable for="birthday">出生日期</lable></td>
<td><input type="date" name="birthday" id="birthday" ></td>
</tr>
<tr>
<td><lable for="des">验证码</lable></td>
<td><input type="text" name="des" id="des" placeholder="des">
<img src="../image/verify_code.jpg" alt=""></td>
</tr>
<tr>
<td colspan="2" align="center"><input type="submit" name="注册"></td>
</tr>
</table>
</form>
</body>
</html>二、CSS：页面美化和布局控制
1. 概念：Cascading Style Sheets 层叠样式表
- 层叠：多个样式可以作用在同一个html的元素上，同时生效
2. 好处：
1.功能强大；
2.将内容展示和样式控制分离
* 降低耦合度。解耦
* 让分工协作更容易
* 提高开发效率3. css的使用：css与html结合方式
1. 内联样式：
* 在标签内使用style属性指定css代码
<body>
<div style="color: red">hello world</div>
</body>2. 内部样式：
* 在head标签内，定义style标签，style标签的标签体内容就是css代码
<head>
<meta charset="UTF-8">
<title>内联</title>
<style>
div{
color: gold;
}
</style>
</head>
<body>
<div>hello world</div>
</body>3. 外部样式：
1.定义css资源文件；
2.在head标签内，定义link标签，引入外部的资源文件；
<title>内联</title>
<!-- 调用方式一-->
<!-- <link rel="stylesheet" href="css/a.css">-->
<!-- 调用方式二-->
<style>
@import "css/a.css";
</style>
</head>
<body>
<div >hello world</div>
</body>* 注意：
* 1、2、3种方式，css作用的范围越来越大
* 1方式不常用，后期常用2,34. css语法
* 格式：
选择器{
属性名1：属性值1；
属性名2：属性值2；
...
}
* 选择器：筛选具有相似特征的元素
* 注意：
* 每一对属性需要使用;隔开，最后一对属性可以不加;5. 选择器：筛选具有相似特征的元素
1. 基础选择器
* 调用选择器使用时都是在style里面
1.id选择器：选择具体的id属性值的元素
* 语法：#id属性值{}
* 注意：建议在一个html页面中id值唯一
2.元素选择器：选择具有相同标签名称的元素
* 语法：标签名称{}
* 注意：id选择器优先级高于元素选择器
3.类选择器：选择具有相同的class属性值元素
* 语法：.class属性值{}
* 注意：类选择器优先级高于元素选择器
-- ---------------------------------------------------
* 代码示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>基础选择器</title>
<style>
#one {
color: red;
}
div{
color: green;
}
.class{
color: gold;
}
</style>
</head>
<body>
<div id="one">你好世界</div>
<div>世界你好</div>
<p class="class">世界你好啊</p>
</body>
</html>2. 扩展选择器：
1.选择所有元素：
* 语法：*{}
2.并集选择器：
* 选择器1，选择器2{}
3.子选择器：筛选选择器1元素下的选择器2元素
* 选择器1 选择器2{}
4.父选择器：筛选选择器2的父元素选择器1
* 语法：选择器1 > 选择2{}
5.属性选择器：选择元素名称，属性名=属性值的元素
* 语法：元素名称[属性名="属性值"]{}
6.伪类选择器：选择一些元素具有的状态
* 语法：元素：状态{}
* 如：<a>
* 状态：
* link：初始化的状态
* visited：被访问过的状态
* active:正在访问状态
* hover：鼠标悬浮状态
-- --------------------------------------------------------
* 示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>基础选择器</title>
<style>
div p{
color: red;
}
div > p {
border: 1px solid;
}
input[type='text'] {
border: 3px solid;
}
a:link{
color: gold;
}
a:hover{
color: blue;
}
a:active{
color:red;
}
a:visited{
color: aqua;
}
</style>
</head>
<body>
<div>
<p>你好呀世界</p>
</div>
<p>世界你好呀</p>
<input type="text" name="text">
<a href="#">传智播客</a>
</body>
</html>6. 属性：
1.字体、文本
* font-size：字体大小
* color：文本颜色
* text-align：对齐方式
* line-height：行高
2.背景：
* background
也可以添加图片
3.边框：
* border：设置边框，符合属性
4.尺寸：
* width：宽度
* height：高度
5.盒子模型：
* margin：外边距
* padding：内边距
* 默认情况下内边距会影响整个盒子的大小
* box-sizing：border-box; 设置盒子的属性，让width和height就是最终盒子的大小
* float：浮动
* left
* right- 示例1：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>属性</title>
<style>
p{
font-size: 2px;
color: aqua;
text-align: center;
line-height: 20px;
border: 1px solid gold;
}
div{
border: 1px deeppink solid;
width:100px;
height: 100px;
background: url("../image/icon_3.jpg") no-repeat center;
}
</style>
</head>
<body>
<p>你好世界</p>
<div>世界你好</div>
</body>
</html>- 示例2：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>盒子模型</title>
<style>
div{
border: 1px solid red;
width: 100px;
}
.div1{
width: 200px;
height: 200px;
padding:50px;
box-sizing: border-box;
}
.div2{
width: 100px;
height: 100px;
/*margin: 50px;*/
}
.div3{
float: left;
}
.div4{
float: left;
}
.div5{
float: right;
}
</style>
</head>
<body>
<div class="div1">
<div class="div2"></div>
</div>
<div class="div3">aaaaa</div>
<div class="div4">bbbbb</div>
<div class="div5">ccccc</div>
</body>
</html>- 案例：注册界面
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>注册页面</title>
<style>
*{
margin: 0px;
padding: 0px;
box-sizing: border-box;
}
body{
background: url("img/register_bg.png") center no-repeat;
}
.rg_layout{
width: 900px;
height: 500px;
border: 5px solid #EEEEEE;
background-color: white;
margin: auto;
padding: 15px;
}
.rg_left{
float: left;
}
.rg_left >p:first-child{
font-size: 20px;
color: #FFD026;
}
.rg_left > p:last-child{
font-size: 20px;
color: #A6A6A6;
}
.rg_center{
float: left;
width: 450px;
}
.td_left{
width: 100px;
text-align: right;
height: 45px;
}
.td_right{
padding-left: 50px;
}
#username,#password,#name,#birthday,#email,#tel,#des{
width: 251px;
height: 32px;
border: 1px solid #A6A6A6;
/* 设置边框圆角*/
border-radius: 5px;
padding-left: 10px;
}
#des{
width: 110px;
}
#img_des{
height: 32px;
vertical-align: middle;
}
#sub{
width: 100px;
height: 40px;
border: 1px solid #FFD026;
background-color: #FFD026;
}
.rg_right{
float: right;
font-size: 15px;
margin: 15px;
}
.rg_right > p > a{
color: pink;
}
</style>
</head>
<body>
<div class="rg_layout">
<div class="rg_left">
<p>新用户注册</p>
<p>USER REGISTER</p>
</div>
<div class="rg_center">
<form action="#" method="post">
<table>
<tr>
<td class="td_left"><label for="username">用户名</label></td>
<td class="td_right"><input name="username" placeholder="请输入用户名" id="username"></td>
</tr>
<tr>
<td class="td_left"><label for="password">密码</label></td>
<td class="td_right"><input type="password" name="password" placeholder="请输入密码" id="password"></td>
</tr>
<tr>
<td class="td_left"><lable for="email">Email</lable></td>
<td class="td_right"><input type="email" placeholder="请输入email" id="email" name="email"></td>
</tr>
<tr>
<td class="td_left"><lable for="name">姓名</lable></td>
<td class="td_right"><input type="text" name="name" placeholder="请输入真实姓名" id="name"></td>
</tr>
<tr>
<td class="td_left"><lable for="tel">手机号</lable></td>
<td class="td_right"><input type="text" name="tel" id="tel" placeholder="请输入手机号"></td>
</tr>
<tr>
<td class="td_left">性别</td>
<td class="td_right"><input type="radio">男
<input type="radio">女</td>
</tr>
<tr>
<td class="td_left"><lable for="birthday">出生日期</lable></td>
<td class="td_right"><input type="date" name="birthday" id="birthday" ></td>
</tr>
<tr>
<td class="td_left"><lable for="des">验证码</lable></td>
<td class="td_right"><input type="text" name="des" id="des" placeholder="请输入验证码">
<img src="../image/verify_code.jpg" alt="" id="img_des"></td>
</tr>
<tr>
<td colspan="2" align="center"><input type="submit" name="注册" id="sub"></td>
</tr>
</table>
</form>
</div>
<div class="rg_right">
<p>已有账号?<a href="#" >立即登录</a></p>
</div>
</div>
</body>
</html>三、JavaScript
1. 概念和功能：
* 概念：一门客户端脚本语言
* 运行在客户端浏览器中的，每一个浏览器都有JavaScript的解析引擎
* 脚本语言：不需要编译，直接就可以被浏览器解析执行了
* 功能：
* 可以来增强用户和html页面的交互过程，可以来控制html。让页面有一些动态的效果，增强用户的体验。2. JavaScript发展史：
1.1992年， Nombase公司，开发出第一-门 ]客户端脚本语言，专门用于表单的校验。命名为: C– ，后来更名为: ScriptEase 2.1995年，Netscape(网景)公司,开发了一门客户端脚本语言: Livescript。后来,请来SUN公司的专家,修改LiveScript, 命名为JavaScript 3.1996年，微软抄袭JavaScript开发出JScript语言 4.1997年，ECMA( 欧洲计算机制造商协会)，ECMAScript, 就是所有客户端脚本语言的标准。
- JavaScript = ECMAScript + JavaScript自己特有的东西。
3. 基本语法：
1. 与html结合方式：
1. 内部JS：
* 定义<script>,标签体内容就是js代码
<script>
alert("hello world");
</script>
2. 外部JS：
* 定义<script>,通过src属性引入外部的js文件
一般将js文件创建在js目录下，所以先创建js目录
* 注意：
1.<script>可以定义在html页面的任何地方，但是定义的位置会影响执行顺序
2.<script>可以定义多个
- 调用外部js文件：
<script src="js/a.js"></script>2. 注释：
1.单行注释：//注释内容
2.多行注释：/*注释内容*/3. 数据类型：
1.原始数据类型（基本数据类型）：
1.number：数字。整数/小数/NaN(not a number 一个不是数字的数字类型)
2.string：字符串。 "abc" "c" 'abc'
3.boolean：true和false
4.null：一个对象为空的占位符
5.underfined：未定义。如果一个变量没有给初始化值，则会默认赋值为underfined
2.引用数据类型：对象4. 变量：
* 变量：一小块存储数据的内存空间
* Java语言是强类型语言，而JavaScript是弱类型语言。
* 强类型：在开辟变量存储空间时，定义了空间将来存储的数据的数据类型。只能存储固定类型的数据；
* 弱类型：在开辟变量存储空间时，不定义空间将来的存储数据类型，可以存放任意类型的数据。
* 语法：
* var 变量名 = 初始化值;
-- --------------------------------------------------------
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>变量</title>
<script>
//定义number类型
var num = 1;
var num2 = 1.2;
var num3 = NaN;
//输出在页面上
document.write(num + "<br>");
document.write(num2 + "<br>");
document.write(num3 + "<br>");
//定义String类型
var str = "abc";
var str2 = 'a';
var str3 = 'abc';
document.write(str + "<br>");
document.write(str2 + "<br>");
document.write(str3 + "<br>");
//定义boolean类型
var flag = true;
document.write(flag);
//定义null，undefined
var obj = null;
var obj2 = undefined;
var obj3 ;
document.write(obj+"<br>");
document.write(obj2+"<br>");
document.write(obj3+"<br>");
</script>
</head>
<body>
</body>
</html>5. 变量-typeof：
* typeof运算符：获取变量的类型
* 注：null运算后得到的是object
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>变量</title>
<script>
//定义number类型
var num = 1;
var num2 = 1.2;
var num3 = NaN;
//输出在页面上
document.write(num + "---"+typeof(num)+"<br>");
document.write(num2 + "---"+typeof(num2)+ "<br>");
document.write(num3 +"---"+typeof(num3)+ "<br>");
//定义String类型
var str = "abc";
var str2 = 'a';
var str3 = 'abc';
document.write(str +"---"+typeof(str)+ "<br>");
document.write(str2 +"---"+typeof(str2)+ "<br>");
document.write(str3 +"---"+typeof(str3)+ "<br>");
//定义boolean类型
var flag = true;
document.write(flag+"---"+typeof(flag)+ "<br>" );
//定义null，undefined
var obj = null;
var obj2 = undefined;
var obj3 ;
document.write(obj+"---"+typeof(obj)+ "<br>");
document.write(obj2+"---"+typeof(obj2)+ "<br>");
document.write(obj3+"---"+typeof(obj3)+ "<br>");
</script>
</head>
<body>
</body>
</html>6. 运算符：
1. 一元运算符：只有一个运算数的运算符
++,--, +(正号),-(负号)
* ++,-- :自增(自减)
* ++(--)：在前，先自增(自减)，再运算
* ++(--):在后，先运算，再自增(自减)
* +(-):正负号
* 注意：在JS中，如果运算数不是运算符所要求的的类型，那么js引擎会自动的将运算数进行类型转换。
* 其它类型转number：
* string转number：按照字面值转换，如果字面值不是数字，则转为NaN(不是数字的数字)
* boolean转number：true转为1,false转为0
-- --------------------------------------------------------
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>一元运算符</title>
<script>
var num = 3;
var a = ++ num;
document.write(num);//4
document.write(a);//4
document.write("<br>")
var f1 = + true;
var f2 = + false;
document.write(f1);//1
document.write(f2);//0
document.write(typeof (f1));
var a = +"abc";
document.write(a);
document.write(typeof (a));
</script>
</head>
<body>
</body>
</html>2. 算数运算符
+ - * / % 和Java一样3. 赋值运算符
= += -= 和Java一样4. 比较运算符
> < >= <= == ===(全等于)
* 比较方式：
1.类型相同：直接比较
* 字符串：按照字典顺序比较，按位逐一比较，知道得出大小为止
2.类型不同：先进行类型转换，再比较
* ===：全等于。在比较之前，先判断类型，如果类型不一样，则直接返回false。5. 逻辑运算符
&&:与(短路)
||：或(短路)
!:非
* 其他类型转boolean：
1. number：0或NaN为假，其他为真；
2. string：除了空字符串("")，其他都是true；
3. null&&undefined：都是false；
4. 对象：所有对象都是true
-- ------------------------------------------------------
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>逻辑运算符</title>
<script>
var flag = true;
document.write(flag + "<br>");
document.write(!flag + "<br>");
document.write("<hr>")
//number:
var num = 3;
var num2 = 0;
var num3 = NaN;
document.write(!num + "<br>");
document.write(!num2 + "<br>");
document.write(!num3 + "<br>");
document.write("<hr>")
//null&undefined:
var f1 = null;
var f2 = undefined;
document.write(!f1 + "<br>");
document.write(!f2 + "<br>");
document.write("<hr>")
//对象
var obj = new Date();
document.write(!obj + "<br>");
obj = "123";
if (obj != null && obj.length > 0) {//防止空指针异常
alert(111);
}
//js中可以这样定义，简单书写
if (obj) {
alert(123);
}
</script>
</head>
<body>
</body>
</html>6. 三元运算符
* 语法：
* 表达式 ? 值1 ： 值2;
* 判断表达式的值，如果是true则取值1，如果是false则取值2；
-----------------------------------------------------------
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>三元运算符</title>
<script>
var a = 1;
var b = 2;
var c = a > b ? 1 : 0;
alert(c)
</script>
</head>
<body>
</body>
</html>7. 流程控制
1.if...else...
2.switch:
* 在Java中，switch语句可以接受的数据类型：byte,int ,shor,char,枚举(1.5),String(1.7)
* 在JS中，switch语句可以接受任意的原始数据类型
* 语法：switch(变量):
case 值:
语句;
3.while
4.do...while
5.for8. 特殊语法：
1.语句以;结尾，如果一行只有一条语句，则;可以省略(不建议)
2.变量的定义使用var关键字，也可以不使用
* 用：定义的变量是局部变量；
* 不用：定义的变量是全局变量(不建议)。
*可以在方法外定义变量。*练习：99乘法表
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>99乘法表</title>
<style>
td{
border: 1px solid;
}
</style>
<script>
document.write("<table align='center'>")
for (var i = 1; i <= 9; i++) {
document.write("<tr>")
for (var j = 1; j < i; j++) {
document.write("<td>")
document.write(i + "*" + j + "=" + (i * j) + " ")
document.write("</td>")
}
document.write("</tr>")
}
document.write("</table>")
</script>
</head>
<body>
</body>
</html>4. 基本对象：
1. Function：
Function：函数(方法)对象
* 1.创建：
1. var fun = new Function(形式参数列表,方法体);//不建议使用
2.function 方法名称(形式参数列表) {
方法体
}
3.var 方法名 = function(形式参数列表){
方法体
}
2.方法：
3.属性：
* length：代表形参的个数
4.特点：
1.方法定义是，形参的类型不用写，返回值类型也不写；
2.方法是一个对象，如果定义名称相同方法，会覆盖；
3.在JS中，方法的调用只与方法的名称有关，和参数列表无关；
4.在方法声明中有一个隐藏的内置对象(数组)，argument,封装所有的实际参数。
5.调用：
* 方法名称(实际参数列表)
-----------------------------------------------------------
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Function</title>
<script>
//创建方式1
// var fun = new Function("a","b","alert(a+b);");
// fun(1,2);
//创建方式2
/* function fun2(a,b) {
alert(a+b);
}*/
// fun(1,2)
// alert(fun.length);
//创建方式3
/* var fun = function(a,b){
alert(a+b);
}*/
// fun(1,2);
//相当于覆盖重写fun2
/* fun2 = function (a,b) {
alert(a-b);
}
fun2(1,2);*/
// var fun = function (a, b) {
// alert(a);
// alert(b);
// }
// fun(1,2);
// fun(1);
// fun();//未传参返回undefined
// fun(1,2,3);
/*
* 求两个数的和
* */
/* function fun(a,b){
return a+b;
}
var sun =fun(1,2);
alert(sun);*/
/*
* 求任意数的和*/
function fun() {
var sum = 0;
for (var i = 0; i < arguments.length; i++) {
sum += i;
}
return sum;
}
var sun = fun(1,2,3,4,5);
alert(sun);
</script>
</head>
<body>
</body>
</html>2. Array:数组对象
1.创建：
1.var arr = new Array(元素列表);
2.var arr = new Array(默认长度);
3.var arr = [元素列表];
2.方法：
jion(参数)：将数组中的元素按照指定的分隔符拼接为字符串；未指定打印逗号
push()：向数组的末尾添加一个或更多元素，并返回新的长度；
3.属性：
length:数组的长度
4.特点：
1.JS中，数组元素的类型可变的；
2.JS中，数组长度可变的。
-- --------------------------------------------------------
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Array</title>
<script>
//创建方式
var arr = new Array(1, "abc", true);
var arr2 = new Array(3); //未赋值默认打印逗号（,）
var arr3 = [1, false, "aa"];
document.write(arr + "<br>");
document.write(arr2 + "<br>");
document.write(arr3 + "<br>");
document.write(arr.join("--"));
</script>
</head>
<body>
</body>
</html>3. Date：日期对象
1.创建：
var date = new Date();
2.方法：
toLocaleString:返回当前date对应的时间本地字符串格式
getTime():获取毫秒值。返回当前如期对象描述的时间描述的时间到1970年1月1日零点的毫秒值差
-----------------------------------------------------------
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Date</title>
<script>
var date = new Date();
document.write(date + "<br>");
document.write(date.toLocaleString() + "<br>");
document.write(date.getTime() + "<br>");
</script>
</head>
<body>
</body>
</html>4. Math:数学对象
1.创建：
* 特点：Math对象不用创建，直接使用。 Math.方法名();
2.方法：
random():返回0~1之间的随机数。含0不含1
ceil(x)：对数进行上舍入
floor(x):对数进行下舍入
round(x):把数四舍五入为最接近的整数
3.属性：
PI:圆周率
----------------------------------------------------------
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Math</title>
<script>
document.write(Math.PI + "<br>");
document.write(Math.random() + "<br>")
document.write(Math.ceil(3.14) + "<br>");//向上
document.write(Math.floor(3.14) + "<br>");//向下
document.write(Math.round(3.14) + "<br>");//四舍五入
/*
* 练习：取1~100之间的随机数
* 1. Math. random()产生随机数:范围(0,1]小数
2.乘以100 --> [0,99.9999] 小数
3.舍弃小数部分: floor --> [0,99]整数
4. +1 -->[0,99] 整数[1, 100]
* */
var num = Math.random()*100;
document.write(Math.floor(num) + 1);
</script>
</head>
<body>
</body>
</html>5. RegExp：正则表达式对象
1.正则表达式：定义字符串的组成规则：
1.单个字符：[]
如：[a] [ab]:a或者b [a-zA-Z0-9_]
* 特殊符号代表特殊含义的单个字符：
\d:单个数字字符[0-9]
\w:单个单词字符：[a-zA-Z0-9_]
2.量词符号：
?：表示出现0次或1次
*：表示出现0次或多次
+：出现1次或多次
{m,n}:表示 m<= 数量 <= n
* m如果缺省：{,n}：最多n次
* n如果缺省：{m,}:最少m
3.开始结束符号：
^ :开始
$ :结束
2.正则对象：
1.创建：
1.var reg = new RegExp("正则表达式");
2.var reg = /正则表达式/;
2.方法：
test(参数)：验证指定的字符串是否符合正则定义的规范。
----------------------------------------------------------
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>RegExp</title>
<script>
var reg = new RegExp("^\\w{6,12}$");
var reg2 = /^\w{6,12}$/;
/* alert(reg);
alert(reg2);*/
var name = "zhangsan";
var flag = reg2.test(name);
alert(flag);
</script>
</head>
<body>
</body>
</html>6. Global:
1.特点：全局对象，这个Global中封装的方法不需要对象就可以直接调用。 方法名();
2.方法：
encodeURI()：url编码
decodeURI()：url编码
encodeURIComponent():url编码，编码的字符更多
decodeURIComponent():url解码
parseInt():将字符串转为数字
* 逐一判断每一个字符是否是数字，直到不是数字为止，将前边数字部分转换为number;
isNaN():判断一个值是否是NaN
* NaN六亲不认，连自己都不认。NaN参与的==比较全部为false
eval():将JavaScript字符串，并把它作为脚本代码来执行
3.URL编码：
传智播客 = %E4%BC%A0%E6%99%BA%E6%92%AD%E5%AE%A2
----------------------------------------------------------
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Global</title>
<script>
var str = "传智播客";
var encode = encodeURI(str);
document.write(encode + "<br>");
var str2 = decodeURI(encode);
document.write(str2);
var s = "123abc";
document.write(parseInt(s));
var s1 = "999";
document.write(isNaN(s1));
var s2 = "alert(123)";
eval(s2);
</script>
</head>
<body>
</body>
</html>5.BOM:
1. 概念：
Browser Object Model 浏览器对象模型
* 将浏览器的各个组成部分封装成对象2. 组成
* window：窗口对象
* Navigator：浏览器对象
* Screen：显示器屏幕对象
* History：历史记录对象
* Location：地址栏对象3.Window：窗口对象
1.创建
2.方法
* 1.与弹出框有关的方法：
alert()：显示有一段消息和一个确认按钮的警告框；
confirm():显示带有一段消息以及确认按钮和取消按钮的对话框：
* 如果用户点击确定按钮，则方法返回true；
* 如果用户点击取消按钮，则方法返回false。
prompt():显示可提示用户输入的对话框：
* 返回值：获取用户输入的值
---------------------------------------------------
<script>
alert("hello world");
window.alert("hello w");
/*var flag = window.confirm("您确定要退出吗？");
if (flag) {
//true,退出操作
alert("欢迎再次光临！")
} else {
//false,取消操作
alert("手别抖！")
}*/
/* var name = prompt("请输入用户名");
alert("用户"+name+"成功登陆！");*/
</script>
----------------------------------------------------------
* 2.与打开关闭有关的方法：
close():关闭浏览器窗口
* 谁调用我，我关谁，因此要指明谁调用
open():打开一个新的浏览器窗口
* 返回新的window对象
<body>
<input type="button" id="openBtn" value="打开窗口">
<input type="button" id="closeBtn" value="关闭刚才打开的窗口">
<script>
var openBtn = document.getElementById("openBtn");
var newWindow;
openBtn.onclick = function() {
newWindow = open("https://www.baidu.com");
}
var closeBtn = document.getElementById("closeBtn");
closeBtn.onclick = function () {
newWindow.close();
}
</script>
</body>
-----------------------------------------------------------
* 3.与定时器有关的方式：
setTimeout()：在指定的毫秒数后调用函数或计算表达式；
* 参数：
1.js代码或者方法对象；
2.毫秒值
* 返回值：唯一标识，用于取消定时器
clearTimeout():取消由setTimeout()方法设置的timeout。
setInterval():按照指定的周期(以毫秒计)来调用函数或计算表达式
clearInterval():取消由setInterval()设置的timeout
<script>
//一次性定时器
// setTimeout("alert('beng~~~');",2000);
// setTimeout("fun();",2000);
/* var id = setTimeout(fun,2000);*/
function fun() {
alert("beng~~~");
}
/* //关闭计时器
clearTimeout(id);*/
//循环计时器
var id = setInterval(fun,2000);
clearInterval(id);
</script>
--------------------------------------------------------
3.属性
1.获取其他BOM对象：
history：历史记录对象
location：地址栏对象
Navigator：浏览器对象
Screen：显示器屏幕对象
2.获取DOM对象
document
<body>
<input type="text" id = name value="你好">
<script>
//获取history
var v1 = window.history;
var v2 = history;
alert(v1);
alert(v2);
//其他几个类似方法
//获取document对象
var text = window.document.getElementById(id);
alert(text);
</script>
</body>
----------------------------------------------------------
4.特点：
* Window对象不需要创建就可以直接使用window； window.方法名()
* window引用可以省略。 方法名();
4. 案例：轮播图
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>轮播图</title>
</head>
<body>
<img src="img/banner_1.jpg" id="img" width="100%">
<script>
/* 1.在页面上使用img标签展示图片
2.定义一个方法，修改图片对象的src属性
3.定义一个定时器，每隔3秒调用方法一次。
*/
//修改图片src属性
var num = 1;
function fun() {
num ++;
if (num > 3) {
num = 1;
}
//获取图片对象
var img = document.getElementById("img");
//替换
img.src="img/banner_"+num+".jpg";
}
//定时器
setInterval(fun,3000);
</script>
</body>
</html>5.Location：地址栏对象
1.创建：(获取)
1.window.location
2.location
2.方法：
* reload()：重新加载当前文档，刷新。
3.属性：
* href：设置或返回完整的URL
----------------------------------------------------------
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Location</title>
</head>
<body>
<input type="button" id="btn" value="刷新">
<input type="button" id="gobaidu" value="去百度">
<script>
//获取连接对象
var btn = document.getElementById("btn");
//创建单击事件
btn.onclick = function () {
//刷新页面
location.reload();
}
// -----------------------------------------
var gobaidu = document.getElementById("gobaidu");
gobaidu.onclick = function () {
location.href("https://www.baidu.com");
}
</script>
</body>
</html>6. 案例：自动跳转首页
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>自动跳转首页</title>
<style>
p{
text-align: center;
}
span{
color: red;
}
</style>
</head>
<body>
<!--分析:
1.显示页面效果<p>
2.倒计时读秒效果实现
2.1定义一个方法，获取span标签，修改span标签体内容，时间--
2.2定义一一个定时器，1秒执行一-次该方法
3.在方法中判断时间如果<= 0，则跳转到首页
-->
<p>
<span id="time">5</span>秒之后，自动跳转到首页...
</p>
<script>
//定义一个方法，获取span标签，修改span标签体内容，时间--
var second = 5;
function fun() {
second --;
if (second <= 0) {
location.href("https://www.baidu.com");
}
time.innerHTML = second + "";
}
//定义一一个定时器，1秒执行一-次该方法
setInterval(fun,1000);
</script>
</body>
</html>7. history：历史记录对象
1.创建(获取)：
1.window.history
2.history
2.方法：
* back():加载history列表中的前一个URL
* forward():加载history列表中的下一个URL
* go(参数)：加载history列表中的某个具体页面
* 参数：
* 正数：前进几个历史记录
* 负数：后退几个历史记录
3.属性：
* length：返回当前窗口历史列表中的URL数量。
----------------------------------------------------------
代码1
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>history历史记录对象</title>
</head>
<body>
<input type="button" id="btn" value="获取历史记录个数">
<a href="11_history历史记录对象2.html">11页面</a>
<input type="button" id="forward" value="前进">
<script>
//1.获取按钮
var btn = document.getElementById("btn");
//绑定单击事件
btn.onclick = function () {
var length = history.length;
alert(length);
}
//前进操作
//获取按钮
var forward = document.getElementById("forward");
//绑定单击事件
forward.onclick = function () {
//前进
// history.forward();
history.go(1);
}
</script>
</body>
</html>
--------------------------------------------------------
代码2
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>轮播图</title>
</head>
<body>
<img src="img/banner_1.jpg" id="img" width="100%">
<input type="button" id="back" value="后退">
<script>
/* 1.在页面上使用img标签展示图片
2.定义一个方法，修改图片对象的src属性
3.定义一个定时器，每隔3秒调用方法一次。
*/
//修改图片src属性
var num = 1;
function fun() {
num++;
if (num > 3) {
num = 1;
}
//获取图片对象
var img = document.getElementById("img");
//替换
img.src = "img/banner_" + num + ".jpg";
}
//定时器
setInterval(fun, 3000);
//后退操作
//获取连接对象
var back = document.getElementById("back");
//创建单击事件
back.onclick = function () {
// history.back();
history.go(-1);
}
</script>
</body>
</html>6.DOM:
1. DOM简单学习：
* 功能：控制html文档的内容；
* 代码：获取页面标签(元素)对象 Element
* document.getElementById("id值"):通过元素的id获取元素对象
* 操作Element对象：
1.修改属性值：
1.明确获取的对象是哪一个？
2.插卡API文档，找其中有哪些属性可以设置
2.修改标签体内容：
* 属性：innerHTML
----------------------------------------------------------
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>简单学习DOM</title>
</head>
<body>
<img id="light" src="img/off.gif">
<h1 id="title">悔创阿里杰克马</h1>
<script>
//通过id获取元素对象
/* var light = document.getElementById("light");
alert("我要换图片了。。。");
light.src = "img/on.gif";*/
//1.获取h1标签对象
var title = document.getElementById("title");
alert("我要换内容了。。。");
//2.修改内容
title.innerHTML = "不识妻美刘强东";
</script>
</body>
</html>2. 事件简单学习：
* 功能：某些组建被执行了某些操作后，触发某些代码的执行。
* 造句： XXX被XXX,我就XXX
如：我方水晶被摧毁后，我就责备队友。
敌方水晶被摧毁后，我就夸奖自己。
* 如何绑定事件：
1.直接在html标签上，指定事件的属性(操作),属性就是js代码；
事件：onclick---单击事件
2.通过js获取元素对象，指定事件属性，设置一个函数
-----------------------------------------------------------
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>事件绑定</title>
</head>
<body>
<!--<img src="img/off.gif" id="light" onclick="alert('我被点了');">-->
<!--<img src="img/off.gif" id="light" onclick="fun();">-->
<img src="img/off.gif" id="light2">
<script>
<!--1.获取light2对象-->
var light2 = document.getElementById("light2");
// 2.绑定事件
light2.onclick = fun2;
function fun() {
alert("我被点了")
alert("我又被点了")
}
function fun2() {
alert("咋老点我")
}
</script>
</body>
</html>3. 案例：电灯开关
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>电灯开关</title>
</head>
<body>
<!-- 1.获取图片对象
2.绑定单击事件
3.每次点击切换图片
*规则:
*如果灯是开的on,切换图片为off
如果灯是关的off,切换图片为on
使用标记flag来完成
-->
<img src="img/off.gif" id="light">
<script>
//1.获取图片对象
var light = document.getElementById("light");
var flag = false;//假设false时灯为灭的。 off图片
//2.绑定单击事件
light.onclick = function fun() {
if (flag) { //如果灯是开的，则灭掉
light.src = "img/off.gif";
flag = false;
} else { //如果是灭的，则打开
light.src = "img/on.gif";
flag = true;
}
}
</script>
</body>
</html>4.DOM概述：
* 概念：Document Object Model 文档对象模型
* 将标记语言文档的各个组成部分，封装为对象。可以使用这些对象，对标记语言文档进行CRUD的动态操作
* W3C DOM 标准被分为3个不同的部分：
* 核心DOM：针对任何结构化文档的标准模型：
* Document：文档对象
* Element：元素对象
* Attribute：属性对象
* Text：文本对象
* Comment：注释对象
* Node：节点对象，其他5个的父对象
* XML DOM:针对XML文档的标准模型
* HTML DOM：针对HTML文档的标准模型5. Dociment:文档对象—获取Element和创建DOM
1.创建(获取)：在html dom模型中可以使用window对象来获取
1.window.document
2.document
2.方法：
1.获取Element对象：
1.getElementById():根据id属性值获取元素对象。id属性值一般唯一
2.getElementsByTagName():根据元素名称获取元素对象们，返回值是一个数组
3.getElementsByClassName():根据Class属性值获取元素对象们，返回值是一个数组
4.getElementsByName():根据name属性值获取元素对象们，返回值是一个数组
2.创建其他DOM对象
createAttribute(name)
createComment()
createElement()
createTextNode()
3.属性- 示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Element</title>
</head>
<body>
<div id="div1">div1</div>
<div id="div2">div2</div>
<div id="div3">div3</div>
<div class="cla1">cla1</div>
<div class="cla1">cla2</div>
<div name="name">name</div>
<script>
//2.getElementsByTagName():根据元素名称获取元素对象们，返回值是一个数组
var divs = document.getElementsByTagName("div");
alert(divs.length);
//3.getElementsByClassName():根据Class属性值获取元素对象们，返回值是一个数组
var clas = document.getElementsByClassName("cla1");
alert(clas.length);
//4.getElementsByName():根据name属性值获取元素对象们，返回值是一个数组
var username = document.getElementsByName("name");
alert(username.length);
</script>
</body>
</html>6. Element：元素对象
1.获取/创建：通过document来获取和创建
2.方法：
1.removeAttribute()：删除属性
2.setAttribute():设置属性
-----------------------------------------------------------
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Element</title>
</head>
<body>
<a>点我一下试试</a>
<input type="button" value="设置属性" id="setBtn">
<input type="button" value="删除属性" id="clearBtn">
<script>
//获取连接
var setBtn = document.getElementById("setBtn");
//设置单击事件
setBtn.onclick = function () {
//获取a标签
var element = document.getElementsByTagName("a")[0];
element.setAttribute("href","https://www.baidu.com");
}
//获取连接
var clearBtn = document.getElementById("clearBtn");
//设置单击事件
clearBtn.onclick = function () {
//获取a标签
var elementsClear = document.getElementsByTagName("a")[0];
elementsClear.removeAttribute("href");
}
</script>
</body>
</html>7. Node：节点对象，其它5个的父对象
* 特点：所有dom对象都可以被认为是一个节点
* 方法：
* CRUD dom树：(增删改查)
* appendChild():向节点的子节点列表的结尾添加新的子节点；
* removeChild():删除(并返回)当前节点的指定子节点；
* replaceChild():用新节点替换一个子节点
* 属性：
* parentNode:返回节点的父节点。
-----------------------------------------------------------
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Node</title>
<style>
div{
border: 1px solid red;
}
#div1{
width: 200px;
height: 200px;
}
#div2{
width: 100px;
height: 100px;
}
#div3{
width: 100px;
height: 100px;
}
</style>
</head>
<body>
<div id="div1">
<div id="div2">div2</div>
div1
</div>
<a href="JavaScript:void(0)" id="del">删除子节点</a>
<a href="javascript:void(0)" id="add">添加子节点</a>
<script>
//1.获取超链接
var del = document.getElementById("del");
//2.绑定单击事件
del.onclick = function () {
var div1 = document.getElementById("div1");
var div2 = document.getElementById("div2");
//调用div1里面的方法删除它的儿子div2
div1.removeChild(div2);
}
var add = document.getElementById("add");
add.onclick = function () {
document.getElementById("div1");
//给div1添加子节点
//创建div子节点
var div3 = document.createElement("div");
div3.setAttribute("id","div3");
div1.appendChild(div3);
}
/*
超链接功能：
1.可以被点击：样式
2.点击后跳转到href指定的url
需求：保留1功能，去掉2功能
实现：href="javascript:void(0);"
*/
//返回div2的父节点
var div2 = document.getElementById("div2");
var parentNode = div2.parentNode;
alert(parentNode);
</script>
</body>
</html>本文参与 腾讯云自媒体分享计划，分享自作者个人站点/博客。
原始发表：2020-08-12，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读