1.2
富而不娇 , 穷则自立 -

 

 

一、查找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对象

三、事件的捕捉与冒泡模型

在w3c的模型中,

addEventListener 支持 第3个参数来声明事件的模型为冒泡还是捕捉.

如果声明为 true,则为捕捉方式

如果声明为false, 或者不声明, 则为冒泡方式

注意: IE的attchEvent 没有第3个参数,不支持捕捉模型

事件对象的概念:

当事件对应的函数被触发时, 函数会接收到一个事件参数, // w3c标准

例 xx.onclick = function (ev) {alert(ev)}

点击后,ev 参数就代表单击那一瞬间的"各个参数",以一个对象的方式传过去.

对于IE, 当事件发生的瞬间,事件对象赋值给window.event属性

 四、事件的中断

如何中断事件的传播???????

在w3c:  事件.stopPropagation();

在IE中,  事件对象.cancelBubble = true;

cancelBubble = true //IE取消冒泡

stopPropagation(); // w3c取消冒泡

 returnValue = false; // IE取消事件效果

preventDefautl() ;// w3c取消事件效果

取消事件的默认效果

事件对象.preventDefault();  // 阻止事件的默认效果, w3c方法

事件对象.returnValue = false; // 设置returnValue 的属性值为false;

五、Js 作用域链(是指AO链)

1:参数

2:局部变量声明

3:函数声明

* 函数声明与函数表达式的区别

表达式必有返回值,把返回值(即匿名函数)赋给了一个变量.

此时 就是普通的赋值过程.

①、js并不是一句一句顺序执行的,先进行词法分析

This, 与 arguments

当一个函数运行的时候,函数内部能引用的变量有这么几种

AO、arguments、this

对于 arguments和this, 每个函数都有自己独有的arguments和this, 且不进行链式查找

arguments是什么?

答:1:arguments是收到的实参副本

2:收到实参收集起来,放到一个arguments对象里

在词法分析中, 首先按形参形成AO的属性,值为undefined

当实参传来时, 再修改AO的相应属性.

t(a,b,c){}, 

调用时: t(1,2,3,4,5) 个参数

此时 , AO属性只有a,bc,3个属性, arguments里有1,3,3,4,5, 所有的值

对于超出形参个数之外的实参, 可以通过arguments来获得

3:arguments 的索引 从 0, 1,2,....递增,与实参逐个对应

4:arguments.length 属性代表实参的个数

5:Arguments一定不是数组, 是长的比较像数组的一个对象,虽然也有length属性

6:Arguments每个函数都会有,因此,arguemnts只会在内部找自身的arguments,

无法引用到外层的arguments

This是谁

This是指调用上下文

针对函数的应用场景来讨论

函数的4种调用方式

1:函数方式

直接调用函数名,或函数表达式的返回值,

This指代全局对象,window

2:属性方式(对象方法方式)

This指代该对象(方法的属主)

3:构造器方式

通过 new 函数     名() , 来创建对象

在js里, 构造函数与对象的关系比较松散,

对象就是"属性->值"的集合

构造器的作用,是制造一个对象,把this指向该对象,

4:call,apply方式

函数本身即是对象,对象就有方法

函数名.call(对象,参数1,参数2,参数3);

以fn.call(obj,'a','b');

实际效果相当于

1:fn内部的this指向了obj

2:fn('a','b');

Apply的效果与call一样, 只不过传参时,把所有参数包装在数组里,传过去.

例 fn.call(obj,'a',' b')  ===> fn.apply(obj,['a','b']);

还有一种改变this的方法

With 语句

With(对象) {

语句1

语句2

.....

}

在with内部的语句,就把参数中的对象当成的上下文环境.

六、词法分析

js执行顺序
1:词法分析阶段
先把接收到的参数放到激活对象上
 
再对函数体中代码作分析
a: var xx = yy;
做法:声明一个xx属性在激活对象上,
但不赋值,如果已经有xx,则不无动作.
b:function ttt() {
}
做法:直接声明ttt属性,
且内容是函数体
 
2:执行语句阶段
 

六、Js面向对象

 属性,方法-->对象

"类"能做到封装,继承,多态,

"类"的静态方法

1: js中的对象是什么?

答:js的对象就是键值对的无序集合

2:种创建对象的方法

①、通过字面量来创建对象

例:{age:22,hei:180}

{}->空对象,没有属性

②、通过 new Object([value]);

通过构造函数来创建对象(和第2种没区别,因为Object就是系统内建的构造函数)

七、Js面向对象中的封装

javascript语言中,没有现成的私有属性/方法机制,
但可以通过作用域来模拟私有属性,私有方法
 

对象的属性外界是可读可写的, 如何来达到封装的目的?

答:通过闭包+局部变量来完成

在构造函数内部声明局部变量, 和普通方法,

因为作用域的关系,只有构造函数内的方法,才能访问到局部变量.

而方法对于外界是开放的,因此可以通过方法来访问局部变量.

 

下面参考的是前端小个的博客js总结

 

事件触发总结:

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 ||
使用一个东西的时候,不去管内部是
怎么做的,只用好它的功能

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

 

[javascript] view plaincopy
 
  1. /** 
  2. function obj$(id)                       根据id得到对象 
  3. function val$(id)                       根据id得到对象的值 
  4. function trim(str)                      删除左边和右边空格 
  5. function ltrim(str)                     删除左边空格 
  6. function rtrim (str)                    删除右边空格 
  7. function isEmpty(str)                   字串是否有值 
  8. function equals(str1, str2)             比较两字符串是否相等 
  9. function equalsIgnoreCase(str1, str2)   忽略大小写比较两个字符串是否相等 
  10. function isChinese(str)                 判断是否中文 
  11. function isEmail(strEmail)              是否电子邮件 
  12. function isImg(str)                     是否是一个图片格式的文件jpg|jpeg|swf|gif 
  13. function isInteger(str)                 是否是一个整数 
  14. function isFloat                        是否是一个浮点数 
  15. function isPost(str)                     是否邮编(1位至6位 
  16. function isMobile(str)                  是否是手机号 
  17. function isPhone(str)                   是否是电话号码必须包含区号,可以含有分机号 
  18. function isQQ(str)                      是否合法的QQ号码           
  19. function isIP(str)                      是否是合法的IP 
  20. function isDate(str)                     是否日期类型(例:2005-12-12) 
  21. function isIdCardNo(idNumber)           是否是合法的身份证号 
  22. **/   
  23. /** 
  24.  * 替换 
  25.  * @param {Object} str 
  26.  * @param {Object} oldStr 
  27.  * @param {Object} newStr 
  28.  * @return {TypeName}  
  29.  */   
  30. function repalce(str, oldStr, newStr) {   
  31.     var reg = eval_r("/" + oldStr + "/g");   
  32.     return str.replace(reg, newStr);   
  33. }   
  34.    
  35. /** 
  36.  * 左边截取 
  37.  * @param {Object} str 
  38.  * @param {Object} n 
  39.  * @return {TypeName}  
  40.  */   
  41. function left(str, n) {   
  42.     if (str.length > 0) {   
  43.         if (n > str.length)   
  44.             n = str.length;   
  45.         return str.substr(0, n);   
  46.     } else {   
  47.         return;   
  48.     }   
  49. }   
  50.    
  51. /** 
  52.  * 右边截取 
  53.  * @param {Object} str 
  54.  * @param {Object} n 
  55.  * @return {TypeName}  
  56.  */   
  57. function right(str, n) {   
  58.     if (str.length > 0) {   
  59.         if (n >= str.length)   
  60.             return str;   
  61.         return str.substr(str.length - n, n);   
  62.     } else {   
  63.         return;   
  64.     }   
  65. }   
  66.    
  67.    
  68.    
  69. function strip(str) {   
  70.     if (typeof str == 'string')   
  71.         return str.replace(/^\s+/, '').replace(/(^\s*)|(\s*$)/g, '');   
  72. }   
  73.    
  74. function stripTags(str) {   
  75.     if (typeof str == 'string')   
  76.         return str.replace(/<\/?[^>]+>/gi, '').replace(/(^\s*)|(\s*$)/g, '');   
  77. }   
  78. /** 
  79.  * 判断某个字符的长度在s和l之间 
  80.  * @param {Object} str 
  81.  * @param {Object} s 
  82.  * @param {Object} l 
  83.  * @return {TypeName}  
  84.  */   
  85. function isLen(str, s, l) {   
  86.     str = Trim(str)   
  87.     if (str.length > s && str.length < l) {   
  88.         return true;   
  89.     } else {   
  90.         return false;   
  91.     }   
  92. }   
  93.    
  94. /** 
  95.  * 是否为数字 
  96.  * @param {Object} str 
  97.  * @return {TypeName}  
  98.  */   
  99. function isNumber(str){   
  100.     if (/^\d+$/.test(str)){   
  101.         return true;   
  102.     }else{   
  103.         return false;   
  104.     }   
  105. }   
  106.    
  107.    
  108.    
  109. function isLetters(str){   
  110.     if (/^[A-Za-z0-9]+$/.test(str)){   
  111.         return true;   
  112.     }else{   
  113.         return false;   
  114.     }   
  115. }   
  116.    
  117. function isLetter(str){   
  118.     if (/^[A-Za-z]+$/.test(str)){   
  119.         return true;   
  120.     }else{   
  121.         return false;   
  122.     }   
  123. }   
  124.    
  125. function isUpper(str){   
  126.     if (/^[A-Z]+$/.test(str)){   
  127.         return true;   
  128.     }else{   
  129.         return false;   
  130.     }   
  131. }   
  132.    
  133. function isLower(str){   
  134.     if (/^[a-z]+$/.test(str)){   
  135.         return true;   
  136.     }else{   
  137.         return false;   
  138.     }   
  139. }   
  140.    
  141.    
  142. /** 
  143. *根据对象的id得到对象 
  144. *id:对象的id 
  145. */   
  146. function obj(id)   
  147. {   
  148.     return document.getElementById(id);   
  149. }   
  150.    
  151. /** 
  152. *根据对象的id得到对象的值 
  153. *id:对象的id 
  154. */   
  155. function val(id)   
  156. {   
  157.     var obj = document.getElementById(id);   
  158.     if(obj !== null)   
  159.     {   
  160.         return obj.value;   
  161.     }   
  162.     return null;   
  163. }   
  164.    
  165. /** 
  166. *去掉字符串的前后空格 
  167. *str:将要除去空格的字符串 
  168. */   
  169. function trim(str)   
  170. {   
  171.     return str.replace(/(^\s*)|(\s*$)/g, '');   
  172. }   
  173.    
  174. /** 
  175. *去掉字符串前的空格 
  176. *str:将要除去空格的字符串 
  177. */   
  178. function ltrim(str)   
  179. {   
  180.     return str.replace(/^\s*/g,'');   
  181. }   
  182.    
  183. /** 
  184. *去掉字符串后的空格 
  185. *str:将要除去空格的字符串 
  186. */   
  187. function rtrim(str)   
  188. {   
  189.     return str.replace(/\s*$/,'');   
  190. }   
  191.    
  192. /** 
  193. *字符串是否有值 
  194. *str:要检测的字符串 
  195. */   
  196. function isEmpty(str)   
  197. {   
  198.     if(str != null && str.length > 0)   
  199.     {   
  200.         return true;   
  201.     }   
  202.     return false;   
  203. }   
  204.    
  205. /** 
  206. *比较两个字符串是否相等 
  207. *str1:要比较的字符串1 
  208. *str2:要比较的字符串2 
  209. */   
  210. function equals(str1, str2)   
  211. {   
  212.     if(str1 == str2)   
  213.     {   
  214.         return true;   
  215.     }   
  216.     return false;   
  217. }   
  218.    
  219. /** 
  220. *忽略大小写比较两个字符串是否相等 
  221. *str1:要比较的字符串1 
  222. *str2:要比较的字符串2 
  223. */   
  224. function equalsIgnoreCase(str1, str2)   
  225. {   
  226.     if(str1.toUpperCase() == str2.toUpperCase())   
  227.     {   
  228.         return true;   
  229.     }   
  230.     return false;   
  231. }   
  232.    
  233. /** 
  234. *是否是中文 
  235. *str:要检测的字符串 
  236. */   
  237. function isChinese(str)   
  238. {   
  239.    var str = str.replace(/(^\s*)|(\s*$)/g,'');   
  240.    if (!(/^[\u4E00-\uFA29]*$/.test(str)   
  241.            && (!/^[\uE7C7-\uE7F3]*$/.test(str))))   
  242.    {   
  243.       return false;   
  244.    }   
  245.    return true;   
  246. }   
  247.    
  248. /** 
  249. *是否是Email 
  250. *str:要检测的字符串 
  251. */   
  252. function isEmail(str)   
  253. {   
  254.     if(/^[\w-]+(\.[\w-]+)*@[\w-]+(\.[\w-]+)+$/.test(str))   
  255.     {   
  256.         return true   
  257.     }   
  258.     return false;   
  259. }   
  260.    
  261. /** 
  262. *是否是图片格式文件 
  263. *str:要测试的文件名 
  264. */   
  265. function isImg(str)   
  266. {   
  267.     var objReg = new RegExp("[.]+(jpg|jpeg|swf|gif){1}quot;, "gi");   
  268.     if(objReg.test(str))   
  269.     {   
  270.         return true;   
  271.     }   
  272.     return false;   
  273. }   
  274.    
  275. /** 
  276. *是否是一个整数 
  277. *str:要检测的字符串 
  278. */   
  279. function isInteger(str)   
  280. {   
  281.     if(/^-?\d+$/.test(str))   
  282.     {   
  283.         return true;   
  284.     }   
  285.     return false;   
  286. }   
  287.    
  288. /** 
  289. *是否是一个浮点数 
  290. *str:要检测的字符串 
  291. */   
  292. function isFloat(str)   
  293. {   
  294.     if(/^(-?\d+)(\.\d+)?$/.test(str))   
  295.     {   
  296.         return true;   
  297.     }   
  298.     return false;   
  299. }   
  300.    
  301. /** 
  302. *是否是邮编 
  303. *str:要检测的字符串 
  304. */   
  305. function isPost(str)   
  306. {   
  307.     if(/^\d{1,6}$/.test(str))   
  308.     {   
  309.         return true;   
  310.     }   
  311.     return false;   
  312. }   
  313.    
  314. /** 
  315. *是否是手机号码 
  316. *str:要检测的字符串 
  317. */   
  318. function isMobile(str)   
  319. {   
  320.     if(/^1[35]\d{9}/.test(str))   
  321.       {   
  322.           return true;   
  323.       }   
  324.     return false;   
  325. }   
  326.    
  327. /** 
  328. *是否是电话号码 
  329. *str:要检测的字符串 
  330. *电话号码必须有区号,可以有分机号 
  331. */   
  332. function isPhone(str)   
  333. {   
  334.     if(/^(0[1-9]\d{1,2}-)\d{7,8}(-\d{1,8})?/.test(str))   
  335.     {   
  336.         return true;   
  337.     }   
  338.     return false;   
  339. }   
  340.    
  341. /** 
  342. *是否是合法的QQ号码 
  343. *str:要检测的字符串 
  344. */   
  345. function isQQ(str){   
  346.     if(/^\d{5,9}$/.test(str))   
  347.     {   
  348.         return true;   
  349.     }   
  350.     return false;   
  351. }   
  352.    
  353. /** 
  354. *是否是合法的IP 
  355. *str:要检测的字符串 
  356. */   
  357. function isIP(str){   
  358.     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])$/;   
  359.     if(reg.test(str))   
  360.     {   
  361.         return true;   
  362.     }   
  363.     return false;   
  364. }   
  365.    
  366. /** 
  367. *是否是一合法日期 
  368. *str:要检测的字符串 
  369. */   
  370. function isDate(str)   
  371. {   
  372.     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-))$/;   
  373.     if(reg.test(str))   
  374.     {   
  375.         return true;   
  376.     }   
  377.     return false;      
  378. }   

 

 

现在已经你已经学习了 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 更小、更快,更易解析。

posted on 2016-01-07 10:31  ke丶  阅读(400)  评论(0编辑  收藏  举报