平时积累小知识

来源：互联网发布：万圣节整人软件编辑：程序博客网时间：2024/05/16 10:29

Google JQ库文件连接
http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js
http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js
http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js

jQuery.autoIMG.js JQ图片自动缩放图片

contenteditable="true" 设置HTML可编辑，同textarea一样
resize:none 把textarea在FF右下角的点点去掉

selection.createRange().text 选择选中的文字

$.(document).click(function(event){
event.stopPropagation();//阻止事件冒泡
return false;
});

向元素添加内容有以下方法：
1.append()向元素追加内容，如，$("p").addend("aa")。向P中追加aa
2.appendTo()意思是同上，把A追加到B中，如：$("aa").appendTo("p"),把aa加到p中
3.prepend()向元素前置内容，如:$("p").prepend("aa"),把b前置到p中
4.prependTo()同上，把A前置到B中，如:$("aa").prependTo("p"),把b前置到p中
5.after()在元素之后插入内容，如：$("p").after("aa")
6.insertAfter()意思同上，把A插入B中。infor:$("aa").insertAfter("p")
7.before()在每个元素之前插入内容，infor:$("p").before("aa")
8.insertBefore()同上。把A插入B中,infot:$("aa").insertBefore("p")

wrap()包裹//比如ab为P元素包span元素，代码为"$("p").wrap("")",包裹后的代码为ab
wrapAll()功能同上，wrapAll()包裹后的代码为ab
wrapInner()功能同上,wrapInner()包裹后的代码为ab

////////////////////////////////////
val()设置元素的值和获取元素的值,相似于value();
attr()设置元素的属性
text()设置元素的内容

/////////////////////////////////////////////
next()同辈后面紧邻的元素
prev()同辈前面紧邻的元素
siblings()取得同辈元素前后所有

//////////////////////////////////////////////////
DOM对象：JS与html元素的连接叫做DOM对象。比如说
html代码：<h2>h2</h2>
JS代码：document.getElmentById("h2")或$("h2")//这就叫做DOM对象

jQuery对象就是把DOM对象包装起来，比如说：
var IdH=$("h2");//Dom对象
alert(IdH); //这就是jQuery对象

//////////////////////////////////////////////////
javascript:for(x in document.open);
大家都在自己的网站上加这代码，让IE6挂掉

JS
/////////////////////////////////////////////////
parseInt()只截取整数，//从字符串转为数字，以下也是
parseFloat()截取整数和浮点数
Math.ceil()向上取舍
Math.floor()向下取舍
Math.round()四舍五入
Math.max(x,y)返回 x 和 y 中的最高值。
Math.min(x,y返回 x 和 y 中的最低值。)
Math.random()0、1之间的随机数

/////
数字转为字符串
用String()函数或toString()函数

//////////////////////////////////////////
join()方法把一个数组的所有元素都转换成字符串
IN：
var a=[1,2,3]
var s=a.jion() //s=="1,2,3"

//////////
push()将一个或多个新元素附加到数组尾部
pop()将删除数组的最后一个元素，减少数组的长度
push()在数组末尾添加一个或多个元素.并返回新的长度
unshift()在数组的头部进行元素附加
shift()删除并返回数组
/////////////////////////////////////////

while()与do while()循环。
for:
var i=0;
while(i<=5)
{
document.write("this is "+i)
}
////
var i=0;
do
{
document.write("this is "+i)
i++
}
while(i<=5);
以上代码可见分晓
for....in遍历数组内的元素
var x
var mycars = new Array()
mycars[0] = "宝马"
mycars[1] = "奔驰"
mycars[2] = "宾利"
for (x in mycars)
{
document.write(mycars[x] + " ")
}
///////////////////////////////////////////////////

try...catch错误块
var txt=""
function message()
{
try
{
alert("Welcome guest!")
}
catch(err)
{
txt="本页中存在错误。\n\n"
txt+="错误描述：" + err.description + "\n\n"
txt+="点击“确定”继续。\n\n"
alert(txt)
}
}

////////////////////////////
throw声明
for:
var x=prompt("请输入 0 至 10 之间的数：","")
try
{
if(x>10)
throw "Err1"
else if(x<0)
throw "Err2"
else if(isNaN(x))
throw "Err3"
}
catch(er)
{
if(er=="Err1")
alert("错误！该值太大！")
if(er == "Err2")
alert("错误！该值太小！")
if(er == "Err3")
alert("错误！该值不是数字！")
}

/////////////////////////////////////
延迟脚本(defer="defer")
<script defer="defer" src="xx.js"></script>

///////////////////////////////////////////////
JS排序
reverse()以降序的顺序反转数组
sort()以升序的顺序(默认的)
两种方法返回值是经过排序之后的数组

/////////////////////////////////////////////////////////////////
slice()从原数组中得到一创建新的数组，比如说
var colors=["red","green","yellow","blue"]
var colors2=colors.slice(1);
alert(colors2);/////////////////输出结果为["green","yellow","blue"]
var colors3=colors.slice(1,3);
alert(colors3);/////////////////输出结果为["green","blue"]

//////////////////////////////////////////
splice()向数组的中部插入项，具体使用如下：

删除,splice(被删除对象的位置，被删除对象的数量)
插入，splice(起始位置，要删除的项数(0)，要插入的项)
替换，splice(同插入一样)

///////////////////
Date日期格式化方法
toDateString()----以特定于实现的格式显示星期几、月、日和年
toTimeString()----以特定于实现的格式显示时、分、秒和时区
toLocaleDateString()----以特定于地区的格式显示星期几、月、日和年
toUTCString()----以特定于实现的格式完整的UTC日期

////////////////////////////////////////
正则表达式(RegExp)
g--表示全局(global)模式
i--表示不区分大小写(case-insensitive)模式
m--表示多行(multiline)模式
[......] 位于括号之内的任意字符
[^.....] 不在括号之内的任意字符
\w(小写) 任何ACSII单字符，等价于[a-zA-Z0-9_]
\W(大写) 任何非ACSII单字符，等价于[^a-zA-Z0-9_]
\d(小写) 任何ACSII数字，等价于[0-9]
\D(大写) 任何ACSII数字之外的任何字符，等价于[^0-9]
[\b] 退格直接量(特例)
{n,m} 匹配前一项至少n次，但是不能超过m次
{n,} 匹配前一项n次，或更多次
{n} 匹配前一项恰好n次
? 匹配前一项0次或1次，也就是说前一项是可选，等价于{0,1}
+ 匹配前一项1次或多次，等价于{1,}
* 匹配前一项0次或多次。等价于{0,}

//////正则表达式的选择、分组和引用字符
"|" 选择，匹配的是该符号左边的子表达式或右边的子表达
(....) 组合，将几个项目组合为一个单元，这个单元可由*、+、?和|等符号使用，而且还可以记住和这个组合匹配的字符以供此后的引用使用
(?:...) 只组合。把项目组合到一个单元，但是不记忆与该组匹配的字符
\n 和第n个分组第一次匹配的字符相匹配，组是括号中的子表达式（可能是嵌套的），组号是从左到右计数的左括号数，以(?:形式分组的给不编码

/////正则表达式的锚字符
^ 匹配字符串的开产学研，在多行检索中，匹配一行的开头
$ 匹配字符串的结尾，在多行检索中，匹配一行的结尾
\b 匹配一个词语的边界，简而言之，就是位于字符\w和\W之间的位置，或位于字符\w和字符串的开头或结尾之间的位置(PS:[\b]匹配的是退格符)
\B 匹配非词语的边界的位置，比如说 'h与h'匹配，而'o与p'不匹配
(?=p) 正前向声明，要求接下来的字符都与模式p匹配，但是不包括匹配中的那些字符

(?!p) 反前向声明，要求接下来的字符不与模式p匹配

////////////////////////////////////////////////////////////
slice()，substring()两个参数，第一个参数指导定子字符串的开始位置，第二个参数表示子字符串到哪里结束(可省略),for: var svalue="hello world";alert(svalue.slice/substring(3)/////"lo world" svalue.slice/substring(3,7);///"lo w")

substr()两个参数。第一个参数子字符串的起始位置，第二个参数指定的则是返回的是字符个数、

/////////////////////////////////////////////////////////

构造函数的特点，通过new 来定义的函数都可以作为构造函数，如
var sie=new Person("a","b",c");///Person之前定义的函数

////////////////////////////////////////////////////////////////////////////
confirm();//跟alert()一样，弹出对话框提示用户信息，但不同是confirm()是一个“确定”或“取消”的一个系统对话框

///////////////////////////////////////////////
appendChild()添加子节点
replaceChild()替换子节点
removeChile()移除子节点
document.inplementation()创建新的方法，格式如下
document.inplementation().方法名如createDocumentType()//////此方法是创建新的文档

JS设置CSS样式
div.style.cssText="width:33px;height:33px;"
//////////////////TreeWalker类型
不同方向的遍历
parentNode();遍历到当前节点的父节点；
firstChild();遍历到当前节点的第一个子节点；
lastChild();遍历到当前节点的最后一个子节点；
nextSibling();遍历到当前节点的下一个同辈节点，如同JQ的subling()
previousSibling();遍历到当前节点的上一个同辈节点;

///////
cloneRange()复制
EventUtil中的一些方法说明
EventUtil.addHandler(oTarget,sEventType,fnHandLer)此方法用来给特定对象添加事件，oTarget是指定对象,sEventType是事件类型，如click、keydown等， fnHandler是事件回调函数
EventUtil.removeEventHandler(),此方法用来移除特定对象的特定事件，参数及参数功能同上
EventUtil.getTarget(),在事件传播路径上查找满足指定选择条件的元素

var EventUtil = {
/* 此组件的一般用法为在事件处理程序中先得到事件对象：
* event = EventUtil.getEvent(event);
* 然后使用其他方法：
getXXXX(event);
*/
addHandler : function (element,type,handler){
if(element.addEventListener){ //DOM2 方法
element.addEventListener(element,"on"+type,handler,false); //false表明在事件冒泡阶段才触发事件
}else if(element.attachEvent){
element.attachEvent(element,"on"+type,handler);
}else{ //DOM0方法,该方式不能添加多个事件处理程序
element["on"+type] = handler;
}
},
removeHandler :function (element,type,handler){
if(element.removeEventHandler){ //DOM2 方法
element.removeEventHandler(element,"on"+type,handler);
}else if(element.detachEvent){
element.detachEvent(element,"on"+type,handler);
}else{ //DOM0方法
element["on"+type] = null;
}
},

getButton : function (event){
if(document.hasFeature("MouseEvent","2.0"){//由于event的属性都为button,所以不能用能力检测而要用特性检测
return event.button; //包含 0 1 2 三个值
}else{//IE定义了N多按键状态是没必要的，因此简化它们
switch(event.button){
case 0:
case 1:
case 3:
case 5:
case 7:
return 0; //主按钮
case 2:
case 6:
return 2; //副按钮
case 4: return 1;//中键
}
}

},

getCharCode: function (event){
if(typeof event.charCode =="number" ){ //charCode只在keypress事件后才包含值，此时keyCode可能有值也可能没有，Ie没有charCode属性。
return event.charCode;
}else{
return event.keyCode;
}
},

getClipboardText : function (event){
var clipboardData = (event.clipboardData || window.clipboardData);
return clipboardData.get("text");
},

getEvent: function (event){
return event ? event:window.event;
},
//
getTarget : function (event){
return event.target || event.srcElement;
},
//获取目标元素的关联元素,比如从鼠标从DIV1移动到DIV2时,对于mouseover事件而言 target为div2, 而relatedTarget为DIV1。
getRelatedTarget: function (event){
if(event.relatedTarget){
return event.relatedTarget;
}else if(event.toElement){//IE
return event.toElement;
}else if(event.fromElement){//IE
return event.fromElement;
}else{
return null;
}
},
//获取滚轮增量
getWheelDelta: function (event){
if (event.wheelDelta){ // client.js中有client对象， 9.5版本以下的opera有bug
return (client.engine.opera && client.engine.opera < 9.5 ? -event.wheelDelta : event.wheelDelta);
} else {
return -event.detail * 40;
}
},
setClipboardText : function(event,value){
if (event.clipboardData){
event.clipboardData.setData("text/plain", value);
} else if (window.clipboardData){
window.clipboardData.setData("text", value);
}
},
stopPropagation : function(evnet){//阻止事件冒泡

},
preventDefault:function(event){ //阻止事件默认行为例如“链接点击后跳转”
if(event.preventDefault){
event.preventDefault();
}else{
event.returnValue = false;
}
}
}

/////////表单操作////////////////////////////////////////

form.elements["button"]也可以用下标形式，如form.elements[0]

//////////悟透JS中的function/////////////////
function本身有一个caller属性，表示调用当前函数的上层函数

JSON表示javascript object notation。javascript对象表示法

创建一个json如下
var a={}\var a={name:"Alice",age:"16",say:function(){alert("aa")}}或是更多创建方法

/*让position:fixed在IE6下可用! */
.fixed-top /* 头部固定 */{position:fixed;bottom:auto;top:0px;}
.fixed-bottom /* 底部固定 */{position:fixed;bottom:0px;top:auto;}
.fixed-left /* 左侧固定 */{position:fixed;right:auto;left:0px;}
.fixed-right /* 右侧固定 */{position:fixed;right:0px;left:auto;}
/* 上面的是除了IE6的主流浏览器通用的方法 */
* html,* html body /* 修正IE6振动bug */{background-image:url(about:blank);background-attachment:fixed;}
* html .fixed-top /* IE6 头部固定 */{position:absolute;bottom:auto;top:expression(eval(document.documentElement.scrollTop));}
* html .fixed-right /* IE6 右侧固定 */ {position:absolute;right:auto;left:expression(eval(document.documentElement.scrollLeft+document.documentElement.clientWidth-this.offsetWidth)-(parseInt(this.currentStyle.marginLeft,10)||0)-(parseInt(this.currentStyle.marginRight,10)||0));}

* html .fixed-bottom /* IE6 底部固定 */{position:absolute;bottom:auto;top:expression(eval(document.documentElement.scrollTop+document.documentElement.clientHeight-this.offsetHeight-(parseInt(this.currentStyle.marginTop,10)||0)-(parseInt(this.currentStyle.marginBottom,10)||0)));}

* html .fixed-left /* IE6 左侧固定 */{position:absolute;right:auto;left:expression(eval(document.documentElement.scrollLeft));}

//
解决IE6下的Height高度为100%;的方法
html,body{
_height:100%;
}
一个对象高度是否可以使用百分比显示，取决于对象的父级对象，Table在body之中，因此它的父级是body，而浏览器默认状态下，
是没有给 body一个高度属性的，因此当我们直接设置#left为height:100%;时，不会产生任何效果，而当我们给body设置了100%之后，
它的子级对象 Table的height:100%;便发生作用了，这便是浏览器解析规则引发的高度自适应问题。而代码中除了给body应用之外，
还给 HTML对象也应用相同的样式设计，这样做的好处是使IE与firefox浏览器都能够实现高度自适应。另外，Firefox中的HTML标签不是 100%高度，
因此给两个标签都定义为height:100%;以保证两个浏览器下均能够正常显示。

AJAX判断对象是否支持浏览器
var xmlhttp;
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari)
xmlhttp=new XMLHttpRequest();
}
else
{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}

CSS font属性简明写语法
有6个值
font-style //设置字体的风格，三个值(normal(浏览器默认)，italic(斜体),oblique(倾斜)
font-variant //设置小型大写字母，即把所有小写字母变成大写，但是所有使用小型大写字体的字母与其余文本相比，其字体尺寸更小
font-weight //设置字体加粗
font-size/line-height //字体大小/行高
font-family//字体系列

顺序：
font:italic(字体风格，默认) bold(粗体) 12px/30px(大小/行高) arial,sans-serif(字体);
//一般情况下只设置四种字体：
font:bold 12px/30px arial,sans-serif

//带有toString()方法的类型
Boolean值、数字、字符串,以上的都可以把它们的值转换成字符串

对象中包含“属性、方法”
属性是隶属于某个特定对象的变量；
方法是只有某个特定对象才能调用的函数；
在javascript脚本里，需要“点”来调用属性和方法：
object.property
object.method()

Number类的方法
得到Number类的原始值:valueOf()方法:
var iNumber=oNumberobject.valueOf();
返回指定几位小数点的数字的字符串：toFixed();PS:toFixed()方法只能表示具有0到20位小数的数字，超出这个范围的值会引发错误；
var oNumberobject=new Number(99);
alert(oNumberobject.toFixed(2)); outputs"99.00";

String()方法
concat()用于把一个或多个字符串连接在String对象的原始值上，如
var a=new String("hello ");
var b=a.concat("world");
alert(b);//outputs"hello world";
alert(a);//outputs"hello "
//
concat()方法相当于"+"逻辑符，把字符串连接起来
//
indexOf()\lastIndexOf()返回是指定的子串在另一个字符串中的位置();例如
var a=new String("hello world");
alert(a.indexOf("o"))//outputs"4";
alert(a.lastIndexOf("o"))//outputs"7"

函数内部申明变量一定要加var,要不然就变成全局变量

闭包即是调用一个函数内的局部变量,要调用这个变量必须在函数内建一个子函数,并返回子函数,如
Js代码

function f1(){
n=999;
function f2(){
alert(n);
}
return f2;//注意这里,必须返回子函数,要不然调用就出错
}
var result=f1();
result(); // 999
由于在Javascript语言中，只有函数内部的子函数才能读取局部变量，因此可以把闭包简单理解成“定义在一个函数内部的函数”。

常见的函数定义：
1，关键字方式
function name(){...}
2，函数字面量
var name = function(){}
3，使用Function()构造函数
var name = new Function();这里的Function()属于一个基础类型，即一个函数构造器对象
2，3其实就是把一个没有名字的函数赋值给一个变量，这个没有名字的函数就是匿名函数。
使用Function()构造函数一般是动态创建的，相当于全局的eval()
其实所谓的区别都是应用场景上的区别。
一般要么在闭包中使用匿名函数自执行模拟一个return
或者在顶级作用域中自执行模拟一个return
因为匿名函数在标准中是没有return一说的
在就是匿名函数中重写一些JavaScript API容易产生错误，比如
(function(){
toString : function(){},
.....
})();
然后匿名函数自执行的存在只是为了消除function的二义性

(function(){
//
})()
这么写就是自执行。因为作为一个公共接口或者API。要执行之后返回结果集共外部调用。
常见的框架只是把结果返回到全局作用域中了。
无论什么时候，注意返回结果的类型和参数的数据类型是否正确。
比如：
function getId(id){
return document.getElementById(id);
}
这里设计的初衷是传递一个字符串参数，获取指定的DOM对象。
比如：
function getId(id){
return document.getElementById(id);
}
这里设计的初衷是传递一个字符串参数，获取指定的DOM对象。
Swan 11:44:03
嗯.
tf11:44:38
window.onload = function(){
obj.a = fn1;
obj.b = fn2;
}
function fn1(){}
function fn2(){}
tf 11:45:42
比如这里obj.a = fn1;这里的obj的成员属性a的指针执行指向一个函数的引用
如果是协作obj.a = fn1();这样会发生错误，什么错误？
tf 11:46:14
fn1();只执行函数，this指针指向的就是undefined了
tf 11:46:45
所以我的建议是：看类型。
JavaScript中就是Null Undefined String Number Boolean Object这几种类型啊
那么this指向的其实也是一个Object

document.body是DOM中Document对象里的body节点， document.documentElement是文档对象根节点(html)的引用。

ECMAScript 有 5 种原始类型（primitive type），即 Undefined、Null、Boolean、Number 和 String。

//栈方法后进先出
var colors=["red","green"];
colors.push("yellow");
colors[3]="black";
alert(colors.length);
var items=colors.pop();
alert(items);
//队列方法后进先出
var colos=new Array();
colos=["1","2"];
colos.push("3");
alert("colos cont "+colos);
var it=colos.shift();
alert("colos this one "+it);
alert("colos cont "+colos);
//重排序方法
var sor=["1","3","4","2","0"];
sor.reverse()//反转数组顺序
alert("把数组反转后的内容 "+sor);
sor.sort()//按升序排列数组
alert("把数组按顺序排的内容 "+sor);

/////////
函数的名字仅仅是一个包含指针的变量而已，
每个函数都有两个属性length和prototype
length属性表示函数希望接收的命名参数的个数
比如
function a(num){return num}
function b(n1,n2){return n1+n2}
function c(){alert("v")};
alert(a.length)//1
alert(b.length)//2
alert(c.length)//0
//////
获取字符串中的字符:charAt(),比如:var a="swan";alert(a.charAt(1))//w
获取字符串中的字符编码:charCodeAt(),比如var s="hello world";alert(s.charCodeAt(1))//101
indexOf()/lastIndexOf()前者是从字符串开头开始搜找子字符位置，后者是从后面往前查找
obj.localeComple(target)if(obj>target){return 小于0}，if(obj=target){return 0};if(obj<target){return 大于0}
//Global对象中encodeURI()\encodeURIComponent();对应的是decodeURI()\decodeURIComponent();
前者是URI进行编码，后者是对使用encodeURI()\encodeURIComponent();进行解码

/////////

CSS3翻转