web 前端基础小总结

1.HTML
2.CSS
3.jQuery
JQuery对象拷贝
jQuery多库共存
jQuery插件
bootstrap js插件

1.HTML

基础概念

HTML就是超文本标记语言

标签	把由`<>`括起来的部分统称为标签，有单标签和多标签
元素	由开始标签和标签中的内容和結束标签共同组成的整体，叫做一个元素
属性	把写在开始标签中键值对（名称/值对）称之为属性

a标签超链接

URL统一资源定位符

href中放入url地址，链接的锚点通过ID属性来指定，加上#前缀,通过锚点网页到指定位置

访问状态：

未访问	字体是蓝色
访问过	字体是紫色
点击	字体是红色

target属性

值	描述
_blank	在新窗口中打开被链接文档。
_self	在当前网页打开文档
_parent	在当前网页打开文档
_top	在整个窗口中打开被链接文档。使用在iframe框架中

form 标签

action:提交数据后，跳转到其他页面的地址

post请求和get请求，默认为get请求方式

get:

get请求是显式放入url中
长度有限制
可以被缓存
可以收藏到书签中
安全性低

post:

post请求不会显示在放入url中
长度没有要求
不可以被缓存
不可以被收藏到书签中
安全性较高

enctype：

可指定表单进行编码时所使用的字符集

multipart/form-data：

数据被编码为一条消息，页上的每个控件对应消息中的一部分，当表单携带文件时必须使用该格式。

table标签

colspan	列数	规定单元格可横跨的列数。Column
rowspan	列数	设置单元格可纵跨的行数。Row
cellpadding	像素	~~HTML5 不支持~~。单元边格沿与其内容之间的空白。
cellspacing	像素	~~HTML5 不支持~~。单元格之间的空白。

表格边框合并：border-collapse: collapse;

块级元素和内联元素的区别

块级元素独占一行，内联元素不独占一行
块级元素宽高可控，内联元素宽高度不可控

可以使用display属性，用来转化块元素或者内联元素

2.CSS

基础概念

指层叠样式表 (Cascading Style Sheets)，用来添加样式

背景颜色

使用相应的颜色单词
使用rgb或者rgba 红绿蓝0-255
使用hsl或者hsla 色相（0-360）红绿蓝各占120、饱和度、亮度
使用16进制或者8进制

字体大小的单位

主要使用px
vw:相对于屏幕宽度的百分比
em:相对于上级元素字体大小来设置vw-min和vw-max
hw:相对于屏幕高度的百分比

隐藏元素

属性	显示	隐藏	特征
display	除了none之外的其他值	none	隐藏的元素不会占用任何空间
visibility	visible	hidden	隐藏的元素仍需占用与未隐藏之前一样的空间，仅不可见
opacity	1	0	隐藏的元素只是变透明，仅不可见

浮动

只能向左浮动或者向右浮动
周围的元素的内容会被浮动的元素的内容挤到周围。
浮动元素只能左右移动而不能上下移动。
浮动元素的空间将不存在
浮动元素到页面中间只能调外边距或者在上一级元素添加内联块或者上一级添加宽度

清除浮动的方式

其他元素使用clear：both方法
上级元素可以使用overflow:hidden，display:inline-block
而inline-block默认有间距，给上级添加font-size=0才可以解决间隔问题
添加一个高度

定位

static 静态定位（默认）：相当于没有定位
fixed 固定定位：元素的位置相对于浏览器窗口是固定位置。
relative 相对定位：相对于原来的位置进行定位，使被应用元素不脱离文档流，它的原始位置所占据的空间仍被保留，不会影响其他的元素的位置
absolute 绝对定位，父级元素没有定位，就相当于窗口的定位，父级元素有定位，则通过，top/left/right/bottom来进行定位，脱离了文档流，没有了空间，通常情况下上级使用相对定位作为绝对定位的容器块。

选择器

兄弟选择器
直接子元素选择器
类选择器
id选择器
标签选择器
后续兄弟选择器
后代选择器
后续选择器：比如nth-of-type,nth-of-child,invalid,after,before,hover,active等等

其他

width包含border+padding使用：box-sizing=border-box，就将边框放进内边距中
a标签自带文字颜色属性，父类不能设置，只能自身设置
图片设置100%，先设置上级元素的宽高
表格里加边框会影响table，先使用div嵌套，在使用hover
在使用after或者before时，content属性中必须添加内容，或者使用空字符串，添加的内容相当于子类元素
过渡transition实现轮播图
弹性盒子属性多使用在安卓，可以实现瀑布流

3.jQuery

基础概念

jQuery使用JavaScript封装好的方法库

$是 j Q u e r y 的别称，可以使用$ 代替jQuery

JQuery对象和DOM对象

dom对象转化为jQuery对象：$(dom对象)

jQuery对象的本质是伪数组存储

jQuery对象转化为dom对象：jquery对象[index]或者使用get(index)方法

增加节点

①内部插入节点

方法语法	描述	参数说明
append(content)	内部追加内容（放在后面）	content：追加到目标中的内容或者选择的节点
prepend(content)	内部追加内容（放在前面）	content：插入目标元素内容前面的内容或者选择节点

②外部插入节点

方法语法	描述	参数说明
after(content)	元索外部后面追加内容	插入目标元素外部后面的内容
before(content)	元素外部前面插入内容	插入目标元素外部前面的内容

删除节点

remove() 和 empty()

remove()获取指定的元素进行删除。

清空所选择的页面元素及其所有后代元素。

替换遍历节点:replaceWith(content)

设置类样式

$("div").addClass("current");

$("div").removeClass("current")

$("div").toggleClass("current")

属性样式操作

替换遍历节点:replaceWith(content)

遍历节点:使用each()

获取元素属性:attr(name)

设置元素的属性:attr(key,value),也可以放入对象的形式，使用键值对

删除元素属性：removeAttr(name)

样式操作：css(name,value)

内容操作：

html() 用于获取元素的HTML内容无相当于原生js的innerHTML
html(value) 用于设置元素的HTML内容参数为元素的HTML内容
text() 用于获取元素的文本内容无相当于原生js的innerText
text(value) 用于设置元素的文本内容参数为元素的文本内容

1.获取属性语法

prop（“属性”）

2.设置属性语法

prop(“属性”,“属性值”)

显示隐藏效果

三种预定速度之一的字符串（“slow”，“normal”，or “fast”)

show([speed,[easing],[fn]])

hide([speed,[easing],[fn]])

toggle([speed,[easing],[fn]])

滑动效果

slideDown([speed,[easing],[fn]])

slideUp([speed,[easing],[fn]])

slideToggle([speed,[easing],[fn]])

淡入淡出效果

fadeIn([[speed],[easing],[fn]])

fadeOut([[speed],[easing],[fn]])

fadeToggle([[speed],[easing],[fn]])

自定义动画animate

animate(params,[speed],[easing],[fn])

用来实现轮播图的方式：

透明度，过渡，显示隐藏，淡入淡入，滑入滑出，边距移动加定时器，动画

绑定事件

绑定事件bind(type,function)

移除事件（unbind）

后代元素和祖先元素

find：会遍历指定 DOM 元素下的所有后代层级。

children：只会遍历指定 DOM 元素的下一层级

parent：只会遍历指定 DOM 元素的下一层级

parents：遍历祖先元素

sibings：兄弟元素

nextAll()：同级的下级元素

prevAll():同级的上级元素

Ajax

AJAX = Asynchronous JavaScript and XML（异步的 JavaScript 和 XML）

AJAX 最大的优点是不刷新页面，就可以与服务器交换数据并更新部分网页内容。

url ：规定发送请求的 URL。默认是当前页面。
method：有两种请求方式：get和post
data：规定要发送到服务器的数据。
success(result,status,xhr) ：当请求成功时运行的函数。
async 布尔值，表示请求是否异步处理。默认是 true。

同步和异步的区别：

同步是指：发送方发出数据后，等接收方发回响应以后才发下一个数据包的通讯方式。
异步是指：发送方发出数据后，不等接收方发回响应，接着发送下个数据包的通讯方式。

jQuery尺寸

语法	用法
width()/height()	取得匹配元素宽度和高度值只算width/height
innerWidth()/innerHieght()	取得匹配元素宽度和高度值包含padding
outerWidth()/outerHeight()	取得匹配元素宽度和高度值包含padding/border
outerWidth(true)/outerHeight(true)	取得匹配元素宽度和高度值包含padding/border/margin

事件冒泡、

向父元素或者子元素传递事件

事件冒泡:当事件触发，由最内层的元素首先感知事件，然后它的父元素传递事件，相当于由内而外传播事件

事件捕获：当事件触发，由最外层的元素首先感知事件，然后它的子元素传递事件，相当于由外而内传播事件

解决办法：

调用stopPropagation()方法

return false的方法

闭包

在嵌套函数中，外层函数定义的变量，在内层函数引用，外层函数的周期结束，本应该消亡，但是内层函数仍然在使用，这时候就会出现闭包现象，影响程序，可以使用let关键字解决闭包影响

JQuery对象拷贝

使用$.extend()方法

$.extend([deep],target,object,[objectN])

1.deep:如果设为true为深拷贝，默认为false 浅拷贝

2.target：要拷贝的对象

3.object:待拷贝到第一个对象的对象

$.extend(true,targetObj,obj) 会覆盖targetObj里面原来的数据，深拷贝

$.extend(targetObj,obj) 只复制了数据类型地址拷贝给对象，浅拷贝

jQuery多库共存

jQuery使用 $作为标识符，随着 j Q u e r y 的流行，其他 j s 库也会用这$ 作为标识符，这样一起使用会引起冲突

1.如果是$符号冲突，我们就可以使用jQuery

2.让jQuery释放对$控制权，使用JQuery.noConflict()方法。

jQuery插件

必须先引入jQuery

1.jQuery插件库：http://www.jq22.com/

2.jQuery之家：http://www.htmleaf.com/

瀑布流

图片懒加载（图片使用延迟加载在可提高网页下载速度。能帮助减轻服务器负载）

当我们页面滑动到可视区域，在显示图片

我们使用jQuery插件库EasyLazyload.注意：此时的js引入文件和JS调用必须写到DOM元素（图片）最后面

全屏滚动（fullpage.js)

gitHub:http://github.com/alvarotrigo/fullPage.js

中文翻译网站：http://www.dowebok.com/demo/2014/77/

bootstrap js插件

BootStrap框架也是依赖于jQuery开发的，因此里面的js插件使用，也必须引入jQuery文件

bootstrap中文文档网站：https://v3.bootcss.com