一、HTML
菜鸟教程:HTML5 教程 | 菜鸟教程
1、网页基本信息 - <html>
标题 - <h1>
段落 - <p>
换行 - <br>
水平线 - <hr>
注释 - #
特殊符号 -
2、图像标签 - <img>
<map> 带有可点击区域的一幅图像
3、超链接 - <a>
属性:herf、id、target
<base> 作为HTML文档中所有的链接标签的默认链接
<link> 通常用于链接到样式表
<style> 定义了HTML文档的样式文件引用地址
<script> 引入脚本文件
4、行内元素和块元素 - <>
<div> 块级元素,它可用于组合其他 HTML 元素的容器
<span> 内联元素,可用作文本的容器
5、列表 - <>
有序列表 - <ul>
无序列表 - <ol>
自定义列表 - <dl>
6、表格 - <table>
行 - <tr>
列 - <td>
跨行 - <rowspan="2">
跨列 - <colspan="2">
7、媒体元素 - <media>
音频 - <video>
视频 - <audio>
8、网页的简单布局 - <>
头部 - <header>
脚部 - <footer>
一块独立区域 - <section>
导航类辅助内容 - <nav>
独立的文章内容 - <article>
侧边栏 - <aside>
9、内联框架 - <iframe>
属性:src、frameborder
通过使用框架,你可以在同一个浏览器窗口中显示不止一个页面
10、表单 - <form>
属性:action、method、
<input> - 输入框
属性:type=text
文本框 - <text>
按钮 - <button>
提交 - <submit>
重置 - <reset>
密码框 - <password>
单选 - <radio>
多选 - <checkbox>
文本域 - <textarea>
文件域 - <file>
邮箱 - <email>
数字 - <number>
滑块 - <range>
搜索框 - <search>
<select> - 下拉框
单个选项 - <option>
11、表单的具体应用
属性:
placeholder - 提示性的消息
表单的基本校验
required - 必填
pattern - 正则表达式
二、CSS
Less:Less.js 中文网
1、CSS的核心
选择器
基本选择器
标签
id
class
高级选择器
层次选择器:> ~ +
结构伪类选择器:
属性选择器:a[ * ^ $ ]
2、美化网页
字体:color、font-size
排版网页:text-align、text-indent、line-height、text-decoration
超链接伪类:hover
样式:list-style
背景样式:背景颜色、背景图片
3、盒子模型 - box
边框:border
内边框:padding
外边框:margin
盒子模型尺寸计算:border + padding + margin + 内容元素
box-size
圆角边框:box-radius
box-shadow
4、浮动 - flex
网页布局:标准文件流
display:bolck、inline、inline-block
浮动:左浮动、右浮动
清除浮动:
clear:left、right、both、none
解决父级边框塌陷问题:空div、父元素高度、overflow、:after
inline-block:float
5、定位
相对定位:relative
绝对定位:absolute
固定定位:fixed
层级区分:z-index
透明度:opacity
6、
三、JavaScript
1、数据类型
Number
string
boolean
逻辑运算
比较运算符
null、undefined
数组
对象
2、严格检查模式
‘use strict’
3、流程控制
if
while
for i
for in
for of
foreach
4、集合
map
set
iterator == for of
5、函数、变量的作用域
function abs()
匿名函数 function()
内置对象 arguments、rest
变量作用域
和java类似
6、方法
// 对象和方法的结合
// 第一种:对象和方法合起来写
var person = {
name: "sly1",
age: 3,
getDate: function (x) {
return 'nihao' + x;
}
}
document.write('通过对象调用函数:' + person.getDate('5') + '</br>');
反射:控制this的指向
getDate.apply(person, [])
7、内部对象
标准对象
typeof 123
"number"
typeof '123'
"string"
typeof true
"boolean"
typeof NaN
"number"
typeof []
"object"
typeof {}
"object"
typeof Math.abs
"function"
typeof undefined
"undefined"
日期对象
<script>
let now = new Date();
now.getFullYear();
now.getMonth(); // 0~11月
now.getDate(); // 日
now.getDay();
now.getHours();
now.getMinutes();
now.getSeconds();
now.getTime(); // 获取时间戳
now.toLocaleString()
now.toUTCString()
</script>
JSON对象
// 对象转化为json字符串
let jsonUser = JSON.stringify(user);
// Json字符串转换成对象
let userBean = JSON.parse('{"name":"xiaofaner","age":28,"set":"男"}');
8、继承
原型链:https://www.cnblogs.com/loveyaxin/p/11151586.html
原型继承
// 原型继承
var student = {
name: "学生",
birth: 2000,
run: function () {
document.write('学生会跑:' + '</br>');
}
}
var child = {
name: "xiaomming"
}
// 父类
child._proto_ = student;
document.write('父类的值:' + child._proto_.birth + '</br>');
document.write('父类的方法:' + child._proto_.run() + '</br>');
// 给ss新增加一个爸爸方法
function ss(name) {
this.name = name;
}
ss.prototype.hello = function () {
document.write('我是爸爸:' + '</br>');
}
document.write('爸爸的方法:' + ss.prototype.hello() + '</br>');
一切对象的父类都是Object
类继承
class class1 {
constructor(name) {
this.name = name;
}
hello() {
document.write('hello:' + name + '</br>');
}
}
// 本质还是_proto_
class class2 extends class1 {
constructor(name, grade) {
super(name);
this.grade = grade;
}
hello2() {
super.hello();
document.write('hello2:' + grade + '</br>');
}
}
var student1 = new class1("东山小红");
var student2 = new class2("五条悟", 111);
9、操作Bom
BOM(Browser Object Model): 浏览器对象模型
<script>
// window 代表浏览器窗口
document.write('窗口内部高度:' + window.innerHeight + '</br>');
document.write('窗口外部高度:' + window.outerHeight + '</br>');
document.write('窗口名字:' + window.name + '</br>');
document.write('窗口X轴下标:' + window.pageXOffset + '</br>');
document.write('窗口屏幕y:' + window.screenY + '</br>');
document.write('窗口设备的像素:' + window.devicePixelRatio + '</br>');
document.write('窗口虚拟视图:' + window.visualViewport + '</br>');
</script>
</br>
<script>
// navigator 代表浏览器
document.write('浏览器名:' + navigator.name + '</br>');
document.write('浏览器应用名:' + navigator.appName + '</br>');
document.write('浏览器应用版本:' + navigator.appVersion + '</br>');
document.write('浏览器类型:' + navigator.userAgent + '</br>');
document.write('浏览器平台:' + navigator.platform + '</br>');
document.write('浏览器驱动:' + navigator.webdriver + '</br>');
</script>
</br>
<script>
// screen 代表系统屏幕
document.write('系统屏幕高:' + screen.height + '</br>');
document.write('系统屏幕像素:' + screen.pixelDepth + '</br>');
</script>
</br>
<script>
// location 代表当前页面的URL信息
document.write('当前URL的主机:' + location.host + '</br>');
document.write('当前URL的路径:' + location.href + '</br>');
document.write('当前URL的协议:' + location.protocol + '</br>');
document.write('当前URL的来源:' + location.origin + '</br>');
</script>
10、操作Dom
DOM(Document Object Model): 文档对象模型
<script>
// DOM 主要用来对HTML的节点增删改查
document.write('DOM的标题:' + document.title + '</br>');
document.write('DOM的路径:' + document.URL + '</br>');
document.write('DOM的面包屑:' + document.cookie + '</br>');
document.write('DOM的文档类型:' + document.doctype + '</br>');
document.write('DOM的字符集:' + document.charset + '</br>');
document.write('DOM的属性节点:' + document.ATTRIBUTE_NODE + '</br>');
document.write('DOM的注释节点:' + document.COMMENT_NODE + '</br>');
document.write('DOM的文档节点:' + document.DOCUMENT_NODE + '</br>');
document.write('DOM的元素节点:' + document.ELEMENT_NODE + '</br>');
document.write('DOM的实体节点:' + document.ENTITY_NODE + '</br>');
document.write('DOM的文本节点:' + document.TEXT_NODE + '</br>');
</script>
Dom的选择器,可进行增删改查
<div id="div1">
<h1>你好</h1>
<p id="p1">GG</p>
<p id="p2" class="p2">very well!</p>
<div id='child1'>
<p>儿子1</p>
</div>
</div>
<script>
// 选择器
// 查询
document.write('根据id选择:' + document.getElementById('div1').localName + '</br>');
document.write('根据Tag选择:' + document.getElementsByTagName('h1').length + '</br>');
document.write('根据Class选择:' + document.getElementsByClassName('p2').length + '</br>');
// 修改
var div1 = document.getElementById('div1');
var p2 = document.getElementById('p2');
p2.innerText = '456';
div1.style.color = 'red';
div1.style.padding = '2em';
// 删除
var father = p2.parentElement;
father.removeChild(p2);
// 删除时,节点index是一直在变化的
// father.removeChild(father.children[0]);
// 新增
var newP = document.createElement('p');
newP.setAttribute('id', 'newP');
newP.id = 'newP';
newP.innerText = '我是新增的dom';
div1.appendChild(newP);
p2.insertBefore(newP);
</script>
四、Jquery
中文网:jQuery API 中文文档 | jQuery API 中文在线手册 | jquery api 下载 | jquery api chm
1、选择器
<h1>jquery</h1>
<a id="test-jquery" href="">点我</a>
<div id="div1">
<h1>你好</h1>
<p id="p1">GG</p>
<p id="p2" class="class1">very well!</p>
<div id='child1'>
<p>儿子1</p>
</div>
</div>
</br>
<script>
// js原生选择器,种类少,名字长
document.write('原生选择器:' + document.getElementById('test-jquery') + '</br>');
// 公式 $(选择器).action(方法)
$("#test-jquery").click(function () {
alert("hello jquery!")
});
// $(selector).action()
$('p').click(); // 标签选择器
$('#child1').click(); // id选择器
$('.class1').click(); // class选择器
</script>
2、事件
<!--要求:获取鼠标当前的一个坐标-->
mouse: <span id="mouseMove"></span>
<div id="divMove">
在这里移动看看
</div>
</br>
<script>
$("#divMove").mousemove(function (e) {
$("#mouseMove").text(`x: ${e.pageX}, y: ${e.pageY}`)
})
</script>
3、JQuery 操作DOM
<ul id="test-ul">
<li class="js">JavaScript</li>
<li name="python">Python</li>
</ul>
<script>
// 获取值
let text1 = $("#test-ul li[name=python]").text();
let text2 = $("#test-ul li[class=js]").text();
console.log(text1)
console.log(text2)
// 设置值
$("#test-ul li[class=js]").text("JS");
// 设置css样式
$("#test-ul li[name=python]").css({ "color": "#ff0011", "background": "blue" })
// 元素的显示和隐藏
$("#test-ul li[name=python]").show()
$("#test-ul li[name=python]").hide()
// 更多查看文档
// https://jquery.cuishifeng.cn/
</script>
4、Ajax
AJAX = Asynchronous JavaScript and XML(异步的 JavaScript 和 XML)。
伪造Ajax
<script type="text/javascript">
'use strict'
window.onload = function(){
let myDate = new Date();
document.getElementById('currentTime').innerText = myDate.toLocaleString()
};
function LoadPage(){
let targetUrl = document.getElementById('url').value;
console.log(targetUrl);
document.getElementById("iframePosition").src = targetUrl;
}
</script>
<div>
<p>请输入要加载的地址:<span id="currentTime"></span></p>
<p>
<input id="url" type="text" value="https://www.baidu.com/"/>
<input type="button" value="提交" onclick="LoadPage()">
</p>
</div>
<div>
<h3>加载页面位置:</h3>
<iframe id="iframePosition" style="width: 100%;height: 500px;"></iframe>
</div>
实际用法
<script>
// Ajax
$.get("https://www.baidu.com", function (data) {
alert("Data Loaded: " + data);
});
$.post("https://www.baidu.com", { "func": "getNameAndTime" },
function (data) {
alert(data.name); // John
console.log(data.time); // 2pm
}, "json");
</script>
五、
1、
2、
3、
4、
5、
6、
7、
8、
9、