WEB开发基础
2018-08-29 10:28:11 0 举报AI智能生成
登录查看完整内容
WEB开发基础
作者其他创作
大纲/内容
JavaScript
ECMAScript基础语法
var 声明变量
测试语句
console.log(变量名)
控制台输出内容，测试
alert(变量名)
弹出框测试
数据类型
基本数据类型
number
var a = 123;//typeof 检查当前变量是什么数据类型console.log(typeof a)//特殊情况var a1 = 5/0;console.log(typeof e1) //Infinity 无限大. number类型
string
var str = '123'console.log(typeof str)
字符串拼接使用+
boolean
var b1 = false;console.log(typeof b1)
null
var c1 = null;//空对象. objectconsole.log(c1)
undefined
var d1;//表示变量未定义console.log(typeof d1)
引用数据类型
Function
Object
Array
Date
运算符
赋值运算符
=
算数元素符
+
-
*
/
%
++
--
比较运算符
==
等于 比较的是值
===
等同于（值和类型均相等）
!=
!==
数据类型转换
将数值类型转化成字符串类型
var n1 = 123;var n2 = '123';var n3 = n1+n2;// 隐式转换console.log(typeof n3);
将字符串类型转换成数值类型
var stringNum = '789.123wadjhkd';var num2 = Number(stringNum);console.log(num2)// parseInt()可以解析一个字符串 并且返回一个整数console.log(parseInt(stringNum))console.log(parseFloat(stringNum));
任何数据类型都可以转换为boolean类型
var b1 = '123';//truevar b2 = 0;//falsevar b3 = -123;//truevar b4 = Infinity; //truevar b5 = NaN; //falsevar b6; //falsevar b7 = null; //false// 非0既真console.log(Boolean(b7))
流程控制
if-else
&& ||
switch
while
do-while
for
常用内置对象
concat()
join()
pop
shift()
unshift()
push()
sort()
reverse()
length
String
Math内置对象
Function函数
DOM
获取DOM的三种方式
document.getElementById()
docuemnt.getElementsByClassName()
docuemnt.getElementsByTagName()
值的操作
innerText
文本内容，只包含文本不包含标签
innerHTML
渲染标签也可以设置文本
value
对于标签中有value属性的设置，表单控件
样式操作
对于style对象的操作，css中的属性都可以设置，注意margin-left属性，使用js设置值的时候是oDiv.style.marginLeft = '30px';
属性操作
比如标签中的id，class，title属性的设置，img标签的src属性，a标签中的href属性的属性注意：设置class的时候使用className
DOM操作
创建DOM
document.createElement('div');
追加DOM
父.appendChild(子标签)
适用于父DOM插入子DOM
父.insertBefore(要插入的节点，参考的节点)
适用于兄弟之间
删除DOM
父.removeChild(子)
BOM
jQuery
加载DOM
.ready()
将函数绑定到文档的就绪事件（当文档完成加载时）
jQuery事件绑定
1.第一个参数是事件类型，常用的click，blur，hover等
2.多个事件类型可以通过将每个空格分隔开来一次绑定
3.我们可以通过传递事件类型/处理程序对的对象来同时绑定多个事件处理程序
第二个参数是可选参数，作为event.data属性值传递给事件对象的额外数据对象
第三个参数是用来绑定的处理函数
移除事件
第一个参数是事件类型
如果不写参数，移除所有的事件
$( \"#foo\" ).unbind();
第二个参数是将要移除的函数
$( \"#foo\").unbind( \"click\" ，function(){})
合成事件
hover事件
鼠标悬停事件 .hover（handlerIn，handlerOut）
将两个处理程序绑定到匹配的元素，当鼠标指针进入和离开元素时执行
hover事件是鼠标的mouseenter和mouseleave事件的实现
$( selector ).mouseenter( handlerIn ).mouseleave( handlerOut );
事件对象的常见属性
e.type
获取事件的类型
e.target
获取事件发生的DOM对象
e.pageX和e.pageY
获取到光标相对于页面的x的坐标和y的坐标
e.which
该方法的作用是在鼠标单击事件中获取到鼠标的左、中、右键；在键盘事件中获取键盘的按键。了解
事件冒泡
阻止事件冒泡
e.stopPropagation()方法
注意
1.return false 在jQuery中是即阻止事件冒泡又阻止默认行为
2.jQuery不支持事件捕获
阻止默认行为
e.preventDefault()方法
鼠标事件
click
dblclick
双击触发 ，同上
mousedown()/up()
鼠标按下/弹起触发事件
mousemove()
鼠标移动事件
mouseover()/out()
鼠标移入/移出触发事件
鼠标指针穿过/离开被选元素或者当前元素的子元素，会触发事件
mouseenter()/leave()
鼠标进入/离开触发事件*
鼠标指针只在穿过/离开被选元素触发事件
focus()/blur()
鼠标聚焦/失去焦点触发事件（不支持冒泡）
keydown()/up
键盘按键按下/弹起触发
表单事件
change()
表单元素发生改变时触发事件
此事件仅限于<input>元素，<textarea>框和<select>元素
对于选择框，复选框和单选按钮，当用户使用鼠标进行选择时，会立即触发事件但对于其他元素类型，事件将延迟到元素失去焦点
select()
文本元素发生改变时触发事件
此事件仅限于input type类型为text和textarea表单元素
submit()
form表单有默认的submit行为，当对input type=submit按钮点击的时候会触发form的默认action行为，此时可以调用 jquery的submit方法通过e.preventDefault()来阻止默认事件，这样我们就能动态的跟服务端来发送数据了
Bootstrap
基础类
按钮 .btn
颜色
.btn-info
.btn-default
.btn-warn
.btn-success
.btn-link
尺寸
.btn-lg
.btn-sm
.btn-xs
关闭按钮（模态框）
图片
响应式图片 .img-responsive
居中，使用 .center-block（不要使用text-center）
原理：max-width:100%;height:auto;display:block
形状
圆角 .img-rounded
圆形 .img-circle
缩略图 .img-thumbnail
表格 .table
样式
带边框 .table-bordered
条纹 .table-striped
.table-hover
.table-condensed紧凑表格
响应式表格：给.table父级添加.table-responsive
表单元素
布局方式
.form-group
.form-horizon
.form-inline
表单类
checkbox父级标签
.checkbox
.checkbox-inline
.disabled禁用
radio父级标签
.radio
.radio-inline
.has-error
表单验证 .has-feedback
.has-success
.has-warning
高度设置
表单控件
.input-lg
.input-sm
表单组控件
.form-group-lg
.form-group-sm
插件
模态框
可配置尺寸
可配置动画
下拉菜单
滚动监听
Tooltip
弹出窗
.alert警告窗
Collapse
.collapse的元素会隐藏
通过data-toggle='collapse'和data-target来触发显示隐藏
轮播Carousel
栅格系统
.container / .container-fluid
.row
.col-lg-
.col-md-
.col-xs-
.col-sm-
组件
导航 .nav
普通标签页 .nav-tabs
胶囊标签页 .nav-pills
垂直排列 .nav-stacked
两端对齐 .nav-justified
.navbar-left .navbar-right
标签页
推荐使用li内嵌a标签
.disabled 改变外观，不改变功能，a标签仍可点击跳转
.media图文混合
对齐
.media-left
.media-right
.media-top
.media-middle
.media-bottom
翻页组件
.progress进度条
.progress-bar 子类
背景色
.progress-bar-success
.progress-bar-warning
条纹
.progress-bar-striped
.active添加动画
.badge 未读消息
利用:empty隐藏所有空内容
其他
文字
.text-center
.text-left
.text-right
布局
.clearfix清除浮动
.center-block居中
，col-x-offset-1:左偏移1个单位距离
显示隐藏
.show
.hide
.invisible
WEB开发基础
前端介绍
前端的历史
WEB1.0
一般都是静态的网页页面，没有用户交互
网页三剑客
Dreamweaver
Fireworks
Flash
WEB2.0
用户需求和体验上升，开始需求交互和动态网页
网页开发标准
W3C
前端组成
网页结构
HTML
超文本标记语言
网页外观
CSS
层叠样式表
网页行为
脚本语言
HTML介绍
标记语言
标记语言既描述了文档本身的信息（问题内容和回答的情况），也描述了文档的结构和各部分的作用
什么是标签
在HTML中规定标签使用英文的的尖括号即`<`和`>`
HTML中标签**通常**都是成对出现的，分为开始标签和结束标签
标签之间是可以嵌套的
HTML标签不区分大小写（建议小写）
开发环境
Hbuild
Sublime Text
Dreamweare
后缀名规范
html
htm
文档结构
head标签
title标签，显示网站的标题
meta标签，提供有关页面的原信息
style标签，定义内部样式表
link标签，链接css资源文件、网站图标
script标签，链接脚本js文件
body标签
行内标签
1.在一行内显示
2.不能设置宽高，默认是内容的宽高
行内块是属于行内标签
2.可以设置宽高
img input
块级标签
1.独占一行
2.可以设置宽高，如果不设置宽高吗，那么是父亲的100%宽度
常用标签
h1~h6标题标签
p段落标签
ul无序列表标签
ol有序列表标签
div盒子标签
table表格标签
th定义表头
tr定义表行
td定义表单元格数据
form表单标签
action
定义表单被提交时发生的动作
提交给服务器处理程序的地址
method
作用：定义表单提交数据时的方式
get
默认值，明文提交，所提交的数据时可以显示在地址上，安全性低
提交数据有大小限制，最大为2KB
post
隐式提交-所提交的内容，不会显示到地址栏上，安全性高
无大小限制
enctype
编码类型，即表单数据进行编码的方式
允许表单将什么样的数据提交给服务器
取值：1.application/x-www-form-urlencoded 默认。 允许将 普通字符，特殊字符，都提交给服务器，不允许提交 文件
2.multipart/form-data，允许被将文件提交给服务器
3.text/plain 只允许提交普通字符。特殊字符，文件等都无法提交
注意：如果有文件需要提交给服务器，method必须为POST，enctype必须为multipart/form-data
表单控件分类
textarea文本域
作用
允许用户录入多行数据到表单控件中
属性
rows 指定文本区域的行数，变相设置当前元素高度
select和option选项框
select属性
size 取值大于1的话，则为滚动列表 否则就是下拉选项框
option属性
value 选项的值
selected 预选中
注意：如果不设置selected属性的话，那么选项框中的第一项会默认被选中
input组元素
type
button
普通按钮，与form表单没有任何关系
text 明文显示用户输入的数据
<input type=\"text\">
password 密文显示用户输入的数据
<input type=\"password\">
radio单选按钮 checkbox 复选框
checked设置值后被选中
submit 功能固定化，负责将表中中的表单控件提交给服务端
<input type=\"submit\">
file 上传文件所用
<input type=\"file\">
value 控件的值既要提交给服务器的数据
name 控件的名称，服务端用
disabled 该属性只要出现在标签中，表示的是禁用该控件
for属性 表示与该label相关联的表单控件元素的ID值
“nbsp ”；空格字符
img标签
br换行标签，hr分割线标签....
a超链接标签
span标签
标准文档流
UI在设计稿拿软件画前端的页面，可以任意提的地方来画，按照一定的规则来做站
定义
层叠样式表，修饰html结构
让结构好看
css引入方式
内嵌式 <h1 style='font-size: 10px;color: yellow'>路飞学诚</h1>
内联式
<style type=\"text/css\">h1{ font-size: 30px; color: red; } </style>
外链式 <link rel=\"stylesheet\" type=\"text/css\" href=\"./css/index.css\">
导入式 @import url('./css/index.css');
选择器
基础选择器
* 通配符选择器
匹配所有的标签
通常不建议使用通配选择符，因为它会遍历并命中文档中所有的元素，出于性能考虑，需酌情使用
#wrap id选择器
匹配以唯一标识符id属性等于wrap的对象作为选择符，唯一的只有一个
div 标签选择器
匹配div标签的选择器
. 类选择器
以class属性包含myclass的E对象作为选择符
不同于ID选择符的唯一性，类选择符可以同时定义多个
高级选择器
ul>li 子代选择器
只能命中子元素，而不能命中孙辈
ul a 后代选择器
选择符将会命中所有符合条件的后代，包括儿子，孙子，孙子的孙子...
li+a 相邻选择器
选择紧贴在li元素之后a元素
li a 兄弟选择器
选择li元素后面的所有兄弟元素a
选择器的权重
内嵌样式1000>ID选择器100>类选择器10>标签选择器1
伪类选择器
E:link
设置超链接a在未被访问前的样式
E:visited
设置超链接a在其链接地址已被访问过时的样式
E:hover
设置元素在其鼠标悬停时的样式
E:active
设置元素在被用户激活（在鼠标点击与释放之间发生的事件）时的样式
属性选择器
E[att]
选择具有att属性的E元素
E[att=\"val\"]
选择具有att属性且属性值等于val的E元素
E[att^=\"val\"]
选择具有att属性且属性值为以val开头的字符串的E元素
E[att$=\"val\"]
选择具有att属性且属性值为以val结尾的字符串的E元素
E[att*=\"val\"]
选择具有att属性且属性值为包含val的字符串的E元素
伪元素选择器
E:before
设置在对象前（依据对象树的逻辑结构）发生的内容。用来和content属性一起使用，并且必须定义content属性
E:after
设置在对象后（依据对象树的逻辑结构）发生的内容。用来和content属性一起使用，并且必须定义content属性
字体font
font-style
指定文本的样式
normal
正常字体
italic
斜体字体
oblique
倾斜字体
font-weight
指定文本字体的粗细
正常的字体。相当于数字值400
bold
粗体。相当于数字值700
bolder
定义比bold更重的值
lighter
定义比normal更轻的值
<integer>
用数字表示文本字体粗细。取值范围：100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900
font-size
指定文本字体大小
font-family
指定文本使用某个字体
颜色 color
Color Name
16个基础颜色关键字
red
yellow
blue
black
green
扩展颜色关键字
十六进制
#RRGGBB或#RGB
RR:红色
GG:绿色值
BB:蓝色值
十六进制记法
以上三个参数，取值范围为：00 - FF
参数必须是两位数。对于只有一位的，应在前面补零
如果每个参数各自在两位上的数字都相同，那么本单位也可缩写为 #RGB 的方式。例如：#FF8800 可以缩写为 #F80
此色彩模式与RGB色彩模式不同
RGB
RGB记法
以上三个参数，正整数值的取值范围为：0 - 255。百分数值的取值范围为：0.0% - 100.0%
RGB色彩是通过对红(R)、绿(G)、蓝(B)三个颜色通道的变化和它们相互之间的叠加来得到各式各样的颜色的
RGBA
文本text
text-align
left 内容左对齐
center 内容居中对齐
right 内容右对齐
justify 内容两端对齐
text-indent 文本的缩进
text-decoration
none 文字无装饰
underline 下划线
overline 上划线
line-through 删除线
line-height
指定文本字体的行高，字体最底端与字体内部顶端之间的距离，设置行高=盒子的高度，使文本垂直居中
背景 background
background-image
none 无背景图
background-image: url(./1.jpg)
background-position
background-repeat
repeat
背景图像在横向和纵向平铺 默认
repeat-x
背景图像横向平铺
repeat-y
背景图像纵向平铺
no-repeat
背景图像不平铺
background-attachment
scroll
背景图像相对于元素固定，也就是说当元素内容滚动时背景图像不会跟着滚动，因为背景图像总是要跟着元素本身。但会随元素的祖先元素或窗体一起滚动
fixed
背景图像相对于窗体固定
background-color
transparent 默认透明
盒模型
width
盒子内容的宽度
height
盒子内容的高度
border 边框
用法：boder：2px solid red 译：设置四个边的边框宽度为2px，边框为实线 ，边框颜色为红色
border-width
使用说明：分别设置四个边框宽度
如果提供全部四个参数值，将按上、右、下、左的顺序作用于四边
如果只提供一个，将用于全部的四边
如果提供两个，第一个用于上、下，第二个用于左、右
如果提供三个，第一个用于上，第二个用于左、右，第三个用于下
border-style
none 默认 无轮廓
dotted 点状轮廓
dashed 虚线轮廓
solid 实线轮廓 使用较多
double 双线轮廓
用法：与border-width使用说明一样
border-color
border-left
border-left-width
border-left-style
border-left-color
border-left：1px solid red
border-right
border-right-width
border-right-style
border-right-color
border-right：2px dotted yellow
border-bottom
与border-left和border-right用法雷同
border-top
border-radius
常用
border-radius:50% 圆
border-radius：
border-shadow
padding 内边距
内容区域（content）到边框 (border) 的距离
内边距会扩大元素所在的区域
margin 外边距
外边距 四个方向值
注意：外边距合并的情况
1.外边距合并只会发生在上下两个方向上，并且只有块级元素上
2.当两个垂直外边距相遇时，会形成一个外边距，称为外边距合并所有毗邻的两个或更多盒元素的margin将会合并为一个margin共享之。毗邻的定义为：同级或者嵌套的盒元素，并且它们之间没有非空内容、Padding或Border分隔
3.父子嵌套设置垂直外边距之后，会形成外边距合并，影响页面布局
解决办法：
1.父级或子元素使用浮动或者绝对定位absolute
2.父级overflow:hidden;
3.父级设置padding（破坏非空白的折叠条件）
4.父级设置border
浮动
浮动效果
float：left
左浮动 左侧为起始。从左往右依次排列
float：right
右浮动 右侧为起始。从右往左依次排列
float:none
默认 不浮动
文档流的概念： 可见元素在文档中的显示位置
浮动产生的效果
浮动可以使元素按指定位置排列，直到遇到父元素的边界或另一个元素的边界停止
浮动特性
1.浮动可以使元素脱离文档流 ，不占位置
2.浮动会使元素提升层级
3.浮动可以使块元素在一行排列，不设置宽高的时候，可以使元素适应内容
4.浮动可以使行内元素支持宽高
浮动可以是元素脱离文档流，它可以是元素 并排显示，1.有贴边现象 2.有收缩现象（块元素转换成行内元素）3.只要盒子浮动了 不区分行内还是块级标签，可以任意的设置宽高。但是大家记住，要浮动一起浮动，要不一起不浮动
浮动产生的问题
在页面布局中，一般情况父元素的高度是不设置的，通过子元素来填充它的高度。
但是子元素设置浮动之后，不会撑开父元素的高度。因为子元素 不占位置
浮动解决方案
1.给父盒子设置固定高度
缺点：不灵活
2.给浮动元素最后一个子元素后面添加一个空的块级元素，且该元素不浮动，设置clear:both
缺点：结构冗余，无缘无故添加了一个块级元素
3.官方写法：建议大家这样去写 给父盒子设置： .clearfix:after{visibility:hidden;clear:both;display:block;content:\".\";height:0}子主题
4.给父元素添加overflow:hidden 推荐使用
定位
static
默认 没有定位
relative
相对定位：相对于自身进行定位
absolute
1.无父级元素定位时，以浏览器的左上角为基准
2.有父级元素的情况下，父级设置相对定位，子级设置绝对定位，是以父盒子为基准进行定位
这就是所谓的页面布局 “父相子绝”
1.提成层级
2.脱离标准流
固定定位：设置固定定位之后 当前元素不会发生改变，可以做小广告
页面布局小技巧： 通常情况下，浮动和定位要结合去用，大家也能看出来，一般盒子的排列，要横排盒子了我们用浮动，调成盒子中小元素的位置偏移量我们尽量用定位
z-index
1.z-indee属性设置元素的堆叠顺序(层级关系)，拥有更高的堆叠顺序的元素总是会处于堆叠顺序较低的元素前面
2.对于同级元素，默认或position:static情况下文档流后面的元素会覆盖前面的
3.对于同级元素，position不为static且z-index存在的情况下z-index大的元素会覆盖z-index小的元素，及z-index越大优先级越高
4.记得从父原则
所谓从父元素 子级的永远大于父级的
职业： Data Analyst
0 条评论
回复 删除
下一页
