1022-前端开发

前端知识

jquery-1.8.3.min.js.zip (32.6 KB)

前端是指与用户直接交互的那一部分软件系统或网站。它主要负责展示和呈现用户界面,与用户进行交互,并将用户的操作传递给后台进行处理。

前端开发中基础三大件:

  1. HTML(超文本标记语言):用于定义网页结构和内容。

  2. CSS(层叠样式表):用于设置界面的样式、布局和外观。

  3. 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 选择器,选中页面中的元素,然后才能让样式作用在元素上。

常用选择器如下:

  1. 标签选择器

使用 HTML 标签名 做为选择器选定元素,会选中页面中所有指定标签的元素并设定样式

CSS:
p{
    color: red;
}

HTML:
<p>文本1</p>
<div>文本2</div>
<p>文本3</p>
  1. 类选择器

类选择器需要结合标签的 class 属性使用,通过 class 属性为标签指定类名,使用 .类名 形式选择所有页面中具有指定类名的元素。

CSS:
.text{
    color: red;
}

HTML:
<p class="text">文本1</p>
<div  class="text">文本2</div>
<p>文本3</p>
  1. id选择器

id选择器需要结合标签的 id 属性使用,通过 id 属性为标签指定 id 名,使用 #id名 形式选择具有指定 id 名的元素。

理论上,一个 id 名在页面中是唯一存在的。

CSS:
#text{
    color:red;
}

HTML:
<p id="text">文本1</p>
<p>文本2</p>
  1. 层级选择器(后代选择器)

根据层级关系选择后代标签,以 选择器1 选择器2 开头,主要应用在标签嵌套的结构中,减少命名,选择器可以使用任意形式的选择器。

层级关系不止父子关系,祖孙关系也成立。


div p span{
    color: red;
}

HTML

<p>文本<span>一</span></p>
<div>
    <p>文本<span>二</span></p>
</div>
<div>文本<span>三</span></div>

  1. 组选择器

组选择器为多个任意选择器的组合,多个选择器之间以 , 分割开, 组中所有选择器对应的元素都会被选中。一般用来设置公共的样式。

CSS:
p, div, h1{
    color:red;
}

HTML:
<h1>A</h1>
<div>B</div>
<p>C</p>
<p>D</p>
  1. 伪类选择器

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

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

<div class="box1">这是一个div标签</div>

CSS 样式属性

  1. 布局类属性
  • width: 设置元素宽度
  • height: 设置元素高度
  • background: 设置元素背景色和背景图片,设置背景图片需要使用 url() 函数
  • border: 设置边框样式
  • margin: 设置外边距
  • padding: 设置内边距
  • display: 设置元素布局状态等。
  1. 文本类属性
  • 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 语法

  1. 注释

    • 单行注释: 以 // 开头
    • 多行注释: 以 /* */ 包裹的内容
  2. 定义变量

使用 var 关键字定义变量

var n = 100;
var s = "hello";
  1. 定义函数

使用 function 关键字定义函数,函数体使用 {} 包裹。

function show(){
    consolg.log("Show Run")
}
  1. 运算符
  • 关系运算符: == 等于,只比较数值,不比较类型; === 全等于,即比较数值,也比较类型。
  • 逻辑运算符: && 逻辑与, || 逻辑或, ! 逻辑非
  1. 条件语句

// 方式一
if(条件){

}

// 方式二
if(条件){

}else{

}

// 方式三
if(条件1){

}else if(条件2){

}else if(条件3){

}
...
else{

}
  1. 循环语句
// 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);

  1. 字符串及操作
  • 字符串和数字类型或字符串类型的数据,直接可以使用 + 进行连接
  • 字符串.length : 获取字符串长度
  • 字符串.substring(): 提取字符串中介于两个指定下标之间的字符。
  • 字符串.lastIndexOf(): 从后向前搜索字符串,并从起始位置(0)开始计算返回字符串最后出现的位置。
  1. 数组与操作

数组定义与 Python 列表定义完全相同。

  • 数组.length 可获取数组元素个数

  • 数组.push(值) 可向数组中添加数据

  • 数组.pop() 从数组中删除最后一个元素

  • 数组.splice(start,num, ele1,...,eleN) 向数组中插入,删除,替换数据。

  1. 对象

JS 中的对象定义,和 Python 中的字典完全相同,对象的属性名,即 key 不需要使用引号包裹。

var oObj = {
   name:"Tom",
   age:88
}
  1. 定时器

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 通过后台加载数据,并在网页上进行显示,实现页面的局部数据刷新。

  1. 发送 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)

  1. 发送 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)

1 个赞