html_js_jq_css

// ----- JQ

$(function(){
$(div').bind('mouseout mouseover', function () {
// 移入和移出分别执行一次
alert('bind 可以绑定多重事件！ ')
});
});

$(function(){
$('div').unbind(); //删除当前元素的所有事件
});

<script>
$(function(){
function fn1() {
alert('点击 1');
}
function fn2() {
alert('点击 2');
}
$('input').bind('click', fn1);
$('input').bind('click', fn2);
//只删除 fn1 处理函数的事件
$('input').unbind('click', fn1);
});
</script>
// - on()方法绑定事件，off()解除事件
<script>
$("div").on("click", function(){
alert(‘被点击了！’);
})
</script>
<script>
$("p").off("click")；
</script>

//阶乘 ----------------- -- 打印 javascript
JavaScript核心
1）核心（ECMAScript）：描述了JS的语法和基本对象。
2）文档对象模型 ☆（DOM）：处理网页内容的方法和接口
3）浏览器对象模型（BOM）：与浏览器交互的方法和接口

function jc(n) {
var m = 1;
for(var i=1;i<=n;i++) {
m = m*i;
}
return m;
}
、、
！-！-！-！-！
-！-！-！-！-
！-！-！-！-！
-！-！-！-！-
！-！-！-！-！
-！-！-！-！-

for(var i=1;i<=6;i++) {
for(var j=1;j<=9;j++) {
if(i%2== 1) {
if(j%2 == 1) {
document.write('!');
}
else {
document.write('-');
}
}
else {
if(j%2 == 0) {
document.write('!');
}
else {
document.write('-');
}
}
}
document.write('<br/>');
}

//-----------------------------变量的作用域
var n=999;
function f1(){
alert(n);
}
f1(); // 999
在函数外部自然无法读取函数内的局部变量。
function f1(){
var n=999;
}
alert(n); // error
使用var命令。如果不用的话，你实际上声明了一个全局变量！
function f1(){
n=999;
}
f1();
alert(n); // 999
！！从外部读取局部变量
function f1(){
var n=999;
function f2(){
alert(n);
}
return f2;
}
var result=f1();
result(); // 999
Javascript语言特有的"链式作用域"结构（chainscope），子对象会一级一级地向上寻找所有父对象的变量。//反之不行
闭包的用途
闭包可以用在许多地方。它的最大用处有两个，一个是前面提到的可以读取函数内部的变量，另一个就是让这些变量的值始终保持在内存中。
function f1(){
var n=999;
nAdd=function(){
n+=1
}
function f2(){
alert(n);
}
return f2;
}
var result=f1();
result(); // 999
nAdd();
result(); // 1000
在这段代码中，result实际上就是闭包f2函数。它一共运行了两次，第一次的值是999，第二次的值是1000。这证明了，函数f1中的局部变量n一直保存在内存中，并没有在f1调用后被自动清除。
为什么会这样呢？原因就在于f1是f2的父函数，而f2被赋给了一个全局变量，这导致f2始终在内存中，而f2的存在依赖于f1，因此f1也始终在内存中，不会在调用结束后被垃圾回收机制（garbage collection）回收。
这段代码中另一个值得注意的地方，就是"nAdd=function(){n+=1}"这一行，首先在nAdd前面没有使用var关键字，因此nAdd是一个全局变量，而不是局部变量。其次，nAdd的值是一个匿名函数（anonymousfunction），而这个匿名函数本身也是一个闭包，所以nAdd相当于是一个setter，可以在函数外部对函数内部的局部变量进行操作。

//dom 操作
window.onload = function () { //预加载 html 后执行
document.getElementById('box').tagName; //DIV
document.getElementById('box').innerHTML; //测试 Div
document.getElementById('box').id; //获取 id
document.getElementById('box').title; //获取 title
document.getElementById('box').title = '标题' //设置 title
document.getElementById('box').style; //获取 CSSStyleDeclaration 对象
document.getElementById('box').style.color; //获取 style 对象中 color 的值
document.getElementById('box').style.color = 'red'; //设置 style 对象中 color 的值
document.getElementById('box').setAttribute('align','center');//设置属性和值
document.getElementById('box').removeAttribute('style');//移除属性

隐藏 div：document.getElementById（“div”）.style.display="none" //block 出现
表单元素 document.getElementById（“div）.style.disabled="true"
document.getElementById（“div”）.style.readOnly="true"

//通过 createElement 方法床架 div 标签
var newdiv=document.createElement("div");
//创建文本节点
var newtext=document.createTextNode("A new div");
//将文本节点追加到创建的 div 标签中
newdiv.appendChild(newtext) ;
//将创建的 div 标签中追加到 div(id=best)中
document.getElementById("test").appendChild(newdiv) ;
}

// - javascript
数据 类型有六种：Number 、String 、Boolean 、
Undefined （ 只有 一个值 值 undefined ）和 Null （只有一
个值 值 null） ） Object。
常用的输入/ 输出是 prompt() 和 和 alert() 方法
常用的系统函数有 parseInt () 、parseFloat()和 和 isNaN()

for...in 语句是一种精准的迭代语句，可以用来枚举对象的属性
break 语句会立即退出循环，强制继续执行循环体后面的语句。
continue 语句退出当前循环，继续后面的循环。
with 语句的作用是将代码的作用域设置到一个特定的对象中

//数组
arr.shift('洛阳','河南') 数组的前端删除一个元素
arr.unshift('洛阳','河南') 数组的前端添加一个元素
arr.push('洛阳') 数组末尾添加一个元素，并且返回长度
arr.pop(); //移除数组末尾元素，并返回移除的元素
arr.reverse() 逆向排序
arr.sort() 从小到大排序
arr.concat(arr2) 两数组合并

删除
var arr2 = arr.splice(0,2); //splice(0,2) 从第0个元素往后数两个元素（韩腾飞，21）【截取前二】
插入
var arr2 = arr.splice(1,0,' 计算机编程',' 河南'); // 没有截取，但插入了两条

slice() 提取字符串的一部分，并返回一个新字符串（与 substring 相同）
split() 通过将字符串划分成子串，将一个字符串做成一个字符串数组
'string'.toLowerCase // 'string'.toUpperCase
charAt 返回指定位置的字符 // 'hello'.charAt(2);
'a'.concat(',b,c,d') //拼接

//-- html
音频
<embed src="audio/tashuo.mp3" loop="1"></embed>
动画插入
<embed width="712" height="429" src="img/index.swf"></embed>

下拉 列表:
<select name= ”栏位名称” size= ”数字” >
<option value= ”选项值” selected=” ”selected” ”> …
<option value= ”选项值”> …
<option value= ”选项值”> …
</select>

复选框:<input type=” ”checkbox” ” name= ”栏位名称” value= ”内定值”
checked=”checked” disabled=”disabled”>
单选框:<input type=” ”radio” ” name= ”栏位名称” value= ”内定值”
checked=”checked” disabled=”disabled”>
表
<table border='1' bordercolorlight='red' bordercolordark='blue'>
<tr>
<td>一行一列</td>
<td>一行二列</td>
</tr>
<tr>
<td>二行一列</td>
<td>二行二列</td>
</tr>
<tr>
<td>三行合并</td>
</tr>
</table>
超链接
<a href="http:www.baidu.com target=”_blank” >百度</a>
_blank 在新窗口中打开链接
_parent 在父窗体中打开链接
_self 在当前窗体打开链接,此为默认值
// 自定义列表
<dl>
<dt>C盘</dt>
<dd>…</dd>
<dd>…</dd>
<dd>…</dd>
<dt>D盘</dt>
<dd>…</dd>
<dd>…</dd>
<dd>…</dd>
</dl>

// 特殊字符
<  &lt;
>  &gt;
&  &amp;
“  &quot

<hr> 水平直线
<p> 在页面中表示一个段落
<br> 换 行
//----------====================================S------CSS
// - 定位
position
relative 设置区块基准点为左上角
absolute 设置网页的左上角为基准点
static 无设置（默认）
left
auto 以基准点定位在左边
像素/百分比 定位在左边
top
auto 以基准点定位在上边
像素/百分比 定位在上边
right
auto 以基准点定位在右边
像素/百分比 定位在右边
bottom
auto 以基准点定位在下边
像素/百分比 定位在下边
z-index
auto 自动调整高度
数字 数字越大越往上层
相对定位：
跟它的名一样，相对嘛，要有一个参照物，但这个参照不是别的，是它自己呢，也就是说没设相对定位的位置，那你会问了，设没设都在那个位置为什么要设呢，因为只有设置了才能使TOP,LEFT这些生效，也就是设了才能相对自己原来的位置偏移，原来的位置保留着，偏移后会把其它的层遮罩住。
绝对定位：
在布局里不可能有绝对定位的，再怎么样都有一个参照位置的，绝对定位的参照位置就不像相对那样是自己了，至于是哪个，就看它的上级或上上级有没有定位了，也就是有没有position:relative;或position:fixed了，好像position:inherit;也行，前面两个可以，后面那个不设什么的不用也行，最好用position:relative;吧,转入正题，当要绝对定位的层设好要参照位置的层后，就可以用TOP，LEFT这些来定位置了，如果它的上级或上上级都没定位的话只就会根据BODY的位置来定位了,还有最后一点，绝对定位是不占位置的，它会像PS的图层一样单独做一层，至于第几层你可以通过z-index:这个属性来设置

// - 浮动
float none 正常显示
left 左浮动
right 右浮动
clear none 允许两边浮动
left 清除左边浮动
right 清除右边浮动
both 清除两边浮动
// - 边距
MARGIN 外边距
PADDING 内边距
Display
1) block 元素会独占一行，多个 block 元素会各自新起一行。自动填充。
2) block 元素可以设置 width,height 属性。仍然是独占一行。
3) block 元素可以设置 margin 和 padding 属性

inline 元素不会独占一行，多个相邻的行内元素会排列在同一行里，直到一行
排列不下，才会新换一行，其宽度随元素的内容而变化。
2) inline 元素设置 width,height 属性无效。
3) inline 元素的 margin 和padding 属性，水平方向的 padding-left, padding-right,
margin-left, margin-right 都产生边距效果；但竖直方向的 padding-top,
padding-bottom, margin-top, margin-bottom 不会产生边距效果。

inline-block
1) 简单来说就是将对象呈现为 inline 对象，但是对象的内容作为 block 对象呈现。
之后的内联对象会被排列在同一行内。比如我们可以给一个 link（a 元素）
inline-block 属性值，使其既具有 block 的宽度高度特性又具有 inline 的同行特
性。

// - list
list-style-type 设置列表项标记的类型
none 无符号
disc 实体的小圆点。//默认
circle 空心的小圆点。
square 实心的小方块。
decimal 1,2,3...
lower-roman i,ii,iii...
upper-roman I,II,III...
lower-alpha a,b,c,d,e...
upper-alpha A,B,C,D,E...
list-style-position 设置列表项标记的放置位置
inside 列表项往右移
outside 列表项正常显示(默认)
list-style-image 把图像设置为列表中的项目标记
URL list-style-image: url("img/3.jpg");
none 不会显示任何图象

// - 背景
background-color 背景颜色

background-image 背景图片
url("bg.jpg") 背景图片
none 不设置背景图片

background-repeat 背景图片的重复
repeat 将背景图案填满整个背景。
repeat-x 将背景图案在水平方向添满。
repeat-y 将背景图案在垂直方向添满。
no-repeat 图案只出现一次。

background-position 背景图片的位置
top left 设置背景 上左方
top center 设置背景 上方中间
top right 设置背景 上右方
center left 设置背景 中间左方
center center 设置背景 中间
center right 设置背景 中间右方
bottom left 设置背景 左下方 方
bottom 设置背景 正下方
bottom right 设置背景右 下方

background-attachment(了解) scroll 设置背景图像会随视窗滚动
条的移动而移动。
fixed 设置背景图像不会随视窗滚动条
的移动而移动

// - 字体
text-indent

长度 首行缩进
百分比 同上

line-height

像素 行高
字 数字/ 百分比 行高

letter-spacing

normal 正常显示
长度 文本间隔
word-spacing normal 正常显示
（ （ 仅对） 英文单词有效） 数字 单词间距

white-space

normal 文本自动处理换行
pre 换行和空白受保护
<pre> 标签 同样的效果 （代码 中 怎么显示页面中 就怎么 显示） ）
nowrap 强制在同一行显示
（所有到 内容显示在一行，除非遇到<br> ）

text-transform

none 正常显示可以包含大，小字符
capitalize 字符串第一个字符大写
uppercase 设置大写字符
lowercase 设置小写字符

vertical-align

sub 设置文字为下标。
super 设置文字为上标。
top 文字 往上端靠齐。
middle 设置文字是在中线位置。
bottom 文字 往下端靠齐。
范围越小 优先级越高