JavaScript的总结博客

一、查找HTML元素

　　通常，通过 JavaScript，您需要操作 HTML 元素。

　　1、通过 id 找到 HTML 元素

　　2、通过标签名找到 HTML 元素

　　3、通过类名找到 HTML 元素

提示：通过类名查找 HTML 元素在 IE 5,6,7,8 中无效。

var x=document.getElementById("intro");
var y=document.getElementsByTagName("p");

①、改变 HTML 元素的内容 (innerHTML)

document.getElementById(id).innerHTML=new HTML

②、改变 HTML 属性

document.getElementById(id).attribute=new value
document.getElementById("image").src="landscape.jpg";

③、改变 HTML 样式

document.getElementById(id).style.property=new style
<script>
document.getElementById("p2").style.color="blue";
</script>

④、添加或删除 HTML 元素

二、DOM 事件

1、Js中的事件

行为,结构,样式分离的页面

一般事件 onclick 鼠标点击时触发此事件

ondblclick 鼠标双击时触发此事件
onmousedown 按下鼠标时触发此事件
onmouseup 鼠标按下后松开鼠标时触发此事件
onmouseover 当鼠标移动到某对象范围的上方时触发此事件
onmousemove 鼠标移动时触发此事件
onmouseout 当鼠标离开某对象范围时触发此事件
onkeypress 当键盘上的某个键被按下并且释放时触发此事件.
onkeydown 当键盘上某个按键被按下时触发此事件
onkeyup 当键盘上某个按键被按放开时触发此事件

①、绑定事件的3种方式

1: 直接写在html标签内声明

<div id="school" onclick="t();">

这种写法最古老,兼容性最强.属于DOM的lev0级的标准.这个效果,等同于在点击div的时候,执行"t();"这一语句,

在全局范围内执行,因此,t函数内部的this指代全局对象-->window 想操作被点击的DOM对象,用this就不行了.

 第2种绑定方式:

DOM对象.onclick = function () {}

这种绑定是把一个DOM对象onclick属性赋值为一个函数,

因此,函数内部的this直接指向该DOM对象.

在这种绑定方式中,只能给一个事件,绑定一个处理函数

即 .onclick = fn1;  .onclick = fn2;

最终的效果, 是.onclick = fn2;

如果用函数来调用其他函数的形式

例.onclick = function () {fn1(),fn2()}

那么此时，　fn1,fn2中的this又指向window．

如何绑定多个函数，　并令this指向DOM对象

第三种绑定事件的方法:

DOM lev3的事件绑定标准

添加和去除监听事件.

addEventListener('事件',函数);  // 第一个参数事件参数, 没有前缀"on", w3c的标准,IE不支持

注意点1: 如果添加了多个事件处理函数, 按"添加时的先后顺序来执行"

注意占2: 事件处理函数中的this 指代 DOM节点自身 (w3c标准)

注意点3: 第一个事件参数,一律把事件名称的'on'去掉 (w3c标准)

 

去除绑定

removeEventListener('事件',函数)

IE下绑定事件与解除事件的方法

attachEvent('事件',函数)   // 注意: 事件 要加on

detachEvent('事件',函数) // 事件依然要加on

总结一下:

W3c addEventListener 与IE的attachEvent()的不同

1: 函数名不同

2: 事件名不同, IE下要加on,w3c不加on

3: 加事件后的执行顺序不同, w3c按绑定事件的顺序来执行, 而IE6,7,8,是后绑定的事件先发生.

4: this的指向, w3c中,绑定函数中的this指向 DOM对象, 而IE6,7,8中,指向window对象

===================================================================================================================================================================================

事件触发总结：

1、onmousedown
定义：onmousedown事件会在鼠标按键被按下时发生

2、onmouseup
定义：onmouseup事件会在鼠标按键被松开时发生

3、onmousemove
定义：onmousemove事件会在鼠标指针移动时发生
支持该事件的js对象：document
但是onmousemove默认情况下没有任何对象的一个事件；
因为鼠标移动频繁发生。

4、onmouseover
定义：onmouseover事件会在鼠标指针移动到指定的对象上时发生

5、onmouseout
定义：onmouseout事件会在鼠标指针移出指定的对象时发生

6、onclick单击事件
定义：onclick事件和onmousedown不同。单击事件是在同一元素上发生了
鼠标按下时间之后发生了鼠标放开时间是发生的。
理解：鼠标按下抬起以后事件才发生。

7、onfocus光标移入事件
定义：onfocus事件在对象获得焦点时发生

8、onblur光标移出事件
定义：onblur事件会在对象失去焦点时发生

9、oncontextmenu右键事件
鼠标按下右键的时候发生

10、onsubmit
onsubmit事件会在表单中的确认按钮（submit）被
点击是发生。

11、onkeydown
onkeydown事件会在用户按下一个键盘按键时发生

12、onkeyup
obkeyup事件会在键盘按键被松开时发生

13、onload
onload事件会在页面或图像加载完成后立即发生

14、onscroll
onscroll事件拖动滚动条时发生

15、onresize
onresize事件会在窗口或框架被调整大小时发生

16、onmousewheel
onmousewheel事件ie、chrome下鼠标滚轮滚动时发生

17、DOMMouseScroll
DOMMouseScroll事件是标准下（ff)鼠标滚轮事件，
鼠标滚轮滚动时发生

18、onreadystatechange
onreadystatechange事件：当请求被发送到服务器时；
我们需要执行一些基于响应的任务。每当readyState
改变时，就会触发onreadystatechange事件。
readyState属性存有XMLHttpRequest的状态信息。
在onreadystatechange事件中，我们规定当服务器响应
已做好被处理的准备时所执行的任务。

19、attachEvent绑定事件
ie下的绑定事件，2个参数，第一个什么事件，第二个执
行函数（倒序执行）。注意this指向
如：obj。attachEvent（‘onclick’，aaa）
function aaa（）{}

20、addEventListener绑定事件
标准下的绑定事件，3个参数。1什么事件（不加ON），
2执行函数 3、一个布尔值。true是捕获阶段，false是
冒泡阶段

21、event对象指事件的状态

简单的：一个 存了 事件详细信息的东西

网上较专业的：Event对象代表事件的状态，比如事件在其中发生的元素
键盘按键的状态，鼠标的位置，鼠标按钮的状态，通常
与函数结合使用。

22、clientX、clientY
在Event对象下获取鼠标位置

23、cancelBubble =true
在Event对象下取消冒泡事件

24、keyCode
在Event对象下获取用户按下键盘的哪个按键

25、preventDefault（）
阻止默认默认事件的绑定写法

26、return false
阻止默认时间的普通写法

 

二、DOM 27-46
27、getElementById
通过id获取某一个元素

28、getElementsByTagName
通过标签名获取一组元素的集合

29、childNodes
获取子节点，但是标准下会获取空白节点
获取第一级子元素的节点

30、nodeType
节点类型
1）元素节点（标签）2）文本节点（空白节点）

31、children
获取子节点，但是没有兼容性问题
获取第一级子元素的节点

32、firstElementChild || firstChild
标准下：firstElementChild ie不支持
ie下是 firstChild
获取子元素里的第一个

33、lastElementChild || lastChild
标准下：lastElementChild ie不支持
ie下是 lastChild
获取子元素里的最后一个

34、nextElementSibling || nextSibling
标准下：nextElementSibling ie不支持
ie下 nextSibling
获取子指定元素的下一个兄弟节点

35、previousElementSibling || previousSibling
标准下： previousElementSibling ie不支持
id：previousSibling
获取指定元素的上一个兄弟节点

36、parentNode
获取父节点

37、offsetParent
获取有定位的父节点，都没有定位的话父节点就是body

38、offsetWidth-----有问题
获取元素的实际宽度（width+padding+border）

39、offsetHeight
获取元素的高度（height+padding+border）

40、clientWidth
获取元素的内部宽度（width+padding）

41、clientHeight
获取元素的内部高度（height+padding）

42、createElement（标签名）
创建一个节点

43、appendchild（节点）
追加一个节点

44、insertBefore（节点，原有节点）
在已有的元素前面插入

45、removeChild（节点）
删除一个节点

46、replaceChild（节点，已有节点）
替换已有的节点

 

三、BOM操作： 47-53
47、window。open（）
打开窗口

48、window。close（）
关闭窗口,标准下不支持

49、window。location
获取浏览器地址

50、window。location。href
获取整体的网址

51、window。location。search
获取问号？后面的内容，包括问号

52、window。location。hash
获取警号#后面的内容，包括警号

53、window。location。reload（）
自动刷新，定时器配合

53、window。navigator。userAgent
获取浏览器信息

 

四、js基础： 54-126
54、if else 如果。。。。否则。。。

55、switch 如果

56、？： 三木，就是如果。。。否则。。。

57、for（）{} for循环

58、for in

59、while=for

60、continue 终止本次循环 
if（i=2）continue 跳过这个条件

61、break 终止当前循环 
if(i=3)break 结束本次

62、undefined 未定义

63、null=========？

64、=== 只比较，不转换类型

65、== 不仅比较，而且还会将两个东西转换成相同的类型

66、= 赋值

67、！ 就是 不 的意思

68、setTimeout 
设置定时器，2秒钟后，执行一次，并且只执行一次，---定时炸弹

69、clearTimerout
清楚定时器，清理setTimerout

70、setInterval
设置定时器，每两秒执行一次

71、clearInterval
清楚定时器，清理setInterval

72、arguments
实参的元素集合

73、call
改变this取向
fn名.call（this，‘black’）第一个参数是函数之行的环境，
从第二个参数开始，才是函数的真正参数

oDiv.onclick = function(){
toChange.call(this,'black'); 
};
function toChange(sColor){
this.style.background = sColor;
}

74、apply
改变this取向，
function show(a, b)
{
alert('this是：'+this+'\na是：'+a+'\nb是：'+b);
}
show(12, 8);
show.apply(document, [12, 8]);
第二个参数是以数组形势存在的

75、callee ===============？调用这个函数自身的

76、var arr=【】； 声明一个数组

77、var arr=new Array（） 声明一个数组

78、push 
向数组的末尾添加一个或更多元素，并返回新的长度

79、pop
删除数组最后一个元素，并返回这个元素

80、shift
删除数组第一个元素，并返回这个元素

81、unshift
向数组的开头添加一个或多个元素，并返回新的长度

82、splice
删除元素，并向数组添加新的元素

83、join（）
把数组的所有元素放入一个字符串。元素通过指定
的分隔符进行分隔

84、sort（）
对数组的元素进行排序

85、concent----concat（）？
连接两个数组或者多个数组，并返回结果

86、split
分割字符串，获得数组

87、substring
获取字符串
包括开始不包括结束

88、indexOf
从前往后检索字符串

89、charAt
获取某个字符

90、var re=//； 声明一个正则对象

91、var re=new RegExp() 声明一个正则对象

92、search 查找一个字符串，只找第一次出现的位置

93、month ===============？
match-匹配符合正则的东西，挑东西返回数组

94、test 用正则检验字符串是否符合它所规定的规则

95、replace 替换，把符合规则的东西替换成字符串

96、量词：{n，m}至少出现n次，最多出现m次
+许多 
* {0,} 0到任意次
？零次或者一次{0,1}
{n，}最少n次，最多不限
{，m}最少不限最多m次
{n}正好n次

97、字符类：
1[abc]2 1和2中间出现a或b或c
[^0-9]排除数字以外所有都可以
[a-z]所有的英文
[0-9]所有的数字

98、标识： i 忽略大小写 g 全局匹配

99、首尾： ^ $

100、转义：
\d 查找数字 [0-9]
\D 除了数字[^0-9]
\s 空白
\b 单词边界
\w 数字字母下划线--用户名
. 任意字符
\. 代表.本身

101、var oDate= new Date（） 获取当前时间

102、getHours（） 获取小时

103、getMinutes（） 获取分钟

104、getSeconds（） 获取秒

105、getFullYear（） 获取年

106、getDay（） 获取星期

107、getDate（） 获取当前的时间日期

108、setDate（） 设置一个月的某一天

109、var oImg=new Image（） 创建一个image对象

110、什么叫ajax
通过XMLHttpRequest与服务器通信，进行无刷新操作

ajax采用的是异步请求

111、同步与异步的区别

同步就是同一时间做一件事
异步就是同一时间做多件事

112、ajax的交互方式
1）发送数据并返回 （）（注册）
2）只发送不返回 （）========？例子
3）不发送只返回 （股票）

113、post与get的区别
1）发送方式不一样：get加载网址问好后面的
post把数据放在一个传输体中发送上去的

2）安全不一样
post相对安全，get不安全

3）网址长度不一样
ie下get网址超过2048字节将被截断
post没有上限

4）缓存问题
get可以缓存网址，post不会缓存网址

5）用途不一样
get：查询数据，post修改数据

114、发送数据是什么样的？
串联化数据：key1=value1&key2=value2

115、返回数据是什么样的？
返回的是字符串

116、跨域：jsonp？
（利用script标签跨域）
在头部创建个script标签，
改变script标签中src

117、ajax的编写步骤？
1）创建ajax对象（要有手机）
2）链接服务器open（拨号）
3）监听数据返回onreadystatechange（听）
4）发送数据send（说）
5）close（忽略）（挂了）

118、json怎么取？=========？
通过串联化数据

119、什么是对象？
对象是一个整体，对外提供一些操作。||
黑盒子，看不到内部的样子，
能看到表面的按钮

120、什么是面向对象？
使用对象时，只关注对象提供的功能，
不关注其内部细节，比如jQuery ||
使用一个东西的时候，不去管内部是
怎么做的，只用好它的功能

下面是整理出来的一些函数，方便大家的学习和使用

/**
function obj$(id)                       根据id得到对象
function val$(id)                       根据id得到对象的值
function trim(str)                      删除左边和右边空格
function ltrim(str)                     删除左边空格
function rtrim (str)                    删除右边空格
function isEmpty(str)                   字串是否有值
function equals(str1, str2)             比较两字符串是否相等
function equalsIgnoreCase(str1, str2)   忽略大小写比较两个字符串是否相等
function isChinese(str)                 判断是否中文
function isEmail(strEmail)              是否电子邮件
function isImg(str)                     是否是一个图片格式的文件jpg|jpeg|swf|gif
function isInteger(str)                 是否是一个整数
function isFloat                        是否是一个浮点数
function isPost(str)                     是否邮编(1位至6位
function isMobile(str)                  是否是手机号
function isPhone(str)                   是否是电话号码必须包含区号,可以含有分机号
function isQQ(str)                      是否合法的QQ号码          
function isIP(str)                      是否是合法的IP
function isDate(str)                     是否日期类型(例:2005-12-12)
function isIdCardNo(idNumber)           是否是合法的身份证号
**/ 
/**
 * 替换
 * @param {Object} str
 * @param {Object} oldStr
 * @param {Object} newStr
 * @return {TypeName} 
 */ 
function repalce(str, oldStr, newStr) { 
    var reg = eval_r("/" + oldStr + "/g"); 
    return str.replace(reg, newStr); 
} 
 
/**
 * 左边截取
 * @param {Object} str
 * @param {Object} n
 * @return {TypeName} 
 */ 
function left(str, n) { 
    if (str.length > 0) { 
        if (n > str.length) 
            n = str.length; 
        return str.substr(0, n); 
    } else { 
        return; 
    } 
} 
 
/**
 * 右边截取
 * @param {Object} str
 * @param {Object} n
 * @return {TypeName} 
 */ 
function right(str, n) { 
    if (str.length > 0) { 
        if (n >= str.length) 
            return str; 
        return str.substr(str.length - n, n); 
    } else { 
        return; 
    } 
} 
 
 
 
function strip(str) { 
    if (typeof str == 'string') 
        return str.replace(/^\s+/, '').replace(/(^\s*)|(\s*$)/g, ''); 
} 
 
function stripTags(str) { 
    if (typeof str == 'string') 
        return str.replace(/<\/?[^>]+>/gi, '').replace(/(^\s*)|(\s*$)/g, ''); 
} 
/**
 * 判断某个字符的长度在s和l之间
 * @param {Object} str
 * @param {Object} s
 * @param {Object} l
 * @return {TypeName} 
 */ 
function isLen(str, s, l) { 
    str = Trim(str) 
    if (str.length > s && str.length < l) { 
        return true; 
    } else { 
        return false; 
    } 
} 
 
/**
 * 是否为数字
 * @param {Object} str
 * @return {TypeName} 
 */ 
function isNumber(str){ 
    if (/^\d+$/.test(str)){ 
        return true; 
    }else{ 
        return false; 
    } 
} 
 
 
 
function isLetters(str){ 
    if (/^[A-Za-z0-9]+$/.test(str)){ 
        return true; 
    }else{ 
        return false; 
    } 
} 
 
function isLetter(str){ 
    if (/^[A-Za-z]+$/.test(str)){ 
        return true; 
    }else{ 
        return false; 
    } 
} 
 
function isUpper(str){ 
    if (/^[A-Z]+$/.test(str)){ 
        return true; 
    }else{ 
        return false; 
    } 
} 
 
function isLower(str){ 
    if (/^[a-z]+$/.test(str)){ 
        return true; 
    }else{ 
        return false; 
    } 
} 
 
 
/**
*根据对象的id得到对象
*id:对象的id
*/ 
function obj(id) 
{ 
    return document.getElementById(id); 
} 
 
/**
*根据对象的id得到对象的值
*id:对象的id
*/ 
function val(id) 
{ 
    var obj = document.getElementById(id); 
    if(obj !== null) 
    { 
        return obj.value; 
    } 
    return null; 
} 
 
/**
*去掉字符串的前后空格
*str:将要除去空格的字符串
*/ 
function trim(str) 
{ 
    return str.replace(/(^\s*)|(\s*$)/g, ''); 
} 
 
/**
*去掉字符串前的空格
*str:将要除去空格的字符串
*/ 
function ltrim(str) 
{ 
    return str.replace(/^\s*/g,''); 
} 
 
/**
*去掉字符串后的空格
*str:将要除去空格的字符串
*/ 
function rtrim(str) 
{ 
    return str.replace(/\s*$/,''); 
} 
 
/**
*字符串是否有值
*str:要检测的字符串
*/ 
function isEmpty(str) 
{ 
    if(str != null && str.length > 0) 
    { 
        return true; 
    } 
    return false; 
} 
 
/**
*比较两个字符串是否相等
*str1:要比较的字符串1
*str2:要比较的字符串2
*/ 
function equals(str1, str2) 
{ 
    if(str1 == str2) 
    { 
        return true; 
    } 
    return false; 
} 
 
/**
*忽略大小写比较两个字符串是否相等
*str1:要比较的字符串1
*str2:要比较的字符串2
*/ 
function equalsIgnoreCase(str1, str2) 
{ 
    if(str1.toUpperCase() == str2.toUpperCase()) 
    { 
        return true; 
    } 
    return false; 
} 
 
/**
*是否是中文
*str:要检测的字符串
*/ 
function isChinese(str) 
{ 
   var str = str.replace(/(^\s*)|(\s*$)/g,''); 
   if (!(/^[\u4E00-\uFA29]*$/.test(str) 
           && (!/^[\uE7C7-\uE7F3]*$/.test(str)))) 
   { 
      return false; 
   } 
   return true; 
} 
 
/**
*是否是Email
*str:要检测的字符串
*/ 
function isEmail(str) 
{ 
    if(/^[\w-]+(\.[\w-]+)*@[\w-]+(\.[\w-]+)+$/.test(str)) 
    { 
        return true 
    } 
    return false; 
} 
 
/**
*是否是图片格式文件
*str:要测试的文件名
*/ 
function isImg(str) 
{ 
    var objReg = new RegExp("[.]+(jpg|jpeg|swf|gif){1}quot;, "gi"); 
    if(objReg.test(str)) 
    { 
        return true; 
    } 
    return false; 
} 
 
/**
*是否是一个整数
*str:要检测的字符串
*/ 
function isInteger(str) 
{ 
    if(/^-?\d+$/.test(str)) 
    { 
        return true; 
    } 
    return false; 
} 
 
/**
*是否是一个浮点数
*str:要检测的字符串
*/ 
function isFloat(str) 
{ 
    if(/^(-?\d+)(\.\d+)?$/.test(str)) 
    { 
        return true; 
    } 
    return false; 
} 
 
/**
*是否是邮编
*str:要检测的字符串
*/ 
function isPost(str) 
{ 
    if(/^\d{1,6}$/.test(str)) 
    { 
        return true; 
    } 
    return false; 
} 
 
/**
*是否是手机号码
*str:要检测的字符串
*/ 
function isMobile(str) 
{ 
    if(/^1[35]\d{9}/.test(str)) 
      { 
          return true; 
      } 
    return false; 
} 
 
/**
*是否是电话号码
*str:要检测的字符串
*电话号码必须有区号,可以有分机号
*/ 
function isPhone(str) 
{ 
    if(/^(0[1-9]\d{1,2}-)\d{7,8}(-\d{1,8})?/.test(str)) 
    { 
        return true; 
    } 
    return false; 
} 
 
/**
*是否是合法的QQ号码
*str:要检测的字符串
*/ 
function isQQ(str){ 
    if(/^\d{5,9}$/.test(str)) 
    { 
        return true; 
    } 
    return false; 
} 
 
/**
*是否是合法的IP
*str:要检测的字符串
*/ 
function isIP(str){ 
    var reg = /^(25[0-5]|2[0-4][0-9]|[0-1]{1}[0-9]{2}|[1-9]{1}[0-9]{1}|[1-9])\.(25[0-5]|2[0-4][0-9]|[0-1]{1}[0-9]{2}|[1-9]{1}[0-9]{1}|[1-9]|0)\.(25[0-5]|2[0-4][0-9]|[0-1]{1}[0-9]{2}|[1-9]{1}[0-9]{1}|[1-9]|0)\.(25[0-5]|2[0-4][0-9]|[0-1]{1}[0-9]{2}|[1-9]{1}[0-9]{1}|[0-9])$/; 
    if(reg.test(str)) 
    { 
        return true; 
    } 
    return false; 
} 
 
/**
*是否是一合法日期
*str:要检测的字符串
*/ 
function isDate(str) 
{ 
    var reg = /^((((1[6-9]|[2-9]\d)\d{2})-(0?[13578]|1[02])-(0?[1-9]|[12]\d|3[01]))|(((1[6-9]|[2-9]\d)\d{2})-(0?[13456789]|1[012])-(0?[1-9]|[12]\d|30))|(((1[6-9]|[2-9]\d)\d{2})-0?2-(0?[1-9]|1\d|2[0-8]))|(((1[6-9]|[2-9]\d)(0[48]|[2468][048]|[13579][26])|((16|[2468][048]|[3579][26])00))-0?2-29-))$/; 
    if(reg.test(str)) 
    { 
        return true; 
    } 
    return false;    
} 

现在已经你已经学习了 JavaScript，接下来该学习什么呢？

下一步应该学习 HTML DOM 和 DHTML。

jQuery

jQuery 是一个 JavaScript 库。

jQuery 极大地简化了 JavaScript 编程。

jQuery 很容易学习。

jQuery Mobile

jQuery Mobile 是一个为触控优化的框架，用于创建移动 web 应用程序。

jQuery 适用于所有流行的智能手机和平板电脑。

jQuery Mobile 构建于 jQuery 库之上，这使其更易学习，如果您通晓 jQuery 的话。

它使用 HTML5、CSS3、JavaScript 和 AJAX 通过尽可能少的代码来完成对页面的布局。

HTML DOM

HTML DOM 定义了访问和操作 HTML 文档的标准方法。

HTML DOM 独立于平台和语言，可被任何编程语言使用，比如 Java、JavaScript 和 VBscript。

AJAX

AJAX = 异步 JavaScript 和 XML。

AJAX 不是一种新的编程语言，而是一种使用现有标准的新方法。

通过与服务器进行数据交换，AJAX 可以在不重新加载整个网页的情况下，对网页的某部分进行更新。

有很多使用 AJAX 的应用程序案例：新浪微博、Google 地图、开心网等等。

JSON

JSON：JavaScript 对象表示法（JavaScript Object Notation）。

JSON 是存储和交换文本信息的语法。类似 XML。

JSON 比 XML 更小、更快，更易解析。