前端三剑客
HTML
结构搭建
单标签：
<input />
双标签：<p></p>
属性：<a href="#"></a>
<!DOCTYPE html> <!--文档声明-->
<html lang="en"> <!--根标签-->
<head> <!--头--> <!--注释-->
<meta charset="UTF-8"> <!--字符编码-->
<title>Title</title> <!--网页标题-->
</head>
<body> <!--主体-->
</body>
</html>
<h1></h1> <!--标题-->
<h2></h2>
<h3></h3>
<h4></h4>
<h5></h5>
<h6></h6>
<p></p> <!--段落-->
<hr/> <!--分割线-->
<br/> <!--换行-->
<ol> <!--order list-->
<li></li>
<li></li>
</ol>
<ul> <!--unorder list-->
<li></li>
<li></li>
</ul>
<a href="" target=""/>
<!--
href为地址
相对路径 相对来说的路径
绝对路径 从头开始的路径
完整的url
target为打开方式
_self 当前窗口
_blank 新窗口
-->
<img src="" width="" height="" title="" alt=""/>
<!--
src 地址
完整的url
相对路径
绝对路径
title 鼠标悬停标题
alt 加载失败提示文字
-->
<table border="1px solid">
<tr>
<td></td>
<td></td>
<td rowspan="3"></td>
</tr>
<tr>
<td></td>
<td></td>
<!--<td></td>-->
</tr>
<tr>
<td></td>
<td></td>
<!--<td></td>-->
</tr>
</table>
<!--
table 整张表格
thead
tbody
tfoot
tr 行
td 列
th 加粗的列
rowspan 跨行占
colspan 跨列占
-->
form
<form action="" method="">
</form>
<!--
form标签
action 提交地址
完整的url
相对路径
绝对路径
method 提交方式
post
get
input标签
type
file 文件上传框
text
password
submit
reset
name 提交之后get拼接
radio 单选框（定义name之后实现单选，定义value之后实现传值）
checkbox 复选框
hidden 隐藏值，提交后get传
checked 默认
readonly
disabled
textarea标签
输入文本框，无需value
select标签
option选项（value）
-->
CSS
页面美化
引入方式
<!--1.行内-->
<body>
<input type="text" value="登录"
style="
width: 60px;
height: 40px;
background-color: #D2A41C;
color: #D2A41C;
font-size: larger;
font-family: 微软雅黑;
border: 2px solid black;
border-radius: 5px;
"
>
</body>
<!--2.内嵌-->
<style>
input{
width: 60px;
height: 40px;
background-color: #D2A41C;
color: #D2A41C;
font-size: larger;
font-family: 微软雅黑;
border: 2px solid black;
border-radius: 5px;
}
</style>
<!--外链-->
<!--test.css-->
input{
width: 60px;
height: 40px;
background-color: #D2A41C;
color: #D2A41C;
font-size: larger;
font-family: 微软雅黑;
border: 2px solid black;
border-radius: 5px;
}
<!--main.html-->
<head>
<link href="" rel=""/>
<!--
href
相对路径
绝对路径
完整的url
rel
stylesheet css样式
-->
</head>
选择器
<style>
<!--标签选择器-->
input{
}
<!--id选择器-->
#div{
}
<!--class选择器-->
.div{
}
</style>
Float
解决的问题：当三个div（设有宽高）在一块的时候，每个独占一行，如果想要第一个div挪到右边，怎么办？因为三个div都设有宽高，所以无法使用display：inline。这时给第一个div添加float属性，是第一个div脱离文档流，剩下两个div就会自动往上挪了，float属性永远都不会挡住没有脱离文档流的文字
定位
position属性
static默认
fixed 脱离文档流 固定到页面
relative 不脱离文档流 相对于原本位置移动
absolute 脱离文档流
left
right
bottom
top
盒子模型
JavaScript
页面动态处理
引入方式
<!--内嵌-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script>
function surprise(){
//弹窗
alert("Hello")
}
</script>
</head>
<body>
<button class="btn1" onclick="surprise()"></button>
<!--
onclick 单击事件
ondblclick 双击事件
-->
</body>
</html>
<!--引入外部-->
<script src="" type="text/javascript"></script>
<!--
src为路径
相对
绝对
完整的url
-->
数据类型和变量
<script>
var i = 123
var str = "aaaaaa"
/*
JS常见的数据类型
数值类型 number
字符串类型 string
布尔类型 boolean
引用类型 Object
function类型 function
*/
// 输出到浏览器
console.log(i)
// typeof 查看数据类型
console.log(typeof(i))
console.log(str)
</script>
流程控制和函数
分支结构
<script>
// prompt 弹框输入,string类型
let day = prompt("请输入今天星期几")
// 类型转换
let dayInt = Number.parseInt(day)
if (dayInt == 1) {
console.log("今天周一")
}else if (day == 2){
console.log("今天周二")
}
// 非空字符串判断为True
if ('dawd') {
console.log("true")
}else {
console.log("false")
}
switch (day){
case 3:
case 4:
case 5:
console.log("春");
break;
case 6:
case 7:
case 8:
console.log("夏");
break;
case 9:
case 10:
case 11:
console.log("秋");
break;
case 12:
case 1:
case 2:
console.log("冬");
break;
}
</script>
循环结构
<script>
let i = 1;
while (i <= 9){
let j = 1;
while (j <= i){
document.write(j+"*"+i+"="+(j*i)+" ")
j++
}
document.write("<hr/>")
i++
}
for (i = 1; i <= 9; i++){
for (j = 1; j <= i; j++){
document.write(j+"*"+i+"="+(j*i)+" ")
}
document.write("<hr/>")
}
</script>
函数
<script>
//调用方法时，形参和实参可以不一致，可以通过arguments来查看传入的参数
function sum1(a, b) {
console.log(arguments);
return a+b;
}
let sum2 = function (a, b) {con
console.log(arguments);
return a+b;
}
let number1 = sum1(1, 2);
let number2 = sum2(3, 2);
console.log(number1);
console.log(number2);
</script>
对象和JSON
对象的创建
<script>
// 1.
let person1 = new Object()
person.name = "whx"
person.age = 20
person.eat = function (food) {
console.log(this.name+"正在吃"+food)
}
// 2.
let person2 = {
name:"zsy"
age:18
eat:function(food){
console.log(this.name+"正在吃"+food)
}
}
console.log(person1.name)
console.log(person1.age)
person1.eat("火烧")
</script>
JSON格式
JSON格式的字符串可以在前后端很方便的和对象之间进行转换
前端
<script>
// JSON格式字符串
let net = '{"name":"whx",
"age":20,
"cat":{"cname":"mimi"},
"friends":[{"fname":"zsy"}, {"fname":"lili"}]}'
// JSON转对象
let person = JSON.parse(net)
// 这时person就是一个对象了
// 对象转JSON
let personStr = JSON.stringify(person)
</script>
后端
@Test
public void person2Json() throws JsonProcessingException {
Cat cat = new Cat("zsy");
Person person = new Person("whx", 20, cat);
// 将person对象转化为字符串 Jackson 导jar包
ObjectMapper objectMapper = new ObjectMapper();
String personStr = objectMapper.writeValueAsString(person);
}
@Test
public void json2Person() throws IOException {
// 将字符串转化为person对象
String str = "{\"name\":\"whx\",\"age\":20,\"cat\":{\"Cname\":\"zsy\"}}";
ObjectMapper objectMapper = new ObjectMapper();
Person person = objectMapper.readValue(str, Person.class);
}
@Test
public void map2Json() throws Exception {
Map map = new HashMap();
map.put("whx","666");
map.put("zsy","777");
ObjectMapper objectMapper = new ObjectMapper();
String data = objectMapper.writeValueAsString(map);
System.out.println(data);
}
@Test
public void list2Json() throws Exception {
ArrayList list = new ArrayList();
list.add("a");
list.add("b");
ObjectMapper objectMapper = new ObjectMapper();
String data = objectMapper.writeValueAsString(list);
System.out.println(data);
}
@Test
public void array2Json() throws Exception {
String[] array = {"a", "b", "c"};
ObjectMapper objectMapper = new ObjectMapper();
String data = objectMapper.writeValueAsString(array);
System.out.println(data);
}
常用对象
详细可看菜鸟教程
数组
Boolean
Date
Math
Number
String
事件
鼠标事件
onclick 单击
ondblclick 双击
onmousedown 按鼠标
onmouseup 松鼠标
onmouseenter 鼠标移入
onmouseleave 鼠标移出
onmousemove 鼠标移动
onmouseover 鼠标在其上面
onmouseout 鼠标从其离开
键盘事件
onkeydown 某个键按下
onkeyup 某个键松开
onkeypress 某个键按下并松开
表单事件
onblur 元素失去焦点时
onchange 表单内容发生改变，失去焦点时
onfocus 元素获得焦点时
onfocusin 元素即将获得焦点时
onfocusout 元素即将失去焦点时
oninput 元素获取用户输入时
onreset 重置时
onresearch 向搜索与输入内容时
onselect 选取文本时
onsubmit 表单提交时
事件绑定
举例
<head>
<script>
// 事件
function fun1(){
alert("surprise1！")
}
function fun2(){
alert("surprise2！")
}
// 通过value可以传值
function fun3(value) {
console.log("内容改变为：" + value)
event.preventDefault(); // 组织时间的默认行为
}
/*
绑定方式
1.元素属性
2.DOM动态绑定
可以绑定多个
一对多，多对一
*/
/*
弹窗的三种方式
1.alert() 弹框
2.prompt() 输入
3.confirm() 信息确认 返回True或False
*/
</script>
</head>
<body>
<!--事件的绑定-->
<button class="btn1" onclick="fun1() fun2()"></button>
<input onchange="fun3(this.value)"/>
</body>
BOM（Browser Object Model）编程
学习window的API和window对象及其属性的API，来控制浏览器
更多的API请查询菜鸟教程
<script>
/*
window 可以省略不写
三种弹框方式
alert()
prompt()
confirm()
定时任务
setTimeout()
history
forward()
back()
go() 传一个数字
location
href 地址的跳转
*/
function fun1() {
window.alert("你好")
}
function fun2() {
let a = window.prompt("请输入：")
console.log(a)
}
function fun3() {
let b = window.confirm();
console.log(b)
}
function fun4(){
window.setTimeout(function (){
console.log("Hello")
}, 2000)
}
function funC(){
location.href="http://www.baidu.com"
}
function funD(){
sessionStorage.setItem("keyA","valueA")
localStorage.setItem("keyB","valueB")
}
function funE(){
console.log(sessionStorage.getItem("keyA"))
console.log(localStorage.getItem("keyB"))
}
function funF(){
sessionStorage.removeItem("keyA")
localStorage.removeItem("keyB")
}
</script>
</head>
<body>
<button onclick="funD()">存数据</button>
<button onclick="funE()">查数据</button>
<button onclick="funF()">删数据</button>
<button onclick="funC()">地址</button>
<button onclick="funB()">上一页</button>
<button onclick="funA()">下一页</button>
<button onclick="fun1()">弹框</button>
<button onclick="fun2()">选择</button>
<button onclick="fun3()">确认信息</button>
<button onclick="fun4()">定时任务</button>
DOM（Document Object Model）编程
document对象又可称为dom树
node节点
1.元素节点 element 标签
2.attribute 属性节点
3.text 文本节点 标签中的文字
<script>
/*
1.获取document dom树
window.document
2.从document中获取要操作的元素
1.直接获取
getElementById
getElementsByTagName
getElementsByName
getElementsByClassName
2.间接获取
父
子
兄
--------------------------------------------------
3.对元素进行操作
1.操作元素属性
2.操作元素央视
3.操作元素文本
4.增删
*/
// 根据元素id获取元素
function fun1(){
let element = document.getElementById("username");
}
// 根据标签名获取元素，返回一个HtmlCollection
function fun2(){
let elements = document.getElementsByTagName("input");
for(let i = 0; i < elements.length; i++){
console.log(elements[i])
}
}
// 根据name属性获取指定元素，返回一个NodeList
function fun3(){
let elements = document.getElementsByName("aaa");
for (let i = 0; i < elements.length; i++) {
console.log(elements[i])
}
}
// 根据class属性获取指定元素
function fun4(){
let elements = document.getElementsByClassName("a");
for (let i = 0; i < elements.length; i++) {
console.log(elements[i])
}
}
// 根据父元素获取子元素
function fun5(){
// 获取父元素
let div01 = document.getElementById("div01");
// 获取父元素的全部子元素
let cs = div01.children
for (let i = 0; i < cs.length; i++) {
console.log(cs[i])
}
// 获取单个
console.log(div01.firstElementChild) // 第一个
console.log(div01.lastElementChild) // 最后一个
}
// 通过子元素获取父元素
function fun6(){
let element = document.getElementById("password");
console.log(element.parentElement) // 通过子元素获取父元素
}
// 通过当前元素获取兄弟元素
function fun7(){
let element = document.getElementById("password");
console.log(element.previousElementSibling) // 上一个兄弟元素
console.log(element.nextElementSibling) // 下一个兄弟元素
}
</script>
</head>
<body>
<div id="div01">
<input type="text" class="a" id="username" name="aaa" />
<input type="text" class="a" id="password" name="aaa" />
<input type="text" class="b" id="email" />
<input type="text" class="b" id="address" />
</div>
<input type="text" /><br/>
<input type="button" value="通过父元素获取子元素" onclick="fun5()" id="btn05" />
<input type="button" value="通过子元素获取父元素" onclick="fun6()" id="btn06" />
<input type="button" value="通过当前元素获取兄弟元素" onclick="fun7()" id="btn07" />
<input type="button" value="根据id获取指定元素" onclick="fun1()" id="btn01" />
<input type="button" value="根据标签名获取指定元素" onclick="fun2()" id="btn02" />
<input type="button" value="根据name获取指定元素" onclick="fun3()" id="btn03" />
<input type="button" value="根据class获取指定元素" onclick="fun4()" id="btn04" />
</body>
<script>
/*
1.获取document dom树
2.从document中获取要操作的元素
1.直接获取
2.间接获取
--------------------------------------------------
3.对元素进行操作
1.操作元素属性
element.type="button";
element.value="hai";
2.操作元素样式
element.style.color="green";
element.style.borderRadius="5px";
3.操作元素文本
innerText只识别文本
innerHtml可以识别html代码
--------------------------------------------------
4.增删
*/
// 操作元素属性
function changeAttribute(){
let element = document.getElementById("div01");
element.type="button";
element.value="hai";
}
// 操作元素样式
function changeStyle(){
let element = document.getElementById("div01");
element.style.color="green";
element.style.borderRadius="5px";
}
// 操作元素文本
function changeText(){
let element = document.getElementById("div02");
// element.innerText="hai"
element.innerHTML="<h1>hai</h1>"
}
</script>
</head>
<body>
<input id="div01" type="text" value="hello">
<div id="div02">
Hello
</div>
<hr>
<button onclick="changeAttribute()">操作属性</button>
<button onclick="changeStyle()">操作样式</button>
<button onclick="changeText()">操作文本</button>
</body>
扫一扫
995
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
