前端课程阶段总结
一、HTML
用来写页面的
(一)文字排版标签
标题标签h1~h6
独占一行
字体加粗
内置字号，h1最大，h6最小
横线标签 <hr>
自闭合标签
常用属性：
width: 横线的长短
size：横线的粗细
color：横线的颜色
align：横线的水平位置 left/center/right
段落标签 <p>
换行标签 <br>
自闭合标签
(二)图片标签 <img>
标签的属性：
src：图片的路径
width：图片显示的宽度
height：图片显示的高度
title：鼠标悬浮提示
alt：图片加载不出来时，显示的文字提示信息
(三)清单和超链接标签
清单标签
无序清单<ul>：没有序号的清单，清单项前边显示一个小标记
属性：
type：circle小圆圈， disc 小圆点，square 小方块
有序清单<ol>：清单项前边有序号
属性：
type：1/a/A/i/I
清单项标签<li>
超链接标签<a>
属性：
href：跳转的地址
target：在哪显示新页面。_self， _blank在新窗口显示页面， frame的名称
(四)表格标签
<table>：表格整体
width：表格的宽度
align：表格整体的水平位置
bgcolor：表格的背景色
border：边框线条
<tr>：行
height:行高
align：行里所有单元格的内容的水平位置
<td>：单元格
align：单元格里内容的水平位置
<th>：表头单元格
用法和td完全一样，只是自带样式：加粗，并水平居中
<caption>：表格的标题
和tr同一级别的标签，通常是写在第一个tr之前
合并单元格的步骤：
1. 确定用哪个属性：跨行合并用rowspan，跨列合并用colspan
2. 确定属性加在哪个单元格上：加要在合并的单元格里，最前边的那单元格上
3. 确定属性的值是多少：要合并几个单元格，值就是几
4. 删除被合并掉的单元格
(五)框架标签
<frameset>
rows：上下分行。rows=”200,*”分成上下两行，上边行高200px，下边行高剩余全部。分成几部分，就必须有几frame
cols：左右分列。用法和rows完全一样
<frame>
name：框架的名称，主要是给超链接a标签使用的
src：要嵌套进来的页面的路径
noresize：固定值noresize。表示框架不可拖动更改大小
(六)表单标签
<form>标签
属性：
name：表单的名称
action：表单数据提交的路径
method：表单数据提交的方式。get/post
get和post提交的区别：
get提交数据在请求行里，会显示到地址栏；post提交在请求体里，不会显示到地址栏
get提交不安全；post提交相对安全
get提交有长度限制（IE）；post提交理论上没有长度限制
<input>标签
type：
text：文本框
password：密码框。显示的是掩码
radio：单行按钮。name相同的radio属于同一组，同组互斥
在需要默认选中的选项上增加属性：checked = “checked”
checkbox：复选框。name相同的checkbox属于同一组，目的仅仅是方便服务端接收数据 在需要默认选中的选项上增加属性：checked = “checked”
button：普通按钮。没有绑定任何事件
submit：表单提交按钮。把按钮所在的表单提交
reset：重置按钮。把按钮所在的表单数据重置为默认值
image：图片提交按钮。功能和submit完全一样，只是用一张图片作为按钮
hidden：隐藏域。不会显示到页面上的表单项，如果有name属性，表单项的值可以被提交
name：
如果表单项的数据需要提交，就必须有name属性
readonly：
固定值readonly，表示表单项的值不可更改，但是如果有name，可以被提交
disabled：
固定值disabled，表示表单项不可用，也不会被提交
<select>标签：下拉框
<select>:
name：如果数据需要提交，就必须有name属性
multiple：固定值multiple，表示下拉框可以多选
size：下拉框的高度，可以显示几个选项
<option>：
value：下拉选项的值。选中哪个下拉选项，就提交哪个选项的value值
selected：这个选项被选中
下拉框的默认值：
在没有手动设置默认值的情况 ，会默认选中第一个选项
手动设置默认值：在需要默认选中的选项上，增加属性 selected=”selected”
<textarea>文本域标签
name：如果数据需要提交，就必须有name属性
rows:文本域的高度可以显示几行
cols：文本域的宽度可以显示几列
文本域的默认值设置：
在textarea的标签体里设置的
二、CSS
(一)怎样引入css—引入方式
行内样式
<div style=”width:200px;height:200px;background-color:red”></div>
内部样式
在head标签里增加子标签style，然后把样式代码写在style标签里
<style type=”text/css”>
/*写样式代码*/
选择器{样式名:值; 样式名:值;….}
</style>
外部样式
在head标签里增加子标签link，引入外部css文件
<link rel=”stylesheet” type=”text/css” href =”css文件路径” >
(二)怎样选中要修饰的标签--选择器
基本选择器
- 标签选择器 标签名称{样式名:值; 样式名:值;….}
- id选择器 #id值{样式名:值; 样式名:值;….}
- 类选择器 .class名称{样式名:值; 样式名:值;….}
优先级：id选择器 > 类选择器 > 标签选择器 如果优先级相同，后加载覆盖先加载
层级选择器
父选择器 后代选择器 大后代选择器.. {样式名:值; 样式名:值;….}
注意：空格表示后代，而不是父子关系
属性选择器
选择器[属性名=”值”] {样式名:值; 样式名:值;….}
三、JavaScript
用来操作浏览器和html文档，实现动态效果的
(一)引入方式
内部js
使用script标签
<script type=”text/javascrit”>
//js代码
</script>
外部js
<script type=”text/javascript” src=”js文件路径 ”></script>
注意：
js代码在页面内任意位置都可以运行，但是越晚越好
内部和外部写法都是script标签，但是一个script标签不能既内部，又外部
(二)ECMAScript（语法）
变量定义
所有变量定义都使用 var
数据类型
基本数据类型
boolean
number
string
null
undefined
引用数据类型
Array
创建数组：var arr = [];
常用属性：length 可以获取数组的长度，也可以设置数组的长度
常用方法：
concat：把多个数组合并成一个
join：把数组拼接成字符串
reverse：反转数组里元素的顺序。不会返回新数组
Date
创建对象：
var date = new Date();
var date = new Date(年，月，日); 月是从0开始
var date = new Date(年，月，日，时，分，秒); 月是从0开始
常用方法：
toLocaleString()转换成本地日期格式的字符串
getTime() 获取毫秒值
setTime() 设置毫秒值
Math
不需要创建对象，直接使用它的方法
常用方法：
abs：取绝对值
floor：向下取整
ceil：向上取整
round：四舍五入
random：取随机数
RegExp
创建对象：var reg = /正则表达式/;
常用方法：
reg.test(字符串)：返回boolean值，如果校验格式符合，结果是true；否则是false
运算符
==和===
==:比较值
===:比较值和类型
&&和||
js的boolean运算中只有&&和||，没有&和|
+-*/
+：有字符串是拼接字符串
-*/：有字符串，会先转换成数字再运算。如果转换不成功，结果是NaN
逻辑语句
if判断：
false，0, “”, null, undefined是false，其它是true
函数
普通函数
function add(a, b){
return a+b;
}
var result = add(3,5);
匿名函数
var fn = function(){
alert();
}
通过变量名调用匿名函数
把匿名函数作为另外一个函数的实参
事件
常见的事件
onclick：单击
onsubmit：表单提交
onchange：域内容改变，一般监听select下拉框
onload：加载完成事件，一般用于监听页面加载完成
事件绑定方法
<input type=”button” οnclick=”alert()” value=”按钮1”/>
<input type=”button” οnclick=”showWin()” value=”按钮2”/>
function showWin(){
alert();
}
<input type=”button” id=”btn3” value=”按钮3”/>
document.getElementById(“btn3”).onclick = function(){
alert();
}
(三)BOM
有哪些bom对象
window：浏览器窗口对象，是所有bom对象的顶级对象
location：浏览器地址信息对象
history对象：浏览历史记录信息对象
navigator对象：浏览器信息对象，只读，可以获取浏览器的内核、版本等信息
screen对象：浏览器屏幕显示信息
window对象
提供了弹窗方法
普通弹窗：alert() 没有返回值
确认弹窗：confirm() 返回boolean值
输入弹窗：prompt() 返回输入的内容或者null
提供了定时器
执行多次的定时器
设置：var timer = setInterval(函数对象, 间隔毫秒值);
清除：clearInterval(timer);
执行一次的延时器
设置：var timer = setTimeout(函数对象, 延迟毫秒值);
清除：clearTimeout (timer);
提供了全局函数
parseInt：转换成整数
parseFloat：转换成小数
eval：字符串作为js代码来执行
encodeURI：编码字符串
decodeURI：解码字符串
location
获取网址：var url = location.href
设置网址：location.href = “”; 在当前窗口打开页面
window.open(“”); 在新窗口打开页面
history
history.forward()前进一步
history.back() 后退一步
history.go(n) 切换n步
(四)DOM
操作html文档
l 操作标签
获取标签
getElementById:根据id获取一个Element对象
getElementsByName：根据name属性值获取一批Element对象
getElementsByTagName：根据标签名称获取一批Element对象
getElementsByClassName：根据class名称获取一批Element对象
创建标签
document.createElement(“标签名称”);
插入标签
父标签对象.appendChild(子标签对象);
是剪切插入的方式
删除标签
标签对象.remove()
操作标签本：
获取标签体：var inner = 标签对象.innerHTML;
设置标签体：标签对象.innerHTML= “新标签体，如果有html代码会生效”
操作属性
- 获取属性
var v = 标签对象.属性名
var v = 标签对象.getAttribute(“属性名”);
- 设置属性
标签对象.属性名=值
标签对象.setAttribute(“属性名”,值);
- 删除属性
标签对象.removeAttribute(“属性名”);
四、jQuery
(一)dom操作
获取标签-选择器
基本选择器
标签选择器 $(“div”)
id选择器 $(“#id”)
类选择器 $(“.class名称”)
层级选择器
$(“a b”) 祖孙选择器
$(“a>b”) 父子选择器
$(“a+b”) 兄弟选择器：同级后边相邻的元素
$(“a~b”)弟弟选择器：同级后边所有的元素
属性选择器
$(“A[attr]”)：获取包含有attr属性的A元素
$(“A[attr=’v’]”)：获取attr属性值是v的A元素
$(“A[attr^=’v’]”)：获取attr属性值以v开头的A元素
$(“A[attr$=’v’]”)：获取attr属性值以v结尾的A元素
$(“A[attr*=’v’]”)：获取attr属性值包含v的A元素
$(“A[attr!=’v’]”)：获取attr属性值不等于v的A元素
$(“A[attr=’v’][attr2]”)：复合属性选择器
基本过滤选择器
一般是和其它选择器配合使用，对其它选择器的结果进行再次过滤
:first 获取第一个 $(“div:first”)
:last 获取最后一个
:not(selector) 不要selector的结果 $(“div:not(.cls)”)
:odd 获取索引为奇数的元素 $(“div:odd”)
:even 获取牵引为偶数的元素
:gt(n) 获取索引大于n的元素
:lt(n) 获取牵引小于n的元素
:eq(n) 获取牵引等于n的元素
:animated 获取动起来的动画
:header 获取所有标题元素h1~h6
表单属性选择器
:enabled
:disabled:
:selected 获取被选中的下拉选项option标签
:checked 获取被选中的单选或复选选项
其它dom操作
操作标签体:
相当于js的innerHTML
获取标签体：jQuery对象.html();
设置标签体：jQuery对象.html(“<h1>代码会生效</h1>”);
操作标签体里文本:
相当于js里的innerText
获取文本：jQuery对象.text();
设置文本：jQuery对象.text(“<h1>代码会生效</h1>”);
操作表单项的值:
可以操作任意表单项的值，比如：文本框、密码框、单选、多选、下拉框的值、文本域的值
获取值：jQuery对象.val();
设置值：jQuery对象.val(值);
操作样式:
获取样式：jQuery对象.css(“样式名称”);
设置样式：jQuery对象.css(“样式名称”,”样式值”);
操作属性
获取属性：
jQuery对象.attr(“属性名”)
jQuery对象.prop(“属性名”)
设置属性：
jQuery对象.attr(“属性名”, 值)
jQuery对象.prop(“属性名”, 值)
删除属性：
jQuery对象. removeAttr(“属性名”, 值)
jQuery对象.removeProp(“属性名”, 值)
注意：操作selected和checked属性必须使用prop的方法。其它属性优先尝试attr的方法
操作class属性
添加class：jQuery对象.addClass()
删除class：jQuery对象.removeClass()
切换class：jQuery对象.toggleClass()
创建标签
$(“<li id=”li”>可以加标签体</li>”)
插入标签
正向插入
A.append(B)： 把B插入A内部的最后
A.prepend(B)：把B插入到A内部最前
A.before(B)：把B插入A的前边
A.after(B)：把B插入到A的后边
反射插入
A.appendTo(B)：把A插入到B内部最后
A.prependTo(B)：把A插入到B内部最前
A.insertBefore(B)：把A插入到B前边
A.insertAfter(B)：把A插入到B后边
删除标签
jQuery对象.remove()：删除标签
jQuery对象.empty()：清除子标签
(二)event
和js事件的区别：
jQuery事件名称不带on
jQuery事件是方法
jQuery响应行为是事件方法的实参
常用的事件：click( function), change(function), submit( function), $(function)或者$(document).ready( function)
hover()函数
如果传两个函数实参，第一个是鼠标移入的响应行为，第二个是鼠标移出的响应行为
如果传一个函数实参，表示鼠标移入移出共同的响应行为
on()函数：给未来元素绑定事件
现在元素.on(“事件名称”，”选择器字符串”, function)
(三)循环遍历
基本循环遍历
jQuery框架的全局each方法
$.each(被循环遍历的对象, function(index, element){
index:索引
element：被循环遍历中的每一个元素
this：和element作用一样
});
jQuery对象的each方法
jQuery对象.each(function(index, element){
index:索引
element：被循环遍历中的每一个元素
this：和element作用一样
});
(四)表单校验插件
1. 需要引入的文件
jQuery类库
插件自己的js文件
2. 基本校验语法
表单的jQuery对象.validate({
rules:{
表单项的java前端的基础name:{
规则名称: 值,
…
规则名称: 值
}
},
messages:{
表单项的name:{
规则名称: 值,
…
规则名称: 值
}
}
});
3. 自定义错误信息的位置
在想要显示错误信息的地方加上如下标签：
<label class=”error” for=”表单项的name”></label>
4. 自定义校验规则
$.validator.addMethod(“规则名称”,function(value, element, params){
value：要校验的值
element：要校验的表单项标签对象
params：使用规则 时规则的值
校验通过return true；否则return false
}, “默认提示信息”);
五、bootstrap
(一)需要引入的文件
css文件夹、fonts文件夹、js文件夹
注意：三个文件夹的层次结构不要乱
(二)栅格系统
容器
container：宽度固定的，但是会随着设备类型而改变。两边有留白
container-fluid：宽度始终100%
行row
一行分成12份
单元格col-*-*
第一个 *：表示设备类型
lg:大型设备台式电脑>=1200px
md:中型设备台式电脑>=992px
sm:平板设备>=768px
xs:手机设备<768px
版权声明：
本文来源网络，所有图片文章版权属于原作者，如有侵权，联系删除。
本文网址：https://www.bianchenghao6.com/h6javajc/4103.html