前端知识
jquery-1.8.3.min.js.zip (32.6 KB)
前端是指与用户直接交互的那一部分软件系统或网站。它主要负责展示和呈现用户界面,与用户进行交互,并将用户的操作传递给后台进行处理。
前端开发中基础三大件:
-
HTML(超文本标记语言):用于定义网页结构和内容。
-
CSS(层叠样式表):用于设置界面的样式、布局和外观。
-
JavaScript:一种高级编程语言,用于实现网页的交互功能和动态效果。
前端开发的目标是创建一个直观、吸引人且易于使用的用户界面。开发人员需要考虑到用户体验、界面设计、页面加载速度和跨浏览器的兼容性等方面的因素。
同时,前端开发也与后端开发密切相关,前端和后端之间需要进行数据交互和通信。因此,前端开发人员通常需要与后端开发人员进行协作,以确保前后端的一致性和顺畅的用户体验。
HTML
超文本标记语言(HyperText Markup Language,简称:HTML)是一种用于创建网页的标准标记语言。
HTML文档后缀名
HTML页面文件以 .html
做为文件后缀,系统自动解析由浏览器打开执行。
HTML 文档基本结构
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>首页</title>
</head>
<body>
<h1>我的第一个标题</h1>
<p>我的第一个段落。</p>
</body>
</html>
<!DOCTYPE html>
: 文档声明, 用来指定页面所使用的html的版本, 这里声明的是一个html5的文档。
<html>...</html>
: html
标签是 HTML 文档的开始和结束标签。网页从 <html>
这里开始,到 </html>
结束。
<head>...</head>
: head
标签用于定义文档的头部信息,可以对页面进行设置标题、编码格式以及引入css和js文件等。
<body>...</body>
: body
标签用于编写网页上显示的内容。
HTML 标签
HTML 不是一种编程语言,而是一种标记语言,HTML 标记标签通常被称为 HTML 标签 (HTML tag),HTML 标签是由尖括号包围的关键词。
按语法形式划分,标签可以分为以下两种形式:
- 双标签:标签是成对出现的,标签对中的第一个标签是开始标签,第二个标签是结束标签,开始和结束标签也被称为开放标签和闭合标签。
- 单标签:单标签是存在开始标签,没有结束标签。
按布局效果划分,标签还可以分为以下两种形式:
- 行标签:多个标签元素不会换行。
- 块标签:每个标签元素会独占一行。
标签不区分大小写,但是推荐使用小写。
HTML 常用标签
-
<br>
: 换行标签 -
<hr>
: 分割线标签 -
<img>
: 图片标签,用于展示图片 -
<a></a>
: 超链接标签,用来插入一个链接地址 -
<div></div>
: 用来布局页面结构 -
<h1></h1> ~ <h6></h6>
: 标题标签,共有6级。 -
<p></p>
: 段落标签,用来显示文字段落 -
<ul></ul>
: 无序列表标签 -
<ol></ol>
: 有序列表标签 -
<li></li>
: 列表项标签,无序列表和有序列表都使用li
标签做为列表项标签 -
<table></table>
: 表格标签,用来定义一个表格 -
<tr></tr>
: 表格行标签,需要配合table
标签使用,用来定义表格中的行 -
<th></th>
: 表头标签,需要配合tr
标签使用,用来定义表格中的表头元素 -
<td></td>
: 单元格标签,需要配合tr
标签使用,用来定义表格中的单元格元素 -
<form></form>
: 表单标签,用于收集页面中用户的输入数据,并提交到服务器 -
<input></input>
: 表单元素标签,用来定义输入项,通过type
属性控制元素类型-
type="text"
定义单行文本输入框 -
type="password"
定义密码输入框 -
type="radio"
定义单选框 -
type="checkbox"
定义复选框 -
type="file"
定义上传文件 -
type="submit"
定义提交按钮 -
type="reset"
定义重置按钮 -
type="button"
定义一个普通按钮
-
-
<textarea></textarea>
: 多行文本输入框 -
<select></select>
: 下拉标签 -
<option></option>
: 下拉项标签,需配合select
标签使用 -
<span></span>
: 范围标签,一般用来包含一段需要特殊处理的文字时使用。
CSS
CSS (Cascading Style Sheets,层叠样式表),是一种用来为结构化文档(如 HTML 文档或 XML 应用)添加样式(字体、间距和颜色等)的计算机语言。
CSS 文件扩展名为 .css
。
CSS 引入方式
- 行内式 :通过
style
属性,直接在标签上为标签设置样式 - 内嵌式(内部样式):通过
style
标签批量编写样式,一般在head
标签中编写 - 外链式 :样式代码编写在 CSS 文件中,在页面文件的
head
标签中通过<link>
标签引入样式文件。
CSS 样式格式规则
选择器{
样式规则属性名1:属性值1;
样式规则属性名2:属性值2;
样式规则属性名3:属性值3;
}
CSS 选择器
需要使用 CSS 为 HTML 页面文件中的元素添加样式,需要通过 CSS 选择器,选中页面中的元素,然后才能让样式作用在元素上。
常用选择器如下:
- 标签选择器
使用 HTML 标签名
做为选择器选定元素,会选中页面中所有指定标签的元素并设定样式
CSS:
p{
color: red;
}
HTML:
<p>文本1</p>
<div>文本2</div>
<p>文本3</p>
- 类选择器
类选择器需要结合标签的 class
属性使用,通过 class
属性为标签指定类名,使用 .类名
形式选择所有页面中具有指定类名的元素。
CSS:
.text{
color: red;
}
HTML:
<p class="text">文本1</p>
<div class="text">文本2</div>
<p>文本3</p>
- id选择器
id选择器需要结合标签的 id
属性使用,通过 id
属性为标签指定 id 名,使用 #id名
形式选择具有指定 id 名的元素。
理论上,一个 id 名在页面中是唯一存在的。
CSS:
#text{
color:red;
}
HTML:
<p id="text">文本1</p>
<p>文本2</p>
- 层级选择器(后代选择器)
根据层级关系选择后代标签,以 选择器1 选择器2
开头,主要应用在标签嵌套的结构中,减少命名,选择器可以使用任意形式的选择器。
层级关系不止父子关系,祖孙关系也成立。
div p span{
color: red;
}
HTML
<p>文本<span>一</span></p>
<div>
<p>文本<span>二</span></p>
</div>
<div>文本<span>三</span></div>
- 组选择器
组选择器为多个任意选择器的组合,多个选择器之间以 ,
分割开, 组中所有选择器对应的元素都会被选中。一般用来设置公共的样式。
CSS:
p, div, h1{
color:red;
}
HTML:
<h1>A</h1>
<div>B</div>
<p>C</p>
<p>D</p>
- 伪类选择器
用于向选择器添加特殊的效果, 以 :
分割开, 当用户和网站交互的时候改变显示效果可以使用伪类选择器
<style type="text/css">
.box1{width:100px;height:100px;background:gold;}
.box1:hover{width:300px;}
</style>
<div class="box1">这是一个div标签</div>
CSS 样式属性
- 布局类属性
-
width
: 设置元素宽度 -
height
: 设置元素高度 -
background
: 设置元素背景色和背景图片,设置背景图片需要使用url()
函数 -
border
: 设置边框样式 -
margin
: 设置外边距 -
padding
: 设置内边距 -
display
: 设置元素布局状态等。
- 文本类属性
-
color
: 设置字体颜色 -
font-size
: 设置字体大小 -
font-weight
: 设置字体加粗 -
line-height
: 设置行高 -
text-align
: 设置平水对齐方式 -
text-decoration
: 设置文字下划线 -
text-indent
: 设置文字首行缩进
JavaScript
JavaScript是运行在浏览器端的脚本语言, 是由浏览器解释执行的, 简称 JS ,文件名以 .js
做为后缀。
同为解释型的脚本语言 Python,两者的语法形式上,有很多相似之处。
JS 引入方式
- 行内式:直接在标签上编写 JS 代码,一般用于事件处理。
- 内嵌式:通过
<script></script>
来编写 JS 代码, 可在页面的任意位置编写,一般在head
标签中出现。 - 外链式:通过
<script src="js文件路径"></script>
引入 JS 文件中的代码,当使用script
标签引入 JS 文件时,不可以在代码块中再编写 JS 代码。
JS 语法
-
注释
- 单行注释: 以
//
开头 - 多行注释: 以
/* */
包裹的内容
- 单行注释: 以
-
定义变量
使用 var
关键字定义变量
var n = 100;
var s = "hello";
- 定义函数
使用 function
关键字定义函数,函数体使用 {}
包裹。
function show(){
consolg.log("Show Run")
}
- 运算符
- 关系运算符:
==
等于,只比较数值,不比较类型;===
全等于,即比较数值,也比较类型。 - 逻辑运算符:
&&
逻辑与,||
逻辑或,!
逻辑非
- 条件语句
// 方式一
if(条件){
}
// 方式二
if(条件){
}else{
}
// 方式三
if(条件1){
}else if(条件2){
}else if(条件3){
}
...
else{
}
- 循环语句
// for
for(var i=0;i<10;i++){
}
// while
var i = 0
while (i < 10){
i++
}
// do-while
var i = 0
do{
i++
}while(n < 10);
- 字符串及操作
- 字符串和数字类型或字符串类型的数据,直接可以使用
+
进行连接 -
字符串.length
: 获取字符串长度 -
字符串.substring()
: 提取字符串中介于两个指定下标之间的字符。 -
字符串.lastIndexOf()
: 从后向前搜索字符串,并从起始位置(0)开始计算返回字符串最后出现的位置。
- 数组与操作
数组定义与 Python 列表定义完全相同。
-
数组.length
可获取数组元素个数 -
数组.push(值)
可向数组中添加数据 -
数组.pop()
从数组中删除最后一个元素 -
数组.splice(start,num, ele1,...,eleN)
向数组中插入,删除,替换数据。
- 对象
JS 中的对象定义,和 Python 中的字典完全相同,对象的属性名,即 key
不需要使用引号包裹。
var oObj = {
name:"Tom",
age:88
}
- 定时器
js 定时器有两种创建方式:
- setTimeout(func[, delay, param1, param2, …]) :以指定的时间间隔(以毫秒计)调用一次函数的定时器
- setInterval(func[, delay, param1, param2, …]) :以指定的时间间隔(以毫秒计)重复调用一个函数的定时器
参数说明:
- 第一个参数 func , 表示定时器要执行的函数名
- 第二个参数 delay, 表示时间间隔,默认是0,单位是毫秒
- 第三个参数 param1, 表示定时器执行函数的第一个参数,一次类推传入多个执行函数对应的参数。
js 清除定时器分别使用:
- clearTimeout(timeoutID) 清除只执行一次的定时器(setTimeout函数)
- clearInterval(timeoutID) 清除反复执行的定时器(setInterval函数)
JQuery
jQuery是对JavaScript的封装,它是免费、开源的JavaScript函数库,jQuery 极大地简化了 JavaScript 编程,jQuery实现交互效果更简单。
JQuery 引入
-
本地引入
<script src="js/jquery-1.8.3.min.js"></script>
-
在线引入
// 微软CDN
<script src="https://ajax.aspnetcdn.com/ajax/jquery/jquery-1.9.0.min.js"></script>
// Google CDN:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
// 百度 CDN:
<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
// 新浪 CDN:
<script src="https://lib.sinaapp.com/js/jquery/2.0.2/jquery-2.0.2.min.js"></script>
JQuery 入口
为了方便通过 JQuery 操作 HTML 中的元素,需要在页面加载完成后,再执行 JQuery 代码,有两种方式实现。
- 将
<script></script>
标签中的 JQuery 代码 放到 HTML 文档最后。 - 在
head
标签中的<script></script>
中的代码中使用 JQuery 提供的ready
事件,等待加载完页面再执行 JS 代码
<head>
<script type="text/javascript">
/*
// ready 事件
$(document).ready(function(){
var $div = $('#dd');
alert('jquery获取的div:' + $div);
});
*/
// 上面ready的写法可以简写成下面的形式:
$(function(){
var $div = $('#dd');
alert('jquery获取的div:' + $div);
});
</script>
</head>
<body>
<div id="dd">A</div>
</body>
选择器
JQuery 可以直接使用 CSS 的选择器语法选中标签,进行操作。
选择元素时,选择器需要使用 $("选择器")
形式使用。
var ele = $(".dd");
alert(ele)
<div class="dd">A</div>
获取和设置元素内容
-
text()
: 获取和设置元素的文本,不能解析 HTML 代码 -
html()
: 获取的设置元素的 HTML 内容, 可以解析 HTML 代码 -
append()
: 向元素中追加 HTML 内容
<script>
$(function(){
var $div = $("#dd");
// 获取标签的html内容
var result = $div.html();
alert(result);
result = $div.text();
alert(result);
// 设置标签的html内容,之前的内容会清除
$div.html("<span style='color:red'>你好</span>");
// 追加html内容
$div.append("<span style='color:red'>你好</span>");
});
</script>
<div id="dd">
<p>hello</p>
</div>
获取和设置元素属性
JQuery 中可以使用 元素.prop()
方法获取和设置元素的属性。
- 参数是字符串属性名,则为获取属性值,
$a.prop("id");
- 参数是 JS 对象,则是设置属性值,
$a.prop({"href":"http://www.baidu.com","title":'这是去到百度的链接',"class":"a01"});
- 可以使用
val()
方法,对input
标签进行获取和设置值。
<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">
JQuery 删除元素
-
remove()
: 删除被选元素(及其子元素) -
empty()
: 从被选元素中删除子元素
AJAX 发起网络请求
AJAX = 异步 JavaScript 和 XML(Asynchronous JavaScript and XML)。
简单的说,在不重载整个网页的情况下,AJAX 通过后台加载数据,并在网页上进行显示,实现页面的局部数据刷新。
- 发送 GET 方式的请求
格式:$.get( URL [, data ] [, callback ] [, dataType ] )
参数:
-
URL
:发送请求的 URL字符串。 -
data
:可选的,发送给服务器的字符串或 key/value 键值对。 -
callback
:可选的,请求成功后执行的回调函数。 -
dataType
:可选的,从服务器返回的数据类型。默认:智能猜测(可以是xml, json, script, 或 html)。
$.get("/login", {"username": "Tom","passwd":"123"}, function (data){
console.log(data);
}, json)
- 发送 POST 方式的请求
格式:$.post( URL [, data ] [, callback ] [, dataType ] )
参数:
-
URL
:发送请求的 URL字符串。 -
data
:可选的,发送给服务器的字符串或 key/value 键值对。 -
callback
:可选的,请求成功后执行的回调函数。 -
dataType
:可选的,从服务器返回的数据类型。默认:智能猜测(可以是xml, json, script, 或 html)。
$.post("/login", {"username": "Tom","passwd":"123"}, function (data){
console.log(data);
}, json)