一、HTML（骨架）
一、基础
Q：HTML是什么？
A：超文本标记语言
Q：怎么学HTML呢？
A：HTML是一门标记语言，标记语言就是靠标签组成，学习HTML就是学习标签的使用
开发工具
1、HTML的基本结构
2、HTML的基本模板
静态页面：页面源代码已经写死了，不能改，不能交互（不能提交到后台）。
动态页面：与后台进行数据交互。
二、标签的使用样式及属性
1、标签使用样式：
-
开始标签标签体结束标签
-
自闭合标签，eg：
<br>,<hr>,<input><img>
2、标签属性：
a.通常为键值对形式出现，eg：color=“red” id = ‘eat’
b.属性只能出现在开始标签和自闭合标签内
c.属性名字全部小写，属性值必须用单引或者双引包裹
d.如属性名和属性值完全一样，直接写属性名即可，eg：“readonly”（input标签属性）
三、常用标签
Q：什么是标签？
1、由尖括号包裹单词构成，所以
标签不可能以数字开头
2、不区分大小写，推荐小写
3、标签可以嵌套，不能交叉嵌套
成对出现的标签：<p></p>
单个出现的标签：<form>,<br>
属性标签：<img>，键值对形式出现
1、创建完文件以后初始标签
title:标题标签
head:头部标签
body:主体标签
2、常见标签
h1-h6:文章标题。h1*6
p:段落标签
div：用于分化一个一个的区域
strong/b:加粗
i:斜体
s:删除线
3、块状标签和内联标签(行内标签)
块状：霸道 独占一行，前后自动换行，可以设置宽高
内联(行内)：在一行直到满了为止换行
4、列表
有序列表：ol li
无序列表：ul li type="none"，圆点就会去掉。也可以设计其他样式
定义列表：dl dt dd
快捷键使用：ul>li*n;
ol>li*n;
dl>dt+dd*n;
5、图片
src = 图片路径
../ 相对
直接从电脑的是绝对路径
alt 如果图片解析不了就显示alt的内容
6、超链接(a标签)
href = 跳转的路径
target 打开方式
默认 _self 在本身打开
_blank 在新的空白页面打开
title 鼠标下方提示文本
<a href="#test">返回底部</a>
<a href="#">
<div>
返回顶部</a>
</div>
<p id="test"></p> #定义锚点，一般用id（因为id唯一）
6、span
方便加样式
7、特殊标签
空格宽
< 小于
> 大于
= 等于
  字符宽
8、表格(table)
table:表格标签
thead:表格头部。不能合并
tbody:表格主题
tfoot:表格脚部
tr:行
td:列
th 自动加粗（一般用在表头）
colspan:合并列
rowspan:合并行
text-align：center 居中
9、表单(from)
action:提交到的路径
method:提交的方式
get 键值对提交 默认
会在地址栏显示安全性较差
对于提交的内容有长度限制
post
不会显示在地址栏相对安全，对于提交的内容没有长度限制
action = "https://www.baidu.com/s"
name = "wd"
10、input标签
-
name属性：表单提交项的键， 与id不同，name属性是和服务器通信时使用的名字，而id属性是浏览器端使用的名字，该属性主要方便客户编程而在css和js中使用
-
value属性:表单提交项的值
-
input标签中不同type，value值的不同
type=“button”/“reset”/“submit”–定义按钮上显示文本
type=“text”/“password”/“hidden”–定义输入字段初始值
type=“checkbox”/“radio”/“image”–定义与输入文 本 框:
<input type="text" value="" maxlength"可输入的最大长度" size="" />
提交按钮:<input type="submit" value="提交" />
普通按钮:<input type="button" value="普通按钮" />
密 码 框:<input type="password" />
重置按钮:<input type="reset" value="重置" />
单选按钮:<input type="radio" name=" " value=" ">name必须设置成一样的,表示是一组单选按钮 checked="checked"默认选中
文件上传域:<input type="file"/>
多选按钮:<input type="checkbox" />name可以设置成不一样的,要求设置成一样的
下 拉 框:<select><option></option></select>
多行文本域:<textarea rows="行" cols="列"></textarea>
隐 藏 域:<input type="hidden" />
图片按钮:<input type="image" src= "" onmouseover/>
11、块级标签和内联标签：
-
块级标签：
<p>/<h1>/<table>/<ol>/<ul>/<form>/<div> -
内联标签：
<a>/<input/>/<img/>/<sub>/<sup>/<textarea>/<span> -
块级元素的特点：
总在新行上开始
高度，行高以及外边距和内边距都可控制
宽度缺省，则是它容器的100%
它可以容纳内联元素和其他块元素 -
inline元素特点：
和其他元素在一行上
高，行高以及外边距和内边距不可改变
宽度就是其文字或图片宽度，不可改变
内联元素只能容纳文本或者其他内联元素 -
行内元素注意：
设置宽度width无效
设置高度height无效
设置margin只有左右margin有效，上下无效
设置padding只有左右padding有效，上下则无效，注意元素范围是增大了，但是对元素周围的内容是没影响的。
行内元素和块级元素的转换：
行内元素转换为块级元素：display:block；
块级元素转换为行内元素：display:inline;
二、CSS（装饰）
一、基本使用
1、CSS导入方式三种
-
行内样式：直接写在现有的HTML标签里
比如<p style="color:red;font-size:12px;">233333333</p> -
内嵌样式：把CSS样式直接写在当前页面的头部标签中
<style type="tsxt/css">
样式规则：选择器{属性：属性值}
!important #最高优先
</style>
- 外部样式：
<link href="要引入的网址" rel="stylesheet"
行间样式>内嵌样式>外部样式（在style引入之前）
2、选择器
1、基本：
- 标签选择器：元素选择器，选择和相同的元素，对相同元素设置一种css样式，选中页面中所有的元素。
使用方法： 标签名 - class选择器：
通过标签的 class 属性 ，选择对应的元素 借助了一个类的概念，一处定义，可以多处使用。
使用方法：前面加 . - ID选择器：通过标签的 id 属性，选择对应的元素
使用方法：#
id选择器唯一！！！
优先级：Id选择器 > class 选择器 > 元素选择器>*(星号)
2、其他：
- 后代 .div span
- 子代 .div>span
- 兄弟 .div~span 向下执行相同的 。该元素下所有的兄弟（辈分相同）
- 相邻 .div+span 。该元素的同级元素选择div相邻的下一个兄弟元素紧随目标元素
- 全选择器 *
- div,span{ } 可以节省重复代码
- 群组选择器：对几个有相同属性的选择器进行样式设置，两个选择器之间必须用逗号隔开
- 伪类选择器 link 未访问的；
visited 访问后的；
hover 划过；
active 激活状态的；
Id选择器：100 > class 选择器：10 > 元素选择器：1
二、字体/文本
1、文本属性：
- 字体样式：
color：字体颜色
rgba（0-255,0-255,0-255,0-1）：设置透明度。0 完全透明，1 完全不透明
font-size：字体大小
font-family：字体类型
<strong>：字体加粗
font-weight：bold 字体加粗
<em>： 斜体
font-style：italic斜体（属性） normal（正常） oblique 文字斜体
div–层标签
- 文本样式
text-decoration：underline(有下划线) none(无下划线)设置下划线
line-through:删除线
text-align：center 文本居中对齐方式 left：对左 right：对右
line-height：行间距
letter-spacing:字符间距
border-radius: px
text-indent: 2em首行缩进
overflow:hidden 超出隐藏
text-overflow:ellipsis 出现省略号
white-space:nowrap 只显示一行
height:100px;
line-height:100px; #上下对齐
text-align:center; #左右对齐
- Div+css布局方式
height+line-height文字上下居中
test-align：center文字水平居中
2、背景属性：
background-color:背景颜色
background-image:url(图片路径);
background-repeat:no-repeat;图片不重复
background-size:cover 铺满背景
background-size:contain 铺一边
background-repeat:repeat-x(向x轴延伸)
background-repeat:repeat-y(向y轴延伸)
background-position:图片偏移;
dispaly:inline; 转内联
dispaly:block; 转块状
dispaly:inline-block; 转内联块状
复合样式：
background:颜色 图片 位置 大小…
三、盒子模型
可以把页面上的元素看成一个盒子。盒子模型由内容、内边距、边框、外边距构成
padding - 内边距（复合）
margin - 外边距 （复合）
border - 边框
content(width、height) - 内容
border-top: 上边框
border-right: 右边框
border-left: 左边框
border-bottom: 下边框
double 双线
dotted 点
dashed 虚线
solid 实线
padding、margin - 参数 上右下左 顺时针
px 像素
inline 行内元素
display:inline-block 不独占一行的块级元素
1、内边距（padding）
2、外边距（margin）
垂直方向：margin-bottom,margin-top 取两者之间的较大值
水平方向：margin-left,margin-right
取两者之和 margin:auto 快速左右居中
overflow:hidden 解决内边距重叠问题
超出隐藏 border
内外边距注：
1：margin调整内部div外边距；
2：padding调整外部div内边距，它调整的是自身大小，所以如果不希望破坏外观，则尽量使用margin布局（padding有可能撑大外盒子，但如果是margin过大，则盒子内容会被挤出，但不会改变盒子本身大小）；
3：border内部div和外部div定位时需要找到边界，外部div如没有设置border，则内部div的margin设置时会一直往上找，直到找到边界位置。
4：内部相邻div间的margin，取值为两个div各自设置margin的最大值，而不是相加值。
3、Reset - 重置CSS
浏览器解析标签的时候本身自带一些样式，有时会导致我们自身写的样式出现的效果不一致，每个公司会根据自己的业务需求写一套属于自己的ResetCss
四、浮动
1、浮动带来的问题
浮动，其实就是让元素脱离正常的文档流
float:left 向左浮动
float:right 向右浮动
要先改成内联块状
脱离文档流
可能会造成高度塌陷
三种解决方法：
- overflow:hidden;不推荐只适用于纯浮动的页面布局
- 加一个空的
<div></div>;也不推荐 - clearfix::{
display:block;
clear:both;
content:’’; 空字符
} 推荐 比较常用
2、浮动解决方法
1、父元素设置
2、添加一个空div
3、使用伪元素
1.父元素设置overflow：hidden：没有使用position时使用不能和position配合使用，因为超出的尺寸的会被隐藏
2.添加一个空div：如果页面浮动布局多，就要增加很多空div，不推荐使用
3.使用伪元素：推荐使用，建议定义公共类，以减少CSS代码（目前：大型网站都有使用，如：腾迅，网易，新浪等等
五、定位
作用：对元素进行精确的定位。
定位一定要找好参照物。
static：默认值
1、绝对定位:position:absolute;
绝对定位是脱离文档流的
父相子绝（父级给相对定位，子给绝对定位），保持页面的布局完整
以网页页面为基础
2、相对定位:posttion:relative;
偏移前的位置还保留不动，覆盖不了前面div没有偏移前的位置
3、固定定位:position:fixed;
固定定位于相对定位不脱离文档流，是相对于自己的一个偏移
4、z-index
可以理解为谁在上面，谁在下面。
三、JavaScript（动作）
一种基于对象（object）和事件驱动，并具有相对安全性的客户端脚本语言
一、基本使用
1、作用
- 页面特效
- 前后交互
- 后台开发（node）
2、使用
<html>
<head></head>
<body></body>
<html>
1,嵌套 一般放在head中
<script type="text/javascript">
//代码
</script>
2,引用外部js文件
<script type="text/javascript" src="js文件地址"></script>
3，行级
<button onclick="javascript:alert('123')">按钮</button>
注：
1、严格区分大小写
2、每一行完整的语句后都要加分号
3、变量名不能使用关键字
4、代码要注意缩进，保持代码可读性
3、获取元素
id-通过ID获取元素
class-通过class名字获取
tagName-通过标签名获取元素
name-通过属性名获取元素，一般用于input
selector-通过CSS选择器获取一个
selectorAll-通过CSS选择器获取所有
获取对象：
<script>
//id
var Id = document.getElementById("box1");
console.log(Id);
Id.innerText = "我爱你";
//class. 多个
var Class = document.getElementByClassname("box")[1];
console.log(Class);
//标签
var Name = document.getElementByTagName("div")[1];
console.log(Name);
var Name = document.getElementByTagName("hello")[0];
console.log(Name);
//css
var Select = document.querySelectorAll("#box1");
console.log(Select);
</script>
- 首先获取id为xxx的元素 document.getElementById(“”);
- var 是 js 定义变量的关键字
- innerHTML 和 innerText 可以修改/获取
二、点击事件
1、鼠标事件
onclick 单击事件
ondbclick 双击事件
onmouseover/onmouseenter 鼠标移入
onmouseout/onmouseleave 鼠标移出
onresize 窗口变化
onchange 改变下拉框
2、复合事件
hover（移上移下）
toggle鼠标连续点击事件
toggle(
function(){}鼠标第一次点击
function(){}鼠标第二次点击
function(){}鼠标第三次点击
function(){}鼠标第四次点击
)
3、绑定事件
bind
4、获得焦点事件
focus
4、失去焦点事件
blur
三、样式
1、修改
Obj.style[变量]=变量值，也可以用复合样式
2、增删改查
注：标签属性分为两种：合法属性和自定义属性
classname/removeAttribute
setAttribute
hasAttritube
removeAttribute
四、数据类型
（6种 5种简单数据类型，一种复杂数据类型）弱类型
1、弱类型
1、number 数值型 不区分整数和浮点数，没有限制长度
2、string 字符串
3、undefined 未定义 专门用来确定一个变量是否有初始值
4、null 空 用于表明某个变量的值为空
5、boolean 布尔型
2、复杂类型
复杂性数据类型 object 对象
null类型进行typeof操作符后，结果是object，原因在于，null类型被当做一个空对象引用
五、操作符
1、关系运算符
< >= <= != == === !==
==:比较数据 不比较类型
===：比数据比类型
2、逻辑运算符
&&逻辑与 两边都为真，结果才为真，其他都是假
|| 逻辑或 两边都为假，结果财位假，其他都是真
！逻辑非 取反
当逻辑运算符两边不一定是布尔值的时候：
&& 遇到假就停，不会进行数据转换
|| 遇到真就停，不会进行数据转换
！ 隐式类型转换，将后面的数据先转换为布尔值再取反
以下在进行判断的时候为假：
- 0
- null
- undefined
- NaN
- ‘’空字符串
- false
注意:逻辑运算符两边的数值
1.均为布尔值
2.其他数据类型
3、算术运算符
+ － * / % ++ －－ += *= /=
对于算术运算符要注意的是，字符串和数字之间的相加减，以及布尔类型和字符，数字之间的相加减。小数的运算不精确。
4、赋值运算符
=，+=，-=，++，–
5、条件运算符
（三目运算符 三元运算符）？：
8>7? alter("true"):alter("false");
var a:
a = 8>7? 8:7
alter(a)
六、图标
在阿里图标库中下载需要的图标，添加到项目，生成对应的css路径，填入link标签内。打开css页面可以复制图标的属性，填入对应的class内。
七、控制流程
=== 全等于：判断值是否相等，还要判断类型是否一样
1、选择结构
if...else
switch(可以使用字符串)
2、循环结构
for
do...while
while
for in for(var i in 数组名) i 代表数组下标，只能放在数组中
3、跳转语句
break
continue
var aLi = document.getElementsByTagName("li")
var len = 5;
for(var i=0;i<len;i++){
aLi[i].js = i; #js自定义变量，和var一样
console.log(aLi[i].js):
aLi[i].onclick = function(){
alter(this.js)
}
}
八、字符串
1、操作符 typeof
判断变量的数据类型 两种写法
typeof 变量名
typeof （变量名）
number --如果这个字值是数值
string --如果这个字值是字符串
undefined --如果这个字值是未定义
boolean --如果这个字值是布尔值
object --如果这个字值是对象或null
function --如果这个字值是函数
2、常用方法
索引，下标，偏移量都是从0开始
str[index]：通过索引取字符串
str.length：获取长度，空格也算
value.toString()：转换字符串
str.substring()：截取自渡川会比较参数的大小，小的参数在前面（左闭右开）
str.slice()：切片，不会交换位置，负数从右到左数。
str.split()：字符串切割，返回数组
str.indexof(“a”)： --返回a字符，在字符串中的下标从0开始，如果未找到返回-1
str.toUpperCase()：全部转换大写
str.toLowerCase()：全部转换小写
九、数组
1、定义数组
1，var arr=new Array(size);--size可写可不写
2，var arr=[''123 '','' 321'',''312 '',''213 '']
3，var arr=new Array(12,32,34,54,56)//创建数组同时赋值
数组的长度是可以改变的
arr.push("e")添加到数组最后
2、数组方法
var a = [1,2,3]
操作方法 - console.log(a.length)
字符串方法可读不可写 数组可读也可写
前加 - a.unshift(‘a’,‘b’)
后加 - a.push(‘a’,‘b’)
删除最后一个 - a.pop()
删前面的 - a.shift()
传一个参数,表示数组从0开始截取N位，写几保留几 - a.splice(3)
传两个参数，从下标1开始删除2位 - a.splice(1,2)
删两个，加一个 a.splice(1,2,“谨慎”)
取整数 parseint(a)
var arr = [-3,-2,-1,5];
console.log(arr.sort()); //根据ASCII排序
arr.sort(function(x,y){
return x-y; //从小到大
return y-x; //从大到小
})
console.log(arr);
字符串转数组：
var str = 'hello world!'
console.log(str.split(" "))
数组转字符串：
var arr["你","帅"];
var q = arr.join("真");
console.log(q);
3、数字方法
在js里面的小数和整数统一都是数字
Number() ： 参数中必须能被转换成数字，否则返回NaN;
parseInt(解析的参数) ： 将参数转换为数字，整数部分遇到不是数字就停 parseFloat() ： 将参数转换为数字，知道小数部分遇到不是数字就停
Num.toFixed(n) ：四舍五入保留n位小数 NaN : 不等于自己
十、几个对象
1、math对象
取整 四舍五入 math.round(5,5)
向上取整 math.floor(0.9)
向下取整 math.celi(0.2)
随机数 math.random ：0-1
math.random()*m+n ：生成n~(m+n)
math.pow(16,2) ：16的平方
math.abx() ：求绝对值
math.max() ：取最大值
math.min() ：取最小值
math.PI
2、日期对象
if(sec<10){sec="0"+sec}
时间戳：格林威治时间1970年01月01日00时00分00秒(北京时间1970年01月01日08时00分00秒)起至现在的总秒数。
获取实践对象：
var time = new bat*()
console.log()
get set
十一、函数
函数是由事件驱动的或者当它被调用时执行的可重复使用的代码块
1、定义函数
前面加上(),+,-,!,~ 可以将匿名函数变为函数表达式
特点：可以在后面加()完成自执行
语法：
function 函数名(){
//代码块
console.log("OK")
}
2、自定义函数
var result=function 函数名(){
//代码块
}
3、调用函数
语法
函数名();
4、匿名函数：
不能单独出现
aDiv[0].onclick = function(){
alter(0);
};
5、有名函数
function f(){
console.log("ok");
}();
f() //调用。有名函数加括号立即执行
aDiv[0].onclick = f; //事件催动
6、函数参数：
function sum(x,y){ #形参（相当于函数的局部变量）
alert(x+y);
}
sum(12) #实参
十二、定时器
设置定时器 settimeout
清楚定时器 cleartimeout
设置定时器 setinterval
清除定时器 clearinterval
注：清除定时器的时候，要给定时器加个名字
四、JQuery
JQ是JS写的插件库，说白了，就是一个js文件
与JS的区别：凡是用jq能实现的，js都能实现，js能实现的，jq却不一定能实现
一、JQ引入
1、本地文件引入
https://www.bootcdn.cn/jquery/
2、CSN引入
必须要联网
如果alert 可以成功弹出，表示成功引入了 jQuery
二、基本使用
1、获取对象
JS：
var oBox = docunment.querySelector("#box");
oBox.innerHTML = "谨慎"; #修改
JQ:
var $box = $("#box");
$($box).html("谨慎"); #修改
2、基本方法
- attr() 方法设置或返回被选元素的属性和值（获取值）。当该方法用于返回属性值，则返回第一个匹配元素的值。当该方法用于设置属性值，则为匹配元素设置一个或多个属性/值对。
- removeAttr() 方法从被选元素中移除属性。
- addClass() 方法向被选元素添加一个或多个类名。该方法不会移除已存在的 class 属性，仅仅添加一个或多个类名到 class 属性。
- removeClass() 方法从被选元素移除一个或多个类。
注意：如果没有规定参数，则该方法将从被选元素中删除所有类。 - hasClass() 方法检查被选元素是否包含指定的类名称。如果被选元素包含指定的类，该方法返回 “true”。
- toggleClass() 有则删，无则增。
- index() 方法返回指定元素相对于其他指定元素的 index 位置。
- parent() 方法返回被选元素的直接父元素。
- children() 方法返回被选元素的所有直接子元素。
- siblings() 方法返回被选元素的所有同级元素。
- find() 方法返回被选元素的后代元素。一定要写元素，不然找不出来
- parents() 方法返回被选元素的所有祖先元素。
- empty() 方法从被选元素所有子节点和内容。
注意：该方法不会移除元素本身，或它的属性。
提示：如需移除元素，但保留数据和事件，请使用 detach() 方法。
提示：如需移除元素及它的数据和事件，请使用 remove() 方法。 - each()方法 将内容和下标关联
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
<script>
$("ul li").each(function(i)){
$(this).html("我是第”+i+“个”)
}
</script>
- on() 方法在被选元素及子元素上添加一个或多个事件处理程序。
$(document).ready(function(){
$("p").on("click",function(){
alert("段落被点击了。");
});
- off() 方法通常用于移除通过 on() 方法添加的事件处理程序。
$("button").click(function(){
$("p").off("click");
3、JS与JQ的转换
var btn1 = document.getElementById('btn');
$(btn1).html(123123);
$('li')[1].innerHTML = '123123';
$('li').get(0).innerHTML = '321321';
#特定转换 不会换对象类型，只改一个
var $li = $('li');
$li.eq(3).html('123456');
4、JQ遍历
$('ul li').each(function (i) {
this.innerHTML = '我是第'+i+'个';
$(this).html('我是第'+i+'个')
});
$('#btn').hover(function () {
console.log('我移入了')
},function () {
console.log('我移出了')
});
$('p').append('<p>-我被追加进来了</p>'); //添加子元素
$('p').prepend('<p>我在最前面-</p>');
$('p').after('<p>我是他兄弟</p>');
$('div').remove()
三、操作样式
1、基本方法
- position() 方法返回第一个匹配元素的位置（相对于它的父元素）。
$("button").click(function(){
x=$("p").position();
alert("Top: " + x.top + " Left: " + x.left);
- offset() 方法返回或设置匹配元素相对于文档的偏移（位置）。
$(".btn1").click(function(){
x=$("p").offset();
$("#span1").text(x.left);
$("#span2").text(x.top);
- width() 方法设置或返回被选元素的宽度。
- innerWidth()/innerHeight() 算了padding
- outWidth()/outHeight 算了padding+border
2、修改样式
- 修改单一样式
$("#box").css("width","200")
- 修改多个样式
$("#box").css({
"width":"200px",
"height":"200px",
"background":"blue"
})
四、动画
- slideDown() 方法通过使用滑动效果，显示隐藏的被选元素。
通过使用滑动效果，隐藏被选元素，如果元素已显示出来的话。
$('p').hide() #隐藏
$('p').show() #显示
$(".btn2").click(function(){
$("p").fadeIn();
}); #淡入
$(".btn1").click(function(){
$("p").fadeOut();
});
- fadeTo() 方法将被选元素的不透明度逐渐地改变为指定的值。
$(".btn1").click(function(){
$("p").fadeTo(1000,0.4);
})
- fadeToggle() 方法（取反）在 fadeIn() 和 fadeOut() 方法之间切换。
$("button").click(function(){
$("#div1").fadeToggle();
});
- animate() 方法执行 CSS 属性集的自定义动画。
$("button").click(function(){
$("#box").animate({height:"300px"});
});
- stop() 方法为被选元素停止当前正在运行的动画。
$("#stop").click(function(){
$("div").stop();
});
- delay() 方法对队列中的下一项的执行设置延迟。
$("button").click(function(){
$("#div1").delay("slow").fadeIn();
$("#div2").delay("fast").fadeIn();
});
扫一扫
2945
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
