1.HTML基础
<!--注释格式 --> <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <!-- title网页标题--> <title>我的主页</title> </head> <body> <a name="top">顶部</a> <br/> <h1>标签</h1> <p>一段内容</p> <p>第二段内容</p> <br/>换行 dsadwa <hr/>水平线标签 <strong>粗体</strong> <em>斜体</em> <br/> 空 格 >大于号 <小于号 ©版权符号 <p>以下为图片标签</p> <img src="../resource/image/2.png" alt="屏幕截图" title="悬停文字" > <br/> <!-- target表示窗口在哪里打开(默认在当前网页打开) _blank在一个新标签打开 --> <a href="https://www.baidu.com" target="_blank" >点我跳转baidu</a> <a href="https://www.baidu.com"> <img src="../resource/image/1.png" alt="屏幕截图" title="点击跳转百度" > </a> <br/> <!--锚链接 页面内跳转 先定义标签顶部top #+标签代表前往标签所在的位置 herf = 页面地址+#+标签就可以跳转到目的页面的标签位置 --> <a href="#top">回到顶部</a> <!-- 功能性链接 邮件链接 mailto QQ链接:qq推广 --> <br/> <a href="mailto:2468313077@qq.com">点击联系我</a> </body> </html>
1.1行内元素和块元素
块元素：无论内容多少，该元素独占一行
-
p标签
-
h标签
行内元素：内容撑开宽度，左右都是行内元素的可以排在一行
-
a标签
-
strong标签
-
em标签
1.2列表
-
无序列表
-
有序列表
-
自定义列表
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <!--有序列表 --> <ol> <li>Java</li> <li>C++</li> <li>c</li> <li>python</li> <li>后端</li> </ol> <hr/> <!-- 无序列表--> <ul> <li>Java</li> <li>C++</li> <li>c</li> <li>python</li> <li>后端</li> </ul> <hr/> <!-- 自定义列表 dl:标签 dt：列表名称 dd：列表内容 --> <dl> <dt>学科</dt> <dd>数学</dd> <dt>名称</dt> <dd>微积分</dd> </dl> </body> </html>
1.3表格
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <!--表格table 行：tr 列：td --> <table border="1px"> <tr> <!-- 跨行或跨列--> <td colspan="4">11</td> </tr> <tr> <td rowspan="2">21</td> <td>22</td> <td>23</td> <td>24</td> </tr> <tr> <td>31</td> <td>32</td> <td>33</td> <td>34</td> </tr> </table> </body> </html>
1.4媒体元素
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <!-- 音频和视频 --> <video src="../resource/video/DSCF0666.MP4" controls autoplay></video> <audio src="../resource/audio/杨宗纬 - 其实都没有.mp3" controls></audio> </body> </html>
1.5页面结构
1.6内联框架
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <!-- 内联框架 --> <iframe src="https://www.bilibili.com" name="官网" frameborder="0" width="300px" height="500px"></iframe> </body> </html>
1.7表单语法
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <!-- action 表单提交的位置，可以是网站，也可以是一个请求处理地址 --> <form method="post" action="result.html"> <p>名字:<input name="name" type="text"/> </p> <p>密码:<input name="password" type="password"/></p> <p> <input type="submit" name="Button" value="提交"/> <input type="reset" name="Reset" value="重填"/> </p> </form> </body> </html>
1.8文本框和单选框
<p>性别: <input type="radio" value="Boy" name="sex"/>男 <input type="radio" value="Girl" name="sex"/>女 </p>
1.9多选框
checkbox
<p>爱好: <input type="checkbox" value="sleep" name="hobby"/>睡觉 <input type="checkbox" value="basket" name="hobby"/>篮球 <input type="checkbox" value="dance" name="hobby"/>跳舞 </p>
1.10下拉框
<select name="列表名称">
<option value="选项的值">中国</option>
<option value="选项的值">美国</option>
<option value="选项的值" selected>瑞士</option>
<option value="选项的值">俄罗斯</option>
</select>
1.11文本域
<p>
<textarea name="textarea" cols ="10" rows="50">文本内容</textarea>
</p>
1.12文件域
<p> <input type="file" name="files"> <input type="button" value="上传" name="upload"> </p>
1.13验证和滑块
<p>邮箱:
<input type="email" name="email">
网址:
<input type="url" name="url">
数字:
<input type="number" name="num" max="100" min="0" step="5">
</p>
<p>
音量：
<input type="range" name="voice" min="0" max="100" step="2">
</p>
<p>搜索:
<input type="search" name="search">
</p>
1.14表单的应用
-
隐藏域
-
只读
readonly
-
禁用
disabled
1.15表单的验证
-
placeholder(提示信息,只能用于控件上)
-
required(元素不能为空)
-
pattern(正则表达式)
1.基础
<script> //......
</script>
var变量声明符
1.1数据类型
-
number
-
js不区分小数和整数
-
-
NaN（不是数字）
-
Infinity表示无限大
字符串：
-
'abc'
-
"abc"
bool值：
-
true，false
逻辑运算：
-
&&
-
||
-
！
比较运算符：
-
=
-
==（类型不一样值一样，也会判断为true）
-
===（绝对等于，类型一样，值一样）
尽量避免使用浮点数
非要比较浮点数可以使用Math.abs（取绝对值）<0.0000001
null和undefined
-
null空
-
undefined未定义
数组：
-
数组下表越界就会undefined
对象：
-
对象是花括号，数组是方括号
-
每个属性之间使用逗号隔开
map：
和java相同
set：
set会将重复元素删除
iterator迭代器
迭代器用于遍历迭代map和set集合
//遍历数组
var arr = [11,2,3]
for (var x of arr){
console.log(x)
}
//遍历map
var map = new Map([["wdd",100],["wss",50]]);
for(let x of map){
console.log(x)
}
//遍历set
var set = new Set([1,2,3]);
for(let x of set){
console.log(x)
}
1.2严格定义模式
'use strict'
-
预防javaScript的随意性，导致产生的问题
-
写在JavaScript的第一行
2.函数及面向对象
2.1函数
方法：对象（属性，方法）
函数：
定义函数：
function abs(x){
if(x>=0){
return x;
}else{
return -x;
}
}
//匿名函数
//通过abs调用
var abs = function(x){...}
-
异常需手动抛出
2.2变量
所有的变量定义必须放在代码开头
-
变量的寻找只能向外部和本部，外部的方法无法访问内部方法的变量
-
Javascript实际上只有一个全局作用域，任何变量，直到全局范围内未找到，就会报错
-
为防止全局域名冲突（多个JavaScript文件之间冲突），最好自己定义变量块，存放所有变量
最好使用let定义局部变量
const常量修饰----只读
2.3方法的调用
var Student = {
name:'wdd',
birth:2020,
//方法
age:function(){
var now = new Date().getFullYear();
return now-this.birth;
}
}
********************************************
//调用方法
Student.age()
方法就是把函数放在对象里面
3.json对象
轻量级的数据传输格式
格式:
-
对象都用花括号
-
数组都用方括号
-
所有的键值对都是用 key:value
var user = {
"name":"wdd",
"age":3,
}
//对象转化为json字符串
var js = JSON.stringify(user);
//json字符串转为对象
var obj = JSON.parse('{"name":"wdd","age":3}');
-
所有的对象都可以转化为JSON格式
4.面向对象
可以对对象声明原型
对象名1.proto=原型名(对象名2)
此时对象1可以调用对象2的方法
-
class继承
-
定义一个学生类(与Java相同)
-
写一个类extends继承
-
5.操作BOM对象
BOM：浏览器对象模型
-
IE
-
Chrome
-
Safari
-
FireFox
-
Opera
window代表 浏览器窗口
Navigator 封装了浏览器的信息
screen 代表计算机屏幕
location 代表当前页面的URL信息
document 代表当前的页面，HTML DOM文档树
-
document可以获取具体的文档树节点
-
可以获取cookie
history(不建议使用)
6.操作DOM对象
DOM：文档对象模型
-
浏览器网页就是一个DOM树形结构
-
更新DOM结构
-
遍历DOM节点（得到DOM节点（通过ID））
-
删除DOM节点
-
添加一个新节点
-
要操作DOM节点，就必须先获得DOM节点
DOM节点的获得：
DOM节点的更新：
DOM的删除：
-
获得父节点
-
通过父节点删除自己
调用父节点的方法删除自己
DOM的插入和添加：
获得某个DOM节点，假设dom节点为空
使用innerHTML就可以增加一个元素
但若节点已经存在元素，就会覆盖
添加：
append方法
创建：
creadElement方法
7.操作表单(验证过程)
7.1提交表单
提交时的筛查(加密)
提交表单的拦截函数(绑定)
表单提交时MD5加密后，需要优化表单(隐藏域提交)
8.jQuery
公式：
$代表jQuery
$(seletor).action()
jQuery事件：
-
鼠标
-
键盘
-
其他
901
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
