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>
// 特殊字符
< <
> >
& &
“ "
<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 文字 往下端靠齐。
范围越小 优先级越高