复习日记-HTML+css+js+jquery
一：
1.HTML书写规则：
超文本：超越一般文本，描述文本的字体、颜色、图片
标记：标签
文件后缀名： .html(推荐） 或者 .htm
属性：key = "value"推荐用引号
路径的写法：
相对路径：
写法一：./（当前路径）或者什么也不写，都代表当前目录
写法二：../（上一级目录）
绝对路径：
1.带协议的绝对路径
http://www.itheima.com
2.不带协议的绝对路径
大小的写法：
像素：123px
百分比：20%
meta
元信息
HTML5的写法：
<meta charset="UTF-8">指定浏览器用什么编码打开此页面
HTML4的写法：
<meta http-equiv=”Content-Type“ content="text/html; charset="UTF-8"/>指定浏览器用什么编码打开此页面
2.颜色的取值：(RGB红绿蓝,光的三元色)
方式一： #xxxxxx x为16进制 eg: color="#ff0000"
方式二：英文单词 eg: color="red"
3.target默认属性;_self在本身页面打开
4.form默认get提交
若要提交单选框、复选框或者下拉框中的值，需要给value属性
单/复/的默认值写法：
checked="checked"（推荐）或者只写checked
下拉选择默认值写法：
selected="selected"
5.get和post的区别：
1.get请求会把请求参数追加到地址栏
2.get请求参数大小有限制，post没有限制
3.post相对于get请求安全些
6.设置input="disable/readonly"，则该文本框参数不会提交
7.隐藏于hidden可以将hidden参数提交到后台
二：
css相关：渲染
层叠样式表
作用：
渲染页面
提高工作效率
格式：
选择器{属性1:值;属性2:值}
后缀名：
.css 独立的css文件
和html元素的整合
方式一：内联样式表 通过标签的style属性设置样式，在head中有style标签
方式二：内部样式表 在当前页面中直接定义使用的样式
方式三：外部样式表 通过link标签引入外部css文件
div:块标签(独自占一行)
span:行内标签
选择器：
id选择器
要求：
HTML标签必须有id属性且有值，id是唯一的
在css中通过#+id值书写样式：#id1{...}
class选择器
HTML标签必须有class属性且有值
在css中通过.class值书写样式：#class1{...}
元素选择器
直接用元素名即可：eg: p{...}
派生的选择器：
属性选择器
要求：
HTML元素必须有一个属性且有值<xxx nihao="wohenhao"/>
css中通过下面的方式使用
元素名[属性="属性值"] {...}
eg:xxx[nihao="wohenhao"] {color : red}
后代选择器
选择器 后代选择器{...} 在满足第一个选择器的条件下找后代的选择器，给满足条件的元素添加样式
了解的选择器
锚伪类选择器
在支持 CSS 的浏览器中，链接的不同状态都可以不同的方式显示，这些状态包括：活动状态，已被访问状态，未被访问状态，和鼠标悬停状态。
a:link{color: #FF0000} /* 未访问的链接 */常用a:visited{color: #00FF00} /* 已访问的链接 */a:hover{color: #FF00FF} /* 鼠标移动到链接上 */常用a:active{color: #0000FF} /* 选定的链接 */
提示：在 CSS 定义中，a:hover 必须被置于 a:link 和 a:visited 之后，才是有效的。
提示：在 CSS 定义中，a:active 必须被置于 a:hover 之后，才是有效的。
提示：伪类名称对大小写不敏感。
选择器使用小结：
id:一个元素
class:一类元素
元素选择器：一种元素
属性选择器：元素选择器特殊用法
使用的时候注意：
若多个样式作用于一个元素时，不同的样式会叠加，相同的样式会通过最近原则选择样式
若多个选择器作用于一个元素时，越特殊优先级越高id优先级最高
属性（了解）
字体：
font-family:设置字体（隶书），设置字体家族
font-size:设置字体大小
font-style:设置字体风格（例如：斜体）
文本;改变文本的颜色，字符间距等
color：文本颜色
line-height：设置行高
text-decoration:向文本添加修饰
text-align:文本对齐方式
列表：
list-style-type:设置列表项的类型 例如： a 1 实心圆
list-style-image:设置图片为列表项类型，使用url函数 url("图片地址")
背景：
background-color:背景颜色
background-image:背景图片 url
尺寸：
width
height
浮动;
float:可选值left、right
clear：设置元素的两边是否允许有其它浮动元素，可选值：left(左边不允许)、right(右边...)、both(两边均不允许)等
display:设置是否以及如何显示元素
none：此元素不会显示
block：此元素显示为块级元素，前后带换行符
inline：此元素显示为内联元素
框模型：
一个元素外面有padding(内边距) border margin(外边距)
padding:元素和边框的距离
margin：元素最外边的空白
上面三个属性都有简写属性，顺序：上右下左，若只写一个值，代表四个方向值均为该值，若只写两个值，代表方向值均为该值，
三：JavaScript
组成部分：
ECMAScript：js基础语法
Bom：浏览器对象模型
Dom：文档对象模型
作用：
修改HTML页面的内容、样式、表单验证、操作浏览器任何东西
注意：
js可以在页面上直接写，也可以独立出去写成一个库，例如jQuery，独立出去的文件使用.js后缀名
js和HTML的整合
方式一：页面直接写--将js代码放在script标签中，<script></script/>标签原则上可以存放在任意位置，一般放在head标签中
方式二：独立的js文件，通过script标签的src属性引入
js变量声明：
var 变量名 = 初始值；
注意：
var可以省略，建议不要省略
一行要以分号结尾，最后一行的分号可以省略，建议保留
js的数据类型：
原始类型5种：
NULL：undefined 是声明了变量但未对其初始化时赋予该变量的值，null 则用于表示尚未存在的对象。如果函数或方法要返回的是对象，
那么找不到该对象时，返回的通常是 null。
String：字符型
Number：数字
Boolean：布尔
Undefined：没有初始化
通过typeof运算符可以判断一个值或者变量是否属于原始类型以及属于哪个原始类型
typeof 变量 | 值 eg: var age=18 typeof age/18
对变量或值调用 typeof 运算符将返回下列值之一：
- undefined - 如果变量是 Undefined 类型的
- boolean - 如果变量是 Boolean 类型的
- number - 如果变量是 Number 类型的
- string - 如果变量是 String 类型的
- object - 如果变量是一种引用类型或 Null 类型的
通过typeof运算符可以判断一个值或者变量是否属于原始类型以及属于哪个原始类型
typeof 变量 | 值 eg: var age=18 typeof age/18
为什么 typeof 运算符对于 null 值会返回 "Object"。这实际上是 JavaScript 最初实现中的一个错误，然后被 ECMAScript 沿用了。
现在，null 被认为是对象的占位符，从而解释了这一矛盾，但从技术上来说，它仍然是原始值。
引用类型：
js:事件驱动函数
函数定义格式：
方式一：function 函数名(参数) {
}
方式二：var 函数名 = function(参数) { 函数体}
注意：js中不需要声明返回值，参数也不需要添加类型，eg:function add(a,b) { alert(a+b); } 函数调用：add(1,2);
js事件
常见的事件：
单击：onclick
表单提交：onsubmit 加在form表单上的onsubmit="return 函数名()" 注意函数返回值必须为Boolean类型
页面加载：onload
页面关闭：onunload
js事件和函数的绑定
方式一：通过标签的事件属性 eg: <xxx onclick="函数名(参数)"></xxx>
方式二：通过给元素派发事件来绑定
document.getElementById("id值").onclick = function(参数) { 函数体 }
document.getElementById("id值").onclick = 函数名
注意：因为js是直译式语言，即从上到下依次翻译，因此内存中存在某元素时才可以给其派发事件，解决方式
1.将方式二的js代码放在HTML页面最下面
2.在页面加载成功后再运行方式二的js代码，即使用onload事件
js获取元素：
方式一：
var obj = document.getElementById("id值")；
获取元素value值：obj.value;
获取元素标签体中的内容：obj.innerHTML;
js实现轮播图：
BOM中window对象的定时器方法
定时器：
var id = setInterval(code,毫秒数)：每隔指定的毫秒数执行一次函数，周期执行
var id = setInterout(code,毫秒数)：延迟指定的毫秒数执行一次函数，单次执行
清楚定时器：
clearInterval(id);
clearTimout(id);
补充：
运算符：
比较运算符：> >= < <=
若两边都是数字直接比较大小；
若一边为数字，另一边为字符串形式的数字，则先转换为数字再比较
若一边为数字，另一边为字符串，则返回false
若两边均是字符串，则比较ASCII码
等性运算符 == ===
==：只判断值是否相等
===：不仅判断值是否相等，还判断类型是否相等
js操作css属性
事件是Event，css样式自然是Style，在手册中可以找到操作样式属性的语句
eg；document.getElementById("id”).style.属性="值"
属性就是css中的属性。如果有-号，例如background-color只需将-删除，后面第一个字母大写即可。及backgroundColor
注意：只要是window对象的属性和方法，window都可以省略掉，eg：window.omload = onload
bom总结
所有的浏览器都有5个对象
window：窗口
location：定位信息
history：历史信息
window对象详解：
如果文档包含框架(frame或iframe)，浏览器会为整个HTML文档创建一个window对象，再为每一个frame创建一个额外的window对象
常用的属性:
通过window可以获取其它四个对象 window.location = location ...
常用的方法：
消息框：
alert("...")， 警告框
confirm("...")，确认框，返回值为Boolean
prompt("...’)，输入框，返回值为输入的内容
定时器
打开和关闭
open(url)：打开
close()：关闭
location对象：定位信息
常用属性：
href:获取或者设置当前页面的url(定位信息)
location.href; 获取url
location.href="...";设置url，相当于a标签
history对象：浏览历史
常用方法：
back()：加载history列表中前一个url
forward()：加载history列表中下一个url
go(int)：加载history列表中某个具体页面
go(-1) = back()
go(1) = forward()
注意：js调用函数的参数，this用法：
function login（a）{
alert(a);
}
<xxx onblur = "login(this.value)"/>
此处的this代表这个元素xxx，即代表当前dom对象，
这么做就不用在login中写document.get..ById(id)来获取value值，通过传参获取
事件总结：
常见的事件：
焦点事件：onfoucs、onblur
表单事件：onsubmit、onchange
页面加载事件：onload
鼠标事件：onclick（还有双击事件，鼠标按下等等）、鼠标悬停(onmouseover)、鼠标移出(onmouserout)
阻止默认事件发生，Event中的方法
阻止浏览器的事件传播
几个js经典案例：
1.表格隔行换色：onload之后获取所有tr，放在js集合里，根据arr.length%2的结果设置样式style
2.全选/全不选：获取onclick的checked属性值，取得所有复选框放置在数组中，依次设置checked属性值
dom(文档对象模型)：
当浏览器接受到HTML代码时，浏览器会将所有的代码装载到内存中，形成一棵树，这棵树有四种节点
Node接口有以下四种实现类：
1.文档节点 document
2.元素节点 element
3.属性节点 attributed
4.文本节点 text
获取节点：
通过document可以获取其它结点：
常用方法：
document.getElementById("id") ：获取一个特定元素
...类似方法还有通过TagName、ClassName、Name
设置获取节点的value属性
dom对象.value;获取
dom对象.value="";设置
设置获取结点的标签体：
dom对象.innerHTML;获取
dom对象.innerHTML="";设置
设置获取节点的style属性
dom对象.style.属性;获取
dom对象.style.属性=“”；设置
总结：获取或者设置属性：dom对象.属性
在HTML DOM查找不到的方法，可以去XML DOM去看一下
关于document的操作在XML DOM的document中
关于element的操作...element中
练习案例：选项左右移动，先选中元素，点击按钮，移动选中元素到另一边
技术分析：
1.确定时间onclick
2.编写函数
点击移动单个：
a.获取左边选中的选项
b.将其追加到右边的下拉选中
点击移动所有的：
a.获取左边所有选项
b.一个个追加过去
注意小细节：注意arr.length会因为移动元素导致长度变化，所以for循环中要i--
谷歌内核浏览器：调代码，点击source打断点调试
案例：省市联动（前端案例，应该从数据库加载）
需求：选中省的时候，自动加载该省的市
技术分析：
数组：
语法：new Array(); new Array(size);new Array(e1,e2..)
注意：js数组长度是动态可变的,不存在角标越界，只会提示undefined
步骤分析：
1.省的option添加值递增的value属性，当作数组索引
2.初始化市
3.选择省的时候，onchange事件
4.根据不同的省value下标创建不同的arr[i]的对应市数组
js引用类型总结：
原始类型的String、Number、Boolean都是伪对象，可以调用相应的方法
Array:数组
String：var s = new String("11");
var s1 = String("11");
当 String() 和运算符 new 一起作为构造函数使用时，它返回一个新创建的 String 对象，存放的是字符串 s 或 s 的字符串表示。
当不用 new 运算符调用 String() 时，它只把 s 转换成原始的字符串，并返回转换后的值。
Boolean:
new Boolean("");//Boolean("");
Number
Date
new Date();
常用方法：toLocalString()
RegExp:正则表达式
语法两种：
直接量语法： /正则表达式/(参数)
new RegExp("正则表达式",(参数))
参数：
i:忽略大小写
g:全局查找
常用方法：Boolean test(s);
Math：
常用常量：Math.PI、Math.random()
全局：
decodeURI：解码某个编码的URI
encodeURI：把字符串编码为URI
eval(s):计算js字符串，并把它当作脚本执行
parseInt():尝试强转为整数
parseFloat:强制强转为浮点数
JQuery：一种js类库，其中2.0以后版本不兼容IE6、IE7、IE8，因此使用1.0版本中的高版本
以前通过js获取元素：
var obj = document.getElementById("id");
JQuery: var obj = $("选择器")；
如何区分dom对象和jQuery对象，有一种约定
原生dom对象：var obj
jQuery对象：var $obj
dom对象obj和jQuery对象的转换：
dom--->jquery
var $o = $(obj);
jQuery----》dom
方式一：jQuery对象[索引]
方式二：jQuery对象.get(索引下标)
jQuery中页面加载：
js: window.onload=function() ---页面中只能出现一次
jQuery：
方式一：$(function() {...})---页面中可以出现多次
方式二：
$(document).ready(function() {});----页面中可以出现多次
派发事件：常用。因为不用更改HTML，直接使用js监听事件
eg: $("选择器“).click(function() {...});
等价于原生js的事件去掉on
jQuery选择器总结：
基本选择器：$("#id值") $(".class值") $("标签名")
获取多个选择器：$("#id",".class值"),用逗号隔开
jQuery设置样式： eg: $("#id").css("样式key","样式value",...)
层次选择器：
a b: a的所有b后代
a>b:a的所有第一层b孩子
a+b:a的下一个兄弟(大弟弟)
a~b:a的所有弟弟
基本过滤选择器：
:first
:last
:odd:索引为奇数
:even:索引为偶数
:eq(index)指定索引
:gt(index)大于指定索引
:lt(index)小于指定索引
内容过滤选择器：
:has("选择器") 包含指定选择器的元素，例如：选取div元素且要求选取的div元素的class选择器的值为mini
可见过滤选择器
:hidden 在页面上不展示的元素，一般指input type="hidden"和样式中diaplay:none
:visible 页面可见元素
例如：选取所有可见div $("div:visible");
属性选择器：
写法一：[属性名]
写法二：[属性名=属性值]...例如：$("div[title]")
表单过滤：
:input 所有表单子标签
jQuery的属性和css操作总结：
对属性的操作：
方式一：attr方法(有BUG，因此在jQuery1.6版本之后推荐用prop方法替代)
获取：attr("属性名称")；
设置：attr("属性名"，”属性值“)
设置多个属性：attr({
"属性一"：”值1“，
”属性二“：”值2“
})
移除属性：removeAttr("属性名称"）
还有一个专门针对class属性的方法：addClass、removeClass都是对上面attr方法的封装
对css的操作：操作元素的style属性
css():获取或者设置css样式
方式一：获取 css("属性名")
方式二：设置一个属性 css("属性名"，”属性值“)
方式三：设置多个，json形式 css({
"":"",
"":""
});
获取元素的尺寸：width()、height
jQuery数组操作
遍历数组：数组.each(function(){...}); $.each(function(){...});
设置/获取value属性
jQuery对象.val();获取
jQuery对象.val("");设置
设置/获取标签体的内容
html()
text()
xxx();获取 xxx("");设置
html()和text()方法的区别：
使用html(s)方法会解析字符串s，可以填入脚本
使用html()方法获取的值是经过解析的字符串值，例如超链接会被解析为源码
text(s)方法会将s当作普通字符串输出
使用text()方法获取的值是页面展示的字符串值
表单对象属性过滤选择器：
:enabled 可用
:disabled 不可用
:checked 选中
:selected 下拉选中
<button>标签默认是submit类型，若只是普通按钮，请注明type=button或者直接用<input type=button/>
