JS-JavaScript学习笔记（一）

javaScript





1.文档的输出：document.write() 可输出字符，表达式，html标签。函数





2.不论什么类型和字符串相加，都会被转换成字符串类型。

比如：var i=5; var j="5"; var k=i+j; 结果：k=55





3.运算符优先级（由高到低）

算术操作符->比較操作符->逻辑操作符->"="赋值操作符 ，假设同级的运算按从左到右次序进行，多层括号由里向外





4.事件：

onclick鼠标点击,

onmouseover鼠标经过,

onmouseout鼠标离开,

onfocus获得焦点,

onblur失去焦点,

onselect选中,

onchange文本框发生改变,

onload载入,

onunload卸载

5.内置对象





Date日期对象。

get/setTime();时间

get/setDate();日期

getDay();星期

String字符串对象，

charAt(index);获得指定位置的字符;

indexOf(substring,startPos);返回指定字符串首次出现的位置;

split(separator,limit);字符串切割成字符数组

substring(startPos,endPos);提取字符串中介于两个下标间的字符串

subsrt(startPos,length);提取字符串中从startPos位置開始指定数目的字符串





Math对象。

ceil(x);向上取整

floor(x);向下取整

round(x);四舍五入

random();随机数





Array数组对象，

concat(array1.....arrayN);数组连接

join(分隔符);指定分隔符连接数组元素

reverse();颠倒数组元素顺序

slice(start,end);从已有数组中返回指定元素

sort(方法函数);使数组按一定顺序排序

样例：

<script type="text/javascript">

 function sortNum(a,b) {

 return a - b;

//升序。如降序，把“a - b”该成“b - a”

}

var myarr = new Array("80","16","50","6","100","1");

 document.write(myarr + "<br>");

 document.write(myarr.sort(sortNum));

</script>

6.浏览器对象

**BOM浏览器对象模型(Browser Object Model)

watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQv/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center" alt="">

（1）.window对象

watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQv/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center" alt="">

（2）.javascript计时器

a.计时器var i=setInterval(代码。交互时间);在运行时,从加载页面后每隔指定的时间运行代码。

b.取消计时clearIntercal(i);

c.计时器setTimeout(代码。延迟时间)，在加载后延迟指定时间后,去运行一次表达式,仅运行一次。

d.取消计时器clearTimeout(由 setTimeout() 返回的 ID 值)

（3）.History对象 --history对象记录了用户以前浏览过的页面(URL)。并能够实现浏览器前进与后退相似导航的功能。

a.window.history.[属性|方法]

b. 属性length 。返回浏览器历史列表中URL的数量

c. 方法：back() ，载入History列表中的前一个URL ,相当于go(-1) ; forward() 载入History列表中下一个URL ,相当于go(1) ; go(number-要訪问的URL在列表中的相对位置) 载入History列表中指定的页面

（4）.Location对象  --location用于获取或设置窗口的URL，而且能够用于解析URL。

watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQv/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center" alt="">

（5）.Navigator对象 --Navigator 对象包括有关浏览器的信息。通经常使用于检測浏览器与操作系统的版本号。

（6）.screen对象 --screen对象用于获取用户的屏幕信息。

watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQv/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center" alt="">

7.DOM （Document Object Model）文档对象模型  --定义訪问和处理HTML文档的标准方法。DOM 将HTML文档呈现为带有元素、属性和文本的树结构（节点树）。

watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQv/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center" alt="">

(1).getAttribute(name)方法   -通过元素节点的属性名称获取属性的值。

语法：

elementNode.getAttribute(name)

说明:

1. elementNode：使用getElementById()、getElementsByTagName()等方法，获取到的元素节点。

2. name：要想查询的元素节点的属性名字

(2).setAttribute()方法  -添加一个指定名称和值的新属性，或者把一个现有的属性设定为指定的值。

语法：

elementNode.setAttribute(name,value)

说明：

1.name: 要设置的属性名。

2.value: 要设置的属性值。

注意：

1.把指定的属性设置为指定的值。假设不存在具有指定名称的属性，该方法将创建一个新属性。

2.类似于getAttribute()方法。setAttribute()方法仅仅能通过元素节点对象调用的函数。

(3)浏览器窗体可视区域大小

在不同浏览器都有用的 JavaScript 方案：

var w= document.documentElement.clientWidth

     || document.body.clientWidth;

var h= document.documentElement.clientHeight

     || document.body.clientHeight;

(4)网页尺寸scrollHeight

浏览器兼容性

var w=document.documentElement.scrollWidth

  || document.body.scrollWidth;

var h=document.documentElement.scrollHeight

  || document.body.scrollHeight;

注意:区分大写和小写

scrollHeight和scrollWidth还可获取Dom元素中内容实际占用的高度和宽度。





(5)网页尺寸offsetHeight

offsetHeight = clientHeight + 滚动栏 + 边框。

浏览器兼容性

var w= document.documentElement.offsetWidth

   || document.body.offsetWidth;

var h= document.documentElement.offsetHeight

|| document.body.offsetHeight;

參考站点：http://www.imooc.com/learn/10

学习站点：http://www.dreamdu.com/javascript/core/