华清远见重庆—前端部分技术总结/个人总结

最新推荐文章于 2024-08-05 17:07:25 发布

NotFoundThisPerson

最新推荐文章于 2024-08-05 17:07:25 发布

阅读量104

点赞数

文章标签：前端 html css javascript jquery

本文链接：https://blog.csdn.net/G6543987/article/details/130136170

版权

web前段基础学习路线

HTML---> CSS --->javaScript---->jquery

HTML

Hyper Text Markup Language 超文本标记语言

超文本

可以理解为超级文本：超越文本的限制，如图片，音频，视屏等

也可以理解为超链接文本：通过某个连接，可以访问互联网中的任意地址。

标记

可以称为标签。用<>括其来的一个特定的单词。

标签分为单标签和双标签。

单标签：<meta属性名 = “属性值”/>

双标签：<head>

标签中可以加入属性，双标签中可以继续嵌套标签。

HTML标签写出的文件保存为.html文件,称为页面文件。

浏览器

浏览器是用于"运行"HTML页面的平台。

用HTML语言写出来的网页文件，需要浏览器对其解释渲染。

浏览翳与HTML文件的关系类似于JVM与java文件的关系。

常用标签

块级元素

如果一个标签占满整行，这个标签称为块级元素

行内元素

如果一个标签占一行中的一部分，称这个标签为行内元素。

单标签

双标签

图片img

列表ul/ol/li

表格table

a标签

浮动框架iframe

表单与表单元素

表单元素

CSS

Cascading Style Sheets 层叠样式表

用于控制HTML中标签样式的语言。

可以精确到像素，用于美化HTML标签

选择器

用于选中页面中元素(标签)的工具

ID选择器

1.给某个标签添加id的属性，对其命名

2.通过#id名获取通常用于获取某一个元素，id名称不要冲突

类选择器

1.给某些标签添加class的属性，对其命名

2.通过.class名获取

通过用于获取一组元素

元素选择器/HTML选择器/标签选择器

直接通过标签名获取元素，获取所有对应标签。

后代选择器

群组选择器

CSS写在哪里

写在某个标签的style属性中

<div style="样式名:值;">
</div>

写在head标签下的style标签中

<html>
    <head>
        <style>
            选择器{
                样式:值;    
                样式:值;
            }
        </style>
    </head>
</html>

写在一个独立的css文件中

选择器的优先级

内嵌在style标签 >> id选择器 >> class选择器 >> 标签选择器

在选择某个元素时，尽量将其层次关系写具体，如a b c{}

常用样式

尺寸

背景background

边框border

字体

文本

列表

鼠标样式cursor

伪类

表示某个元素的某种状态

用于对某些元素在不同的状态下呈现不同的效果

如a标签有访问前、悬停时、按下时、访问后四种状态对应四个伪类

显示方式display

控制元素的类型或是否显示。

浮动float

让某个元素脱离原本的位置，朝某个方向对齐

float:left和display:inline-block的区别

相同点：都能让多个块级元素成为行内块。

display:inline-block

多个元素最终位于同一行内，可以设置尺寸，元素以下线对齐，保留该行位置，保留元素间的缝隙，后续元素为新的一行

float:left

多个元素最终位于同一行内，可以设置尺寸，元素以上线对齐，不保留该行位置，不保留元素间的缝隙，后续元素会紧邻

溢出overflow

处理子元素超出父元素的部分

定位position

将元素以像素为单位调整位置

文档流

页面中每个元素默认都有自己的位置，这个位置称为文档流。

如果某个元素脱离文档流，就会失去它原本所占的位置，后续元素就会顶替其位置。

可以通过浮动float、固定定位positon:fixed、绝对定位positon:absolute让元素脱离文档流。

脱离文档流后，通过改变left、right、top和bottom移动其位置。

固定定位fixed

让某个元素脱离文档流，默认根据页面的四个边界进行定位。

绝对定位absolute

让某个元素脱离文档流，根据已定位的父元素进行定位。如果没有已定位的父元素，会根据body定位。

相对定位relative

元素不会脱离文档流，根据它原本的位置进行定位，定位原点是元素本身的位置。

层叠z-index

对于已定位的元素，可以通过z-index调整层叠顺序，值是一个数字，越大离眼睛越近。

转换transform

改变元素的状态，如旋转、移动、缩放等

过渡transition

设置某个转换效果完成所需的时间等参数

自定义动画animation

1.定义动画的关键帧

2.给某个元素设置animation样式

JavaScript

1995 年网景公司推出，简称为 JS ，

是一门弱类型的面向对象的解释型脚本语言。

弱类型：没有数据类型的限制

解释型：无需编译，通过解释器解释运行，浏览器就是一个 JS 解释器

script 脚本：按指令依次执行

JS写在哪里

写在script标签中

script 标签是一个双标签，可以放在页面中的任意位置

写在某个标签的某个事件中

通常用于调用写好的 js 方法

写在一个独立的js文件中

1. 新建一个 .js 文件，在其中编写 js 代码

2. 在页面中通过 script 标签导入

JS的组成

ECMAScript

简称 ES ，是 JS 的标准，也是 JS 的核心语法。

BOM

浏览器对象模型，用于操作浏览器。

DOM

文档对象模型，用于操作元素。

JS中的本地对象

数组Array

JS 中数组类似于 Java 中的 ArrayList ，

数组定义时无需指定大小，数组长度由赋值时的最大索引决定

数组可以保存不同类型的数据

没有给某个索引赋值时，默认值为 undefined

定义数组

var 数组名 = new Array();
var 数组名 = [];

数组赋值和读取

//定义数组
var list = new Array();
// 数组赋值
list[0]=123;
list[3]="helo";
list[10]=true;
// 数组大小为最大索引+1
console.log(list.length);
// 读取数组中的元素
console.log(list[0]);
console.log(list[3]);
console.log(list[10]);
// 默认没有给某个索引赋值时，是undefined
console.log(list[1]);

数组遍历

//定义数组
var list = new Array();
// 数组赋值
list[0]=123;
list[3]="helo";
list[10]=true;
//普通for循环遍历，遍历每个索引
for(var i=0;i<list.length;i++){
console.log(list[i]);
}
console.log("-----------------");
// 增强for循环遍历，遍历不是undefined的元素
var size=0;
//index表示赋值的索引
for(var index in list){
size++;
console.log(list[index]);
}
console.log(size);

数组中的方法

日期Date

// 创建当前日期对象
var now = new Date();
// 得到年份
var year = now.getFullYear();
console.log(year);
// 得到月份(0-11表示1-12月)
var month = now.getMonth();
console.log(month);
// 得到日期
var day = now.getDate();
console.log(day);
document.write("<h1>" + year + "年" + (month + 1) + "月" + day + "日</h1>");
// 得到时分秒
console.log(now.getHours());
console.log(now.getMinutes());
console.log(now.getSeconds());
// 得到从1970/1/1至今经过了多少毫秒
console.log(now.getTime());
// 以上方法都有对应的set方法用于设置指定值
// 得到date的日期部分
console.log(now.toDateString());
// 得到date的时间部分
console.log(now.toTimeString());
// 将date转换为本地日期格式的字符串
document.write("<br>"+now.toLocaleDateString())
document.write("<br>"+now.toLocaleTimeString())
document.write("<br>"+now.toLocaleString())

字符串

JS 中的字符串，是一个字符数组。

使用双引号或单引号或 new String() 定义字符串。

可以通过下标访问字符串中的某个字符。

正则表达式

Math

JS 中的 Math 类似于 Java 中的 Math 类，其中的方法可以直接通过 Math 调用。

函数function

类似于 java 中的方法。是一段独立的代码，可以完整一件事情。

定义的函数可以被重复调用，函数能减少重复代码，达到代码复用的效果。

调用函数

通过 . 操作符号，由对象名或类名或直接调用。

自定义函数

BOM

Browser Object Model 浏览器对象模型

可以通过 JS 获取浏览器对象后访问信息和控制浏览器的行为。

弹框

警告框，带有确认按钮和提示文字

//window表示浏览器对象
window.alert("提示文字");
//通常简写为
alert("提示文字");

输入框，带有确认和取消按钮、输入框和提示文字，点击确认后返回输入的内容

window.prompt("提示文字");
//或
prompt("提示文字");

确认框，带有确认和取消按钮和提示文字，点击确认返回 true ，取消返回 false

window.confirm("提示文字");
//或
confirm("提示文字");

window对象

表示浏览器窗口对象，可以获取当前窗口信息，控制该窗口的行为。

screen对象

location对象

localStorage对象

history对象

获取节点

内容操作

节点.innerText

获取或设置双标签中的文本

//设置id为md的标签中的文本为xxx
document.getElementById("md").innerText="xxx";
//获取id为md的标签中的文本
var text=document.getElementById("md").innerText;
console.log(text);

节点.innerHTML

能识别内容中的 HTML 元素

//设置id为md的标签中的文本为xxx
document.getElementById("md").innerHTML="xxx";
//获取id为md的标签中的文本
var text=document.getElementById("md").innerHTML;
console.log(text);

区别

<p id="test1"></p>
<p id="test2"></p>
<script>
document.getElementById("test1").innerText="<h1>innerText</h1>";
document.getElementById("test2").innerHTML="<h1>innerHTML</h1>";
</script>

属性操作

读取或设置节点的某个属性

样式操作

修改单个样式

节点 .style. 样式名 = 值 ;

样式名是驼峰命名法，如设置背景色， css 中为 background-color ，这里写为 backroundColor

修改多个样式

节点 .style.cssText=" 样式名 : 值 ; 样式名 : 值 ;"

样式名和 css 中相同

创建添加删除节点

事件

某个节点的某个行为，称为这个节点的事件。

给节点绑定事件

event对象

在某个匿名函数中传入一个参数，通常为 e 或 event ，就能监听函数对应的事件

如在 onmousexxx 事件的函数中添加参数 e ，就能监听鼠标状态 mouseevent 。

表单相关

表单中的元素通常都需要设置 name 属性，除输入框外，还需要设置 value 属性。

所有的表单元素都可以通过 value 属性获取其值。

获取表单

id 、 class 、元素选择器等

document.forms 获取页面中的表单集合

<form id="form_id" class="form_class" name="form_name">
</form>
<script>
var form=document.getElementById("form_id");
var form=document.getElementsByClassName("form_class")[0];
var form=document.getElementsByName("form_name")[0];
var form=document.forms()[0];
</script>

表单提交

表单 . onsubmit () 事件

阻止表单提交

在表单的提交事件中通过 return false 阻止提交

输入框

文本框 text 、密码框 password 、文本域 textarea 都属于输入框

获取输入框输入内容

var input = 输入框对象 . value ;

设置输入框中的内容

输入框对象 . value = 值 ;

单选按钮、复选框

判断是否选中

对象 . checked 获取其选中状态， true 表示选中， false 表示未选中

获取选中项的值

单选和复选都需要设置 value 属性，再通过 value 获取选中后的值

jQuery

jQuery 是一个轻量级的 javascript 函数库。

封装了很多 js 的内容，本质还是 javascript ，是一个 .js 文件。

作用

jQuery 的宗旨 :"write less,do more" ，

意味着用更少的代码去完成更多的事情。

更方便地获取文档中的元素，对其进行操作

强大的选择器

支持链式写法

封装了 ajax ，更方便使用

。。。

2.在页面中导入jQuery.js文件

<!-- 导入jquery的js文件 -->
<script src="js/jquery-3.6.4.min.js"></script>

3.在页面中编写jQuery代码

同 js 的写法，在 script 标签中编写 jQuery 代码

$符号冲突问题

在页面中引入 jquery 后， $ 符号相当于 jQuery 这个单词，有特殊的含义。

如果页面中引入了多个 js 函数库，这些函数库都需要使用 $ 符号，就会出现 $ 冲突。

jQuery 中提供了一个 noConflict() 函数，用于释放对 $ 的使用权

//释放$的使用权，重新定义为jq代替$符号
var jq=$.noConfilict();
jQuery("#md").text("xxx")//正常,原始写法
$("#md").text("xxx")//无效，无法继续使用$符号
jq("#md").text("xxx")//正常，jq当做jQuery使用

选择器

基本选择器

层次选择器

过滤选择器

普通过滤

$(" 选择器 : 特定单词 ")

表单元素过滤

属性过滤

内容(文本)过滤

js对象(dom对象)和jquery对象

使用 jquery 中的选择器获取到的节点，称为 jquery 对象，只能使用 jquery 的方法操作节点。

使用 js 中原生的方式获取到的节点，称为 dom 对象，只能使用 js 中的方法操作节点。

jquery对象和dom对象互转

jquery 对象转换为 dom 对象

jquery对象.get(0);
jquery对象[0];

dom 对象转换为 jquery 对象

$(dom对象);

操作节点

获取、设置节点的内容

获取、设置节点的样式

获取、设置节点的属性

创建节点

$(" 完整标签 ");

//js写法
document.createElement("div");
//jquery写法
$("<div></div>");
//以上两种方式创建的节点，都处于游离状态，需要添加到其他已有节点上才能使用

添加节点

移除节点

复制节点

修饰节点

通过节点获取节点

预设动画

//错误写法
$("#md").click(()=>{
$("#md").toggle(2000);
//不会等待2s后弹出，弹窗和动画在同时执行
alert("xxx");
});
//正确写法
$("#md").click(()=>{
//2s动画结束后再执行第二个函数
$("#md").toggle(2000,()=>{
alert("xxx");
});
});

自定义动画

//样式组是必要参数
节点.animate({样式组},持续时间,时间函数,回调函数);
animate()支持链式写法，表示在动画1执行后执行动画2
$("#md").animate({
"样式名":"值",
"样式名":"值"
},2000,"linear",()=>{
动画执行后的回调函数
}).animate({
"样式名":"值",
"样式名":"值"
},2000,"linear",()=>{
动画执行后的回调函数
}）;
//样式只能是数值为单位，如颜色无法生效

停止动画

节点 .stop()

停止当前正在进行的动画，如果后续还有动画会直接执行后续动画

节点 .stop(trur)

停止当前所有动画

节点事件

绑定事件

js 中给节点绑定事件

dom对象.on事件名=()=>{
函数体;
}
document.getElementById("md").onclick=()=>{
}
//通常是给单个节点绑定事件

jquery中给节点绑定事件

jquery 对象 . 事件函数 ( 函数 );

$("#md").click(function(){
});
//可以给节点集合中的所有节点统一绑定事件，在函数中可以使用$(this)表示触发事件的节点
$("div").click(function(){
$(this)表示所有div中当前点击的div
});

触发事件

节点.事件函数()
//轮播变量
var i = 1;
// 每隔2s，让对应的头像点击
setInterval(() => {
//触发节点的单击事件
$("#head>div:eq(" + i + ")").click();
// 循环
if (i++ == 4) {
i = 0;
}
}, 2000);

前端框架

设计者提供给用户该框架的 css 和 js 文件。

用于只需要导入 css 文件和 js 文件，就通过对应的 class ，使用该框架中相应的样式和效果。

任何前端框架都有对应的 API ，应用程序接口文档，包含了该框架的用法。

Bootstrap

由 Twitter 公司推出的一套 Web 框架。其核心内容是栅格系统。

LayUI

由国内开发者设计的一套基于 jquery 的前端框架。

官网现已下架，但 LayUI 可以继续使用。

镜像网站 https://layuion.com/

JSON

J ava S cript O bject N otation JS 对象简谱

是一种数据交换格式，可以理解为保存数据、交换数据的一种格式。

JSON 数以键值对的形式保存。

" 键 ": 值

键是一个字符串，值可以是普通类型、对象或数组

值的数据类型

举例

在页面中读取json数据

$.getJSON(URL,回调函数)

ajax ，异步提交，局部刷新。在保证页面不重新加载的情况下，只更新部分数据

$.ajax();

NotFoundThisPerson

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
华清远见重庆—前端部分技术总结/个人总结

1.定义动画的关键帧2.给某个元素设置animation样式JavaScript1995年网景公司推出，简称为JS是一门弱类型的面向对象的解释型脚本语言。弱类型：没有数据类型的限制解释型：无需编译，通过解释器解释运行，浏览器就是一个JS解释器script脚本：按指令依次执行JS写在哪里写在script标签中script标签是一个双标签，可以放在页面中的任意位置写在某个标签的某个事件中通常用于调用写好的js方法写在一个独立的js文件中1.新建一个.js。
复制链接

扫一扫