属性：color,size,face
HTML的排版标签：
<h1-6>：标题标签
<p>：段落标签
<b>:加粗标签
<i>:斜体标签
<u>:下划线标签
<br>：换行标签
<hr>:水平线
HTML的图片标签
<img>标签
src:图片的路径
width,height,alt
HTML的超链接标签
<a>
href:链接的路径
target:连接打开的方法 _self,_blank,_parent
HTML的列表标签
<ul>:无序列表
<ol>:有序列表
HTML的表格标签：
<table>:表格标签
<tr>:表格的行
<td>:表格的列
HTML的表达标签
<form>：表单标签
action:表单提交的路径
method:表单的提交方式
get和post
get:地址栏会显示提交的信息，有大小限制
post:地址栏不会显示提交的信息，无大小限制
<input>
type=”text”:文本框
type=”password”:密码框.
type=”radio”:单选按钮.
type=”checkbox”:复选框.
type=”file”:文件上传.
type=”hidden”:隐藏字段.
type=”submit”：提交按钮.
type=”reset”:重置按钮.
type=”button”:普通按钮.
type=”image”:图片按钮.
<select>:下拉列表.
<textarea>:文本区
HTML的框架标签：
<frameset>:框架标签，与body冲突，
<frame>:切割为几部分
HTML的块标签
<div></div>：默认一个div独占一行
<span></spam>:默认在一行
css
CSS的概述
层叠样式表，可以美化HTML网页
CSS基本语法：
选择器｛属性：属性值；属性：属性值...｝
CSS的引入方式：
行内样式：直接在HTML的标签上使用style属性
页面内样式：在HTML的<head>标签中使用<style>标签设置CSS
外部样式：单独定一个一个.css的文件，用<link href = "" rele = "stylesheet" stype = "text/css"
CSS的选择器：
元素选择器：
div{
}
ID选择器：
#ID{
}
类选择器：
.divClass{
}
属性选择器：
input[type="text"]{
input中类型为text的元素
}
后代选择器：
div span{
查找div中所有的span元素
}
子元素选择器：
div>span{
查找这个div中第一层级的span元素
}
CSS的浮动：
float:
left：向左浮动
right：向右浮动
none:默认值，不浮动，显示其在文本中出现的位置
inherit：从父元素继承float属性的值
clear:清除浮动效果
left:左侧不允许有浮动的元素
right:右侧不允许有浮动的元素
both:两侧不允许有浮动的元素
none:运行浮动元素出现在两侧
inherit:从父元素继承clear属性的值
CSS的盒子模型
内边距：padding
padding-top:上内边距
padding-right:右内边距
padding-left:左内边距
padding-bottom:下内边距
边框：border
外边距：margin
margin-top:上外边距
margin-right:右外边距
margin-bottom:下外边距
margin-left:左外边距
CSS的定位
position
relative:相对定位
absolute:绝对定位
超链接的伪类
a:link{} :未访问的链接
a:visited{}:已访问的链接
a:hover{}:鼠标移动到链接上
a:active{}:选定的链接
JQuery
JQuery
是js的一个框架，对传统的JS进行了封装
JS的常用框架
JQuery,ExtJS,DWR,Prototype...
引用JQuery的方式：
引入JQuery的JS文件
<script src = .......><script>
$(function(){});
$(document).ready(function(){});
JS转为JQ对象
$(d1).html("JS对象转为JQ对象")
JQ转为JS对象
var $d1 = "$("#d1");
$d1.html("JQ对象的属性")
1.$d1[0].innerHTML = "将JQ的对象转成JS对象";
2.$d1.get(0).innerHTML = "将JQ的对象转成JS的对象方式二
JQ的效果显示
show() --显示
JQ对象.show();
JQ对象.show（"slow"）;//sloww,normal,fast
JQ对象.show(毫秒值)
JQ对象.show(毫秒值，function(){})
hide() --隐藏
JQ对象.hide();
JQ对象.hide（"slow"）;//sloww,normal,fast
JQ对象.hide(毫秒值)
JQ对象.hide(毫秒值，function(){})
slideDown() --向下滑动
JQ对象.slideDown();
JQ对象.slideDown（"slow"）;//sloww,normal,fast
JQ对象.slideDown(毫秒值)
JQ对象.slideDown(毫秒值，function(){})
slideUp() --向上滑动
JQ对象.slideUp();
JQ对象.slideUp（"slow"）;//sloww,normal,fast
JQ对象.slideUp(毫秒值)
JQ对象.slideUp(毫秒值，function(){})
fadeIn() --淡入
JQ对象.fadeIn();
JQ对象.fadeIn("slow"）;//sloww,normal,fast
JQ对象.fadeIn(毫秒值)
JQ对象.fadeIn(毫秒值，function(){})
fadeOut() --淡出
JQ对象.fadeOut();
JQ对象.fadeOut("slow"）;//sloww,normal,fast
JQ对象.fadeOut(毫秒值)
JQ对象.fadeOut(毫秒值，function(){})
animate()
自定义动画
togle(); --单击切换函数
JQ对象.toggle(fn1,fn2);单击第一下执行fn1;单机第二下执行fn2
JQ的选择器
id选择器
$("#id")
类选择器
$(".类名")
元素选择器
$("元素名称")
通配符选择器：
$("*")
并列选择器:
$("选择器，选择器，选择器")
后代选择器：
$("form input") 使用空格
属性选择器：
$("input[]属性名称=属性值")
表单对象属性：
:checked: 单选/复选
:selected:下拉列表
例：
$(function(){
$("#but1").click(function(){
// alert("aaaa");
$("#one").css("background","#bbffaa");
});
$("#but2").click(function(){
$(".mini").css("background","#bbffaa");
});
$("#but3").click(function(){
$("div").css("background","#bbffaa");
});
$("#but4").click(function(){
$("*").css("background","#bbffaa");
});
$("#but5").click(function(){
$("#two,span,.mini").css("background","#bbffaa");
});
});
层级选择器：
后代选择器： 使用空格 所有后代包含子孙及以下的元素
子元素选择器： 使用> 第一层的元素（儿子）
下一个元素： 使用+ 下一个同辈元素
兄弟元素： 使用~ 后面所有的同辈元素
例：
<script>
$(function(){
// 后代选择器:
$("#but1").click(function(){
$("body div").css("background","#bbffaa");
});
// body下的第一层div元素
$("#but2").click(function(){
$("body > div").css("background","#bbffaa");
});
// 查找下一个同辈的元素
$("#but3").click(function(){
$("#three + div").css("background","#bbffaa");
});
$("#but4").click(function(){
$("#two ~ div").css("background","#bbffaa");
});
});
</script>
基本过滤选择器：
first:选择元素下的第一个元素
last：选择元素下的最后一个元素
not(selector)：
even：选择元素下的偶数袁术
odd：选择元素下的奇数元素
eq(index)：选择元素下索引相等索引的元素
gt(index)：选择元素下索引大于索引的元素
it(index)：选择元素下索引小于索引的元素
header
animated
focus
例：
<script>
$(function(){
$("#but1").click(function(){
$("#three div:first").css("background","#bbffaa");
});
$("#but2").click(function(){
$("#three div:last").css("background","#bbffaa");
});
$("#but3").click(function(){
$("div:odd").css("background","#bbffaa");
});
$("#but4").click(function(){
$("div:even").css("background","#bbffaa");
});
$("#but5").click(function(){
$("#three div:eq(1)").css("background","#bbffaa");
});
});
</script>
内容选择器
contains(text)
empty
has(selector)
parent
<script>
$(function(){
$("#but1").click(function(){
$("div:contains('1')").css("background","#bbffaa");
});
});
</script>
属性选择器：
[attribute]
$("div[name = ""]"):自定义值
表单选择器
input:
text:
password
radio
checkbox
submit
image
reset
button
file
hidden
例：
<script>
$(function(){
$("#but1").click(function(){
$(":input").css("background","#bbffaa");
});
$("#but2").click(function(){
// $(":text").css("background","#bbffaa");
$("input[type='text']").css("background","#bbffaa");
});
});
</script>
表单属性选择器：
enabled
disabled
checked
selected
JQuery中添加和删除样式
addClass(); --添加样式
removeClass() --删除样式
toggleClass（）--有的话就去掉，没有就加上
JQuery对属性操作的方法：
attr():
使用方法1：$("").attr("src") 获取属性的值
使用方法2：$("").attr("src",test.jpg) 修改属性的值
使用方法3：$("").attr ("src":"test.jpg","width":"100")一次性修改多个属性
removaeAttr():
prop():新版本的方法
使用方法1：$("").prop("src")
使用方法2：$("").prop("src",test.jpg)
使用方法3：$("").prop("src":"test.jpg","width":"100")
JQuery的DOM操作
常用的方法：
append():在某个元素后去添加内容
appendTo():将某个元素添加到另一个元素后
remove():移除某个元素
insertBefor():在某个元素后插入
insertAfter():在某个元素前插入
empty():清空
JQuery的元素遍历
$.each(Objects,function(i,n){});
$.("").each(function(i,n));
HTML代码/文本/值
$("#id").html():获取这个函数所有的html代码
$("#id").html(val):覆盖这个函数所有的html代码
$("#id").text():获取元素的文本内容
$("#id").text(val):覆盖元素的文本内容
$("#id").val():获取文本框的值
$("#id").val(val):设置文本框的值
事件
跟原始事件一样，只不过去掉on:
focus,blur,click,dblclick,mouseover,mouseomve,mouseout,keyup,keydown,keypress,submit,change
$("#id").click(function(){
});
事件处理
on:在选择的元素上绑定一个或多个事件
bind:在选择的元素上绑定一个或多个事件
事件委派：
delegate:给未来的元素绑定事件
$("#id").delegate(".aaa","click",function(){})
事件切换：
鼠标悬停事件：hover
如果鼠标只想要有样式的效果：可以使用css的伪类
除了样式的效果还有别的业务逻辑的操作，hover函数
查找/过滤
parent() 找到父类
find() 查找
is() 判断是否
JavaScript
JavaScript概述
由网景公司研发的一种运行在浏览器端的脚本语言
JS的语法
js语法基本与java一致，
JS的是弱变量类型语言
JS的原始类型：undefined,boolean,string,number,null
Js的运算符：===类型与值都相同的情况下才会为true
JS中window对象的定时的操作
setInterval():设置时间（毫秒值）来周期性的调用函数或计算表达式
setTimeout():在指定的毫秒数后调用函数或计算表达式
clearInterval()：取消由setInterval设置的timeout
clearTimeout():取消由setTimeout方法设置的timeout
JS中的BOM对象
Window对象方法
alert():显示带有一段信息和一个缺人按钮的警告框
blur():把键盘焦点从顶层窗口移开
close():关闭浏览器
confirm():显示带有一段消息及确认按钮和取消按钮的对话框
creatrPopup():创建一个pou-up窗口
focus():把键盘的焦点赋予一个窗口
moveBy():可相对窗口的当前坐标把它移动指定的像素
moveTo():把窗口左上角移动到一个指定的坐标
open():打开一个新的浏览器窗口或查找一个已命名的窗口
print():打印当前窗口的内容
prompt():显示可提示用户输入的对话框
resizeBy():按照指定的像素调整窗口的大小
resizeTo():按窗口的指定大小调整到指定的宽度和高度
scrollBy():按照指定的像素值来滚动内容
scrollTo():把内容滚顶到指定的坐标
Navigator:包含的是浏览器的信息
appCodeName:返回浏览器的代码名
appMinorVersion:返回浏览器的初级版本
appName:返回浏览器的名称
appVersion:返回浏览器的平台和版本信息
browserLanguage:返回当前浏览器的语言
cookieEnabled:返回浏览器中是否启用cookie的布尔值
cpuClass：返回浏览器系统的CPU等级
onLine:返回指明系统是否出去脱机模式的布尔值
platform:返回运行浏览器的操作系统平台
systemLanguage:返回OS使用的默认语言
userAgent:返回由客户机发送服务器的user-agent头部的值
userLanguage:返回os的自然语言设置
Screen:用来获得屏幕的信息
availHeight:返回显示屏幕的高度
availWidth:返回屏幕的宽度
bufferDepth:设置或返回调色板的比特深度
History对象方法：
back():加载history的前一个URL
forward():加载history的下一个URL
go(-1):加载history中的某个具体页面
Location对象属性
herf:设置或返回完整的url
port:摄者或返回当前url的端口号
JS事件总结
onload:加载事件
onclick:单击事件
onsubmit:提交事件
onfocus:获得焦点
onblur:失去焦点
onchange:下拉列表改变事件
ondblclick:双击某个元素的事件
键盘操作事件
onkeydown:放在某个键上触发的事件
onkeyup:键盘抬起时触发的事件
onkeypress:
鼠标操作事件
onmousemove:鼠标移入
onmouseout:鼠标移出
JS中的DOM对象
DOM：Document Object Model:文档对象模型
将一个HTML的文档加载到内存形成一个属性结构，从而操作属性结构就可以改变HTML的样子
DOM中常用的操作
获得元素：
document.getElementById():通过id获得元素控制权
document.getElementByName():通过name属性获得元素
document.getElementByTagName():通过标签名获得元素
创建元素：
document.createElement():创建元素
document.createTextNode():创建文本
添加节点：
element.appendChild():在最后添加一个节点
element.insertBefore():在某个元素牵插入
删除节点：
element.removeChild():删除元素
JS的内置对象
Array
reverse()颠倒数组中元素的顺序
sort():对数组中的元素进行排序
Date:
Date():返回当前的日期和时间
getTime():返回从1970年1月1日至今的毫秒数
JS的全局函数
decodeURI():解码某个URL
decodeURIComponent():解码一个编码的URL组件
encodeURI():把字符串编码为URI
encodeURLCompinent():把字符串编码为URI组件
parseInt():解析一个字符串并返回一个整数
eval():把一段内容当成是JS的代码执行
BootStrap：前端响应式框架
需要添加一个<meta>标签
<meta name = "viewport" content = "width = device-width,initial-scale = 1">
JQuery文件务必在bootstrap.min.js前引入
Bootstrap的全局CSS
布局容器：.container类用于固定宽度并支持响应式布局的容器
.container-fluid类用于100%高度，占据全部视口(viewport)的容器。
栅格系统
BootStrap提供了一套响应式，移动设备优先的流式栅格系统，随着屏幕或市口（viewport）尺寸的增加，系统会自动分为最多12列。包含了易于使用的预定义类，还有强大的mixin用于生成更具意义的布局。
使用.row样式定义栅格的行
.col-xs-:超小屏幕 <768px
.col-sm-:小屏幕 >=768px
.col-md-:中等屏幕 >=970px
.col-lg-:大屏幕 >=1200px
收藏
淘帖
踩
