《征服AjaxWeb2.0开发技术详解》读书笔记2

KeyWord：Ajax,征服Ajax,征服AjaxWeb2.0开发技术详解,Ajax教程,Ajax图书,Ajax学习,学习Ajax

 

前几天也一直在看，不是我的书（书非借不能读也？？？），所以看得不是特别仔细，明天别人要拿走，所以，记下一些比较生疏的名词，详细的资料自己去查、去看好了。

 

1. 对象的高级应用

   获得浏览器的信息：	navigator对象
   处理地址栏信息：	location对象
   控制前进和后退：	history对象
   文档操作：	document对象

    

2. 使用with（）语句简化对象访问。这个虽然早早的就知道了，但是一直想不去来去用。

   with(document){

   write("1");

   write("2");

   write("3");

   write("4");

   }

    

3. 使用对象的事件属性创建事件处理程序

   object.onEventName=eventHandlr;

   来个例子：

   <script language="JavaScript" type="text/javascript">

   <!--

   function sayHello(){

   alert("hello!");

   }

    

   document.onclick=sayHello;

   //-->

   </script>

   注意：一个函数其实也是一个对象，所以document.onclick等于的是一个对象，所以syaHello后面没有括号。

    

4. 使用attachEvent和addEventListener方法绑定事件处理程序

   语法如下：

   element.attachEvent(eventName,eventHandler,useCapture);

   element.addEventListener(enentName,eventHandler,useCapture);

   这两个方法在形式上是相同的，只是两者对事件名称参数eventName的形式有所不同。eventHandler是事件处理程序的入口，一般是一个函数名；useCapture表示事件处理模式是否使用捕获模式，即从外向内的模式。

   来个例子：

   function func(){

   //dosomething.

   }

   if(element.addEventListener){

   element.addEventListener("onclick",func,false);

   }else{

   element.attachEvent("click",func,false);

   }

   其实上面的代码就是给对象element加上单机事件。只是为了考虑到浏览器的兼容性，所以判断了一下。

    

5. 使用event对象捕获事件信息。

   先来段理论性强点的话。在事件发生时，会产生一个临时对象event，这个对象存储着事件行为的相关信息。如果没有此事件的处理函数，则event对象立即消失；否则在事件处理程序完成以后event对象才消失。产生event对象是一个线形的过程，即当连续或者同时有多个事件发生是，只会产生一个event对象，它和当前时间相关联，而不会对应多个事件产生多个event对象。因此event对象是一个全局的概念。

   在Ie和Mozzilla浏览器中使用event对象是不同的，在此仅说明IE情况。

   在IE浏览器中，event对象作为window对象的属性提供，引用方式如下：window.event。window部分可以省略，所以也可以直接使用“event”来饮用对象。在IE中event对象是一个全局的概念，可以在事件处理程序员的任何地方使用。来看个例子。

   <script language="JavaScript" type="text/javascript">

   <!--

   function imgClick(){

   alert(event.srcElement.src);  //srcElement属性表示产生事件的元素。

   }

   //-->

   </script>

   <img src="1.jpg" onclick="imgClcik()"/>

6. 使用event对象的属性

    

   属性	描述
   Abstract	使用 event 对象获取高级流重定向器(ASX)文件中项目横幅的 Abstract 内容。
   altKey	设置或获取 Alt 键的状态。
   altLeft	设置或获取左 Alt 键的状态。
   Banner	使用 event 对象获取高级流重定向器(ASX)文件中项目的 Banner 内容。
   button	设置或获取用户所按的鼠标按钮。
   cancelBubble	设置或获取当前事件是否要在事件句柄中向上冒泡。
   clientX	设置或获取鼠标指针位置相对于窗口客户区域的 x 坐标，其中客户区域不包括窗口自身的控件和滚动条。
   clientY	设置或获取鼠标指针位置相对于窗口客户区域的 y 坐标，其中客户区域不包括窗口自身的控件和滚动条。
   contentOverflow	获取表明文档处理当前 LayoutRect 对象后是否包含附加的内容。
   ctrlKey	设置或获取 Ctrl 键的状态。
   ctrlLeft	设置或获取左 Ctrl 键的状态。
   dataFld	设置或获取 oncellchange 事件影响的数据列。
   fromElement	设置或获取事件发生时激活或鼠标将要离开的对象。
   keyCode	设置或获取与导致事件的按键关联的 Unicode 按键代码。
   MoreInfo	通过 event 对象获取高级流重定向器(ASX)文件中项目横幅的 MoreInfo 内容。
   nextPage	获取打印模板中下页的位置。
   offsetX	设置或获取鼠标指针位置相对于触发事件的对象的 x 坐标。
   offsetY	设置或获取鼠标指针位置相对于触发事件的对象的 y 坐标。
   propertyName	设置或获取对象上发生更改的属性名称。
   qualifier	设置或获取由数据源对象提供的数据成员的名称。
   reason	设置或获取数据源对象的数据传输结果。
   recordset	从数据源对象设置或获取对默认数据集的引用。
   repeat	获取 onkeydown 事件是否正在重复。
   returnValue	设置或获取事件的返回值。
   saveType	当 oncontentsave 触发时获取剪贴板类型。
   screenX	设置或获取获取鼠标指针位置相对于用户屏幕的 x 坐标。
   screenY	设置或获取鼠标指针位置相对于用户屏幕的 y 坐标。
   shiftKey	设置或获取 Shift 键的状态。
   shiftLeft	设置或获取左 Shift 键的状态。
   srcElement	设置或获取触发事件的对象。
   srcFilter	设置或获取触发 onfilterchange 事件的滤镜对象。
   srcUrn	获取触发事件的行为的统一资源名称(URN)。
   toElement	设置或获取用户要将鼠标指针移动指向的对象的引用。
   type	从 event 对象中获取事件名称。
   wheelDelta	设置或获取滚轮按钮滚动的距离和方向。
   x	设置或获取鼠标指针位置相对于父文档的 x 像素坐标。
   y	设置或获取鼠标指针位置相对于父文档的 y 像素坐标。

    

   看一段很常用的代码，是一段按Ctrl+回车可以提交表单的例子。

   <script language="JavaScript" type="text/javascript">

   <!--

   var txtContent=document.getElementById("txtContent");

   txtContent.onkeydown=function(evt){

   evt=evt?evt:window.event;

   if(evt.ctrlKey && 13==evt.keyCode) this.form.submit();//通过form属性，获得元素所在表单

   }

   }

   //-->

   </script>

   这个函数接受一个参数evt，在非Ie中的浏览器中，会自动将event对象作为参数传进来，而在iE中，event对象是一个全局的对象，在任何对方均可使用，并不会作为函数的参数，因此需要使用如下语句来实现浏览器的兼容性：

   evt=evt?evt:window.event;

    

7. 引用表单域

   表单域是指用于接受用户输入或者操作的一些页面元素。在javascrit中引用一个表单元素，可以采用两种方法：

   var element=theForm.elements[index];  //根据索引来取

   var element=theForm.elements["elementName"];//根据name来取。

    

   还有一个常用的，遍历表单中某种类型所有的表单域，对其进行统一处理。

   for(var i=0;i<theForm.elements.length;i++){

   if("checkbox"==theForm.elements[i].type){

   //dosomething;

   }

   }

    

    

8. 使用defaultValue获得HTML标记中的value值

   文本与对象通常是在html标记中定义的，如果在标记中制定了value属性，则在脚本中可以使用defaultValue来获得这个值。在调用表单的reset方法时，实际上就是用这个值来重新填充文本域的。这个是直读属性，不能通过脚本来修改。

    

9. 使用onselect事件处理用户的选中操作。

   记得新浪还是哪个网站就是利用这个事件来防止用户拷贝的。一有选中就将剪贴板中的东西清空。不过据说IE7已经不允许js脚本操作本地剪贴板了。

    

10. 使用列表框

    列表框是项目中经常使用的，也是操作起来变化性比较多的。这里重点列出来几点。

1. 使用selectedIndex属性获得当前选项的索引。

   注意：selectedIndex只是一个只读属性，想要通过索引指定的下列列表框的项设置为选中状态，可以设置option对象的selected=true来实现。

    

2. 使用options属性获得选项的集合。

   options是数组的形式。通过遍历可以批处理所有的option对象。

    

3. 为select对象添加一个选项。

   思路如下：先创建一个option对象，并将其添加到下拉列表框的末尾。代码实现如下：

   someSelect.options[slt.length]=new Option(value,text);

   slt.length指定了新添加选项的为止。
    

4. 从select对象中删除一个选项

   someSelect.options[n]=null;

    

5. 清空一个select对象。

   方法一：

   var length=someSelect.length;

   for(var i=0;i<length;i++){

   someSelect.options[0]=null;

   }

   方法二：

   someSelect.length=0;

   或者

   someSelect.options.length=0;

6. 替换一个选项

   someSelect.options[1]=new Option("value","Text");