前端--轻学习
Posted SyMoon_g
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了前端--轻学习相关的知识，希望对你有一定的参考价值。
抛锚：
利用ID的寻找，来进行本页中选项的跳转
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<a href="#d1">第1章</a>
<a href="#d2">第2章</a>
<a href="#d3">第3章</a>
<hr>
<div id="d1" style="height:500px;第一章</div>
<div id="d2" style="height:500px;第二章</div>
<div id="d3" style="height:800px;background-color: darkgoldenrod">第三章</div>
</body>
</html>
html : 标签语言 浏览器来解释标签
形式： <标签名 k=v ....>标签体</标签名 >
head : meta title link script
body:
块级：h1-6 p div hr tr li ul
内联：b sup sub th td span a img
常用标签：
img ---> src alt title width height
a ----> href target 锚点（id）
table--->
表单标签
input
type: text,password,checkbox,radio,reset,button,submit,file
===== {‘username‘: [‘yuan‘], ‘pwd‘: [‘123‘]}
textarea
select
label
css 功能： 渲染 布局
css： 查找标签 操作标签
查找标签：
选择器：
* ： 通配选择器
标签选择器
id选择器 # id值
class选择器 . class值
优先级：
1 !important
2 内嵌：<p style="color: aqua">PPPPPP</p>
3 id : 100
4 class: 10
5 element: 1
继承
操作标签 :
补充： 块级：设置width height 内联不可以
关于float：
if 是浮动元素：
判断上一个元素是否是浮动的
文档流中元素：
python:
1 变量 i=10
2 数据类型
3 运算符
4 流程控制
顺序
分支
循环
5 函数
6 面向对象
JS ：
ECMA
Bom
Dom
浏览器能够解释的：html css js
JS:
变量： var 关键字声明 var i=0;
var i;
i=10;
;作为分隔符，不加分号，默认以换行符作为分割语句
JS的数据类型：
number 整型 浮点型 NAN
string
boolen true false
undefined : 1、 变量只声明(var i;) 未赋值(i=12) 2函数没有return 默认返回undefined
object：arr [111,22,333] {"name":"yuan"}
运算符：
计算运算符： ++i --i
比较运算符： ===
逻辑运算符： && || ！
流程控制语句：
分支：
1、if
if(表达式){
pass
}
2、if else：
if(表达式){
pass
}
else{
pass
}
3、
if(表达式){
pass
}
else if (表达式){
pass
}
else{
pass
}
4、switch(值)｛
case 1:执行代码;break;
case 2:执行代码;break;
case 3:执行代码;break;
case 4:执行代码;break;
default:执行代码;
｝
循环语句：
条件循环 for
// 方式1：
for(初始表达式;条件表达式;自增或自减)
{
执行语句
……
}
for (var i=100;i>0;i--){
pass
}
// 形式2（遍历循环）：
for( 变量 in 数组或对象)
{
执行语句
……
}
条件循环 while
while (条件){
语句1；
...
}
函数：
python:
def 函数名(参数):
函数体
函数体
js：
// 调用：函数名(实参，..)
function 函数名(形参){
arguments对象：一个存放所有实参的数组
函数体
return ....
}
函数名(实参，..)
// 匿名函数
(function (形参){
arguments对象：一个存放所有实参的数组
函数体
return ....
})(实参)
JS对象：
字符串对象
数组对象
日期对象
Math
==========================================BOM======================
BOM：browser object model
1 window对象
2 定时器
==========================================DOM========================
DOM: 文档对象模型
DOM:对象
节点： document element
节点就是标签对象
JS的DOM:
1、查找标签：
（1）直接查找
1 document.getElementById("id值"); // 返回值一定是标签对象
2 document.getElementsByClass("c1"); // [标签对象,标签对象,...]
3 document.getElementsByTagName("标签名")
（2）导航查找（依据某个标签定位其它标签）
element.parentElement // 父节点标签元素
element.children // 所有子标签
element.firstElementChild // 第一个子标签元素
element.lastElementChild // 最后一个子标签元素
element.nextElementtSibling // 下一个兄弟标签元素
element.previousElementSibling // 上一个兄弟标签元素
2 标签操作
文本操作：
// 取值操作
// console.log(ele_p.innerText); // hello
// console.log(ele_p.innerHTML); // <a href="">hello</a>
// 赋值操作
// ele_p.innerText="google";
// ele_p.innerText="<a>google</a>"
ele_p.innerHTML="<a href=‘‘>google</a>"
<div class="c1"></div>
属性操作：
原生JS方式：
element.setAttribute(name,value)
element.getAttribute(属性名)
DHTML的简化方式(有些属性不适应)：
element.属性名
element.属性名="值"
class操作：
<p class="c1 c2">yuan</p>
className
element.classList.add()
element.classList.remove()
css样式操作：
element.style.css属性=值
value值：
element.value
input textarea select
节点操作:
1、 创建节点 ： document.createElement(标签名称)
2、 添加节点： 父节点.appendChild(子节点);
3、 删除节点： 父节点.removeChild(子节点);
4、 替换节点： 父节点.replaceChild(新节点，替换节点)
5、 拷贝节点： element.cloneNode(true)
3 事件绑定;
1 标签对象.on事件=function(){}
for (var i=0;i<eles.length;i++){
eles[i].onclick=function(){}
}
以上是关于前端--轻学习的主要内容，如果未能解决你的问题，请参考以下文章
技术前沿 | 汽车前端框架FEM仪表板横梁CCB的轻量化技术