本帖最后由 chenlong43210 于 2018-5-3 16:18 编辑
HTML HTML(Hyper Text Markup Language)：超文本标记语言。 作用：制作页面（静态页面），数据显示的描述。 HTML文件后缀：.html|.htm 书写规则： 标签必须用<>引起来，已经定义好的标签 属性 key="value" （建议属性值用双引号引起来） 不区分大小写标签： <!-- 注释内容 --> //版本声明 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> //html4标准 <!doctype html> //html5标准 <html></html> //根标签 <head></head> //头标签，头部分，语言 <title></title> 标题标签 <link> 资源引用标签 rel="stylesheet" //描述目标文件与当前文档的关系，外部样式表 type="text/css" //文档类型 media //指定目标文档在哪种设备上起作用 如：<link rel="stylesheet" type="text/css" media="screen,print" href=".css"> <style type="text/css"> 定义样式，引入文档类型 <body> 体标签 </body> <font>文字</font> //字体标签 face="黑体"(字体样式) size="(1-7字号)" 排版标签：<h1>...<h6> //标题标签。换行，留白，加粗 <p> //段落标签，前后空行 <hr/> //水平分隔线 <br/> //换行 <center> //内容居中显示 <b> 粗体|<i>斜体|<u>下划线 <img src="图片源"/> //图片标签 alt="" 图片找不到显示此内容 title="" 鼠标移上显示此内容 //列表标签 <ol> //有序列表。默认1.2.3. type="1" 默认。(a,A,i 罗马字符,I 大写罗马字符) start="10" 从10开始 <li> //列表项，缩进 <ul> //无序列表。 type="disc" //默认，实心原点(circle空心原点，square实心正方形) <li> //缩进 //超链接。链接资源<a></a> href="" //""默认指向当前文件目录。如果不指定任何协议，按照默认协议file://解析。#表示当前页面 target="_self" //默认,当前页面打开 _blank 新页面打开 框架名 打开到指定框架显示 //表格 <table> //表格 cellpadding 文字边距 cellspacing 单元格间距 <thead> <tbody> //不定义也存在，可省略 <caption> //表格标题，居中 <tr> //行 <th> //表头单元格，加粗居中 <td> //单元格 colspan="" //占的列数，跨列合并 rowspan="" //占的行数，跨行合并
//表单标签 <form> action="url?name=chen" //指定提交路径并且get提交数据，不写默认提交到本页面 method="get|post" //提交方式，默认get，不只有这两种 enctype="application/..." 以键值对的形式发送请求报文 multipart/... 用于传送文件流 <input /> 表单输入 type="text" //文本框 属性maxlength password//密码框 radio //单选按钮，需指定value属性用于提交 checkbox//多选按钮，需指定value属性用于提交。如果name一样，会提交多个 button //普通按钮。无任何功能 reset //重置按钮。还原表单初始状态 submit //提交按钮。 file //文件框。value返回选择文件的路径 hidden //隐藏字段。页面上不显示，但会提交到服务器 image //图片提交按钮，图片作为按钮 src="图片路径" name 必须有name属性才可以提交至服务器 可以将几个单选框(复选框)设置为一组，name属性相同即可 value="" //文本框默认值、按钮名称 size="" //文本框的长度 maxlength="" //输入的最大长度 placeholder="" //用于文本框灰化提示内容，提示内容不会提交至服务器 disabled="disabled" //禁用此元素，不会提交 readonly="readonly" //只读文本框 <select name=""> 下拉框，需指定value属性用于提交 size="" 行数 multiple=true 成为多选列表框 <option value=""> selected="selected" //默认选中此项 <textarea name="" cols="" rows="" > 文本域 提交至服务器内容格式 URL?key=value&key2=vlaue2&... 文本框、密码框、文本域 手写内容直接传递过去 单选框、多选框 需设置value属性 下拉框 默认把选中的内容传至服务器，可设置value值传递指定值 默认值 文本框、密码框、文本域 设置value属性即可 单选框、多选框 的指定项添加属性checked="checked" 下拉框 的指定项添加selected="selected。默认第一个 get和post区别 get 数据显示在地址栏中。请求大小有限制 post 数据不会显示在地址栏中。请求大小无限制
//框架标签 <frameset> 框架集。可嵌套。与body标签冲突 rows="30%,*" //按行分，水平切割 cols="30%,*" //按列分，垂直切割 border="5" 边框宽度 borderColor="" 边框颜色 frameBorder="" 是否有边框（yes，no） <frame src="显示的页面URL.html" /> 框架，具体实现 name="" //用于a标签 target属性 链接 noresize="noresize" 不能改变框架大小 scrolling="no" 是否显示滚动条（yes、no、auto） <iframe src=".html" >插入一个页面、内联框架、画中画标签。如果浏览器不支持，则显示此段文字</iframe> frameborder="0" 去掉边框
//块标签，无含义，封装数据 <div> 封装整行，默认独占一行 <span> 封装行内，默认在同一行
<label for="其他控件id"></label>标签 <wbr>文字</wbr> 自动换行标签 <abbr title="说明文字"></abbr> 缩写说明，鼠标放上文字会显示说明文字 <pre> 预定义标签，保留文字格式 <marquee> 滚动标签 direction 滚动方向left right down up behavior alternate来回滚动。scroll直线滚动。side滚动一遍固定在末端 scrolldelay="90ms"(100)
<fieldset> 分组框 <legend>标题
HTML转义特殊字符 数字代码 字符代码 < < < (less then) > > > (great then) & & & 空格 CSS ——CSS（Cascading Style Sheets）层叠样式表。
作用：渲染页面；提高工作效率
——引入方式：
1、行内样式 (不建议使用)每个html标签中都有一个style属性。属性值是css代码
2、页面内样式 使用标签<style type="text/css"></style>。一般定义在<head>标签中
3、外部样式 关联css文件
(1)html代码导入。<link href=".css" rel="stylesheet" type="text/css" />
(2)css代码导入。<style type="text/css">@import url(.css);</style>
优先级：就近原则
——语法
注释：/* */
格式：选择器{属性1:值1;...}
——选择器
id选择器 #id值{}
class选择器 .class值{}。标签class属性中可以写多个类
元素选择器 元素名{}
扩展选择器
/*后代选择器。空格
s1 s2{} s1后的所有s2
s1>s2：s1子元素的s2
s1+s2：s1紧接的s2元素
s1~s2：s1后所有的s2兄弟元素
/*属性选择器。html元素必须有一个属性且有值
元素名[属性名="属性值"]{}
元素名[属性名~="属性值"]{} 属性包括值选择器
/*锚伪类选择器。标签的某些状态，顺序不可变
a:link{} 点击前样式
a:visited{} 点击后样式
a:hover{} 鼠标悬停样式。可作用于其他元素
a:action{} 点击样式，鼠标按下不松。可作用于其他元素
/*伪类
p:first-line 段落第一行文本
p:first-letter 段落中第一个字母
:focus 具有焦点的元素
:first-child{} 第一个元素
:last-child{} 最后一个元素
:not 不包含指定的选择器
:noly-child 是父元素的唯一子元素
:after{} 之后执行
:nth-child(4n) 选择到4的倍数的元素。odd奇数even 偶数
——属性
——浮动
float:left|right|none 浮动
clear:left|right|both 清除浮动
——盒子模型,每个元素都有
padding: 内边距，设置多个值顺序：上右下左
margin： 外边距，会合并
border：px solid #000; //边框。double双线。solid实线。dashed虚线。none 取消边框
border-radius:px; 圆角边框|50%正方形成一个圆
border-image 便框框图片
box-shadow:0px 0px 5px 5px #ccc; 阴影
content 内容
——定位
position:
absolute 绝对定位，不占位置。距离网页左上角的位置
fixed 固定位置，距离浏览器窗口左上角的位置
relative 相对定位，占位置，参照元素本身的位置。对象不可层叠，保留原位置占用空间。如果父对象没有absolute|relative，则依据body。
static 默认偏移量失效
使用另外两个属性：left、right
——字体
font-size：字体大小,默认16px
font-family：字体样式（隶书）
@font-face{font-family：myFont;src:url();} 上传字体
font-style:italic|oblique 字体风格倾斜
font-weigth:bold字体加粗，normal不加粗
font-variant： 字体大写或小写
——文本
color：文本颜色
line-height:44px; 行高，通常设置居中
text-decoration： 文本装饰
underline 下划线
overline 上划线
line-througt删除线
blink 闪烁
none 无
text-align: 文本对齐方式
vertical-align:top|middle|bottom 垂直对齐方式
white-space:nowrap|pre; 不换行|当做pre标签
border：1px solid red; 边框
text-transform:capitalize(首字母大写)|lowercase（全小写）|uppercase（全大写）
text-shadow： 文本阴影
第一个参数：阴影x轴偏移量px
第二个参数：阴影y轴偏移量px
第三个参数：模糊程度px
第四个参数：阴影颜色
word-wrap： 文本换行规则，英文单词不会被拆开
text-indent:2em; 首行缩进2字符，用在<p>
——背景
background-color：背景颜色
background-image：url("")背景图片
background-repeat：no-repeat|repeat-x|repeat-y|repeat
background-position:px px|% % 设置背景图片显示的位置,可为负数
background-size:px px|% %|cover(拉伸可以超出)|contain(拉伸不能超出)
background-attachment:scroll(随着内容一起滚动)|fixed(不滚动)
——尺寸
width
height
——布局
overflow： 内容溢出时
hidden 隐藏滚动条，隐藏没显示全的部分
scroll 滚动
visible 默认。直接显示,超出部分不占位
auto 如果溢出就滚动否则不显示滚动条
visibility：设置元素是否显示
visible 显示
hidden 隐藏，占位
display： 设置元素是否显示
none 隐藏，不占位
block 设置为块级元素
inline 设置为行级元素
z-index： 值越大越在前面
——多列
column-count: 3; 分割成3列
column-gap:5px ; 列间距
column-rule:1px solid blue; 列分割线
column-width 列的宽度
——列表样式ul
list-style-type 列表类型。none取消样式。upper-alpha大写字母
list-style:none 前面的点去掉
list-style-image:url(".bmp"); 设置图片作为列表项。使用url函数
list-style-position 列表标志位置
——表格
border-collapse:collapse; 单边框线
——轮廓
outline 轮廓属性
outline-color 颜色
outline-style:groove实线|double双实线|dotted虚线
outline-width 线的宽度
——变换
transform: 变换
2D转换
translate(xpx,ypx) 平移
rotate(deg) 旋转度数
scale(x1倍,y2倍) 缩放
skew(xdeg,ydeg) 倾斜
matrix() 以变换矩阵变换
——3D转换
rotateX(deg)
rotateY(deg)
——过渡
transition:width 1s,height 2s,transform 2s; 过渡时间
transition-delay:1s; 延时1s后执行
transition-duration:1s; 1s完成本样式的改变
animation: anim 5s alternate; 5s持续执行anim
@keyframes anim{ 定义anim
0%{background-color: red;left: 0px;top:0px;}
——其他样式
cursor:pointer; 鼠标移上变成手的样式
opacity:0-1; 透明度
text-overflow:ellipsis; 被剪切的部分显示省略号
max-width:20px; 最大宽度
zoom:1; 设置对象缩放比例
maxLength='11'; 最大字数
outline:none; 去掉边框
!important; 提高优先级
resize:none; 文本域下的小三角不能拖动
times
JavaScript
——含义
JavaScript 基于对象和事件驱动的脚本语言，轻量级编程语言，主要应用在客户端由浏览器执行。俗称js
特点
交互性 可以动态交互，页面更加丰富
安全性 不允许直接访问本地硬盘
跨平台性 只要可以解析JS的浏览器都可以执行，和平台无关
——js组成部分
ECMAScript：基础语法
BOM(Browser Object Model) 浏览器对象模型
DOM(Document Object Model) 文档对象模型
——JS引入方式
1、将javascript代码封装到标签中
<script type="text/javascript">js代码</javascript>
2、导入外部js文件
<script type="text/javascript" src=".js"></javascript>
——基础语法 高级程序设计语言具备共性内容，各语言的表现形式不同。
区分大小写
分号可有可无，建议加上
注释 //、/**/
标识符 用于标识数据和表达式的符号，通常理解为在程序中自定义的名称，如变量名、函数名
同Java
命名规范
类：首字母大写
方法：首字母小写
变量。弱变量类型语言
var 变量名 = 值; //定义变量。var不写也行，因为js是非严谨的语言，但开发建议按照严谨的方式定义。
数据类型
原始类型。通过typeof判断
undefined 未定义，变量没有值。其实就是一个常量，可以==undefined 比较。
null 空
boolean 布尔型（true|false）
string 字符或字符串 ''、""
number 数值型，整数和小数
引用类型。object对象类型 默认值null
运算符。同Java
比较运算符
== 双等。判断值是否相等，自动类型转换
=== 全等。先判断类型是否相同，再判断值是否相等
false为非1或null。true为非0
判断。如：
undefined==null结果 true
undefined===null结果 false
判断变量是否可用：先判断类型是否为undefined,再判断值是否为null，否则可用
typeof(n)!='undefined'
语句。同Java
for(var i in 数组){}
函数 对功能代码进行封装，提高代码复用性
function 函数名(参数列表){ //参数可不用写var
函数体
return 返回值; //无返回可省略
}
注意：不存在重载，没传的参数值为undefined传入。
多传的参数不丢，函数中有一个数组 arguments 对参数进行存储
var v=函数名(); //函数运行，结果赋值给v
var v=函数名; //函数对象引用赋值给v。可通过v()调用
打印 函数名 //输出的是方法定义格式字符串
动态函数 使用js内置对象 Function
var 函数名=new Function("参数","方法体"); //创建函数对象，后期可变，用的不多
匿名函数 没有名字的函数，函数的简写形式。只调用一次
方式一：var v = function(参数){方法体} //常用，不需要定义方法名，直接写参数列表与方法体
可以将方法赋值给一个变量，这个变量表示一个方法
方式二：(function(n1,n2){...})(1,2); //定义的同时完成调用
方式三：new Function("n1","n2","return n1+n2");
变量名(参数1,参数2); //通过变量调用
闭包
在子函数中并没有声明name变量，当需要使用name时，会向前找，发现整个函数中没有声明，则向上一级找，进入了函数f1中，这里有个参数name，则使用这个变量的值
作用域链：即使方法f1运行完成了，name依然在子函数中被使用，不会被释放，这形成了变量作用域的链
建议：先声明再使用，尽量不要使用闭包，因为会让变量在内存中长期存在，无法释放
异常
try{可能发生异常代码块}catch(err){错误信息处理} 异常捕获
throw new Error("报错啦")|throw ""; 手动抛出一个异常
e.message; 异常信息
——DOM（Document Object Model）文档对象模型。
只要是标记型文档，DOM这种技术都可以对其进行操作。如：（HTML、XML）
将标记型文档封装成对象，目的：为了更为方便操作文档以及文档中所有内容
DOM技术解析方式：将标记型文档加载到内存解析成一颗DOM树，并将树种内容都封装成节点对象
好处：可对节点进行任意操作
弊端：需将整个标记型文档加载进内存。如果体积很大，较为浪费空间
SAX解析方式：民间常用解析方式，基于事件驱动的解析。不是W3C标准。DOM是W3C标准
获取数据速度快，但不能对标记进行增删改查
DHTML 动态HTML。不是语言，是多项技术综合体的简称
包含：HTML，CSS，DOM，Javascript
HTML 提供标签，对数据封装，便于对标签中数据操作
CSS 提供样式属性
DOM 将标签型文档以及文档所有内容解析封装成对象。在对象中定义属性和行为，便于对对象操作
JS 提供程序设计语言，对页面中的对象进行逻辑操作
DOM模型
节点（Node）以下都可以称为节点
文档（Document）整个HTML文档
元素（Element对象）
属性（Attribute）
文本（Text）
document 对象
获得元素
getElementById("Id") 通过Id获取一个元素
getElementsByName("name") 根据name获取多个元素
getElementsByTagName("标签名")： 根据标签名称获取 多个元素节点
getElementsByClassName("class值") 根据样式名称获取 多个元素节点
创建元素
createElement("标签名") 创建一个元素节点并返回这个节点
createTextNode("文本文字") 创建文本，并返回这个节点
其他
title
offsetLeft 位置
offsetTop
offsetWidth 尺寸
offsetHeight网页尺寸,不包含滚动条
scrollHeight网页尺寸,包含滚动条
元素对象
//通过节点的层次关系获取节点对象
parentNode 获取父节点
childNodes 获取直接子节点集合
firstChild 返回当前节点的第一个子节点
lastChild 返回当前节点的最后一个子节点
nextSibling 下一个兄弟节点
//操作属性
html属性 获取|设置 节点属性
getAttribute("属性") 获取元素属性
setAttribute("属性","值") 设值元素属性
className 获取|设置 class属性
//样式
style 获取style属性对象
.css属性 获取|设置样式
.CssText="width:100px;..."; 修改样式
//添加节点
appendChild(newNode) 添加子节点作为最后一个子节点
insertBefore(newNode，refNode) 在refNode节点之前插入newNode节点
//删除节点
removeChild(node) 将子节点node删除。删除元素会改变长度,可用i-- ，重置索引位置
//替换节点
replaceChild(node1,node2) 子节点node2被替换成node1。
//复制节点
cloneNode(true) //复制当前节点和里面的内容。flase或不写 只复制当前节点
//其他
innerHTML="HTML代码" 获取|设置 标签之间的文本
nodeName 节点名称
nodeType 节点类型。如：1标签，2属性，3文本
nodeValue 节点值。指value属性的值。标签型节点没有值。
|--table标签
caption 获取标题对象
tfoot 返回该表格里所有<tfoot.../>元素
thead 返回该表格里所有<thead.../>元素
tBodies 返回该表格里所有<tbody.../>元素组成的数组
rows 获取该表格tr对象集合
insertRow([index]) 添加一行在指定索引位置，返回tr对象
deleteRow([index]) 删除表格中index索引处的行
createCaption() 为该表格创建标题
createTFoot() 为该表格创建<tfoot.../>元素，假如已存在就返回现有的
createTHead() 为该表格创建<thead.../>元素，假如已存在就返回现有的
deleteCaption() 删除表格标题
deleteTFoot() 从表格删除tFoot元素及其内容
deleteTHead() 从表格删除tHead元素及其内容
--tr行标签
rowIndex 返回该行在表格内的索引值
sectionRowIndex 返回该行在其所在元素（tbody,thead等元素）的索引值
insertCell(index) 参数可不写。在index处创建一个单元格，返回新创建的单元格
deleteCell(index) 删除某行在index索引处的单元格
cells 返回该行单元格集合
--td单元格标签
cellIndex 返回该单元格在表格行内的索引值
form标签
action 返回该表单的提交地址
element 返回表单内全部表单控件组成的数组
.element[index] 返回该表单中的index个表单控件
.element[elementName] 返回表单内id或name为elementName的表单控件
length 返回表单内表单域的个数
method 返回表单内的method属性，主要有get和set两个值
target 确定提交表单时的结果窗口，_self、_blank（打开新窗口）、_top
reset() 重置表单
submit() 提交表单
select标签
form 返回列表框、下拉菜单所在的表单对象
length 返回列表框、下拉菜单的选项个数。设置为0相当于清空项
selectedIndex 返回下拉列表中选中选项的索引值
type 返回下拉列表的类型，多选返回sleect-multiple,单选返回select-one
options 返回所有选项数组
defaultSelected 返回该选项是否被默认选中
index 返回该选项在列表中的索引
selected 返回该选项是否被选中
text 返回该选项呈现的文本
value 返回该选项的value属性值
DOM为列表框、下拉菜单添加选项的方式，构造器
new Option(text,value,defaultSelected,selected)
text 该选项的文本
value 该选项的值
defaultSelected 设置默认是否显示该选项
selected 设置该选项当前是否被选中
直接为<select.../>的指定选项赋值
列表框或下拉菜单对象.options=创建好的option对象
删除列表框下拉菜单的选项的方法
1、列表框或下拉菜单对象.remove(index)
2、列表框或下拉菜单对象.option[index]=null
——BOM（Brower Object Model）浏览器对象模型
Window对象(可省略,因为持有其他对象引用，相当于最顶层对象)
属性
document 对 Document 对象的只读引用
history 对 History 对象的只读引用
location 用于窗口或框架的 Location 对象
Navigator 对 Navigator 对象的只读引用
Screen 对 Screen 对象的只读引用
cookieEnableed 如果启用cookie返回true，否则返回false
方法
alert(str) 弹出对话框
confirm(str) 弹出确认对话框，确定返回true，取消返回false
prompt("提示消息","默认值") 弹出输入对话框，确定返回输入值，取消返回null
var x=setTimeout("fn",ms) ms后执行一次fn
clearTimeout(x) 清除
var x=setInterval("fn",ms)每隔ms执行fn
clearInterval(x); 清除
open("URL"[,"窗口名称","特性"]) 打开新窗口,可只有第一个参数
特性：height=200,width=200,top=10,left=10,status=no,toolbar=no,menubar=no,location=no
close() 关闭当前窗口
事件
onload //页面内容加载完成后执行
Navigator 包含浏览器相关信息
appName 浏览器名称
appVersion
Screen 屏幕信息
Height|Width屏幕高度|宽度
History 历史URL记录
go(int) 指定前进或后退多少个页面，正前进，负后退
back()|forward() 前一个|后一个
Location URL信息
href 获取或设置当前窗口地址
protocol 获取或设置web协议（如返回 http:）、装载该文档所使用的协议
host 文档所在地址的主机地址
port 返回web主机的端口、文档所在地址的服务端口
reload() 刷新当前页面
——事件:事件是可以被javascript侦测到的一种行为
事件流：描述的是在页面中接受事件的顺序
冒泡型事件 从内到外执行函数，使用多，更兼容
捕获型事件 从外到内执行函数
事件处理：
1、HTML事件处理
2、DOM0级事件处理
得到事件对象：op.onclick=function(oEvent){if(window.event){oEvent=window.event;}}
3、DOM2级事件处理，可以绑定多个事件
标准DOM中的事件监听方法，添加事件句柄
[DomObject].addEventListener("事件类型","处理函数","冒泡事件或捕获事件"); true:捕获型事件 false:冒泡型事件
[DomObject].removeEventListener("事件类型","处理函数","冒泡事件或捕获事件");
[DomObject].addEventListener 返回是否支持addEventListener
标准DOM中得到事件对象
op.onclick=function(oEvent){//作为参数传进来}
IE中的事件监听方法
[DomObject].attachEvent("on事件类型","处理函数");//添加监听
[DomObject].detachEvent("on事件类型","处理函数");//取消监听
[DomObject].attachEvent("onclick",demo) 返回是否支持attachEvent
IE中得到事件对象
op.onclick=function(){var oEvent=window.event;}
Event事件对象
IE 标准DOM 描述
altKey,shiftKey,ctrlKey 同IE 按下alt、shift、ctrl为true，否则为false
canselBubble stopPropagation() 阻止事件冒泡
button 同IE 对应按下鼠标键的值
clientX，clientY 同IE 鼠标指针在客户区域的坐标，不包括工具栏等
screenX，screenY 同IE 鼠标指针相对于整个计算机屏幕的坐标值
keyCode 同IE 按键的代号
returnValue 同IE 设置false时取消元素的默认事件
srcElement target 引起事件的元素/对象,获取事件目标
type 同IE 事件的名称
tagName 标签源名称
preventDefault() 阻止事件默认行为
绑定事件
1.通过标签事件属性
<xxx /> 参数若是this，将当前元素的dom对象传给函数
2.派发事件
dom对象.onxxx=function(){...}
鼠标事件：
onmousemove ！鼠标在某个元素上移动时持续触发
onmouseover ！鼠标指针移到一个元素上时触发
onmouseout ！鼠标指针移除一个元素边界时触发
onmousedown 单击任意一个鼠标按键时触发
onmouseup 松开鼠标任意一个按键时触发
键盘事件：
onkeyup ！释放某个按键时触发
onkeydown 按下键盘上某个按键时触发，一直按会持续触发
onkeypress 按下某个按键并产生字符时触发，忽略shift等功能键
HTML事件：
window.onload ！页面完全加载后触发
window.onunload 页面完全卸载后触发
form对象.onsubmit ！返回true或其他值就提交，返回false不提交
dom对象.
onclick ！单击鼠标左键触发
ondblclick 双击鼠标左键触发
onfocus ！任何元素或窗口获得焦点时触发
onblur ！任何元素或窗口失去焦点时触发
onselect 选择了文本框的一个或多个字符时触发
onchange 文本框失去焦点时，并且在它获取焦点后内容发生过改变时触发。下拉菜单控件改变时
onabort 图像加载被中断
onerror 加载图像或文档错误时
onreset 重置按钮被点击
onresize 窗口或框架被重新调整大小
——对象 只要是基于对象的语言，或者是面向对象的语言，就存在对象的概念。对象是一个封装体，既可以封装数据也可以封装函数
创建对象。自定义对象
1、people=new Object(); 创建对象
people.name="zs"; 添加属性设值
2、function Person(name){
this.Name=name;//声明一个属性并初始化,为类增加成员
this.say=function(){ //声明一个匿名方法
alert(this.Name);
}
}
var p1=new Person('zhh'); //获取对象：new 类名称();
p1.say(); //访问：对象.成员
——JS内置对象
new Object() //所有对象的顶层
toString() //Array转换成字符串由逗号分隔连接。
valueOf()
Array 数组。
//创建数组
var arr = [1,2]; //定义数组
var arr=[];
var arr=new Array();
(5) //数组长度为5
(1,2,3) //数组元素为1，2，3
//属性/方法
length //设置或获取数组的长度
arr[index] //赋值或获取值
长度可变，如果赋值超过索引，则增加至长度。空的用undefined
元素类型可变
push() 末尾添加元素
unshift 往数组开头添加元素
shift 删除并返回数组的第一个元素
pop 删除并返回数组的最后一个元素
reverse() 颠倒数组顺序
sort() 按“字符串”的自然排序规则进行升序
splice
slice 获取start到end处的子数组
join 将数组元素以指定符号连接 返回字符串
concat() 合并数组
new String("")|"" //字符串对象。\n 换行
length 长度
charAt(index) //返回指定索引的字符
indexOf() 查找子串首次出现的位置，如果没有则返回-1
lastIndexOf()
split(str) 将字符串按照str字符进行拆返回数组
substr(start,length)
substring(start,end) 截取子串
match("正则表达式") 使用正则表达式搜索目标子字符串，有返回字符串，没有返回null
bold() //字符串两端加加粗标记
fontcolor("red") //加颜色
link("url")
toUpperCase()、toLowerCase() 大小写转换
slice() 同substring()可用负数，从末尾开始计算
concat() 将多个字符串拼接成一个字符串
replace(,) 将字符串中的某个子串以特定的字符串替换
search() 使用正则表达式搜索目标子字符串
原型属性，就是该对象原有的描述。该描述中如果添加了新功能，该对象都会具备这些功能。
String.prototype //获取原型对象，对对象功能扩展
.属性名=值 //添加属性键值
.属性名=匿名方法|之前定义的属性名 //添加方法
new RegExp("正则表达式",["flags"]); //正则对象。特殊符号需转义
参数 flags：i(忽略大小写)，n(多行查找)，g(全文查找出现的所有)
语法2：reg=/正则表达式/i; //特殊符号无需转义
match() //返回查找到的结果的数组
test(str) 检索字符串中的指定值，返回值是 true 或 false，功能同C#中的IsMatch
exec(str) 检索字符串中的指定值，返回值是被找到的值，如果没有发现匹配，则返回 null，功能同C#中的Match
new Date() 获取当前时间对象
.getTime() 获取毫秒。距1970年
.setFullYear(yyyy,MM,dd,HH,mm,ss) 设置指定时间
.setMonth
.setDate
.setHours
.getFullYear() 获取年
.getMonth 月
.getDate 日
.getDay 星期0-6,0表示星期天
.getHours 时，24小时制
.getMinutes 分
.getSeconds 秒
.getMilliseconds毫秒
.toLocaleTimeString()表示根据本地时间格式，把 Date 对象的时间部分转换为字符串
.toLocaleDateString()表示根据本地时间格式，把 Date 对象的日期部分转换为字符串
如：var date=new Date(yyyy,MM,dd,HH,mm,ss) 获取指定时间的日期对象
Math 静态类
random() 返回0-1随机数
round(num) 四舍五入
max(,,,,) 返回最大的值
max.apply(numList) 返回数组中最大的值
abs(num) 返回绝对值后的数
floor(num) num舍去小数
console.log() 调试
JQuery
概述：JS的框架（js类库），对原生JS常见的方法和对象进行封装，方便使用
js对象和jquery对象的区别：
jquery就是js中的new Object生成的普通对象
js对象和jquery对象的方法不能共用
js对象和jquery对象的转换
dom -> jquery：$(dom对象)
jquery -> dom
1. jquery对象[index]
2. jquery对象.get(index)
遍历元素对象
1. $对象.each(function(i,n){}) //遍历每个对象执行方法体（this为当前遍历的对象。i，索引。n，值）
2. $.each($对象,function(i,n){})
选择器
基本
#id //id选择器
.class //类选择器
元素 //元素选择器
* //通配符选择器。所有标签
选择器1,选择器2... //组合(并列)选择器，逗号隔开
层级
ancestor descendant //ancestor元素后代所有
parent > child //parent元素的子元素child
prev + next //prev后一个next
prev ~ siblings //prev后所有兄弟元素
基本过滤
:first
:last
:even 偶数
:odd 奇数
:eq(index) 等于index
:gt(index) 大于index
:lt(index) 小于index
:not(选择器)
内容
:contains(text) //包含内容的
:empty //为空的
:has(选择器) //包含指定的元素的
:parent //是父亲角色的
可见性
:hidden
:visible
属性
[属性] 含有属性的
[属性="属性值"]
[attribute!=value]
[attribute^=value] 含有attribute属性值以value开头的
[attribute$=value] 含有attribute属性值以value结尾的
[attribute*=value] 含有attribute属性值包含value的
[attrSel1][attrSel2][attrSelN] 并且
子元素
:nth-child(index1开始) 每一个第index子元素的
:first-child 每一个第一个子元素的
:last-child 每一个最后一个子元素的
:only-child 只有一个子元素的
表单
:input 匹配所有表单元素包括select，textarea
:text
:password
:radio
:checkbox
:submit
:image
:reset
:button
:file
:hidden
表单对象属性
:checked 匹配所有选中的单选复选按钮
:selected 匹配所有的列表框下拉菜单选中的
:enabled 可用的
:disabled 不可用的
筛选方法
过滤
eq(索引) 指定索引
first()
last()
not(jq对象) 返回除了jq对象
slice(1,4) 索引从1到4的，一个参数代表索引值到最后
is(选择器) 判断是否是指定元素
查找
children([选择器]); 拿到子级所有元素|指定选择
find([选择器]); 拿到后代所有元素|指定选择
prev(), 拿到前一个元素
next(); 拿到下一个元素
prevAll(), 拿到前边所有元素
nextAll(), 拿到同级后边所有元素
siblings(), 拿到同级兄弟元素
串联
add('标签');组合选择器
andSelf(); 加上自己
属性操作
属性
attr 旧版本|prop 新版本。使用方式一样
prop("属性") 获取属性值
prop("属性","值") 设置一个
prop({"属性1":"值1",...}) 设置多个
removeProp("属性") 移除属性
HTML代码/文本/值
html() 获取|设置标签内的内容和标签
text() 获取|设置标签内的文本
val() 获取|设置input标签的value值
文档处理
内部插入
append(content) 后追加子元素
content: 要追加到目标中的内容（String, Element, jQuery）
appendTo(选择器);
prepend(content); 前追加子元素
prependTo(选择器);
外部插入
after(this); 往后面追加this
before(this); 往前面追加this
insertAfter('div1'); 把this追加到div1后
insertBefore('div1'); 把this追加到div1前
替换
replaceWith(content); 当前标签替换成content
replaceAll(); 反之
删除
empty(); 把标签中内容清空
remove(); 把标签移除，返回不保留事件
detach(); 把标签移除，返回保留事件
复制
clone([true]); 把自己克隆一份，但不复制事件(true:复制事件)
CSS处理
CSS类
addClass("class名称") 添加样式
removeClass("class名称") 移除样式
toggleClass("class名称") 如果存在（不存在）就删除（添加）一个类。
CSS。针对style属性
css("属性"); 获取样式值
css({'':'','':''}); 设置多个样式
位置
offset(); 距离文档左上角偏移量 .left .top
position(); 距离父坐标左上角偏移量 .left .top
scrollTop(val);
尺寸
height();|width(); 有效高度|宽度，不包括内边距、边框、外边距
innerHeight(); 再加上marage和padding
innerWidth();
outerHeight(); 再加上边框
outerWidth();
三个高
屏幕可视区域的高 $(window).height();
文档总高度 $(document).height();
滚动的高 $(window).scrollTop();
效果
show([speed,[fn]]) //显示
speed:预定速度字符串("slow","normal","fast")或毫秒数值(如：1000)
fn:在动画完成时执行的函数，每个元素执行一次。
hide([speed,[fn]]) //隐藏
slideDown([speed,[fn]]) //滑下，显示
slideUp([speed,[fn]]) //滑上，隐藏
fadeIn([speed,[fn]]) //淡入
fadeOut([speed,[fn]]) //淡出
fadeTo(s,0.5) //淡入、淡出到0.5透明度
animate({'':''},speed,[fn]) //自定义动画
事件
事件处理。事件类型和js中一样，把on去掉即可
$对象.xxx(fn); //绑定事件
on|bind(type,fn) //绑定事件。on 1.7+
trigger(type) //触发事件。触发浏览器默认同名行为
triggerHandler(type) //不触发浏览器默认行为。只执行绑定的事件的方法
事件。
$(fn)|$(document).ready(fn)|写在HTML文档末尾 //DOM树加载完毕执行
$(document).contextmenu(fn) //当右键菜单出现的时候执行
hover(fover,fout) //鼠标移入移出
toggle(f1,f2[,f3,f4...]) //click事件函数轮流执行。无参默认显示/隐藏事件。1.9-
事件委派。为未来创建的元素绑定事件
delegate(selector,type,fn) //为未来创建的子元素绑定事件
参数：
selector:选择器字符串，用于过滤器触发事件的元素。
type:一个或多个事件的字符串形式。 由空格分隔多个事件值
fn:当事件发生时运行的函数
|
收藏
淘帖
踩
