前端基础

# 前端基础

html/css

指定字符编码集

<head>
<meta charset="GBK">
<style>
</style>
</head>

1
2
3
4
5

列表

有序列表
<ol type="1" start="3">  从序号3开始
    <li>扫地僧</li>
    <li>埃利塞</li>
    <li>注释</li>
</ol>
无序列表
<ul type="square">  每行记录开头用一个点或者方块
    <li>扫地僧</li>
    <li>埃利塞</li>
    <li>注释</li>
</ul>
表格<table>

1
2
3
4
5
6
7
8
9
10
11
12
13

Html实体：小于号，商标，大于等于，版权声明

加粗<b></b> 下划线<u></u>  斜体<i></i> 上标<sup></sup> 下标<sub></sub>

a标签：<a href='...' target='_blank'>在新窗口打开，target还可以设置_self。在本窗口打开
表格：rowspan行合并，colspan列合并，<tr>每行记录块,<th>列标题类型，<td>单元格值
样式

.c1{   表示类样式，用class="c1"调用
}

#i2{    表示id样式，用id="i2"调用
}

1
2
3
4
5

引用外部的样式表：

<head>
<link rel='stylesheet' href="css/demo.css">
</head>

1
2
3

javascript

引用外部javascript脚本文件

<head>
<script type="text/javascript" src="js/demp.js"> </script>
</head>

1
2
3

事件：标签属性针对CSS,样式属性针对JS

onmouseover：鼠标悬浮事件，onmouseout：鼠标移除事件

function showColor(){   //tagName表示当前节点的标签名字
if(event&&event.srcElement&&event.srcElement.tagName=="TD"){ 
var td=event.srcElement;
var tr=td.parentElement; //获取标签的父元素tr
tr.style.backgroundColor="navy";//通过style设置这个节点的背景样式
var tds=tr.cells; //获取这个tr的每个单元格
for(var i=0;i<tds.length;i++){
tds[i].style.color="white";
}}}

1
2
3
4
5
6
7
8
9

页面加载后执行匿名函数。(目的在于js,html,css对应代码进行分开包装)

window.onload=function(){
    var fruitTbl=document.getElementById("tbl_fruit");//根据id获取整个表格
    var rows=fruitTbl.rows;//获取表格中的所有行
    for(var i=0;i<rows.length;i++){
    var tr=rows[i];
    tr.onmouseover=showColor;//绑定鼠标悬浮事件函数
    tr.onmouseout=clearClore;
    var cells=tr.cells;
    cells[1].ommouseover=showHand; //获取这一行单元格的第二个单元格
    cell[1].onclick=editprice;
}}

1
2
3
4
5
6
7
8
9
10
11

一个标签的子节点分为元素节点和文本节点。
- 元素节点：当前标签的子节点还是一个标签，如<td><input></td>，还可以继续作为一个element元素。
- 文本节点：当前标签节点下没有其它标签，只有文本，如<td>文本</td>,文本节点可以通过innerText获取文本内容。

function editprice(){
	var td=event.srcElement;
 	if(判断当前td子节点为文本节点，否则的话innerText为空){  //仅第一次打开进入
    var oldprice=td.innerText; //获取当前节点的内部html字符串文本
    td.innerHTML="<input type='text'/>" //设置当前节点内部HTML语言,自动解析
    /*等效于<td> <input type='text'/> </td>    */
    var input=td.firstChild; //获取当前td的子节点，即<input>
    if(input.tagName=="INPUT"){
        input.value=oldprice;//设置input输入框修改时的默认值为当前td内容
        input.select();//选中输入框内部的文本
        input.onblur=updateprice;//绑定输入框失去焦点事件，更新单价
}}
	if(当前子节点nodeType为elementnode) //当前打开了input节点
	consolo.log("")
}

function updateprice(){
    var input=event.srcElement;
    td=input.parentElement;
    td.innerHTML=input.value;
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

parseInt：字符串转int

编辑

#JavaWeb

上次更新: 2023/12/15, 15:49:57

← 问题记录后端基础→