前端开发基础

最新推荐文章于 2024-07-25 11:52:08 发布

落日晚风愿能与你共赏

最新推荐文章于 2024-07-25 11:52:08 发布

阅读量195

点赞数

文章标签： html css javascript web

本文链接：https://blog.csdn.net/qq_45659384/article/details/108006558

版权

第一章 html

1.1 html介绍

html的定义

HTML的全称为: HyperText Mark-up Language,指的是超文本标记语言。标记:就是标签，<标签名称></标签名称> ,比如: <html></html> 、<h1></h1>等，标签大多数都是成对出现的。
所谓超文本，有两层含义:
1.因为网页中还可以图片、 视频、音频等内容(超越文本限制)
2.它还可以在网页中跳转到另一个网页，与世界各地主机的网页链接(超链接文本)

<!DOCTYPE html>
<html>
	<head>
		<mate charset="utf-8"/>
		<title>网页标题</title>
	</head>
	<body>
		网页显示内容
	</body>
</html>
----------------------------------------
1.第一行<!DOCTYPE html> 是文档声明,用来指定页面所使用的html的版本,这里声明的是一个html5的文档。
2. <html>...</html> 标签是开发人员在告诉浏览器，整个网页是从<html> 这里开始的，到</html> 结
束,也就是html文档的开始和结束标签。
3. <head>...</head> 标签用于定义文档的头部,是负责对网页进行设置标题、编码格式以及引入css和js
文件的。
4. <body>...</body> 标签是编写网页上显示的内容。

浏览网页文件
网页文件的后缀是.html或者.htm, -个html文件就是- -个网页，html文件用编辑器打开显示的是文本，可以用文本的方式编辑它，如果用浏览器打开，浏览器会按照标签描述内容将文件渲染成网页。

<!--文档声明：html5文档-->
<!DOCTYPE html>
<!-- 当前网页的语言是英文 -->
<html lang="en">
<head>
    <!-- 指定网页的编码格式 -->
    <meta charset="UTF-8">
    <!-- 在移动设备浏览网页时，网页不缩放 -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- 在ie浏览器浏览网页时，使用ie最高版本 -->
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <h1>hello</h1>
    hello
</body>
</html>

1.2 常用的html标签

<!-- 1、成对出现的标签: -->
<h1>h1标题/h1>
<div>这是一个div标签</div>
<p>这个-个段落标签</p>
    
<!-- 2、单个出现的标签: -->
<br>
<img src=" images/pic.jpg" alt="图片">
<hr>
    
<1-- 3、带属性的标签，如src、alt和href等都是属性-->
<img src=" images/pic.jpg" alt="图片">
<a href="http://www. baidu. com">百度网</a> 超链接标签
<!-- 4、标签的嵌套-->
<div>
<img src=" images/pic.jpg" alt="图片">
<a href= "http://www。baidu. com">百度网</a>
</div>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!-- 双标签 -->
    <h1>这是第一级标题</h1>
    <h6>这是第六级标签</h6>
    <div>我是一个容器标签，可以包含其他标签内容</div>
    <p>这个一个段落标签</p>
    <!-- 单标签：只有一个标签，没有标签内容 -->
    <!-- 分割线 -->
    <hr>
    <img src="imgs/logo.png" alt="图片加载失败会显示">
    <br>
    <img src="imgs/logo1.png" alt="图片加载失败会显示">
    <!-- 带有属性的标签 -->
    <a href="https://www.baidu.com">百度</a>

</body>
</html>

1.3 列表标签

列表标签分为

有序列表标签

无序列表标签

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <ul>
        <li>苹果</li>
        <li>鸭梨</li>

    </ul>
    <ol>
        <li>第一步</li>
        <li>第二步</li>
    </ol>
</body>
</html>

1.4 表格标签

<table> 标签:表示一个表格
<tr> 标签:表示表格中的一行
<td>标签:表示表格中的列
<th>标签:表示表格中的表头

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!-- border-collapse:collapse 表示表格的边线进行合并 -->
    <!-- border:1px solid black;表示设置表格边线 为1像素 黑色 -->
    <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;">18</td>
        </tr>
    </table>
</body>
</html>

1.5 表单标签

表单的介绍
表单用于搜集不同类型的用户输入(用户输入的数据)，然后可以把用户数据提交到web服务器。
表单相关标签的使用

1. <form>标签表示表单标签，定义整体的表单区域
2. <label> 标签表示表单元素的文字标注标签，定义文字标注
3. <input> 标签表示表单元素的用户输入标签，定义不同类型的用户输入数据方式
 type属性
■type="text"定义单行文本输入框
■type="password" 定义密码输入框
■type="radio"定义单选框
■type="checkbox" 定义复选框
■type="file" 定义上传文件
■type="submit" 定义提交按钮
■type="reset"定义重置按钮
■type= "button"定义一个普通按钮
4. <textarea> 标签表示表单元素的多行文本输入框标签定义多行文本输入框
5. <select> 标签表示表单元素的下拉列表标签定义下拉列表
<option>标签与<select> 标签配合，定义下拉列表中的选项

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!-- 把数据提交给web服务器需要使用表单标签 -->
    <form>
        <p>
            <!-- for 表示点击用户名时会跳进指定id输入框 -->
            <label for="name">用户名:</label>
            <input type='text' id='name'>
        </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>
            </select>
        </p>
        <p>
            <input type="submit" value="提交">
            <input type="reset" value="重置">
            <input type="button" value="按钮">
        </p>

    </form>
</body>
</html>

1.6 表单提交

表单属性设置

<form>标签表示表单标签，定义整体的表单区域
●action属性设置表单数据提交地址
●method属性设置表单提交的方式，一般有“GET"方式和“POST"方式,不区分大小写
2.表单元素属性设置
●name属性设置表单元素的名称，该名称是提交数据时的参数名
●value属性设置表单元素的值，该值是提交数据时参数名所对应的值

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!-- 把数据提交给web服务器需要使用表单标签 -->
    <form action="https://www.baidu.com" method="GET">
        <p>
            <!-- for 表示点击用户名时会跳进指定id输入框 -->
            <label for="name">用户名:</label>
            <input type='text' id='name' name="username" value="11">
        </p>
        <p>
            <label>密码:</label>
            <input type='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="love" value="学习">学习
            <input type='checkbox' name="love" value="睡觉">睡觉
            <input type='checkbox'name="love" value="打游戏">打游戏
        </p>
        <p>
            <label>照片:</label>
            <input type='file' name="pic">
        </p>
        <p>
            <label>个人描述:</label>
            <textarea name="desc"></textarea>
        </p>
        <p>
            <label>籍贯:</label>
            <select>
                <option value="1">北京</option>
                <option value="2">广州</option>
                <option value="3">上海</option>
            </select>
        </p>
        <p>
            <input type="submit" value="提交">
            <input type="reset" value="重置">
            <input type="button" value="按钮">
        </p>

    </form>
</body>
</html>

第二章 CSS

2.1 css介绍

css定义

css(Cascadinp Style Sheet)层叠样式表，它是用来美化页面的一种语言

css的作用
1.美化界面，比如:设置标签文字大小、颜色、字体加粗等样式
2.控制页面布局,比如:设置浮动、定位等样式。

css的基本语法
选择器{
样式规则
样式规则:
属性名1 :属性值1;
属性名2 :属性值2;
属性名3:属性值3;
选择器:是用来选择标签的，选出来以后给标签加样式

代码实例

div{
width:100px;
height: 100px;
background:gold; 
}

小结
css是层叠样式表，它是用来美化网页和控制页面布局的。
定义css的语法格式是:选择器{样式规则}

2.2 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代码过于集中，若维护不当则极容易造成混乱。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- 内嵌式 -->
    <style>
        /*css里面的注释*/
        /* 选择器，css样式表可以由很多选择器组成， 选择器就是用来选择标签给标签添加样式
 */
        a{
            color: brown;
        }
        div{
            width: 100px;
            height: 100px;
            background:blue;
        }
    </style>
    <!-- 外链式 -->
    <link rel="stylesheet" href="main.css"
</head>
<body>
    <!-- 行内式 -->
    <p style="color: red;">我是一个段落标签</p>
    <a href="https://www.baidu.com">百度</a>
    <div>啦啦啦</div>
    <h1>我是一级标题</h1>
</body>
</html>

h1{
    color: antiquewhite;
}

2.3 css选择器

css选择器的定义
css选择器是用来选择标签的，选出来以后给标签加样式王

css选择器的种类
1.标签选择器
2.类选择器
3.层级选择器(后代选择器)
4.id选择器
5.组选择器
6.伪类选择器
7.标签选择器
根据标签来选择标签，以标签开头，此种选择器影响范围大，一般用来做一些通用设置。

标签选择器

根据标签来选择标签，以标签开头，此种选择器影响范围大, 一般用来做一些通用设置。

<style type="text/css">
p{
color: red; 
}
</style>
<div>hello</div>
<p>hello</p>

类选择器

根据类名来选择标签，以.开头,一个类选择器可应用于多个标签上，一个标签上也可以使用多个类选择器，多个类选择器需要使用空格分割，应用灵活，可复用，是css中应用最多的一种选择器。

<style type="text/css">
    .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 type="text/css">
    div p {
        color: red;
    }

    .con {
        width: 300px;
        height: 80px;
        background: green
    }

    .con span {
        color: red
    }

    .con .pink {
        color: pink
    }

    .con .gold {
        color: go1d
    }
</style>
<div>
    <p>he1lo</p>
</div>
<div class="con">
    <span>哈哈</span>
    <a href="#" class="pink">百度</a>
    <a href="#" class="gold">谷歌</a>
</div>
<span>你好</span>
<a href="#" class="pink">新浪</a>

id选择器
根据id选择标签，以#开头,元素的id名称不能重复，所以id选择器只能对应于页面上一个元素，不能复用，id名一般给程序使用，所以不推荐使用id作为选择器

<style type="text/css">
    #box {
        color: red
    }
</style>
<p id="box">这是一个段落标签</p> <!-- 对应以上- -条样式，其它元素不允许应用此样式-->
<p>这是第二个段落标签</p> <!-- 无法应用以上样式，每个标签只能有唯一-的id名 -->
<p>这是第三个段落标签</p> <!-- 无法应用以上样式，每个标签只能有唯一-的id名 -->

注意点:虽然给其它标签设置id="box"也可以设置样式，但是不推荐这样做，因为id是唯-的，以后js通过id只能获取一个唯一的标签对象。

组选择器
根据组合的选择器选择不同的标签，以，分割开,如果有公共的样式设置，可以使用组选择器。

<style type="text/css">
    .box1,
    .box2,
    .box3 {
        width: 100px;
        height: 100px
    }

    .box1 {
        background: red
    }

    .box2 {
        background: pink
    }

    .box2 {
        background: gold
    }
</style>
<div class="box1">这是第一个div</div>
<div class="box2">这是第二 个div</div>
<div class="box3">这是第三个div</div>

伪类选择器
用于向选择器添加特殊的效果,以:分割开,当用户和网站交互的时候改变显示效果可以使用伪类选择器（鼠标指定时变成伪类的属性）

<style type="text/css">
    .box1 {
        width: 100px;
        height: 100px;
        background: gold;
    }

    .box1 :hover {
        width: 300px;
    }
</style>
<div class="box1">这是第一个div</div>

2.4 css属性

布局常用样式属性
●width设置无素(标签)的宽度，如: width:100px;
●height设置元素(标签)的高度，如: height:200px;
●background 设置元素背景色或者背景图片，如:background:gold;设置元素的背景色,background:url(images/logo.png);设置元素的背景图片。
●border设置元素四周的边框，如: border:1 px solid black;设置元素四周边框是1像素宽的黑色实线
●以上也可以拆分成四个边的写法，分别设置四个边的:
●border-top 设置顶边边框，如: border-top:10px solid red;
●border-left 设置左边边框，如: border-left: 10px solid blue;
●border-right 设置右边边框，如: border-right:10px solid green;
●border-bottom 设置底边边框，如: border-bottom:10px solid pink;
●padding设置元素包含的内容和元素边框的距离，也叫内边距，如padding:20px;padding是同时设置4
个边的，也可以像border-样拆分成分别设置四个边:padding-top、padding-left、padding-ight 、padding-bottom
●margin 设置元素和外界的距离，也叫外边距，如margin:20px;margin是同时设置4个边的，也可以像border-样拆分成分别设置四个边:margin-top、margin-left、margin-right margin-bottom
●float 设置元素浮动，浮动可以让块元素排列在-行，浮动分为左浮动: float:left;右浮动: float:right;

<!--文档声明：html5文档-->
<!DOCTYPE html>
<!-- 当前网页的语言是英文 -->
<html lang="en">

<head>
    <!-- 指定网页的编码格式 -->
    <meta charset="UTF-8">
    <!-- 在移动设备浏览网页时，网页不缩放 -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- 在ie浏览器浏览网页时，使用ie最高版本 -->
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        div {
            width: 100px;
            height: 100px;
            background: url(imgs/logo.png) no-repeat;
            background: I 0 green;
            /*设置背景图片，不重复显示图片，拉伸当前显示这个图片*/
            /* background: url(" imgs/logo. png") no-repeat; */
            /* backg round: url( imgs/ logo1. png) no-repeat; */
            /*设置标签的四周边框*/
            /* border: 5px solid red; */
            border-top: 5px solid red;
            border-left: 5px solid  red;
            border-bottom: 5px solid  red;

        }
    </style>
</head>

<body>
    <h1>hello</h1>
    <div>hello</div>
</body>

</html>

文本常用样式属性
●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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        p {
            color: red;
            font-size: 30px;
            font-weight: bold;
            font-family: "Microsoft Yahei";
            line-height: 100px;
        }
        span {
            color: green;
        }
        a {
            /* 取消下划线 */
            text-decoration: none;
        }
    </style>
</head>

<body>
    <p>
        <!-- span标签可以给文本中的一小段内容设置样式 -->
        听说下雨天和<span>辣条</span>更配
    </p>
    <a href="https://www.baidu.com">百度</a>
</body>
</html>

2.5 元素溢出

什么是css元素溢出
当子元素(标签)的尺寸超过父元素(标签)的尺寸时，此时需要设置父元素显示溢出的子元素的方式，设置的方法是通过overflow属性来完成。

overflow的设置项

visible 默认值,显示子标签溢出部分
hidden 隐藏子标签溢出部分。
auto 如果子标签溢出，则可以滚动查看其余的内容。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box1{
            width: 100px;
            height: 100px;
            background: red;
            /* 设置元素溢出需要在父标签的选择器上设置 */
            /* 超出部分隐藏 */
            /* overflow: hidden; */
            /* 超出部分显示 */
            /* overflow:visible; */
            /* 超出部分滚动显示 */
            overflow: auto;
        }
        .box2{
            width: 200px;
            height: 50px;
            background: green;
        }
    </style>
</head>
<body>
    <div class="box1">
        <div class="box2">

        </div>
    </div>
</body>
</html>

2.6 css显示特征

display属性的使用
display属性是用来设置元素的类型及隐藏的，常用的属性有:
●none玩素隐藏且不占位置
●inline元素以行内元素显示.
●block元素以块元素显示

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div {
            width: 100px;
            height: 100px;
            background: red;
            /* 把该标签隐藏并且不占用位置 */
            display: none;
        }
        .box{
            background: green;
            /* 设置div可以和其它元素在一行显示，以后就不能设置宽高
            以后既设置div的宽高有设置在一行显示， 可以通过浮动来完成*/
            display: inline;
        }
        a{
            /* 设置标签自己单独占用一行，不和其他标签一起显示*/
            display: block;
        }
    </style>
</head>
<body>
    <div>
        哈哈
    </div>
    <div class="box">
        呵呵
    </div>
    <a href="https://www.baidu.com">百度</a>
</body>
</html>

2.7 盒子模型

盒子模型的介绍
所谓的盒子模型就是把HTML页面的元素看作-个矩形盒子上矩形盒子是由内容(content)、内边距
(padding)、边框(border)、外边距(margin)四部分组成

盒子模型相关样式属性

盒子的内容宽度(width)，注意:不是盒子的宽度
盒子的内容高度(height)，注意:不是盒子的高度
盒子的边框(border)
盒子内的内容和边框之间的间距(padding)

盒子的真实尺寸
盒子的width和height值固定时，如果盒子增加border和padding，盒子整体的尺寸会变大，所以盒子的真实尺寸为:
●盒子宽度= width + padding左有+ border左右
●盒子高度= height + padding上下+ border上下
小结
●盒子模型的5个主要样式属性
。width: 内容的宽度(不是盒子的宽度)
。height :内容的高度(不是盒子的高度)
。padding :内边距。
。border:边框。
。margin :外边距
●盒子的真实尺寸只会受到宽度、高度、边框、内边距四个属性的影响，不会受到外边距属性的影响。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box1{
            width: 200px;
            height: 200px;
            background: green;
            border: 5px solid blue;
            padding-top: 10px;
        }
        
        .box2{
            width: 100px;
            height: 150px;
            background: red;
        }
    </style>
</head>
<body>
    <!-- 1.内容大小(width, height)
        2.边框大小(border)
        3.内边距大小( padding)
        4.外边距大小(margin) -->
        <div class="box1">
            <div class="box2"></div>
        </div>
</body>
</html>

第三章 JavaScript

3.1 JavaScript的介绍

JavaScript的定义
JavaScript是运行在浏览器端的脚步语言,是由浏览器解释执行的,简称js,它能够让网页和用户有交互功能，增加良好的用户体验效果。

前端开发三大块

1、HTML:负责网页结构

2、CSS :负责网页样式

3、JavaScript:负责网页行为，比如:网页与用户的交互效果

小结
●JavaScript是运行在浏览器端的脚本语言，它的作用就是负责网页和用户的交互效果。

3.2 JavaScript的使用方式

行内式

内嵌式

外链式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- 内嵌式 -->
    <script>alert('我是内嵌式的js文件')</script>
    <!-- 外链式 -->
    <script type="text/javascript" src='index.js'></script>
</head>
<body>
    <!-- 行内式 -->
    <input type="button" value="按钮" onclick="alert('你点我了')">
</body>
</html>

3.3 变量和数据类型

定义变量
JavaScript是一种弱类型语言，也就是说不需要指定变量的类型，JavaScript的变量类型由它的值来决定，定义变量需要用关键字’var’, 一条JavaScript语句应该以“;"结尾
定义变量的语法格式:
var变量名=值;

JavaScript注释

单行注释//

多行注释/**/

数据类型
js中有六种数据类型，包括五种基本数据类型和一种复杂数据类型(object)。
5种基本数据类型:
1、number数字类型I
2、string 字符串类型
3、boolean布尔类型true或false
4、undefined undefined类型，变量声明未初始化，它的值就是undefined
5、null null类型，表示空对象，如果定义的变量将来准备保存对象，可以将变量初始化为null,在页面上获取不到对象，返回的值就是null
1种复合类型:
object后面学习的JavaScript对象属于复合类型

变量命名规范
1、区分大小写
2、第一个字符必须是字母、下划线(_ )或者美元符号($)
3、其他字符可以是字母、下划线、美元符或数字

匈牙利命名风格
对象o Object比如: oDiv
数组a Array比如: altems
字符串s String比如: sUserName
整数i Integer比如: iltemCount
布尔值b Boolean比如: blsComplete
浮点数fFloat比如: fPrice
函数fn Function比如: fnHandler

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        //定义数字类型的变量
        var iNum=1;
        var fNum=2.5;
        var sName='李四'
        var oPerson={
            name:'张三',
            age:'18'
        }
        alert(typeof(oPerson))
        alert(typeof(iNum))
        alert(sName)
        // 将值输出到窗口
        console.log(oPerson.name)
    </script>
</head>
<body>
    
</body>
</html>

3.4 函数定义和调用

函数定义
函数就是可以重复使用的代码块，使用关键字function定义函数。

函数调用
函数调用就是函数名加小括号，比如:函数名(参数[参数可选])

定义有参数有返回值的函数
定义函数时，函数如果有参数,参数放到小括号里面，函数如果有返回值，返回值通过return关键字来返回

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
       function fnShow(){
            alert('我是一个无参数无返回值的函数')
       }
       fnShow();
       function fnSum(iNum1,iNum2){
           var iResult=iNum1+iNum2;
           return iResult;
       }
       alert(fnSum(1,2))
    </script>
</head>
<body>
    
</body>
</html>

3.5 变量作用域

**局部变量：**在函数内调用

**全局变量：**在函数外调用

3.6 条件语句

条件语句语法

if语句-只有当指定条件为true时，使用该语句来执行代码
if…else 语句-当条件为true时执行代码，当条件为false时执行其他代码
if…else if…ese语句-使用该语句来判断多条件，执行条件成立的语句
==表示值相等，===表示值和类型相等

3.7 获取标签元素

获取标签元素
可以使用内置对象document上的getElementByld方法来获取页面上设置了id属性的标签元素，获取到的是一个html对象，然后将它赋值给-一个变量，比如:

<script type="text/javascript">
var oDiv = document . getElementById('div1');
alert(oDiv);
</script>
<div id="div1">这是-个div元素</div>

**说明:**上面的代码，如果把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>Document</title>
    <script>

        // js的内置对象，html的文档对象
        // 如果获取的对象是null，表示标签没取成功
        // 页面标签和数据加载完成以后会出发onload事件
        window.onload=function(){
        var oP=document.getElementById("p1");
        alert(oP);
        };
        
    </script>
</head>
<body>
    <p id="p1">我是一个段落标签</p>
</body>
</html>

3.8 操作标签元素属性

属性的操作
首先获取的页面标签元素，然后就可以对页面标签元素的属性进行操作，属性的操作包括:
●属性的读取
●属性的设置
属性名在js中的写法

html的属性和js里面属性大多数写法一样，但是“class"属性写成"className"
“style” 属性里面的属性，有横杠的改成驼峰式，比如: “font-size”，改成”style.fontSize"

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .btnstyle{
            background: blue;
        }
    </style>
    <script>
        window.onload=function(){
            var oBtn=document.getElementById("btn1")
            alert(oBtn.type);
            alert(oBtn.value);
            // 设置标签和样式的属性
            oBtn.name="username";
            // oBtn.style.background="red";
            oBtn.className="btnstyle";
            oBtn.style.fontSize='30px'
        }
    </script>
</head>
<body>
    <input type="button" value="按钮" id="btn1">
</body>
</html>

innerHTML
innerHTML可以读取或者设置标签包裹的内容

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        window.onload=function(){
            var oDiv=document.getElementById("div1")
            // 获取标签内容
            alert(oDiv.innerHTML);
            // 设置标签内容
            oDiv.innerHTML="<a href='https://www.baidu.com'>百度</a>"
        }
    </script>
</head>
<body>
    <div id="div1">
        加油学习！
    </div>
</body>
</html>

3.9 数组及操作方法

数组的介绍
数组就是一组数据的集合，javascript中，数组里面的数据可以是不同类型的数据，好比python里面的列表。

数组的操作

1.定义：var alist=new Array(1,2,3);、var alist=[1,2,3,'ab]

2.获取数组长度：alist.length

3.取值：alist[0]

4.添加和删除最后一个数据：alist.push(5)、alist.pop()

5.根据下标添加和删除元素
arr.splice(start,num,element1 …emeentN)
参数解析:

start:必需，开始删除的索引。
nun:可选，删除数组元素的个数
elementN: 可选，在start索引位置要插入的新元素。

<script>
    var colors = ["red", "green", "blue"];
    colors.splice(0, 1); //删除第一项
    alert(colors); //green,blue
    colors.splice(1, 0, "yellow", "orange"); //从第一个索引位 置插入两项数据
    alert(colors); //green,yellow, organge , blue
    colors.splice(1, 1, "red", "purple"); //删除一 项，插入两项数据
    alert(colors); //green, red, purple , orange ,blue

</script>

3.10 循环语句

循环语句的介绍
循环语句就是让一部分代码重复执行，javascript中常用的循环语句有:
●for
●while
●do-while

var array = [1，4, 5];
for(var index = 0; index < array. length; index++){
result = array[index];
alert(result);

3.11 字符串拼接

字符串拼接
字符串拼接使用: "+"运算符

3.12 定时器

定时器的介绍
定时器就是在一段特定的时间后执行某段程序代码。
定时器的使用
js定时器有两种创建方式:

setTimeout(func[, delay, param1, param2, … ])以指定的时间间隔(以毫秒计)调用-次函数的定时
setInteral(func[, delay, param1, param2, … ])以指定的时间间隔(以毫秒计)重复调用一个函数的定时器
setTimeout函数的参数说明:
●第一个参数func，表示定时器要执行的函数名
●第二个参数delay,表示时间间隔，默认是0，单位是毫秒
●第三个参数param1,表示定时器执行函数的第一个参数，以此类推传入多个执行函数对应的参数。

<script>
function hello(){
alert('hello');
}
//执行一次函数的定时器
//返回值表示创建定时器返回的id，通俗理解就是创建的第几个定时器
var tid=setTimeout(hello，500);
</script>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        function fnShowInfo(name,age){
            alert("ok"+name+age);
        }
        function fnStop(){
            // alert(tid);
            clearInterval(tid);
        }
        var tid=setInterval(fnShowInfo,3000,'李四',22);
    </script>
</head>
<body>
    <input type="button" value="停止" onclick="fnStop()">
</body>
</html>

第四章 jQuery

4.1 jquery 的介绍和使用

jQuery的定义
jQuery是对JavaScript的封装，它是免费、开源的JavaScript函数库，jQuery 极大地简化了JavaScript 编程。

jQuery的作用
jQuery和JavaScript它们的作用-样，都是负责网页行为操作，增加网页和用户的交互效果的，只不过jQuery简化了JavaScript编程， jQuery实现交互效果更简单。

**jQuery的优点 **
●jQuery兼容了现在主流的浏览器，增加了程序员的开发效率。.
●jQuery简化了JavaScript 编程，代码编写更加简单

jQuery的引入

<script src="js/jquery-1.12.4.min.js"></script>

jQuery的入口函数
我们知道使用js获取标签元素，需要页面加载完成以后再获取，我们通过给onload事件属性设置了一个函数来获取标签元素，而jquery提供了ready函数来解决这个问题，保证获取标签元素没有问题，它的速度比原生的window.onload更快。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- 导入jqury对应的js文件 -->
    <script src='jquery-1.12.4.min.js'></script>
    <!-- 使用jquery代码需要重新开一个script标签 -->
    <script>
        window.onload = function () {
            // 当前页面的标签和标签使用的资源都加载完成，onload才会被触发
            var oDiv = document.getElementById("div1");
            alert(oDiv);
        }
        // $符号就是jquery的象征
        // $是一个函数函数名叫$
        $(document).ready(function () {
            // 获取标签和css样式匹配标签的规则一样
            // 以后使用jquery，变量名都要以$开头
            var $div = $("#div1");
            alert($div);
        });
        // j query的简写方式
        $(function () {
            var $div = $("#div1");
            alert($div)
        })

        // ready 等待页面标签加载完成以后就执行ready事件， 不会等待资源数据加载完成
    </script>
</head>

<body>
    <div id="div1"> 哈哈</div>
</body>

</html>

4.2 jquery选择器

jQuery选择器的介绍
jquery选择器就是快速选择标签元素，获取标签的，选择规则和css样式- -样。

jQuery选择器的种类
1.标签选择器
2.类选择器
3.id选择器
4.层级选择器
5.属性选择器

$('#myId') //选择 id为myId的标签
$('.myClass') // 选择class为myClass的标签
$('1i') /选择所有的1i标签
$('#ul1 li span') //选择 id为u11标签下的所有1i标签下的span标签
$('input[name=first]') //选择name属性等于first的input标签

说明:
可以使用length属性来判断标签是否选择成功,如果length大于0表示选择成功，否则选择失败。

$(function(){
result = $("div").1ength;
alert (result);
});<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- 导入jqury对应的js文件 -->
    <script src='jquery-1.12.4.min.js'></script>
    <!-- 使用jquery代码需要重新开一个script标签 -->
    <script>
        $(function(){
            // 获取标签样式
            var $p=$("p");
            alert($p.length);
            // 类选择器
            var $div=$(".div1");
            alert($div.length)
            // id选择器
            var $div1=$("#box");
            alert($div1.length);
            // 层级选择器
            var h1=$("div h1");
            alert(h1.length);
        });
            
    </script>
</head>

<body>
    <p>hello</p>
    <p>hello</p>
    <div class="div1">哈哈</div>
    <div id="box">world</div>
    <div>
        <h1>呵呵</h1>
    </div>
</body>

</html>

4.3 选择集过滤

选择集过滤的介绍
选择集过滤就是在选择标签的集合里面过滤自己需要的标签I
选择集过滤的操作
●has(选择器名称)方法，表示选取包含指定选择器的标签
●eq(索引)方法，表示选取指定索引的标签

<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>

4.4 选择集转移

选择集转移介绍
选择集转移就是以选择的标签为参照，然后获取转移后的标签
选择集转移操作
● $KaTeX parse error: Expected 'EOF', got '#' at position 3: ('#̲box').prev(); 表\dots$ (’#box’).prevAII(); 表示选择id是box元素的.上面所有的同级元素
● $KaTeX parse error: Expected 'EOF', got '#' at position 3: ('#̲box').next(); 表\dots$ (’#box).nextAII(); 表示选择id是box元素的下面所有的同级元素
● $KaTeX parse error: Expected 'EOF', got '#' at position 3: ('#̲box').parent();\dots$ (’#box).children(); 表示选择id是box元素的所有子元素
● $KaTeX parse error: Expected 'EOF', got '#' at position 3: ('#̲box").siblings(\dots$ (’#box*).find(’ .myClass’);表示选择id是box元素的class等于myClass的元素

4.5 获取和设置元素内容

html方法的使用
jquery中的html方法可以获取和设置标签的html内容
示例代码:

<script>
    $(function () {
        var $div = $("#div1");
        //获取标签 的html内容
        var result = $div.html();
        alert(result);
        //设置标签的html内容 ，之前的内容会清除
        $div.html("<span style=' color:red'>你好</span>");
        //追加htm1内容
        $div.append("<span style='color:red'>你好</span>");
    });
</script>

4.6 获取和设置元素属性

prop方法的使用
之前使用css方法可以给标签设置样式属性，那么设置标签的其它属性可以使用prop方法了。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src='jquery-1.12.4.min.js'></script>
    <script>
        $(function () {
            // 获取标签
            var $p = $("p");
            var $px = $p.css("font-size");
            var $text=$("#txt1");
            alert($px);
            // 设置样式属性
            $p.css({ "font-size": "30px", "background": "green" });
            //除了样式属性的相关操作使用Css方法，其它属性的操作都是prop方法
            var $name=$text.prop("name");
            alert($name);
            // 设置属性
            $text.prop({"value":"张三","class":"tname"});
        })
    </script>
</head>

<body>
    <p>这是一个段落标签</p>
    <input type="text"  name="usename" id="txt1">
</body>

</html>

4.7 jQuery事件

常用事件
●click0) 鼠标单击
●blur(元素失去焦点
●focus0元素获得焦点
●mouseover( 鼠标进入(进入子元素也触发)
●mouseout(鼠标离开(离开子元素也触发)
●ready() DOM加载完成

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="jquery-1.12.4.min.js"></script>
    <script>
        $(function () {
            // 获取ul里面所有的li标签
            var $lis = $("ul li");
            // 获取button标签
            var $btn = $("#btn1");
            var $text = $("#text1");
            var $div = $("div");
            $lis.click(function () {
                // 获取当前点击的标签对象
                // 原生js写法
                // this.style.color='red';
                // jquery的写法
                $(this).css({ "color": "red" });
                // 获取点击标签的索引
                alert($(this).index());
            });

            $btn.click(function () {
                // 获取文本框的内容
                alert($text.val());
            });

            // 给text文本框添加获取焦点事件
            $text.focus(function () {
                $(this).css({ "background": "red" });
            })

            // 失去焦点事件
            $text.blur(function () {
                $(this).css({ "background": "white" });
            });

            // 给div设置鼠标悬停事件
            $div.mouseover(function () {
                $(this).css({ "background": "green" });
            });

            $div.mouseout(function () {
                $(this).css({ "background": "white" });
            });

        });
    </script>
</head>

<body>
    <div>
        <ul>
            <li>苹果</li>
            <li>鸭梨</li>
            <li>香蕉</li>
        </ul>
        <input type="text" id='text1'>
        <input type="button" id="btn1" value="按钮">
    </div>
</body>

</html>

4.8 事件代理

事件代理介绍
事件代理就是利用事件冒泡的原理(事件冒泡就是事件会向它的父级一级一级传递),把事件加到父级上，通过判断事件来源，执行相应的子元素的操作，事件代理首先可以极大减少事件绑定次数，提高性能;其次可以让新加入的子元素也可以拥有相同的操作。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="jquery-1.12.4.min.js"></script>
    <script>
        // 事件冒泡就是事件会一级一级往上（父控件）传递
        $(function () {
            var $btn = $("#btn1");
            var $div = $("div");
            $btn.click(function () {
                alert("我是按钮");
                // 取消事件冒泡，就是不让事件向父级控件传递
                // 默认事件会进行冒泡
                return false;
            });
            $div.click(function () {
                alert("我是div");
            });

            // 通过事件代理，让父控件代理子控件的事件，然后执行子控件的相关操作
            var $ul=$("div ul");
            // li是绑定子控件名称（可以代理不同子控件的事件，在li后面加上用逗号隔开即可），click是事件类型，function是执行函数
            $ul.delegate("li","click",function(){
                $(this).css({"color":"red"});
            })
        });


    </script>
</head>

<body>
    <div>
        <p id="p1">哈哈</p>
        <input type="button" value="按钮" id="btn1">
        <ul>
            <li>哈哈</li>
            <li>呵呵</li>
            <li>嘿嘿</li>
        </ul>
    </div>
</body>

</html>

4.9 JavaScript对象

JavaScript对象的介绍
JavaScript中的所有事物都是对象:字符串、数值、数组、函数等都可以认为是对象，此外，JavaScript允许自定义对象，对象可以拥有属性和方法。

JavaScript创建对象操作
创建自定义javascript对象有两种方式:
●通过顶级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>

说明
调用属性和方法的操作都是通过点语法的方式来完成，对象的创建推荐使用字面量方式,因为更加简单。

4.10 json

json的介绍
json是JavaScript Object Notation的首字母缩写，翻译过来就是javascrip对象表示法，这里说的json就是类似于javascript对象的字符串，它同时是一种数据格式，目前这种数据格式比较流行，逐渐替换掉了传统的xml数据格式。

json的格式
json有两种格式:
1.对象格式
2.数组格式
对象格式:
对象格式的json数据，使用一对大括号({)，大括号里面放入key:value形式的键值对，多个键值对使用逗号分隔。

对象格式的json数据

{
"name": "tom"，
"age":18
}

格式说明
json中的(key)属性名称和字符串值需要用双引号引起来，用单引号或者不用引号会导致读取数据错误。
数组格式
数组格式的json数据，使用-对中括号(D)，中括号里面的数据使用逗号分隔
数组格式的json数据:["tom" ,18,”progr ammer" ]

json数据转换成JavaScript对象
json本质上是字符串，如果在js中操作json数据，可以将json字符串转化为JavaScript对象。
示例代码:

var sJson = '{"name":"tom","age":18}' ;
var oPerson = JSON. parse(sJson);
//操作属性
alert(oPerson.name);
alert(oPerson.age);

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- json:就是类似于JavaScript对象的字符串，本质上就是一个字符串，同时还一数据格式
    json的数据格式有两种：
    1.对象格式：最外层的表现形式是一对大括号，key名和字符串数据都要使用双引号
    2.数组格式：最外出的表现形式是一对中括号，每项数据之间使用逗号进行分隔
     -->
    <script>
        var sJson1 = '{"name":"李四","age":20}';
        //  把json数据转成Javascript对象
        var oPerson = JSON.parse(sJson1);
        console.log(oPerson);
        console.log(oPerson.name + oPerson.age);

        var sJson2 = '[{"name" :"李四","age":20}, {"name":"李三", "age":21}]';
        var aArray = JSON.parse(sJson2);
        console.log(aArray);
        //通过下标获取指定j s对象，然后通过j s对象获取name属性
        var oPerson = aArray[1];
        console.log(oPerson.name);

    </script>
</head>

<body>

</body>

</html>

4.11 ajax

ajax的介绍
ajax是Asynchronous JavaScript and XML的简写，ajax一个前后台配合的技术，它可以让javascript发送异步的http请求，与后台通信进行数据的获取，ajax 最大的优点是实现局部刷新，ajax可以发送http请求，当获取到后台数据的时候更新页面显示数据实现局部刷新，在这里大家只需要记住，当前端页面想和后台服务器进行数据交互就可以使用ajax了。这里提示一下大家,在html页面使用ajax需要在web服务器环境下运行, 一般向自己的web服务器发送ajax请求。

ajax的使用
jquery将它封装成了一个方法$.ajax()，我们可以直接用这个方法来执行ajax请求。

ajax方法的参数说明

url请求地址
type 请求方式，默认是’GET’，常用的还有’POST’
dataType 设置返回的数据格式，常用的是’json’格式
data设置发送给服务器的数据，没有参数不需要设置
success 设置请求成功后的回调函数
error 设置请求失败后的回调函数
async 设置是否异步，默认值是’true’，表示异步，一般不用写
同步和异步说明

同步是一个ajax请求完成另外一个才可以请求，需要等待上一个ajax请求完成，好比线程同步。
异步是多个ajax同时请求，不需要等待其它ajax请求完成，好比线程异步。

ajax的简写方式

$. a j a x 按照请求方式可以简写成$ .get或者$.post方式

ajax发送get请求

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="jquery-1.12.4.min.js"></script>
    <script>
        // 向web服务器发送ajax请求，本质上是一个http协议请求
        $.ajax({
            // 请求的资源地址，不指定ip地址和端口号表示请求的是自己的服务器资源数据
            url: "data.json",
            // 请求方式
            type: "GET",
            // 指定对服务器数据的解析格式
            dataType: "JSON",
            // data：表示发送给web服务器的参数
            // 请求成功执行的参数
            success: function (data) {
                console.log(data.name);
                // 数据请求回来以后可以绑定给htm1中的某个标签控件，实现局部刷新
            },
            error: function () {
                alert("请求失败，请稍后再试!");
            },
            // async 设置是否异步，默认值是'true'，表示异步，一般不用写
            async: true
        });

        //发送get方式的ajax请求的简写方式
        //1.请求的地址
        //2.请求传给web服务器的参数
        //3.请求成功的回调函数
        //4.返回数据的解析方式
        如果按照j son格式进行数据，js这块能得到一个JavaScript
        $.get("data. json", { "name": "ls" }, function (data) {
            console.log(data.name);
        }, "JSON").error(function () {
            alert("网络异常，请求失败");
        });

    </script>
</head>

<body>

</body>

</html>

落日晚风愿能与你共赏

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
前端开发基础

文章目录第一章 html1.1 html介绍1.2 常用的html标签1.3 列表标签1.4 表格标签1.5 表单标签1.6 表单提交第二章 CSS2.1 css介绍2.2 css引入方式2.3 css选择器2.4 css属性2.5 元素溢出2.6 css显示特征2.7 盒子模型第三章 JavaScript3.1 JavaScript的介绍3.2 JavaScript的使用方式3.3 变量和数据类型3.4 函数定义和调用3.5 变量作用域3.6 条件语句3.7 获取标签元素3.8 操作标签元素属性3.9 数
复制链接

扫一扫