Web前端开发基础笔记(6)
一、Html基础
html的介绍
html的定义
HTML的全称为:HyperText Mark-up-Language,指的是超文本标记语言。标记:就是标签,<标签名称> </标签名称>,比如<html></html>
、<h1></h1>
等,标签大多数都是成对出现的
所谓超文本,有两层含义:
- 因为网页中还可以图片、视频、音频等内容(超越文本限制)
- 它还可以在网页中跳转到另一个网页,与世界各地主机的网页链接(超链接文本)
html的作用
html是用来开发网页的,它是开发网页的语言
html的基本结构
结构代码
<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title>网页标题</title></head><body>网页显示内容</body>
</html>
vscode的基本使用
vscode的基本介绍
全屏是Visual Studio Code (简称VS Code)是由微软研发的一款免费、开源的跨平台代码编辑器,目前是前端(网页)开发使用最多的一款软件开发工具
初始常用的html标签
常用的html标签
<!-- 1.成对出现的标签: --><h1>h1标签
</h1>
<div>这是一个div标签
</div>
<p>这是一个段落标签
</p><!-- 2.单个出现的标签: -->
<br>
<img src="">
<hr><!-- 3.带属性的标签,如src、alt和href等都是属性 --><img src=" ">
<a href=" ">链接</a><!-- 4.标签的嵌套 --><div><img src=" "><a href=" ">链接</a>
</div>
提示:
- 标签不区分大小写,但是推荐使用小写
- 根据标签的书写形式,标签分为上标签(闭合标签)和单标签(空标签)
- 双标签是指由开始标签和结束标签组成一对标签,这种标签允许嵌套和承载内容,比如:div标签
- 单标签是一个标签组成,没有标签内容,比如:img标签
资源路径
当我们使用img标签显示图片的时候,需要指定图片的资源路径,如:
<img src="images/logo.png">
这里src属性就是设置图片的资源路径的,资源路径可以分为相对路径和绝对路径
相对路径
示例代码:
<!-- 相对路径方式1-->
<img src="./images/logo.png" alt="">
<!-- 相对路径方式2-->
<img src="images/logo.png" alt="">
绝对路径
示例代码:
<!-- 绝对路径的写法-->
<img src="F:/code/images/logo.png">
列表标签
列表标签的种类
- 无序列表标签(ul标签)
- 有序列表标签(ol标签)
无序列表
<!-- 无序列表标签 --><ul><li>苹果</li><li>鸭梨</li>
</ul>
有序列表
<ol><li>第一步</li><li>第二步</li>
</ol>
<!-- 强调显示的顺序使用有序列表标签,不强调顺序使用无序列表标签 -->
表格标签
表格的结构
表格是由行和列组成的,好比一个excel文件
表格标签
<table>
标签:表示一个表格<tr>
标签:表示表格中的一行<td>
标签:表示表格中的列<th>
标签:表示表格中的表头
<!-- border-collapse: collapse 表示表格的边线进行合并 -->
<table style="border: 1px solid black; border-collapse: collapse"><tr><th style="border: 1px solid black;">姓名</th><th style="border: 1px solid black;">年龄</th></tr><tr><td style="border: 1px solid black;">张三</td><td style="border: 1px solid black;">22</td></tr>
</table>
表单标签
表单的介绍
表单用于搜集不同类型的用户输入(用户输入的数据),然后可以把用户数据提交到web服务器
表单相关标签的使用
-
<form>
标签:表示表单标签,定义整体的表单区域 -
<label>
标签:表示表单元素的文字标注标签,定义文字标注 -
<input>
标签:表示表单元素的用户输入标签,定义不同类型的用户输入数据的方式- type属性:
- type=“text” 定义单行文本输入框
- type=“password” 定义密码输入框
- type=“radio” 定义单选框
- type=“checkbox” 定义复选框
- type=“file” 定义上传文件
- type=“submit” 定义提交按钮
- type=“reset” 定义重置按钮
- type=“button” 定义一个普通按钮
- type属性:
-
<textarea>
标签:表示表单元素的多行文本输入框标签 定义多行文本输入框 -
<select>
标签:表示表单元素的下拉列表标签 定义下拉列表<option>
标签与<select>
标签配合,定义下拉列表中的选项
示例代码
<form><p><label>姓名:</label><input type="text"></p><p><label>密码:</label><input type="password"></p><p><label>性别:</label><input type="radio"> 男<input type="radio"> 女</p><p><label>爱好:</label><input type="checkbox"> 唱歌<input type="checkbox"> 跑步<input type="checkbox"> 游泳</p><p><label>照片:</label><input type="file"></p><p><label>个人描述:</label><textarea></textarea></p><p><label>籍贯:</label><select><option>北京</option><option>上海</option><option>广州</option><option>深圳</option></select></p><p><input type="submit" value="提交"><input type="reset" value="重置"></p>
</form>
小结
- 表单标签是
<form>
标签 - 常用的表单元素标签有:
<label>
、<input>
、<textarea>
、<select>
等标签
表单提交
表单属性设置
<form>
标签 表示表单标签,定义整体的表单区域
- action属性 设置表单数据提交地址
- method属性 设置表单提交的方式,一般有“GET”方式和“POST”方式, 不区分大小写
表单元素属性设置
- name属性 设置表单元素的名称,该名称是提交数据时的参数名
- value属性 设置表单元素的值,该值是提交数据时参数名所对应的值
示例代码
<form action="https://www.baidu.com" method="GET"><p><label>姓名:</label><input type="text" name="username" value="11" /></p><p><label>密码:</label><input type="password" name="password" /></p><p><label>性别:</label><input type="radio" name="gender" value="0" /> 男<input type="radio" name="gender" value="1" /> 女</p><p><label>爱好:</label><input type="checkbox" name="like" value="sing" /> 唱歌<input type="checkbox" name="like" value="run" /> 跑步<input type="checkbox" name="like" value="swiming" /> 游泳</p><p><label>照片:</label><input type="file" name="person_pic"></p><p><label>个人描述:</label><textarea name="about"></textarea></p><p><label>籍贯:</label><select name="site"><option value="0">北京</option><option value="1">上海</option><option value="2">广州</option><option value="3">深圳</option></select></p><p><input type="submit" name="" value="提交"><input type="reset" name="" value="重置"></p>
</form>
小结
- 表单标签的作用就是可以把用户输入数据一起提交到web服务器。
- 表单属性设置
- action: 是设置表单数据提交地址
- method: 是表单提交方式,提交方式有GET和POST
- 表单元素属性设置
- name: 表单元素的名称,用于作为提交表单数据时的参数名
- value: 表单元素的值,用于作为提交表单数据时参数名所对应的值
二、css基础
css的介绍
css(Cascading Style Sheet)层叠样式表,用来美化页面的一种语言
css的作用
- 美化界面,比如标签文字大小、颜色、字体加粗等样式
- 控制页面布局,比如设置浮动、定位等样式
css的基本语法
选择器{
样式规则
}
样式规则:
属性名1:属性值1;
属性名2:属性值2;
属性名3:属性值3;
…
选择器:是用来选择标签的,选出来以后给标签加样式
div{width:100px;height:100px;background:gold;
}
说明
css是由两个主要的部分构成:选择器和一条或多条样式规则
注意:样式规则需要放大到括号里面
css的引入方式
css的三种引入方式
- 行内式
- 内嵌式(内部样式)
- 外链式
行内式
直接在标签的style属性中添加css样式
<div style="width:100px; height:100px; background:red">hello</div>
优点:方便、直观。
缺点:缺乏可重用性。
内嵌式
在<head>
标签中加入<style>
标签,在<style>
标签中编写css代码
<head><style type="text/css">h3{color:red;}</style>
</head>
优点:在同一个页面内部便于复用和维护
缺点:在多个页面之间的可重用性不够高
外链式
将css代码写在一个单独的.css文件中,在<head>
标签中使用<link>
标签直接引入该文件到页面中
<link rel="stylesheet" type="text/css" href="css/main.css">
优点:使得css样式与html页面分离,便于整个页面系统规划和维护,可重用性高。
缺点:css代码由于分离到单独的css文件中,容易出现css代码过于集中,若维护不当则极容易造成混乱
css引入方式选择
- 行内式几乎不用
- 内嵌在学习css样式的阶段使用
- 外链式在公司开发的阶段使用,可以对html和css进行分别开发
小结
- css 的引入有三种方式, 分别是行内式、内嵌式、外链式。
- 外链式是在公司开发的时候会使用,最能体现 div+css 的标签内容与显示样式分离的思想, 也最易改版维护,代码看起来也是最美观的一种。
css选择器
css选择器的定义
css选择器是用来选择标签的,选出来以后给标签加样式
css选择器的种类
- 标签选择器
- 类选择器
- 层级选择器(后代选择器)
- id选择器
- 组选择器
- 伪类选择器
标签选择器
根据标签来选择标签,以标签开头,此种选择器影响范围大,一般用来做一些通用设置
<style>p{color:red;}
</style><div>hello</div>
<p>hello</p>
类选择器
根据类名来选择标签,以 . 开头,一个类选择器可应用于多个标签上,一个标签上也可以使用多个类选择器,多个类选择器需要使用空格分割,应用灵活,可复用,是css中应用最多的一种选择器
<style>.blue{color:blue}.big{font-size: 20px;}.box{width: 100px;height: 100px;background: gold;}
</style><div class="blue">这是一个div</div>
<h3 class="blue big box">这是一个标题</h3>
<p class="blue box">这是一个段落</p>
层级选择器(后代迭代器)
根据层级关系选择后代标签,以选择器1 选择器2开头,主要应用在标签嵌套的结构中,减少命名
<style>div p{color: red;}.con{width: 300px;height: 800px;background: green;}.con span{color:red}.con .pink{color:pink}.con .gold{color:gold}
</style>
id选择器
根据id选择标签,以#开头,元素的id名称不能重复,所以id选择器只能对应于页面上一个元素,不能复用,id名一般给程序使用,所以不推荐使用id作为选择器
<style type="text/css">#box{color:red}
</style>
虽然给其他标签设置id=“box”也可以设置样式,但是不推荐这样做,以为id是唯一的,以后js通过id只能获得一个唯一的标签对象
组选择器
根据组合的选择器选择不同的标签,以,分隔开,如果有公共的样式设置,看见使用组合选择器
<style type="text/css">.box1, .box2, .box3{width:100px;height:100px}.box1{background:red}.box2{background:pink}.box3{background:gold}
</style>
伪类选择器
用于向选择器添加特殊的效果,以:分割开,当用户和网站交互的时候改变显示效果可以使用伪类选择器
<style>div{width:100px;}div:hover{width:200px}
</style>
css属性
布局常用样式属性
- width:设置元素(标签)的宽度
- height:设置元素(标签)的高度
- background:设置元素背景色或者背景图片
- border:设置元素四周的边框
- 以上也可以拆分成四个边的写法,分别设置四个边的:
- border-top:谁知顶边边框
- border-left:设置左边边框
- border-right:设置右边边框
- border-bottom:设置底边边框
- padding:设置元素包含的内容和元素边框的距离,也叫内边距
- margin:设置元素和外界的距离,也叫外边距
- float:设置元素浮动,浮动可以让块元素排列在一行,浮动分为左浮动:float:left;右浮动:float:right;
文本常用样式属性
- color 设置文字的颜色,如: color:red;
- font-size 设置文字的大小,如:font-size:12px;
- font-family 设置文字的字体,如:font-family:‘微软雅黑’;为了避免中文字不兼容,一般写成:font-family:‘Microsoft Yahei’;
- font-weight 设置文字是否加粗,如:font-weight:bold; 设置加粗 font-weight:normal 设置不加粗
- line-height 设置文字的行高,如:line-height:24px; 表示文字高度加上文字上下的间距是24px,也就是每一行占有的高度是24px
- text-decoration 设置文字的下划线,如:text-decoration:none; 将文字下划线去掉
- text-align 设置文字水平对齐方式,如text-align:center 设置文字水平居中
- text-indent 设置文字首行缩进,如:text-indent:24px; 设置文字首行缩进24px
布局常用样式属性示例代码
<style>.box1{width: 200px; height: 200px; background:yellow; border: 1px solid black;}.box2{/* 这里是注释内容 *//* 设置宽度 */width: 100px;/* 设置高度 */height: 100px;/* 设置背景色 */background: red;/* 设置四边边框 *//* border: 10px solid black; */border-top: 10px solid black;border-left: 10px solid black;border-right: 10px solid black;border-bottom: 10px solid black;/* 设置内边距, 内容到边框的距离,如果设置四边是上右下左 *//* padding: 10px; */padding-left: 10px;padding-top: 10px;/* 设置外边距,设置元素边框到外界元素边框的距离 */margin: 10px;/* margin-top: 10px;margin-left: 10px; */float: left;}.box3{width: 48px; height: 48px; background:pink; border: 1px solid black;float: left;}</style><div class="box1"><div class="box2">padding 设置元素包含的内容和元素边框的距离</div><div class="box3"></div>
</div>
文本常用样式属性示例
<style>p{/* 设置字体大小 浏览器默认是 16px */font-size:20px;/* 设置字体 */font-family: "Microsoft YaHei"; /* 设置字体加粗 */font-weight: bold;/* 设置字体颜色 */color: red;/* 增加掉下划线 */text-decoration: underline;/* 设置行高 */line-height: 100px;/* 设置背景色 */background: green;/* 设置文字居中 *//* text-align: center; */text-indent: 40px;}a{/* 去掉下划线 */text-decoration: none;}
</style><a href="#">连接标签</a>
<p>你好,世界!
</p>
小结
- 设置不同的样式属性会呈现不同网页的显示效果
- 样式属性的表现形式是: 属性名:属性值;
css元素溢出
什么是 css 元素溢出
当子元素(标签)的尺寸超过父元素(标签)的尺寸时,此时需要设置父元素显示溢出的子元素的方式,设置的方法是通过overflow属性来完成。
overflow的设置项:
- visible 默认值, 显示子标签溢出部分。
- hidden 隐藏子标签溢出部分。
- auto 如果子标签溢出,则可以滚动查看其余的内容。
示例代码
<style>.box1{width: 100px;height: 200px;background: red;/* 在父级上设置子元素溢出的部分如何显示 *//* overflow: hidden; */overflow: auto;}.box2{width: 50px;height: 300px;background: yellow;}
</style><div class="box1"><div class="box2">hello</div>
</div>
小结
- overflow样式属性是设置子标签溢出的显示方式
- 常用使用**overflow:hidden;**来解决元素溢出
css显示特性
display 属性的使用
display 属性是用来设置元素的类型及隐藏的,常用的属性有:
- none 元素隐藏且不占位置
- inline 元素以行内元素显示
- block 元素以块元素显示
示例代码
<style>.box{/* 将块元素转化为行内元素 */display:inline;} .link01{/* 将行内元素转化为块元素 */display:block;background: red;}.con{width:200px;height:200px;background:gold;/* 将元素隐藏 */display:none;}</style><div class="con"></div>
<div class="box">这是第一个div</div>
<div class="box">这是第二个div</div>
<a href="#" class="link01">这是第一个链接</a>
<a href="#" class="link01">这是第二个链接</a>
说明:
行内元素不能设置宽高, 块元素或者行内块元素可以设置宽高。
小结
- 通常隐藏元素使用
display:none
盒子模型
盒子模型的介绍
所谓的盒子模型就是把HTML页面的元素看作一个矩形盒子,矩形盒子是由内容(content)、内边距(padding)、边框(border)、外边距(margin)四部分组成。
盒子模型相关样式属性
- 盒子的内容宽度(width),注意:不是盒子的宽度
- 盒子的内容高度(height),注意:不是盒子的高度
- 盒子的边框(border)
- 盒子内的内容和边框之间的间距(padding)
- 盒子与盒子之间的间距(margin)
设置宽高:
设置盒子的宽高,此宽高是指盒子内容的宽高,不是盒子整体宽高
width:200px; /* 设置盒子的宽度,此宽度是指盒子内容的宽度,不是盒子整体宽度(难点) */
height:200px; /* 设置盒子的高度,此高度是指盒子内容的高度,不是盒子整体高度(难点) */
设置边框:
设置一边的边框,比如顶部边框,可以按如下设置:
border-top:10px solid red;
说明:
其中10px表示线框的粗细;solid表示线性;red表示边框的颜色
设置其它三个边的方法和上面一样,把上面的’top’换成’left’就是设置左边,换成’right’就是设置右边,换成’bottom’就是设置底边。
四个边如果设置一样,可以将四个边的设置合并成一句:
border:10px solid red;
设置内间距padding
设置盒子四边的内间距,可设置如下:
padding-top:20px; /* 设置顶部内间距20px */
padding-left:30px; /* 设置左边内间距30px */
padding-right:40px; /* 设置右边内间距40px */
padding-bottom:50px; /* 设置底部内间距50px */
上面的设置可以简写如下:
padding:20px 40px 50px 30px; /* 四个值按照顺时针方向,分别设置的是 上 右 下 左
四个方向的内边距值。 */
padding后面还可以跟3个值,2个值和1个值,它们分别设置的项目如下:
padding:20px 40px 50px; /* 设置顶部内边距为20px,左右内边距为40px,底部内边距为50px */
padding:20px 40px; /* 设置上下内边距为20px,左右内边距为40px*/
padding:20px; /* 设置四边内边距为20px */
设置外间距margin
外边距的设置方法和padding的设置方法相同,将上面设置项中的’padding’换成’margin’就是外边距设置方法。
盒子的真实尺寸
盒子的width和height值固定时,如果盒子增加border和padding,盒子整体的尺寸会变大,所以盒子的真实尺寸为:
- 盒子宽度 = width + padding左右 + border左右
- 盒子高度 = height + padding上下 + border上下
小结
- 盒子模型的5个主要样式属性
- width:内容的宽度(不是盒子的宽度)
- height:内容的高度(不是盒子的高度)
- padding:内边距。
- border:边框。
- margin:外边距
- 盒子的真实尺寸只会受到宽度、高度、边框、内边距四个属性的影响,不会受到外边距属性的影响。
三、JavaScript基础
JavaScript的介绍
JavaScript的定义
JavaScript是运行在浏览器端的脚步语言,是由浏览器解释执行的,简称js,它能够让网页和用户有交互功能,
增加良好的用户体验效果。
前端开发三大块:1.HTML:负责网页结构 2.CSS :负责网页样式 3.JavaScript:负责网页的行为
JavaScript的使用方式
行内式(主要用于事件)
<input type="button" name="" onclick="alert('ok!');">
内嵌式
<script type="text/javascript">alert('ok!');
</script>
外链式
<script type="text/javascript" src="js/index.js"></script>
小结
JavaScript的使用方式有三种:
- 行内式
- 内嵌式
- 外链式
变量和数据类型
定义变量
JavaScript是一种弱语言类型,也就是说不需要指定变量的类型,JavaScript的变量类型由它的值来决定,定义变量需要用关键字‘var’,一条JavaScript语句应该以“;”结尾
定义变量的语法格式:
var 变量名 = 值
var iNum = 123;
var sTr = 'asd';var iNum = 45,sTr ='qwe',sCount='68';
JavaScript注释
JavaScript的注释分为单行注释(//注释内容)和多行注释(/多行注释/)
// 单行注释
var iNum = 123;
/*多行注释1. 。。。2. 。。。
*/
数据类型
js中有六种数据类型,包括五中基本数据类型和一种复杂数据类型
5种基本数据类型:
- number 数字类型
- string 字符串类型
- boolean 布尔类型 true 或 false
- undefined undefined类型,变量声明未初始化,他的值就是undefined
- null null类型,表示空对象,如果定义的变量将来准备保存对象,可以将变量初始化为null,在页面获取不到对象,返回的值就是null
1种复合类型:
- object后面学习的JavaScript对象属于复合类型
//1.1 数字 number
var iOne = 10.1;//1.2 字符串 string
var sStr = '1234';//1.3 布尔 boolean;
var bIsTrue = false;//1.4 未定义 undefined
var unData;//1.5 null 表示空对象
var nullData = null;//1.6 object 表示对象类型
var oObj = {name:"隔壁老王",age:88
}
// 获取变量的类型
var type = typeof(oObj);
alert(type);
// 获取对象的name属性
alert(oObj.name);
变量命名规范
- 区分大小写
- 第一个字符必须是字母、下划线或者美元符
- 其他字符可以是字母、下划线、美元符或数字
匈牙利命名分格
对象o Object 比如:oDiv
数组a Array 比如:altems
字符串s Sting 比如:sUserName
整数i Intege 比如:itmeCount
布尔值b Boolean 比如:blsComplete
浮点数f Float 比如:fPrice
函数fn Function 比如:fnHandler
函数定义和调用
函数的定义
函数就是可以重复使用的代码块,使用关键字 function 定义函数
function fnShow(){alert("我是一个无参数无返回值的函数");
};fnShow()
函数调用
函数调用就是函数名加小括号,比如:函数名(参数[参数可选])
fnShow()
定义有参数有返回值的函数
定义函数时,函数如果有参数,参数放到小括号里面,函数如果有返回值,返回值通过 return 关键字来返回
function fnSum(iNum1, iNum2){var iResult = iNum1 + iNum2return iResultalert("测试代码");
}
var iNum1 = 10;
var iNum2 = 20;
var iNum = fnSum(iNum1, iNum2);
alert(iNum);
函数中’return’关键字的作用:
1、返回函数中的值
2、执行完return函数执行结束
小结
-
函数的定义
function 函数名(参数[参数可选]){ // 函数的代码实现 ... }
-
函数的调用
函数名(参数[参数可选])
变量作用域
变量作用域的介绍
- 局部变量
- 全局变量
局部变量
局部变量就是在函数内使用的变量,只能在函数内使用
function fnShow(){// 局部变量var iNum = 1;alert(iNum)
}
// 函数调用
fnShow()
// 局部变量不能再函数外使用
// alert(iNum)// 全局变量
var iNum1 = 1;function fnModify(){alert(iNum1);iNum1 = 3;iNum1 ++alert(iNum1)
}fnModify()
alert("函数外访问的全局变量" + iNum1)
条件语句
条件语句的介绍
条件语句就是通过条件来控制程序的走向
条件语句语法
- if 语句 - 只有当指定条件为true时,使用该语句来执行代码
- if…else 语句 - 当条件为true时执行代码,当条件为false时执行其他代码
- if…else if …else 语句 - 使用该语句来判断多条件,执行条件成立的语句
比较运算符
假如 x = 5, 查看比较后的结果:
比较运算符 | 描述 | 例子 |
---|---|---|
== | 等于 | x == 8 为 false |
=== | 全等(值和类型) | x === 5 为 true; x === “5” 为 false |
!= | 不等于 | x != 8 为 true |
> | 大于 | x > 8 为 false |
< | 小于 | x < 8 为 true |
>= | 大于或等于 | x >= 8 为 false |
<= | 小于或等于 | x <= 8 为 true |
比较运算符示例代码:
var iNum01 = 12;
var sNum01 = '12';if(iNum01==12){alert('相等!');
}
else{alert('不相等!')
}// "==" 符号默认会将符号两边的变量转换成数字再进行对比,这个叫做隐式转换
if(sNum01==12){alert('相等!');
}
else{alert('不相等!')
}// "===" 符号不会转换符号两边的数据类型
if(sNum01===12){alert('相等!');
}
else{alert('不相等!')
}// 多条件判断
var sFruit = "苹果";
if (sFruit == "苹果") {alert("您选择的水果是苹果");
} else if (sFruit == "鸭梨") {alert("您选择的水果是鸭梨");
} else {alert("对不起,您选择的水果不存在!")
}
逻辑运算符
假如 x=6, y=3, 查看比较后的结果:
比较运算符 | 描述 | 例子 |
---|---|---|
&& | and | (x < 10 && y > 1) 为 true |
|| | or | (x5 || y5) 为 false |
! | not | !(x==y) 为 true |
逻辑运算符示例代码:
var x = 6;
var y = 3;if(x < 10 && y > 1){alert('都大于');
}
else{alert('至少有一个不大于');
}if(x > 5 || y > 7 ){alert('至少有一个大于');
}
else{alert('都不大于');
}if(!(x == y)){alert('等于')
}
else{alert('不等于')
}
小结
- 条件语句三种写法
- if 语句 适用于单条件判断
- if else 语句 适用于两种条件的判断(成立和不成立条件判断)。
- if else if else 语句 适用于多条件判断
获取标签元素
获取标签元素
可以使用内置对象document 上的getElementByld方法来获取页面上设置的id属性的标签元素,获取到的是一个html对象,然后将它赋值给一个变量
<script>var oDiv = document.getElementById("p1")alert(oDiv)
</script><p id="p1">哈哈,我是一个段落标签</p>
说明:
上面的代码,如果把JavaScript写在元素的上面,就会出错,因为页面上从上到下加载执行的,JavaScript去页面上获取元素div1的时候,元素div1还没有加载
解决办法有两种:
第一种方法就:将JavaScript放在页面最下边
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>JavaScript的使用</title></head>
<body><p id="p1">哈哈,我是一个段落标签</p>
</body>
</html><script>var oDiv = document.getElementById("p1")alert(oDiv)
</script>
第二种方法:设置页面加载完成执行的函数,在执行函数里面获取标签对象
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>JavaScript的使用</title><script>// function fnLoad(){// var oDiv = document.getElementById("p1");// alert(oDiv);// }// // 页面标签和数据都加载完成以后会出发onload事件// window.onload = fnLoad()window.onload = function(){var oDiv = document.getElementById("p1");alert(oDiv);}</script>
</head>
<body><p id="p1">哈哈,我是一个段落标签</p>
</body>
</html>
操作标签属性
属性的操作
首先获取的页面标签元素,然后就可以对页面标签元素的属性进行操作,属性的操作包括:
- 属性的读取
- 属性的设置
属性名在js中的写法
- html的属性和js里面属性大多数写法一样,但是“class”属性写成“className”
- “style”属性里面的属性,有横杠的改成驼峰式,比如:“font-size”,改成“style.fontSize”
<style>.sty01{font-size:20px;color:red;}.sty02{font-size:30px;color:pink;text-decoration:none;}</style><script type="text/javascript">window.onload = function(){var oInput = document.getElementById('input1');var oA = document.getElementById('link1');// 读取属性值var sValue = oInput.value;var sType = oInput.type;var sName = oInput.name;var sLinks = oA.href;// 操作class属性,需要写成“className”oA.className = 'sty02';// 写(设置)属性oA.style.color = 'red';oA.style.fontSize = sValue;}</script><input type="text" name="setsize" id="input1" value="20px">
<a href="#" id="link01" class="sty01">这是一个链接</a>
innerHTML
innerHTML可以读取或者设置标签包裹的内容
<script type="text/javascript">window.onload = function(){var oDiv = document.getElementById('div1');//读取var sTxt = oDiv.innerHTML;alert(sTxt);//写入oDiv.innerHTML = '<a href="http://www.baidu.com">百度<a/>';}
</script><div id="div1">这是一个div元素</div>
小结
标签属性的获取和设置:
- var 标签对象 = document.getElementByld(“id名称”);-> 获取对象标签
- var 变量名 = 标签对象.属性名 -> 读取属性
- 标签对象.属性名 = 新属性值 -> 设置属性
数组及操作方式
数组的介绍
数据就是一组数据的集合,JavaScript中,数组里面的数据可以是不同类型的数据,好比Python里面的列表
数组的定义
// 实例化对象方式创建
var aList = new Array(1,2,3);
// 字面量方式创建,推荐使用
var aList2 = [1,2,3,'asd'];
多维数组
多维数组指的是数组成员也是数组,把这样的数组叫多维数组
var aList = [[1,2,3],['a','b','c']]
数组的操作
获取数组长度
var aList = [1,2,3,4,5];
alert(aList.length)
根据下标取值
var aList = [1,2,3,4,5];
alert(aList[0])
从数组的最后添加和删除元素
var aList = [1,2,3,4,5];
aList.push(6);
alert(aList);
aList.pop();
alert(aList);
根据下标添加和删除元素
arr.splice(start, num, element1, …, elementN)
参数解析:
- start:必需,开始删除的索引
- num:可选,删除数组的个数
- elementN:可选,在start索引位置要插入的新元素
此方法会删除从start索引开始的num个元素,并将elementN参数插入到start索引位置
var colors = ["red", "green", "blue"];
colors.splice(0,1); //删除第一项
alert(colors); //green,bluecolors.splice(1, 0, "yellow", "orange"); //从第一个索引位置插入两项数据
alert(colors); //green,yellow,organge,bluecolors.splice(1, 1, "red", "purple"); //删除一项,插入两项数据
alert(colors); //green,red,purple,orange,blue
循环语句
循环语句的介绍
- for
- while
- do-while
for循环
var array = [1, 4, 5];for(var index = 0; index < array.length; index++){result = array[index];alert(result);
}
while循环
var array = [1, 4, 5];
var index = 0;while (index < array.length) {result = array[index];alert(result);index++;
}
当条件成立的时候, while语句会循环执行
do-while 循环
var array = [1, 4, 5];
var index = 0;do {result = array[index];alert(result);index++;
} while (index < array.length);
当条件不成立时do也会执行一次
字符串拼接
字符串拼接使用: “+” 运算符
var iNum1 = 10;
var fNum2 = 11.1;
var sStr = 'abc';result = iNum1 + fNum2;
alert(result); // 弹出21.1result = fNum2 + sStr;
alert(result); // 弹出11.1abc
说明
数字和字符串拼接会自动进行类型转换(隐式类型转换),把数字类型转成字符串类型进行拼接
定时器
定时器的介绍
定时器就是在一段特定的时间后执行某段程序代码。
定时器的使用:
js 定时器有两种创建方式:
- setTimeout(func[, delay, param1, param2, …]) :以指定的时间间隔(以毫秒计)调用一次函数的定时器
- setInterval(func[, delay, param1, param2, …]) :以指定的时间间隔(以毫秒计)重复调用一个函数的定时器
setTimeout函数的参数说明:
- 第一个参数 func , 表示定时器要执行的函数名
- 第二个参数 delay, 表示时间间隔,默认是0,单位是毫秒
- 第三个参数 param1, 表示定时器执行函数的第一个参数,一次类推传入多个执行函数对应的参数。
<script> function hello(){ alert('hello'); } // 执行一次函数的定时器setTimeout(hello, 500);
</script>
setInterval函数的参数说明:
- 第一个参数 func , 表示定时器要执行的函数名
- 第二个参数 delay, 表示时间间隔,默认是0,单位是毫秒
- 第三个参数 param1, 表示定时器执行函数的第一个参数,一次类推传入多个执行函数对应的参数。
<script> function hello(){ alert('hello'); } // 重复执行函数的定时器setInterval(hello, 1000);
</script>
清除定时器
js 清除定时器分别是:
- clearTimeout(timeoutID) 清除只执行一次的定时器(setTimeout函数)
- clearInterval(timeoutID) 清除反复执行的定时器(setInterval函数)
clearTimeout函数的参数说明:
- timeoutID 为调用 setTimeout 函数时所获得的返回值,使用该返回标识符作为参数,可以取消该 setTimeout 所设定的定时执行操作。
<script>function hello(){alert('hello');// 清除只执行一次的定时器clearTimeout(t1)}// 执行一次函数的定时器t1 = setTimeout(hello, 500);
</script>
clearInterval函数的参数说明:
- timeoutID 为调用 setInterval 函数时所获得的返回值,使用该返回标识符作为参数,可以取消该 setInterval 所设定的定时执行操作。
<script> function hello(){ alert('hello'); } // 重复执行函数的定时器var t1 = setInterval(hello, 1000);function stop(){// 清除反复执行的定时器clearInterval(t1); } </script> <input type="button" value="停止" onclick="stop();">
小结
- 定时器的创建
- 只执行一次函数的定时器, 对应的代码是setTimeout函数
- 反复执行函数的定时器, 对应的代码是setInterval函数
- 清除定时器
- 清除只执行一次函数的定时器, 对应的代码是clearTimeout函数
- 清除清除反复执行的定时器, 对应的代码是clearInterval函数
四、JQuery
JQuery的介绍
jQuery的定义
jQuery是对JavaScript的封装,它是免费、开源的JavaScript函数库,jQuery 极大地简化了 JavaScript 编程。
jQuery的作用
jQuery和JavaScript它们的作用一样,都是负责网页行为操作,增加网页和用户的交互效果的,只不过jQuery简化了JavaScript编程,jQuery实现交互效果更简单。
jQuery的优点
- jQuery兼容了现在主流的浏览器,增加了程序员的开发效率。
- jQuery简化了 JavaScript 编程,代码编写更加简单。
小结
- jQuery是一个免费、开源的JavaScript函数库
- jQuery的作用和JavaScript一样,都是负责网页和用户的交互效果。
- jQuery的优点就是兼容主流浏览器,代码编写更加简单。
JQuery的用法
jQuery的引入
<script src="js/jquery-1.12.4.min.js"></script>
jQuery的入口函数
我们知道使用js获取标签元素,需要页面加载完成以后再获取,我们通过给onload事件属性设置了一个函数来获取标签元素,而jquery提供了ready函数来解决这个问题,保证获取标签元素没有问题,它的速度比原生的 window.onload 更快。
入口函数示例代码:
<script src="js/jquery-1.12.4.min.js"></script>
<script>window.onload = function(){var oDiv = document.getElementById('div01');alert('原生就是获取的div:' + oDiv);};$(document).ready(function(){var $div = $('#div01');alert('jquery获取的div:' + $div);});
</script><div id="div01">这是一个div</div>
入口函数的简写示例代码:
<script src="js/jquery-1.12.4.min.js"></script>
<script>window.onload = function(){var oDiv = document.getElementById('div01');alert('原生就是获取的div:' + oDiv);};/*$(document).ready(function(){var $div = $('#div01');alert('jquery获取的div:' + $div);});*/// 上面ready的写法可以简写成下面的形式:$(function(){var $div = $('#div01');alert('jquery获取的div:' + $div);});
</script><div id="div01">这是一个div</div>
小结
-
引入jQuery
-
获取标签元素需要在入口函数来完成,它的速度比原生的 window.onload 更快
-
jQuery入口函数有两种写法:
// 完整写法$(document).ready(function(){...});// 简化写法$(function(){...});
JQuery选择器
jQuery选择器的介绍
jquery选择器就是快速选择标签元素,获取标签的,选择规则和css样式一样。
jQuery选择器的种类
- 标签选择器
- 类选择器
- id选择器
- 层级选择器
- 属性选择器
$('#myId') //选择id为myId的标签
$('.myClass') // 选择class为myClass的标签
$('li') //选择所有的li标签
$('#ul1 li span') //选择id为ul1标签下的所有li标签下的span标签
$('input[name=first]') // 选择name属性等于first的input标签
说明:
可以使用length属性来判断标签是否选择成功, 如果length大于0表示选择成功,否则选择失败。
$(function(){result = $("div").length;alert(result);
});
小结
- jQuery选择器就是选择标签的
- 标签选择器是根据标签名来选择标签
- 类选择器是根据类名来选择标签
- id选择器是根据id来选择标签
- 层级选择器是根据层级关系来选择标签
- 属性选择器是根据属性名来选择标签
选择集过滤
选择集过滤的介绍
选择集过滤就是在选择标签的集合里面过滤自己需要的标签
选择集过滤的操作
- has(选择器名称)方法,表示选取包含指定选择器的标签
- eq(索引)方法,表示选取指定索引的标签
has方法的示例代码:
<script>$(function(){// has方法的使用var $div = $("div").has("#mytext");// 设置样式$div.css({"background":"red"});});
</script><div>这是第一个div<input type="text" id="mytext">
</div><div>这是第二个div<input type="text"><input type="button">
</div>
eq方法的示例代码:
<script>$(function(){// has方法的使用var $div = $("div").has("#mytext");// 设置样式$div.css({"background":"red"});// eq方法的使用var $div = $("div").eq(1);// 设置样式$div.css({"background":"yellow"});});
</script><div>这是第一个div<input type="text" id="mytext">
</div><div>这是第二个div<input type="text"><input type="button">
</div>
小结
- 选择集过滤可以使用has方法和eq方法来完成
- jquery给标签设置样式使用css方法
选择集转移
选择集转移介绍
选择集转移就是以选择的标签为参照,然后获取转移后的标签
选择集转移操作
- $(‘#box’).prev(); 表示选择id是box元素的上一个的同级元素
- $(‘#box’).prevAll(); 表示选择id是box元素的上面所有的同级元素
- $(‘#box’).next(); 表示选择id是box元素的下一个的同级元素
- $(‘#box’).nextAll(); 表示选择id是box元素的下面所有的同级元素
- $(‘#box’).parent(); 表示选择id是box元素的父元素
- $(‘#box’).children(); 表示选择id是box元素的所有子元素
- $(‘#box’).siblings(); 表示选择id是box元素的其它同级元素
- $(‘#box’).find(‘.myClass’); 表示选择id是box元素的class等于myClass的元素
选择集转移的示例代码:
<script>$(function(){var $div = $('#div01');$div.prev().css({'color':'red'});$div.prevAll().css({'text-indent':50});$div.next().css({'color':'blue'});$div.nextAll().css({'text-indent':80});$div.siblings().css({'text-decoration':'underline'})$div.parent().css({'background':'gray'});$div.children().css({'color':'red'});$div.find('.sp02').css({'font-size':30});});
</script><div><h2>这是第一个h2标签</h2><p>这是第一个段落</p><div id="div01">这是一个<span>div</span><span class="sp02">第二个span</span></div><h2>这是第二个h2标签</h2><p>这是第二个段落</p>
</div>
小结
- prev() 表示获取上一个同级元素
- prevAll() 表示获取上面所有同级元素
- next() 表示获取下一个同级元素
- nextAll() 表示获取下面所有同级元素
- parent() 表示获取父元素
- children() 表示获取所有的子元素
- siblings() 表示获取其它同级元素
- find(“选择器名称”) 表示获取指定选择器的元素
获取和设置元素内容
html方法的使用
jquery中的html方法可以获取和设置标签的html内容
示例代码:
<script>$(function(){var $div = $("#div1");// 获取标签的html内容var result = $div.html();alert(result);// 设置标签的html内容,之前的内容会清除$div.html("<span style='color:red'>你好</span>");// 追加html内容$div.append("<span style='color:red'>你好</span>");});
</script><div id="div1"><p>hello</p>
</div>
说明:
给指定标签追加html内容使用append方法
小结
- 获取和设置元素的内容使用: html方法
- 给指定元素追加html内容使用: append方法
获取和设置元素属性
prop方法的使用
之前使用css方法可以给标签设置样式属性,那么设置标签的其它属性可以使用prop方法了。
示例代码:
<style>.a01{color:red;}
</style><script>$(function(){var $a = $("#link01");var $input = $('#input01')// 获取元素属性var sId = $a.prop("id");alert(sId);// 设置元素属性$a.prop({"href":"http://www.baidu.com","title":'这是去到百度的链接',"class":"a01"});// 获取value属性// var sValue = $input.prop("value");// alert(sValue);// 获取value属性使用val()方法的简写方式var sValue = $input.val();alert(sValue);// 设置value值$input.val("222222");})
</script><a id="link01">这是一个链接</a>
<input type="text" id="input01" value="111111">
说明: 获取value属性和设置value属性还可以通过val方法来完成。
小结
- 获取和设置元素属性的操作可以通过prop方法来完成
- 获取和设置元素的value属性可以通过val方法来完成,更加简单和方便
JQuery事件
常用事件
- click() 鼠标单击
- blur() 元素失去焦点
- focus() 元素获得焦点
- mouseover() 鼠标进入(进入子元素也触发)
- mouseout() 鼠标离开(离开子元素也触发)
- ready() DOM加载完成
示例代码:
<script>$(function(){var $li = $('.list li');var $button = $('#button1')var $text = $("#text1");var $div = $("#div1")// 鼠标点击$li.click(function(){ // this指的是当前发生事件的对象,但是它是一个原生js对象// this.style.background = 'red';// $(this) 指的是当前发生事件的jquery对象$(this).css({'background':'gold'});// 获取jquery对象的索引值,通过index() 方法alert($(this).index());});// 一般和按钮配合使用$button.click(function(){alert($text.val());});// 获取焦点$text.focus(function(){$(this).css({'background':'red'});});// 失去焦点$text.blur(function(){$(this).css({'background':'white'});});// 鼠标进入$div.mouseover(function(){$(this).css({'background':'gold'});});// 鼠标离开$div.mouseout(function() {$(this).css({'background':'white'});});});
</script><div id="div1"><ul class="list"><li>列表文字</li><li>列表文字</li><li>列表文字</li></ul><input type="text" id="text1"><input type="button" id="button1" value="点击">
</div>
说明:
- this指的是当前发生事件的对象,但是它是一个原生js对象
- $(this) 指的是当前发生事件的jquery对象
小结
jQuery常用事件:
- click() 鼠标单击
- blur() 元素失去焦点
- focus() 元素获得焦点
- mouseover() 鼠标进入(进入子元素也触发)
- mouseout() 鼠标离开(离开子元素也触发)
- ready() DOM加载完成
事件代理
事件代理介绍
事件代理就是利用事件冒泡的原理(事件冒泡就是事件会向它的父级一级一级传递),把事件加到父级上,通过判断事件来源,执行相应的子元素的操作,事件代理首先可以极大减少事件绑定次数,提高性能;其次可以让新加入的子元素也可以拥有相同的操作。
事件冒泡代码:
<script>$(function(){var $div1 = $('#div1');var $div2 = $('#div2');$div1.click(function(){alert($(this).html());}); $div2.click(function(){alert($(this).html());}); });
</script><div id="div1" style="width:200px; height:200px; background: red;"><div id="div2" style="width:100px; height:100px;background: yellow;">哈哈</div>
</div>
说明:
当点击子元素div,它的点击事件会向它父元素传递,也会触发了父元素的点击事件,这就是事件冒泡。
事件代理的使用
一般绑定事件的写法:
$(function(){$ali = $('#list li');$ali.click(function() {$(this).css({background:'red'});});
})<ul id="list"><li>1</li><li>2</li><li>3</li><li>4</li><li>5</li>
</ul>
事件代理的写法
$(function(){$list = $('#list');// 父元素ul 来代理 子元素li的点击事件$list.delegate('li', 'click', function() {// $(this)表示当前点击的子元素对象$(this).css({background:'red'});});
})<ul id="list"><li>1</li><li>2</li><li>3</li><li>4</li><li>5</li>
</ul>
delegate方法参数说明:
delegate(childSelector,event,function)
- childSelector: 子元素的选择器
- event: 事件名称,比如: ‘click’
- function: 当事件触发执行的函数
小结
- 事件代理就是使用父元素来代理子元素的事件,好处是减少事件的绑定次数,提高性能。
- 使用场景当多个相同的子元素绑定同一个事件,可以使用事件代理。
- 事件代理使用是使用delegate方法来完成
JavaScript 对象
JavaScript对象的介绍
JavaScript 中的所有事物都是对象:字符串、数值、数组、函数等都可以认为是对象,此外,JavaScript 允许自定义对象,对象可以拥有属性和方法。
JavaScript创建对象操作
创建自定义javascript对象有两种方式:
- 通过顶级Object类型来实例化一个对象
- 通过对象字面量创建一个对象
Object类创建对象的示例代码:
<script>var person = new Object();// 添加属性:person.name = 'tom';person.age = '25';// 添加方法:person.sayName = function(){alert(this.name);}// 调用属性和方法:alert(person.age);person.sayName();
</script>
对象字面量创建对象的示例代码:
<script>var person2 = {name:'Rose',age: 18,sayName:function(){alert('My name is' + this.name);}}// 调用属性和方法:alert(person2.age);person2.sayName();
</script>
说明:
调用属性和方法的操作都是通过点语法的方式来完成,对象的创建推荐使用字面量方式,因为更加简单。
小结
创建自定义javascript对象有两种方式:
- Object
- 字面量
Json对象
json的介绍
json是 JavaScript Object Notation 的首字母缩写,翻译过来就是javascript对象表示法,这里说的json就是类似于javascript对象的字符串,它同时是一种数据格式,目前这种数据格式比较流行,逐渐替换掉了传统的xml数据格式。
json的格式
json有两种格式:
- 对象格式
- 数组格式
对象格式:
对象格式的json数据,使用一对大括号({}),大括号里面放入key:value形式的键值对,多个键值对使用逗号分隔。
对象格式的json数据:
{"name":"tom","age":18
}
格式说明:
json中的(key)属性名称和字符串值需要用双引号引起来,用单引号或者不用引号会导致读取数据错误。
数组格式:
数组格式的json数据,使用一对中括号([]),中括号里面的数据使用逗号分隔。
数组格式的json数据:
["tom",18,"programmer"]
实际开发的json格式比较复杂,例如:
{"name":"jack","age":29,"hobby":["reading","travel","photography"]"school":{"name":"Merrimack College","location":"North Andover, MA"}
}
json数据转换成JavaScript对象
json本质上是字符串,如果在js中操作json数据,可以将json字符串转化为JavaScript对象。
示例代码:
var sJson = '{"name":"tom","age":18}';
var oPerson = JSON.parse(sJson);// 操作属性
alert(oPerson.name);
alert(oPerson.age);
小结
- json就是一个javascript对象表示法,json本质上是一个字符串。
- json有两种格式:1. 对象格式, 2. 数组格式
ajax
ajax的介绍
ajax 是 Asynchronous JavaScript and XML的简写,ajax一个前后台配合的技术,它可以让 javascript 发送异步的 http 请求,与后台通信进行数据的获取,ajax 最大的优点是实现局部刷新,ajax可以发送http请求,当获取到后台数据的时候更新页面显示数据实现局部刷新,在这里大家只需要记住,当前端页面想和后台服务器进行数据交互就可以使用ajax了。
这里提示一下大家, 在html页面使用ajax需要在web服务器环境下运行, 一般向自己的web服务器发送ajax请求。
ajax的使用
jquery将它封装成了一个方法$.ajax(),我们可以直接用这个方法来执行ajax请求。
示例代码:
<script>$.ajax({// 1.url 请求地址url:'http://t.weather.sojson.com/api/weather/city/101010100',// 2.type 请求方式,默认是'GET',常用的还有'POST'type:'GET',// 3.dataType 设置返回的数据格式,常用的是'json'格式dataType:'JSON',// 4.data 设置发送给服务器的数据, 没有参数不需要设置// 5.success 设置请求成功后的回调函数success:function (response) {console.log(response); },// 6.error 设置请求失败后的回调函数error:function () {alert("请求失败,请稍后再试!");},// 7.async 设置是否异步,默认值是'true',表示异步,一般不用写async:true
});
</script>
ajax方法的参数说明:
- url 请求地址
- type 请求方式,默认是’GET’,常用的还有’POST’
- dataType 设置返回的数据格式,常用的是’json’格式
- data 设置发送给服务器的数据,没有参数不需要设置
- success 设置请求成功后的回调函数
- error 设置请求失败后的回调函数
- async 设置是否异步,默认值是’true’,表示异步,一般不用写
- 同步和异步说明
- 同步是一个ajax请求完成另外一个才可以请求,需要等待上一个ajax请求完成,好比线程同步。
- 异步是多个ajax同时请求,不需要等待其它ajax请求完成, 好比线程异步。
ajax的简写方式:
. a j a x 按照请求方式可以简写成 .ajax按照请求方式可以简写成 .ajax按照请求方式可以简写成.get或者$.post方式
ajax简写方式的示例代码:
<script>$(function(){/*1. url 请求地址2. data 设置发送给服务器的数据, 没有参数不需要设置3. success 设置请求成功后的回调函数4. dataType 设置返回的数据格式,常用的是'json'格式, 默认智能判断数据格式*/ $.get("http://t.weather.sojson.com/api/weather/city/101010100", function(dat,status){console.log(dat);console.log(status);alert(dat);}).error(function(){alert("网络异常");});/*1. url 请求地址2. data 设置发送给服务器的数据, 没有参数不需要设置3. success 设置请求成功后的回调函数4. dataType 设置返回的数据格式,常用的是'json'格式, 默认智能判断数据格式*/ $.post("test.php", {"func": "getNameAndTime"}, function(data){alert(data.name); console.log(data.time); }, "json").error(function(){alert("网络异常");}); });</script>
. g e t 和 .get和 .get和.post方法的参数说明:
$.get(url,data,success(data, status, xhr),dataType).error(func)
$.post(url,data,success(data, status, xhr),dataType).error(func)
- url 请求地址
- data 设置发送给服务器的数据,没有参数不需要设置
- success 设置请求成功后的回调函数
- data 请求的结果数据
- status 请求的状态信息, 比如: “success”
- xhr 底层发送http请求XMLHttpRequest对象
- dataType 设置返回的数据格式
- “xml”
- “html”
- “text”
- “json”
- error 表示错误异常处理
- func 错误异常回调函数
小结
- ajax 是发送http请求获取后台服务器数据的技术
- ajax的简写方式可以使用 . g e t 和 .get和 .get和.post方法来完成