亚洲精品国产专区91在线,亚洲精品乱码久久久久久,久久亚洲精品高潮综合色a片

Javascript学习指南�Q�第2版）�W�记(�? DOM、Ajax及其数据

Sun, 30 May 2010 03:17:00 GMT

1、DOM
2、节点属性和�Ҏ��
3、Ajax安全和工作区
4、Ajax数据�Q�XML�?JSON�Q�JavaScript对象�W�号�Q?/a>

1、DOM

     �?W3C关于 DOM的规范中�Q�将 document元素描述��Z��个节�?node)集合�Q�他们之间是以有层次的树形结构连接的。你不仅可以从树上读取节点，�q�可以删除或创徏新的节点�?br />
#document
html
head
    title
body
    h1
    div
      p
        #text
      p
        #text

2、节点属性和�Ҏ��

对于文档树上的每个节炚w��拥有 DOM(Core)�?Node对象中定义的基本属性和基本�Ҏ��集。Node对象的属性主要包括：

nodeName�Q�对象名�U�ͼ��?head元素的名�U�就�?HEAD�Q?br /> nodeValue�Q�如果不是一个元素，则返回对象��|��
nodeType�Q�用数字表示的节点类型；
parentNode�Q�当前节点的父节点；
childNodes�Q�由其子节点�l�成�?NodeList�Q�前提是存在子节点；
firstChild�Q�由子节点组成的 NodeList中的�W�一个节点；
lastChild�Q�由子节点组成的 NodeList中的最后一个节点；
previousSibling�Q�如果当前节�Ҏ��位于 NodeList中的子节点，那么它表�C�的��是该列表中的前一个节点；
nextSibling�Q�如果当前节�Ҏ��位于 NodeList中的子节点，那么它表�C�的��是该列表的下一个节点；
attributes�Q�一�?NamedNodeMap�Q�它是以�?值对形式表示的，是该元素的属性列表；
ownerDocument�Q�拥有的 document对象�Q�当你拥有多�?document对象时它比较有用�Q?br /> namespaceURI�Q�命名空间的 URI�Q�如果有的话�Q�他是针对节点的�Q?br /> Prefix�Q�命名空间的前缀�Q�如果有的话�Q�它是针对节点的�Q?br /> localName�Q�如果指定了 namespaceURI的话�Q�它表示的是节点的本地名�?

3、Ajax安全和工作区

�?Ajax遵��@ JavaScript中相同源、相同域的规则：�?Web��面中只能调用相同服务器�Q�相同域�Q�的 Web服务�Q�也��是��_��服务器端��面与服务器发送请求的��面处于相同的服务器、相同的域中�?br />
但是对于 Ajax�E�序而言�Q�向本地服务器端��h��一�?Web服务�Q�然后接收本地服务器的返回信息即可。它�q�不兛_��本地 Web服务实际上是否通过讉K��q�程 Web服务实现的�?

4、Ajax数据�Q�XML�?JSON�Q�JavaScript对象�W�号�Q?/strong>

XML格式�?Ajax应答

     好处是比��单的字符串或 HTML片段更多元。另外，你还可以向对�?Web��面元素那样�Q�直接通过 DOM�Ҏ��来操�?Ajax调用�q�回�?XML格式应答�?br />
     ��保在服务器端应用程序在�q�回数据时设�|�了正确的数�?MINE�c�d�� text/xml�Q�然后通过 XMLHttpRequest对象�?responseXML容器来获取应�{�信息�?br />

JSON

     JSON是一�U?#8220;轻量�U�的数据交换格式”。和一�l�由逗号分开的字�W�串�Q�以及处理复杂（成本高昂�Q�的 XML相比�Q�JSON是一�U�很�Ҏ��服务器端数据结构�{�?JavaScript对象的数据格式�?br />
     JSON实际上就是��?JavaScript语法定义的对象，一个对象的语法包括一对大括号以及其中的成员：
     object{ } or object { string : value ...}

     对于数组而言�Q�他是由一�l�元素加上一�Ҏ��括号�l�成的：
     array[] or array[ value, value, value, ..., value ]

注：�?JavaScript可以用单引号或双引号来引用字�W�串�Q��?JSON只支持双引号�?br />
�C�Z��Q�在 PHP脚本中��用简单的 JSON
$result = '[ { "value" : "stlou", "title" : "St. Louis" }, ' .
          ' { "value" : "kc" , "title" : "Kansas City" } ]';

JSON对象

     �?http://www.json.org/js.html上可以找��C��?JSON JavaScript�E�序库，它提供了一些基于该�E�序库的 JSON对象。包含了直接讉K�� JSON对象的静态方法：
JSON.parse�Q�基于指定的 JSON格式字符串创��Z��?JavaScript对象�Q?br /> JSON.stringify�Q�将一�?JavaScript对象序列化成一�?JSON格式的字�W�串�?br />

JSON �C�Z��1�Q?br />
//�?nbsp;JSON字符串进�?#8220;计算”
var response = JSON.parse(xmlHttpObj.responseText);

var citySelection = document.getElementById("citySelection");
var name = value = null;

//处理�?nbsp;JSON对象�q�回的数�?/span>
for (var i=0; i<response.length; i++) {
    name = response[i].title;
    value = response[i].value;
    citySelection.options[i] = new Option(name, value);
}

JSON�C�Z��2�Q?
//从服务器获得�?nbsp;JSON对象实例�Q?/span>
{ "title" : "Appletini",
  "ingredients" : [ { "ingredient" : "1 ounce vodka"},
                    { "ingredient" : "1/2 ounce Sour Apple Pucker or apple schnapps "} ],
  "instruction" : "Mix vodka and schnapps in a glass filled with ice." }

//============================================================
//处理 JSON数据

//创徏对象
var recipeObj = JSON.parse(xmlhttp.responseText);

var recipe = document.createElement('div');
recipe.id = 'recipe';
recipe.className = 'recipe';

//��d��标题
var title = recipeObj['title'];
var titleNode = document.creteElement('h3');
titleNode.appendChild(document.createTextNode(title));
recipe.appendChild(titleNode);

//��d��配方成分
var ingredients = recipeObj.ingredients;
for (var i=0; i<ingredients.length; i++){
    var item = ingredients[i].ingredient;

}

.
body[0].appendChild(recipe);

黄小�?/a> 2010-05-30 11:17 发表评论

Javascript学习指南�Q�第2版）�W�记(�? ��览器对象、cookie

Sat, 29 May 2010 13:46:00 GMT

1、window对象
 2、同源安全策�?/a>
3、cookie

     ��览器对象模型（BOM�Q�是一�l�从��览器上下文�l�承而来的对象，�q�也是绝大多�?JavaScript应用�E�序中函数运行的上下文。有时它也被�U�C��?DOM Level 0�Q�或者就�?DOM�?br />
     BOM是一�l�有限的公共 Web对象�Q�也是一个层�ơ化的对象集�Q�每个层�ơ上的对象都可以通过它们的父对象来访问，比如 window[navigator, location, frames, screen, history, document[forms, cookie, link/anchors, images, embeds/plug-ins, all]]�?br />
     讉K��对象�Ӟ��你可以：
     var theImage = document.form[0].elements["someelement"].value;

1、window对象

     ��览器的 window对象��装了整个浏览器环境�Q�包�?window�?chrome"�Q�组成浏览器�H�体的通用�l��g�Q�、实际的 Web��面�Q�以及页面中的事件�?br />
     通过 window可以手动讄��览器状态条上的状态，执行打开一个新�H�口、重新调整已昄��H�口的大��、关闭窗口等操作。不�q�随着动�?Web效果�?Ajax的流行，�q�种弹出式窗口越来不被喜�Ƣ�?br />
window对象的方法和属性可以分�?�c�：

a. 创徏新窗口，�l�护现有�H�口行�ؓ

     弹出式对话框�Q�alert、confirm�?prompt
     创徏自定义窗口：window.open()
     �l�护�H�口�Q�通过�H�口的引用能够完成该�H�口的维护，要维护父�H�口则��用关键字 opener�Q�要�l�护包含当前�q�行脚本的窗口，则应该��用关键字 self�?br />

b. 在窗口中创徏带分区的文档�Q��和iframes�Q?br />
     frame对象定义了以下元素：parent、length�?name。对于跨帧通信而言�Q�name�?parent属性特别重要。其父元�?frameset�Q��集，包括帧的�H�口�Q�可以通过每个帧的名字讉K��所有子帧（也可以通过帧数�l�，以对象数量作为烦引��|��Q�每个��都可以通过通用的关键字 parent来访问该帧集。兄弟��元素之间可以通过 parent和对方的 name属性来讉K��?br />
     和标准的帧不一��P��iframe是内嵌在��面中的。你可以为其指定高度和宽度，如果��它们都讄��?�Q�那么它��将被隐藏�v来。iframe会把它嵌入到的页面视��q��父元素，�q�也是它和更高层��面�q�行通信的方法。通常�Q�你可以使用 document�?getElementById�Ҏ��来访问它�Q�也可以使用 target属性蝲入其内容�?br />

c. 定时器的创徏和控�?br />
     有两�c�d��时器�Q�一�c�L��一�ơ性的�Q�另一�c�L��周期性��用的。两�U�定时器都能取消�Q�一�ơ性定时器�Ҏ��只会被调用一�ơ�?br />
要想创徏一个不重复触发的定时器�Q�可以��?setTimeout�Ҏ��Q?br /> var tmOut = setTimeout("func", 5000, "param1", param2,,,,, paramn);

如果��x��除这个定时器�Q�可以��?clearTimeout�Ҏ��Q?br /> clearTimeout(tmOut);

如果你想周期性地使用�q�个定时器，那么应调�?setInterval�Ҏ��Q?br /> var tmOut = setInterval("functionName", 5000);

     同样�Q�如果想暂停或取消这个周期性定时器�Q�可以��?clearInterval�Ҏ��。如果你惛_��C��个周期性定时器�Q�但又想在参��C��指定一个函数文字量�Q�那么你可以在每�ơ定时器�q�期时再�?setTimeout函数重新讄��q�个定时器�?br />
注：
     �?IE��览器中�Q�setInterval�?setTimeout�Ҏ��是不支持在最后添加函数调用所需参数的�?br />

d. 用来控制��览器其他元�?/strong>

history对象
     history对象负责�l�护��览器中��面载入操作的历史记录。同��P��其方法和属性能够完成通过��览器的后退和前�q�按钮所能实现的��D��操作�?br />
screen对象
     screen对象所包含的信息是屏幕昄��有相关的�Q�包括其宽度、高度，以及颜色或像素浓淡。虽然他们不是很常用�Q�但他们对于那些需要修�Ҏ��览器�H�口大小、创建需要特定调色板的带色彩对象�{�功能而言是不错的选择�?br />
navigator对象
     navigator对象中提供的是和��览器或其他讉K��该页面的用户代理相关的信息。通过它可以检查操作系�l�、浏览器或浏览器族、安全策略、语�a�以及 cookie是否启用�?br />
document对象
1.链接和锚
     document对象�?links集合是由��面中所有超链接�l�成的，它的讉K��Ҏ��和数�l�一栗��?

2.囑փ�
     和链接一��P��囑փ�也有其对应的对象�Q�也可以直接讄��他们的属性，如表�C�图�?URL�?src属性�?br />
3.innerHTML
     使用 innerHTML属性可以修攚w��面中��M��一�?HTML元素�Q�它之所以仍然流行，是因为通过它修攚w��面元素时无需构徏整个��面的内容，你只需创徏一�?HTML格式的字�W�串�Q�然后通过 innerHTML��可以添加到 Web��面中。不�q�，使用 innerHTML意味着无论�?Web��面��d��了什么，他们都无法融合到��面�?document树上�Q�因此如果你混合使用 innerHTML和新�?DOM�Ҏ��会带来很大的破坏�?

2、同源安全策�?/strong>

     同源安全�{�略��保了不同域名、协议或端口的页面之间不能够通过脚本�q�行通信。同源安全策略将应用于不同页面之间的通信�Q�包括父�H�口中的表单和内嵌窗口之间的通信�Q�如帧及 iframe�?

3、cookie

     cookie的意义就是一个带有过期时间、域名、�\径的��型的键/值对�Q�之所以需要提供这些消息，是�ؓ了确保正��的服务器能够读取到正确�?cookie。这些信息将作�ؓ Web��h��的一部分发送，因此在服务器端和��览器都能访问这些数据�?br />
讄��、读取、删�?cookie
// if cookie enabled
window.onload = function() {
    if (navigator.cookieEnabled) {
        var sum = readCookie("sum");
        if (sum) {
            var iSum = parseInt(sum) + 1;
            alert("cookie count is " + iSum);

            if (iSum > 5) {
                eraseCookie("sum");
            } else {
                setCookie("sum", iSum);
            }
        } else {
            alert("no cookie, setting now");
            setCookie("sum", 0);
        }
    }
}

// ��?nbsp;cookie有效期设�|��ؓ 2016�q?/span>
function setCookie(key, value) {
    var cookieDate = new Date(2016, 11, 10, 19, 30, 30);
    document.cookie = key + "=" + encodeURI(value) + "; expires=" + cookieDate.toGMTString() + "; path=/";
}

// 在每�?nbsp;cookie之前用分号隔开
function readCookie(key) {
    var cookie = document.cookie;
    var first = cookie.indexOf(key + "=");

    // 存在 cookie
    if (first >= 0) {
        var str = cookie.substring(first, cookie.length);
        var last = str.indexOf(";");

        // 如果是最后一�?nbsp;cookie
        if (last < 0) last = str.length;

        // 获取 cookie的�?/span>
        str = str.substring(0, last).split("=");
        return decodeURI(str[1]);
    } else {
        return null;
    }
}

// ��?nbsp;cookie的有效期讄��成过去，以达到删�?nbsp;cookie的目�?/span>
function eraseCookie (key) {
    var cookieDate = new Date(2000, 11, 10, 19, 30, 30);
    document.cookie = key + "= ; expirse=" + cookieDate.toGMTString() + "; path/";
}

黄小�?/a> 2010-05-29 21:46 发表评论

Javascript学习指南�Q�第2版）�W�记(�? 表单、表单事件及校验

Sat, 29 May 2010 07:50:00 GMT

1、跨��览器兼容的事�g处理
 2、选择列表�?br /> 3、单选按钮和复选框
 4、测�?/a>

1、跨��览器兼容的事�g处理

//可复用的事�g处理函数
function catchEvent(eventObj, event, eventHandler) {
  if (eventObj.addEventListener) {
    eventObj.addEventListener(event, eventHandler, false);
  } else if (eventObj.attachEvent) {
    event = "on" + event;
    eventObj.attachEvent(event, eventHandler);
  }
}

//可复用的事�g取消函数
function cancelEvent(event) {
  if (event.preventDefault) {
    event.preventDefault();
    event.stopPropagation();
  } else {
    event.retrunValue = false;
    event.cancelBubble = true;
  }
}

2、选择列表�?/strong>

var opts = document.getElementById("someForm").selectOpts.options;
for (var i=0; i<opts.length; i++) {
  if (opts[i].selected) {
    alert(opts[i].text + " " + opts[i].value);
  }
}

a.动态添加一个新的选项�Q�由于数�l�的索引值是�?0开始编��L��Q�因此只要以数组�?length属性作为烦引��|��可以在数组的最后面��d��一个新的数�l�元素�?br /> opts[opts.length] = new Option["Option Four", "Opt4"];

b.删除一个选项�Q�只需��数�l�中该选项讄��?null�Q�这��h��作将会重新安排数�l�，而不会导致编号不�q�箋的现象�?br /> opts[2] = null;

如果惛_��除所有选项�Q�那么只需��数�l�的 length讄��?0�?br /> opts.length = 0;

自动选择

//catchEvent(document.getElementById("selectOpts"), "change", checkSelect);
var theEvent = evnt ? evnt : window.event;

var opts = document.getElementById("someForm").selectOpts.options;
for (var i=0; i<opts.length; i++) {
  if (opts[i].selected) {
    switch (opts[i].value) {
      case "Opt1" : opts[i+1].selected = true;
        break;
      case "Opt3" : opts[i+1].selected = true;
        break;
      case "Opt5" : opts[i+1].selected = true;
        break;
    }
  }
}

3、单选按钮和复选框

//单选按钮访问：
var buttons = document.getElementById("radioGroup");
for (var i=0; i<buttons.length; i++)
{
  if (buttons[i].checked) {
    alert(buttons[i].value);
  }
}

//复选框选择�Q?/span>
var colorOpts = document.getElementById("someForm").getElementByTagName("input");

//遍历复选框中的每个 checkbox�Q�检查是否被选中
var isChecked = false;
for (var i=0; i<colorOpts.length; i++) {
  if ((colorOpts[i].type == "checkbox") && (colorOpts[i].checked)) {
    ifChecked = true;
    break;
  }
}

//没有一�?nbsp;checkbox被选中
if (!isChecked) {
  alert("no choose!");

}

4、测�?/strong>

Q�Q�如果表单数据不完整或无效，如何停止表单提交操作�Q?br /> A�Q?br />      如果你��?DOM Level 0的事�Ӟ��那么只要在事件句柄中�q�回 false��|��q�且在事件句柄脚本中取消表单提交操作卛_��?br />      如果你��?DOM Level 2模型�Q�那么就��?event对象�?cancelBubble属性设�|��ؓ true�Q�针�?IE�Q�，�q�调用其 preventDefault�Ҏ��Q�针对其他浏览器�Q��?br />

黄小�?/a> 2010-05-29 15:50 发表评论

Sat, 29 May 2010 01:25:00 GMT

1、排错、调�?/a>
2、事�?/a>
3、Event对象
 4、事件冒�?/a>
5、事件句柄和 this
6、DOM Level 2事�g模型
 7、测�?/a>

1、排错、调�?/strong>

     Firebug是最常用�?Firefox开发工��P��同时常用�?Web工具�q�有 Web Developer toolkit�Q�该工具功能包括��面 HTML�?CSS代码的校验、可讉K��性检查、查�?CSS�?cookies、检查图像、查�?JavaScript修改后的��面源代码（包括动态源代码�Q��?

2、事�?br />
     事�g包括�Q�用��L��面事�Ӟ��鼠标、键盘触发的�Q�、逻辑事�g�Q�一个处理的�l�果�Q�、和变化事�g�Q�修�Ҏ��档的操作�Q��?br />

事�g句柄　(Event Handlers)

HTML 4.0 的新�Ҏ��之一是能够�� HTML 事�g触发��览器中的行为，比如当用��L��L��?HTML 元素时启动一�D?JavaScript。下面是一个属性列表，可将之插�?HTML 标签以定义事件的行�ؓ�?/p>

属�?/th> 此事件发生在何时... IE F O W3C

onabort 囑փ�的加载被中断�?/td> 4 1 9 Yes

onblur 元素失去焦点�?/td> 3 1 9 Yes

onchange 域的内容被改变�?/td> 3 1 9 Yes

onclick 当用��L��L��个对象时调用的事件句柄�?/td> 3 1 9 Yes

ondblclick 当用户双��L��个对象时调用的事件句柄�?/td> 4 1 9 Yes

onerror 在加载文档或囑փ�时发生错误�?/td> 4 1 9 Yes

onfocus 元素获得焦点�?/td> 3 1 9 Yes

onkeydown 某个键盘按键被按下�?/td> 3 1 No Yes

onkeypress 某个键盘按键被按下�ƈ村ּ��?/td> 3 1 9 Yes

onkeyup 某个键盘按键被松开�?/td> 3 1 9 Yes

onload 一张页面或一�q�图像完成加载�?/td> 3 1 9 Yes

onmousedown 鼠标按钮被按下�?/td> 4 1 9 Yes

onmousemove 鼠标被移动�?/td> 3 1 9 Yes

onmouseout 鼠标从某元素�U�d��?/td> 4 1 9 Yes

onmouseover 鼠标�U�d��某元素之上�?/td> 3 1 9 Yes

onmouseup 鼠标按键被松开�?/td> 4 1 9 Yes

onreset 重置按钮被点凅R�?/td> 4 1 9 Yes

onresize �H�口或框架被重新调整大小�?/td> 4 1 9 Yes

onselect 文本被选中�?/td> 3 1 9 Yes

onsubmit ��认按钮被点凅R�?/td> 3 1 9 Yes

onunload 用户退出页面�?/td> 3 1 9 Yes

注：HTML DOM Event 对象 http://www.w3school.com.cn/htmldom/dom_obj_event.asp

内联模式/内联注册模式�Q?br /> 以属性的形式�?HTML元素��d��属性的�Ҏ��?br />

传统模式/传统注册模式�Q?br /> 通过对象属性将一个函数指�z��ؓ事�g句柄。如果想��用事�g处理�Q�那么可以将事�g句柄的��D��?null�?br /> window.onload = calcNumber;

注：
     �?DOM Level 0事�g模型中，��M��对象只允许指定一个事件句柄。如果你想针�Ҏ��一特定对象的某个事件指定多个函敎ͼ�则需要在事�g句柄代码中列��Z��们：

内嵌模式�Q?br />

传统模式�Q?br /> function helloMsg() {
    var helloString = "hello there";
    alert(helloString);
    helloTwice();
}

当要求浏览器停止执行事�g行�ؓ�Q�可以从事�g句柄函数中返�?false倹{�?

3、Event对象

     Event对象是和所有事件相关的。它有一些用来提供事件相关信息的属性，�?Web��面中鼠标点�ȝ��位置�?br />
     IE��?Event视�ؓ window对象的属性。当处理事�g�Ӟ��通过�E�序讉K�� window对象�Q�其所包含的数据也会相应的�q�行填充�?
function mouseDown() {
    var locString = "X = " + window.event.screenX + " Y = " + window.event.screenY;
    alert(locString);
}

document.onmousedown = mouseDown;

     在基�?Netscape的浏览器�Q�如 Firefox、Mozilla、Opera�?Safari�Q�中�Q�获�?Event对象的方法是不同的：他将作�ؓ函数的一部分传入�?
function mouseDown(theEvent) {
    var locString = "X = " + theEvent.screenX + " Y = " + theEvent.screenY;
    alert(locString);
}

document.onmousedown = mouseDown;

     处理�q�些��览器差异的�Ҏ��之一是检查传入函数的 Event对象是否已经实例化。如果是�Q�那么将�q�个 Event对象赋给一个局部变量；否则�Q�将假定 window.event��事�g�Q��ƈ��其赋给�q�个局部变量�?
function mouseDown(nsEvent) {
    var theEvent = nsEvent ? nsEvent : window.event;    //判断 nsEvent对象是否已定义。定义则赋��|��否则选择 window.event属�?/span>
    var locString = "X = " + theEvent.screenX + " Y = " + theEvent.screenY;
    alert(locString);
}

document.onmousedown = mouseDown;

鼠标 / 键盘属�?/h2>

属�?/th> 描述 IE F O W3C

altKey �q�回当事件被触发�Ӟ��"ALT" 是否被按下�?/td> 6 1 9 Yes

button �q�回当事件被触发�Ӟ��哪个鼠标按钮被点凅R�?/td> 6 1 9 Yes

clientX �q�回当事件被触发�Ӟ��鼠标指针的水�q�_��标�?/td> 6 1 9 Yes

clientY �q�回当事件被触发�Ӟ��鼠标指针的垂直坐标�?/td> 6 1 9 Yes

ctrlKey �q�回当事件被触发�Ӟ��"CTRL" 键是否被按下�?/td> 6 1 9 Yes

metaKey �q�回当事件被触发�Ӟ��"meta" 键是否被按下�?/td> No 1 9 Yes

relatedTarget �q�回与事件的目标节点相关的节炏V�?/td> No 1 9 Yes

screenX �q�回当某个事件被触发�Ӟ��鼠标指针的水�q�_��标�?/td> 6 1 9 Yes

screenY �q�回当某个事件被触发�Ӟ��鼠标指针的垂直坐标�?/td> 6 1 9 Yes

shiftKey �q�回当事件被触发�Ӟ��"SHIFT" 键是否被按下�?/td> 6 1 9 Yes

注：HTML DOM Event 对象 http://www.w3school.com.cn/htmldom/dom_obj_event.asp

注：
     �?IE中，fromElement 对于 mouseover �?mouseout 事�g�Q�fromElement 引用�U�d��鼠标的元素�?nbsp;
     而在 Mozilla/Firefox中，relatedTarget �q�回与事件的目标节点相关的节炏V�?
要解��x��览器差异�Q�可以��用：
var oldElement = theEvent.fromElement ? theEvent.fromElement : theEvent.relatedTarget;

4、事件冒�?br />
     如果你�ؓ多个嵌套的元素设�|�相同的事�g句柄�Q�会发生什么呢�Q�他们将以什么样的顺序触发？如果你想使得一�ơ只影响一个元素，那么如何保存触发事�g句柄的事件呢�Q?br />
     要管理元素堆栈中的事�Ӟ��其中一个方法就是众所周知的事件冒泡。在事�g冒��中，最内部的元素将首先触发该事�Ӟ��然后堆栈内的下一个元素触发该事�g�Q�以此类推，直到最外面的元素。如果事件句柄被指定�l�所有元素，那么�q�些事�g��依�ơ被触发�?br />
     如果 div2�?div1内部�Q��?div1又在 document内部�Q�三者都做了事�g处理。当事�g触发的时候，优先最里面�?div2元素�Q�然后是 div1元素�Q�最后是 document元素�?br />
     如果你有一个元素堆栈，�q�且只希望一个元素触发该事�g句柄�Q�那么你可以取消事�g冒��机制。如果在 IE中要取消一个事件冒泡，可以使用 IE中事件的 cancelBubble属性；对于 Mozilla而言�Q�则应该使用事�g�?stopPropagation�Ҏ��。你可以先检�?stopPropagation�Ҏ��是否存在�Q�然后根据其�l�果��定使用哪种�Ҏ��Q?
function stopEvent(evnt) {
    if (evnt.stopPropagation) evnt.stopPropagation;
    else evnt.cancelBubble = true;
}
//注：IE 7中调试出错，提示信息 "stopPropagation为空或不是对�?�?/span>

5、事件句柄和 this

     this关键字表�C�的是当前调用的函数或者方法的所有者。对于一个全局变量而言�Q�它表示的就�?window对象。对于一个对象的�Ҏ��而言�Q�它表示的就是该对象实例。而在一个事件句柄中�Q�它表示的就是接收到该事件的元素�?
document.getElementById("first").onmousedown = function() {
    alert(this);    //�?nbsp;Firefox中将输出 "[object HTMLDivElement]"
    alert("first element event");
}

6、DOM Level 2事�g模型

     对于堆栈内元素的事�g处理�Q�还有一�U�被�U�Cؓ事�g捕捉(event capturing)�?cascade-down的事件处理机制。对于前面这个包�?个元素的�C�Z��而言�Q�事件将从最外面的元素开始触发：window -> div1 -> div2�?br />
     老事件模型和新的 DOM Level 2事�g模型之间�Q�主要区别：
a.��C��件模型�ƈ不依赖于特定的事件来处理属性；
b.你可以对��M��一个对象的��M��一�U�事件注册多个事件句柄函数�?br />
     新的事�g句柄提供�?个方法：
addEventListener�Q�添加一个事件监听器�Q?br /> removeEventListener�Q�删除一个事件监听器�Q?br /> dispatchEvent�Q�分发一个新的事件�?br />
�C�Z��Q?br /> object.addEventListener('event', eventFunction, boolean);

     �?click�?load之类的事件是其第一参数�Q�第二个参数是指定的事�g句柄函数�Q�第三个参数用来指定事�g是以 cascade-down或者冒泡模式处理的。当�W�三个参��Cؓ false时这个事件监听器��以冒��模式处理�Q�否则将把这个事件监听器�Ҏ��事�g捕捉模型�?
function cascadeDown(evnt) {
    alert("Capturing: " + this);
}

function bubbleUp(evnt) {
    alert("Bubbling: " + this);
}

window.onload = setup;

function setup(evnt) {
    //事�g捕捉
    document.addEventListener("click", cascadeDown, true);
    document.forms[0].addEventListener("click", cascadeDown, true);
    document.forms[0].elements[0].addEventListener("click", cascadeDown, true);

    //事�g冒��
    document.addEventListener("click", bubbleUp, false);
    document.forms[0].addEventListener("click", bubbleUp, false);
    document.forms[0].elements[0].addEventListener("click", bubbleUp, false);
}

/*
�?nbsp;Firefox中，单击按钮��顺序生�?个对话框

Capturing: [object HTMLDocument]
Capturing: [object HTMLFormElement]
Capturing: [object HTMLInputElement]
Bubbling: [object HTMLInputElement]
Bubbling: [object HTMLFormElement]
Bubbling: [object HTMLDocument]

*/

     如果你想停止事�g执行�Ӟ��可以在函��C��调用 stopPropagation�Ҏ��Q?br /> function cascadeDown(evnt) {
    ...
    evnt.stopPropagation();
}

     如果要彻底删除一个事件监听器�Q�可以��?removeEventListener�Ҏ��Q?br /> document.removeEventListener("click", cascadeDown, true);

     �?IE中，�?addEventListener�?removeEventListener�Ҏ��怼�的是 attachEvent�?detachEvent�Q�对应语法是�Q?br /> object.attachEvent("eventhandler", function);
�W�一个参数是事�g句柄�Q�第二个是其函数。detachEvent语法�c�M��?br />

跨浏览器解决�Ҏ��Q?/strong>

window.onload = setup;
window.onunload = cleanup;

function setup(evnt) {
    var evtObject = document.getElementById("clickme");

    //��查对象模�?/span>
    if (evtObject.addEventListener) evtObject.addEventListener("click", clickMe, false);
    else if (evtObject.attachEvent) evtObject.attachEvent("onclick", clickMe);
    else if (evtObject.onclick) evtObject.onclick=clickMe;
}

/*清理
�?nbsp;IE中，需要跟�t?nbsp;window�?nbsp;unload事�g�Q�然后调�?nbsp;detachEvent�Ҏ��清理�Q�释攄��应的内存
�?nbsp;addEventListener�Ҏ��使用的内存是无需清理的�?br /> */
function cleanup() {
    var evtObject = document.getElementById("clickme");
    if (evtObject.detachEvent) evtObject.detachEvent("onclick", clickMe);
}

function clickMe() {
    alert("clickMe");
}

IE 属�?/h2>
除了上面的鼠�?事�g属性，IE ��览器还支持下面的属性：

属�?/th> 描述

cancelBubble 如果事�g句柄想阻止事件传播到包容对象�Q�必��L��该属性设�?true�?/td>

fromElement 对于 mouseover �?mouseout 事�g�Q�fromElement 引用�U�d��鼠标的元素�?/td>

keyCode 对于 keypress 事�g�Q�该属性声明了被敲�ȝ��键生成的 Unicode 字符码。对�?keydown �?keyup 事�g�Q�它指定了被敲击的键的虚拟键盘码。虚拟键盘码可能和��用的键盘的布局相关�?/td>

offsetX,offsetY 发生事�g的地点在事�g源元素的坐标�pȝ��中的 x 坐标�?y 坐标�?/td>

returnValue 如果讄��了该属性，它的值比事�g句柄的返回��g��先��高。把�q�个属性设�|��ؓ fasle�Q�可以取消发生事件的源元素的默认动作�?/td>

srcElement 对于生成事�g�?Window 对象、Document 对象�?Element 对象的引用�?/td>

toElement 对于 mouseover �?mouseout 事�g�Q�该属性引用移入鼠标的元素�?/td>

x,y 事�g发生的位�|�的 x 坐标�?y 坐标�Q�它们相对于用CSS动态定位的最内层包容元素�?/td>

注：HTML DOM Event 对象 http://www.w3school.com.cn/htmldom/dom_obj_event.asp

标准 Event 属�?/h2>
下面列出�?2 �U?DOM 事�g标准定义的属性�?/p>

属�?/th> 描述 IE F O W3C

bubbles �q�回布尔��|��指示事�g是否是�v泡事件类型�?/td> No 1 9 Yes

cancelable �q�回布尔��|��指示事�g是否可拥可取消的默认动作�?/td> No 1 9 Yes

currentTarget �q�回其事件监听器触发该事件的元素�?/td> No 1 9 Yes

eventPhase �q�回事�g传播的当前阶�D�c�?/td> Yes

target �q�回触发此事件的元素�Q�事件的目标节点�Q��?/td> No 1 9 Yes

timeStamp �q�回事�g生成的日期和旉��?/td> No 1 9 Yes

type �q�回当前 Event 对象表示的事件的名称�?/td> 6 1 9 Yes

注：HTML DOM Event 对象 http://www.w3school.com.cn/htmldom/dom_obj_event.asp

7、测�?br />
Q1�Q��?DOM Level 0�Ҏ��?document�?click事�g指定一个事件句柄函数�?br /> A1�Q�document.onclick = clickMe;

Q2�Q��?DOM Level 2事�g处理机制�?document��d�� click事�g句柄�?br /> A2�Q�document.addEventListener("click", clickMe, false);

Q3�Q�如果��事�g处理机制能安全运行所有浏览器�Q?br /> A3�Q?br />     if (evtObject.addEventListener) evtObject.addEventListener("click", clickMe, false);
    else if (evtObject.attachEvent) evtObject.attachEvent("onclick", clickMe);
    else if (evtObject.onclick) evtObject.onclick=clickMe;

Q4�Q�对于�ؓ document对象指定�?onclick事�g句柄�Q�如何知道是在屏�q�的什么位�|�执行了单击操作�Q?br /> A4�Q?br />      如果使用 DOM Level 0事�g处理�pȝ��Q�那么将无法使用 window对象�?event对象�Q�也不能��其作�ؓ参数传给函数�?br />      对于 DOM Level 2事�g处理模型而言�Q�event对象��会传给事�g句柄函数�Q�你可以通过 event对象讉K��?screenX�?screenY属性�?br />

Q5�Q��?DOM Level 2事�g�pȝ��Q�如何阻止从其他元素中冒泡上来的事�g�?br /> A5�Q?br />      IE所支持的方法和�l�大多数��览器所支持的方法有所不同�Q�因此你需要分别支�?IE和其他浏览器。你可以��?event对象是否支持 stopPropagation�Ҏ��。如果支持，则调用它�Q�否则就��?cancelBubble属性的��D��|��ؓ true�?br />

Q7�Q�捕�?document对象�?keydown事�g
A7�Q?
window.onload = function() {
    if (document.addEventListener) document.addEventListener("keydown", getKey, false);
    else if (document.attachEvent) document.attachEvent("onkeydown", getKey);
    else if (document.onkeydown) document.onkeydown=getKey;
}

function getKey(evnt) {
    var theEvent = evnt ? evnt : window.event;
    alert(theEvent.which);  //Firefox �q�回��|��IE 7提示 undefined
}

黄小�?/a> 2010-05-29 09:25 发表评论

Wed, 26 May 2010 08:29:00 GMT

1、字�W�串基本�c�d��和字�W�串对象的相互�{�?br /> 2、String对象
 3、正则表辑ּ�
4、数�l?/a>
5、函�?/a>
6、匿名函�?/a>
7、函数字面量

1、字�W�串基本�c�d��和字�W�串对象的相互�{�?/strong>

     如果创徏的是字符串基本类型，却又以对象的行�ؓ讉K��Q�那�?JavaScript会将该基本类型自动�{换成对象�Q�但是�{换成�?String对象只是一个��时变量，�q�且在属性操作后销毁该对象�Q�所以这�U�操作不够有效，多了一�ơ�{换的�q�程而已�?br />
var strName = "Shelley"; //字符串基本类�?br /> alert(strName.length);  //隐式创徏 String对象�Q�数��g�� strName相同�Q��ƈ执行 length�Ҏ��

2、String对象

本节内容引自�Q�JavaScript String 对象参考手�?br /> http://www.w3school.com.cn/js/jsref_obj_string.asp

var sObject = new String("Sample string");

     字符串是 JavaScript 的一�U�基本的数据�c�d��。String 对象�?length 属性声明了该字�W�串中的字符数。String �c�d��义了大量操作字符串的�Ҏ��Q�例如从字符串中提取字符或子�Ԍ��或者检索字�W�或子串�?br />
     需要注意的是，JavaScript 的字�W�串是不可变的（immutable�Q�，String �c�d��义的�Ҏ��都不能改变字�W�串的内宏V��像 String.toUpperCase() �q�样的方法，�q�回的是全新的字�W�串�Q�而不是修改原始字�W�串�?br />
     在较早的 Netscape 代码基的 JavaScript 实现中（例如 Firefox 实现中）�Q�字�W�串的行为就像只�ȝ��字符数组。例如，从字�W�串 s 中提取第三个字符�Q�可以用 s[2] 代替更加标准�?s.charAt(2)。此外，对字�W�串应用 for/in 循环�Ӟ��它将枚�D字符串中每个字符的数�l�下标（但要注意�Q�ECMAScript 标准规定�Q�不能枚�?length 属性）。因为字�W�串的数�l�行��Z��标准�Q�所以应该避免��用它�?

3、正则表辑ּ�

     正则表达式是由字�W�串所�l�成的表辑ּ��Q�用于匹配、替换或者查扄��定的字符丌Ӏ�通过 RegExp对象可以昑ּ�地创建正则表辑ּ��Q?br /> var searchPatten = new RegExp('s+');

也可以��用文字量方式创徏正则表达式：
var searchPatten = /s+/;

test�Ҏ��

     test�Ҏ��判断以参数传入的字�W�串是否与正则表辑ּ�相匹配�?br />
var re = /Javascript rules/i;
/* var re = new RegExp('s+', 'g');    //对象实例�Q�第二个参数表示匚w��选项 */
var str = "Javascript rules";
if (re.test(str))    document.writeln("I guess it does rule");

其中修饰�W?br /> i 执行对大��写不敏感的匚w��?
g 执行全局匚w��Q�查找所有匹配而非在找到第一个匹配后停止�Q��?
m 执行多行匚w��?

exec�Ҏ��

var re = new RegExp("JS*", "ig");
var str = "cfdsJS *(&YJSjs 888JS";
var resultArray = re.exec(str);
while (resultArray) {
    document.writeln(resultArray[0]);
    document.writeln("next match starts at " + re.lastIndex + "");

    resultArray = re.exec(str);
}

/*
�׃��讄��选项 g�Q�RegExp中的 lastIndex属性会讄��Z��一�ơ匹配的位置�Q�所以每��?nbsp;exec调用都会查找下一个匹配。该�C�Z��中��d��扑ֈ�4�ơ匹配，当没有匹配时�Q�将会返回的数值是�I��?nbsp;null�Q�当数组为空值时循环自动�l�束�?nbsp;

输出�Q?br /> JS next match starts at 6
JS next match starts at 13
js next match starts at 15
JS next match starts at 21

*/

exec�Ҏ��返回一个数�l�，但是数组�q�不是所有匹配项�Q�而是当前匚w��和所有带圆括��L��子字�W�串。如果在表达式中使用圆括号引用正则表辑ּ�的某部分�Q�那么匹配的时候，�q�些括号所匚w��的字�W�串也会体现在返回的数组中�?br />
var re = /(ds)+(j+s)/ig;
var str = "cfdsJS *(&dsjjjsYJSjs 888dsdsJS";
var resultArray = re.exec(str);
while (resultArray) {
    document.writeln(resultArray[0]);
    document.writeln("next match starts at " + re.lastIndex + "");
    for (var i=1; i<resultArray.length; i++)
    {
        document.writeln("substring of " + resultArray[i] + "");
    }
    document.writeln("")

    resultArray = re.exec(str);
}

/*

输出�Q?br /> dsJS next match starts at 6
substring of ds
substring of JS

dsjjjs next match starts at 16
substring of ds
substring of jjjs

dsdsJS next match starts at 31
substring of ds
substring of JS

*/

支持正则表达式的 String 对象的方�?br /> search ��索与正则表达式相匚w��的倹{�?
match 扑ֈ�一个或多个正则表达式的匚w��?
replace 替换与正则表辑ּ�匚w��的子丌Ӏ?br /> split 把字�W�串分割为字�W�串数组�?br />

参考：JavaScript RegExp 对象参考手�?br /> http://www.w3school.com.cn/js/jsref_obj_regexp.asp

4、数�l?/strong>

     数组不一定是一�l�的�Q�在 JavaScript中管理多�l�数�l�的�Ҏ��是�ؓ每个数组元素创徏一个新的数�l��?br />
var threedPoints = new Array();
threedPoints[0] = new Array(1.2, 3.33, 2.0);
threedPoints[1] = new Array(5.3, 5.5, 5.5);
threedPoints[2] = new Array(6.4, 2.2, 1.9);
var newZPoint = threedPoints[2][2];     //数组以烦引方式访�?br />
     数组�?concat �?slice都不会改变原有数�l�，而只是创��Z��个新的数�l�以作�ؓ�Ҏ��的返回倹{�?br />
     在大多数情况下，数组元素的顺序�ƈ不重要，不过也有些需要维护数�l�元素顺序的场景�Q�例如队列。数�l�维护队列的�Ҏ��Q?br /> push ��元素添加到数组后面
unshift ��元素添加到数组最前面
pop �U�除数组的最后一个元�?br /> shift �U�除�W�一个元�?br />
数组的访�?br />
//通过循环来遍历数�l?/span>
for (var i=0; i<threedPoints[0].length; i++){
    alert(threedPoints[0][i]);
}

//使用 forin 循环
for (var itemIndex in threedPoints[0]){
    document.writeln(threedPoints[0][itemIndex] + "");
}

�Ҏ��逗号分隔的字�W�串方式创徏数组

var animalString = "cats,dogs,birds,horse";
var animalArray = animalString.split(",");
alert(animalArray[2]);  //alert box display birds

JavaScript Array 对象参考手�?br /> http://www.w3school.com.cn/js/jsref_obj_array.asp

5、函�?/strong>

     JavaScript中函数和对象�怼��Q�你可以定义一个函敎ͼ�创徏一个新的函敎ͼ�甚至输出一个函数。正是因为有了这个功能，你可以将一个函数给一个变量或数组元素�Q�甚臛_��以将其作为参��C��l�另一个函数调用�?br />
     �?JavaScript中有3�U�创建函数的�Ҏ��Q�声明式�?静态的、动态的/匿名的、字面量式的。在使用它们之前�Q�理解各�U�方法的效果是十分重要的�?br />
     如果在一个函��C��需要执行多个�Q务，可以考虑��这个函数拆分成几个更小的单元，�q�样做可提高复用性。在实际中，��量让函数短��、��其特定于某个人物、尽量保持通用是应该遵守的规则�?

6、匿名函�?br />
     匿名/动态函数对于定义一个在�q�行时才能确定需求的函数而言是个很好的方法。匿名函数每�ơ访问都会解析一�ơ。��用匿名函数构造器�Q?br /> var variable = new Function("param1", "param2",...,"paramn","function body");

/*
用户��通过 alert对话框来讄��定义函数所需的函��C��及两个参敎ͼ�
然后调用该函敎ͼ�
��其生成的结果输出到��面上�?br />
注：FF调试通过�Q�IE7异常
*/

//提示输入函数体和参数
var func = prompt("Enter function body:");
var x = prompt("Enter value of x:");
var y = prompt("Enter value of y:");

//调用�q�个匿名参数
var op = new Function("x", "y", func);
var theAnswer = op(x, y);       //function anonymous(x, y) {}

//输出函数执行�l�果
alert("Function is: ", func);
alert("x is: " + x +
            "; y is: " + y);
alert("The answer is: " + theAnswer);

/*
输入/输出�Q?br /> Function is: return x * y;
x is : 33; y is : 11;
The answer is: 363;
*/

7、函数字面量

     函数字面量也�U�函数表辑ּ��Q�因��样创建的函数��成��辑ּ�的一部分�Q�而不是一个特有类型的语句�Q�他们像匿名函数一��h��有定义函数名�U�ͼ�但函数字面量只会被解析一�ơ，它是静态的�?br />
     当你惛_��现如吧一个函��C��为另一个函数的参数之类的扩展时�Q�函数字面量的特色就会显�C�出来�?br />
//��第三个参数作�ؓ函数来声�?br /> function funcObject(x,y,z){
    alert(z(x,y));
}

//�W�三个参数是一个函�?br /> funcObject(3, 4, function(x, y){ return x*y})

黄小�?/a> 2010-05-26 16:29 发表评论

Mon, 24 May 2010 09:13:00 GMT

1、Script�?defer属�?br /> 2、�ؓbody��d��脚本
 3、CDATA��节
 4、null和undefined变量
 5、羃减JavaScript代码


1、Script�?defer属�?br />
     如果��defer属性设�|��ؓ"defer"�Q�那么表�C��脚本不会生成��M��文档内容�Q�于是浏览器可以提前处理��面的剩余部分，在页面处理结束�ƈ做好昄��准备时才处理脚本部分。defer属性可以提高页面蝲入的速度�Q�特别是那些引用了大量的JavaScript代码或者庞大的JavaScript�E�序库的��面�?

<script type="text/javascript" defer="defer">
no content being generated
script>

2、�ؓbody��d��脚本

     前面我们曄��说过�Q�因为对script元素�q�行集中��理有利于网��늚�可维护性，所以script元素通常��添加在�|�页上的head元素中。然而，在body元素中添加脚本的原因往往是出于性能的考虑�?br />
     因�ؓ��览器从同一个域名�ƈ发蝲入的资源是有限制的，所以，当把脚本��d��到head元素中时�Q�首先蝲入的��是脚本�Q�其�ơ才是文档的剩余部分。此外，��览器可能会延迟��面剩余部分的显�C�，因�ؓ脚本中可能会调用document.write�Ҏ��修改document对象。如果JavaScript文�g很庞大，那么�|�页中的囄��以及其他重要的信息将会被延迟昄��Q�这所带来的问题远比可�l�护性更加重要�?br />
     即��在script元素中��用defer属性也不一定能完全解决该问题，特别是�ƈ发资源访问和��面昄��的限制�?br />
     在High Performance Web Sites�Q�中译版《高性能�|�站��指南》一书中�Q�作者推荐将script元素攑֜�文档的最末尾处，�q�样�|�页的其他部分就可以优先载入。大多数复杂�|�站的开发�h员更們֐�于这�U�方法。这�U�方法带来的负面影响是脚本不�Ҏ��查找�Q�网��늚�可维护性也较差�?br />
     那么什么才是最��x��法呢�Q�我发现大多数网站�ƈ不引用庞大的JavaScript�E�序库，在保证较好性能的前提下�Q�将脚本攑֜�head元素中，也确保网��可�l�护性的优势。不�q�，如果的确需要��用庞大的JavaScript�E�序库，那么可以考虑��脚本放在页面的最末尾处�?nbsp;

     不论采用何种�Ҏ��Q�请��保脚本位置的一致性，要么全部攑֜�head元素中，要么全部在body元素的最末尾处�?

3、CDATA��节

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

function hello() {
   var msg = "Hello, World!";
   document.open();
   document.write(msg);
   document.close();
}

//]]>
script>

     之所以��用CDATA��节�Q�是因�ؓXHTML处理器在解释标记型语�a�时会识别出所有的开始标�{�֒��l�束标签�?br />
     在页面文件中通过script元素的src属性引用的JavaScript�Q�是XHTML标准所兼容的，�q�且不要求��用CDATA��节。如果是嵌入的JavaScript代码�Q�那么就需要��用CDATA��节�Q�特别是包含在body元素中的代码。对于大多数��览器而言�Q�还需要用JavaScript注释�W�（//�Q�来隐藏CDATA��节�Q�如�C�Z��1.3所�C�，否则��会出现JavaScript错误�?br />
     当然�Q�保持页面整�z�的最��x��式是��JavaScript代码从页面中��d��U�d��Q�改成��用链接JavaScript文�g的方式�?br />
     在本书的大多数示例中�Q�JavaScript代码是直接嵌入在��面里的�Q�这样可以提高代码的可读性且易于��查。然而，Mozilla推荐��所有嵌入的JavaScript代码都从��面中移去，攑֜�独立的JavaScript文�g中。��用独立的JavaScript文�g�Q�可以避免校验以及文本解释错误等问题�Q�而不用担心页面是以HTML�q�是XHTML的方式进行处理�?br />
提示
     使用JavaScript文�g往往也能提高�|�页载入的效率，因�ؓ��览器会在第一�ơ蝲入文件的时候进行缓存，引用相同文�g时则会从�~�存中获取�?br />

4、null和undefined变量

null变量是已定义的、��gؓnull的变量。以下是一个null变量的示例：
var nullString = null;

如果变量已经声明但是�q�没有初始化�Q�那么就是undefined变量�Q?br /> var undefString;

如果声明了变量�ƈ且赋予了初始��|��那么该变量就不是null或undefined�Q?br /> var sValue = "";

     当你使用JavaScript�E�序库时�Q�或者在一些复杂的代码中，某些变量有可能还没有初始化；如果��试在表辑ּ�中��用这��L��变量�Q�那么就有可能得到出乎意料的�l�果�Q�通常会导致JavaScript错误。如果不��定变量的状态，那么可以在条件表辑ּ�中测试该变量�Q�例如：
if (sValue) ...     // 如果变量是null或undefined�Q�那么结果�ؓtrue�Q�否则是false

     在第3章中��详�l�介�l�条件语句，现在你只需要知道该表达式会判断变量sValue是否已经声明�q�初始化�Q�如果已声明�q�初始化则该表达式的��gؓtrue�Q�否则，该表辑ּ�的��gؓfalse�?
if (unknownVariable)     // false�Q�变量没有声明或赋�?nbsp;
if (undefinedString)     // false�Q�变量没有赋�?nbsp;
if (nullString)          // false�Q�变量已�l�声明�ƈ且赋��|��但是所赋的值是null
if (sValue)               // true�Q�变量已�l�声明�ƈ且赋��|��包括�I�字�W�串�Q?nbsp;使用null关键字，可以判断数值是否�ؓnull�Q?/span>

if (sValue == null)
     在JavaScript中，即��变量已经声明�Q�但只要�q�没有初始化��是undefined变量。如果变量已�l�声明�ƈ初始化，那么变量��׃��是null或undefined。然而，在该�C�Z��中它是一个全局变量�Q�正如之前的章节所�q�ͼ�没有以var关键字声明的变量可能会引起各�U�各��L��问题�?br />

5、羃减JavaScript代码

     �I�格能够提高代码的可��L��，但同时也会增加文件的大小。通常情况下，�q�没什么媄响，因�ؓ大多数JavaScript文�g都非常小。然而，对于某些大型Ajax应用�Q�或者复杂的JavaScript�E�序库来��_��太大的JavaScript文�g会媄响蝲入JavaScript的速度�?br />
     如果要尽可能压羃JavaScript文�g�Q�那么可以选用一些免费的工具�Q�例如Dean Edward的Packer�Q�http://dean.edwards.name/packer/�Q�，它能够在�U�压�~�JavaScript代码。或者��用Wikipedia�?minify"条目�Q�http://en.wikipedia.org/wiki/Minify�Q�中所列�D的工��P��q�些工具可以在桌面或者服务器上��用�?br />
     另一�c�d��h��用来保护JavaScript代码版权的。这些工具不仅仅会压�~�JavaScript代码�Q�甚臌��会对代码�q�行加密�Q�从而��代码难以阅读�?

黄小�?/a> 2010-05-24 17:13 发表评论

Mon, 10 May 2010 16:10:00 GMT

1、��用setAttribute()改变�|�页中标�{��onclick属�?br /> 2、IE中通过 setAttribute��d��的属�?/a>

1、��用setAttribute()改变�|�页中标�{��onclick属�?/strong> *p1

      setAttribute讄��style和onclick�q�些属性在IE中是行不通的�?
<script type="text/javascript">
    function cancleEvent()
    {
        document.getElementById('a').setAttribute("onclick",'');
        document.getElementById('g').innerHTML="取消事�g�Q?/span>";
    }

    function setEvent()
    {
        document.getElementById('a').setAttribute("onclick",'alert("你好�Q?/span>")');//firefox
        document.getElementById('a').onclick= function () { alert("This is a test!"); }//IE firefox也有作用,但是使用firebug调试看不��C��改后的效果，使用上面的方法可以看到�?/span>
        document.getElementById('Div1').innerHTML="讄��事�g�Q?/span>";
    }
script>

注：
*p1�Q��用setAttribute()改变�|�页中标�{��onclick属�?nbsp;   http://blog.csdn.net/Cnami/archive/2008/05/27/2486516.aspx

2、IE中通过 setAttribute��d��的属�?/strong> *p2

      IE下setAttribute讄��元素的对象、集合和事�g属性都只当成普通属性，起不到原有的作用�Q�但可以直接�q�行赋值操作�?br />
<script language="javascript" type="text/javascript">

script>

注：
*p2�Q�[求助]通过 setAttribute ��d��的属性在 IE 下不被实玎ͼ� http://bbs.blueidea.com/viewthread.php?tid=2290521

黄小�?/a> 2010-05-11 00:10 发表评论

Fri, 23 Apr 2010 10:13:00 GMT

源码爱好�?层和布局

效果:
弹出可拖动提�C�层(模式�H�口)

[原]解决JS中文��q��
http://www.cnblogs.com/xjyggd/archive/2009/04/14/1436000.html

[原]解决JS中文��q��
�Ҏ��一�Q?nbsp;<script src="../JS/common.js" type="text/javascript" charset="gb2312">script> 加上charset="gb2312"��可以了�?br /> �Ҏ��二：把JS文�g的编码改成UTF-8　(VS2005的默认编码）
�Ҏ��三：把asp.net��面的输出编码改成gb2312�Q�页�?/span>/web.config都可讄��Q?br />
Cookies的内容编码格�?/strong>
Cookies的��g��可以保存除了“;”以外的标点符受��但是不能保存汉字。保存汉字会出现��q��?nbsp;
所以对于Cookies中的内容要进行统一的编码和解码。�ؓ了在��览器端和服务器端都能够�q�行解码和编码，所以要�l�一使用UTF�~�码格式�?nbsp;
主要是因为javascript中只能��用UTF�~�码格式�?nbsp;

黄小�?/a> 2010-04-23 18:13 发表评论

创徏Tooltips�Ҏ��

Wed, 21 Apr 2010 04:49:00 GMT

��Q?br /> 11个出色的创徏Tooltips的方�?br /> http://www.qianduan.net/11-excellent-program-to-create-tooltips.html

AjaxCode -- Tooltips�Q�消息提醒框控�g
http://www.open-open.com/ajax/Tooltips.htm

1. Easy CSS Tooltip
http://www.kollermedia.at/archive/2008/03/24/easy-css-tooltip/

Here is the 4 line magic (3lines css, 1line html):

/* css tooltip */
a:hover
{
    _background: Transparent;
}
/*BG color is a must for IE6*/
a.tooltip span
{
    display: none;
    padding: 6px 10px;
    text-indent: 0px;
    line-height: 18px;
}
a.tooltip:hover span
{
    display: inline;
    position: absolute;
    background: #ffffff;
    border: 1px solid #cccccc;
    color: #6c6c6c;
    text-decoration: none;
}
/* end of css

Easy <a class="tooltip" href="#">Tooltip<span>This is the crazy little Easy Tooltip Text.span>a>.

2. jtip
http://codylindley.com/blogstuff/js/jtip/

3.

黄小�?/a> 2010-04-21 12:49 发表评论

动态添�?删除HTML元素

Mon, 04 May 2009 14:18:00 GMT

本文��   动态删除Html元素(��h��高手)

DOCTYPE   HTML   PUBLIC   "-//W3C//DTD   HTML   4.0   Transitional//EN"   >
<HTML>
<HEAD>
<title>WebForm2title>
<meta   name="GENERATOR"   Content="Microsoft   Visual   Studio   .NET   7.1">
<meta   name="CODE_LANGUAGE"   Content="C#">
<meta   name="vs_defaultClientScript"   content="JavaScript">
<meta   name="vs_targetSchema"   content="http://schemas.microsoft.com/intellisense/ie5">
<script   language="javascript">
    var count= 0 ;
    var maxfile = 5;        //最大允许数�?/span>

    //增加元素
    function addUpload() {
        if(count >= maxfile)    return;        //限制最多maxfile个文件框
        count++;

        //每次自增id不同的HTML对象�Q��ƈ附加到容器最�?/span>
        var newDiv =  "" + count +">"
            + " " + count + " type=file size=50 name=upload>"
            + " " + count + "');>删除"
            + "
";
          document.getElementById("uploadContent").insertAdjacentHTML("beforeEnd", newDiv);
    }

    //删除指定元素
    function delUpload(diva) {
        count--;
        document.getElementById(diva).parentNode.removeChild(document.getElementById(diva));
    }

  script>
HEAD>
<body   MS_POSITIONING="GridLayout">
<form   id="Form1"   method="post"   runat="server"   enctype="multipart/form-data">
  <div>
    <table>
      <tr>
        <td   id="tdRrmove"   width="2000">


        <div id="uploadContent">

        div>

        td>
      tr>
    table>
  div>
  <a href="javascript:addUpload()">��d��附�ga>
  <br/>
  <br/>
form>
body>
HTML>

黄小�?/a> 2009-05-04 22:18 发表评论

Ajax 寚w��面元素的操作

Sat, 25 Apr 2009 15:18:00 GMT

JavaScript的Table表格对象
 DOM操作表格对象——table�Ҏ��
javascript 取table中内�?/a>

Title

取值方�?br />    var value==window.table1.rows.item(0).cells.item(0).innerText;

该行�W?列的�?br /> onMouseDown="str=this.cells.item(0).innerText"

�q�可以取鼠标所在列的�?br /> 2�?�?lt;/td>

CSS+JS实现鼠标�l�过改变表单背景�?/a>
JS解决IE 6不支�?hover伪类的简单方�?br />
css2中规定，:hover伪类可以应用在全部元素上�Q�而ie6只支�?lt;a>的伪�c�，因此对于ie6需要��用js�Q�而ie7/ff/op/sa直接定义:hover卛_��?br />

黄小�?/a> 2009-04-25 23:18 发表评论

Sat, 25 Apr 2009 14:49:00 GMT

Ajax开发过�E�中提交获取数据的�ؕ码问�?/a>

摘录
# re: Ajax开发过�E�中提交获取数据的�ؕ码问�?2006-09-06 15:32 | 乌鸦在黑夜里�?/p>
实际上所有的问题都来自编码的不统一�Q?
1、HTTP/POST方式在缺省情况下�Q�采用的�?#8220;x-www-form-urlencoded”�q�行�~�码�Q�它和JavaScript里面的encodeURI所��L��作用是一��L��Q?
2、经�q�这��L��码的内容�Q�到辑֐�台时�Q�其中的字符都是UTF-8�~�码格式的；
3、如果你的Servlet/JSP指定输出使用的Content-Type是UTF-8�Q�恭喜你�Q�你不需要对�q�些Parameters�q�行特别的编码、解码操作，它一定是正常的；
4、否则你需要对�q�些parameter�q�行解、编码操作，例如你的��面是GBK�~�码�Q�那么你需要这么写�Q?
String sPara = new String(request.getParamter("test").getBytes("iso-8859-1"),"GBK");
采用gb2312�~�码的也可以采用GBK�~�码�Q?
5、如果你是在eclipse中进行工作，��h��意你的Servlet和JSP文�g的属性，其中的编码必��d��content-type中设�|�的一��P��否则javac会对你的文�g�q�行错误的编码，�q�时候的字节码文件本�w�的字符串就是错误的�Q�输��Z��不顶用；
6、最后做一个�ȝ��Q?
6.1、servlet/JSP文�g本��n的编码必��d��content-type输出的一��_��否则需要加入额外的�~�码、解码步骤；
6.2、HTTP/POST方式和encodeURI方式传入的编码都是UTF-8的；
6.3、普通的window.open(...)�Q�也��是HTTP/GET方式�Q�其传入的编码是和运行script的页面编码一致的�Q?
6.4、后台解码必��通过iso-8859-1�q�行解码�Q�再使用你的目标�~�码�q�行�~�码�Q?
6.5、所有的问题基本上可以得到解冟�?/p>
回复更多评论

解决AJAX的�ؕ码，可以�?escape()函数的呀�?
escape �Ҏ��不能够用来对�l�一资源标示�?(URI) �q�行�~�码。对其编码应使用 encodeURI 和encodeURIComponent �Ҏ��?

在asp中解决�ؕ码问题只需要在服务器端加上<%Response.ContentType = "text/html;charset=GB2312"%>

黄小�?/a> 2009-04-25 22:49 发表评论

关于手写 Ajax

Sun, 22 Mar 2009 01:50:00 GMT

function createHttpRequest(){
   var httprequest=false;
   if (window.XMLHttpRequest)
   { // if Mozilla, Safari etc
     httprequest=new XMLHttpRequest();
     if (httprequest.overrideMimeType)
       httprequest.overrideMimeType('text/xml');
    }
    else if (window.ActiveXObject)
    { // if IE
      try {
        httprequest=new ActiveXObject("Msxml2.XMLHTTP");
      }
      catch (e){
        try{
           httprequest=new ActiveXObject("Microsoft.XMLHTTP");
        }
        catch (e){}
      }
    }
    return httprequest;
}

function createXml(str){
if(document.all){
var xmlDom=new ActiveXObject("Microsoft.XMLDOM")
xmlDom.loadXML(str)
return xmlDom
}
else
return new DOMParser().parseFromString(str, "text/xml")
}

  function showSchedule(sid,f){
   var url = "../schedule.do?operate=toFindById";
   var postStr = "uid=" + encodeURI(sid);

    //IE��览器关于频�J�传送数据初始化的问�?br />    httpRequest.open("POST", url, true);
   httpRequest.onreadystatechange = function(){
    if(httpRequest.readyState == 4)
     if(httpRequest.status == 200){
      var xml = createXml(httpRequest.responseText);
      var item = xml.getElementsByTagName("Schedule")[0];

      var scheduleId = item.getElementsByTagName("scheduleId")[0].firstChild.nodeValue;
      var title = item.getElementsByTagName("title")[0].firstChild.nodeValue;
      var schContent = item.getElementsByTagName("schContent")[0].firstChild.nodeValue;
      var address = item.getElementsByTagName("address")[0].firstChild.nodeValue;
      var ifPrivate = item.getElementsByTagName("ifPrivate")[0].firstChild.nodeValue;
      var createTime = item.getElementsByTagName("createTime")[0].firstChild.nodeValue;
      var beginTime = item.getElementsByTagName("beginTime")[0].firstChild.nodeValue;
      var endTime = item.getElementsByTagName("endTime")[0].firstChild.nodeValue;
      var meetingId = item.getElementsByTagName("meetingId")[0].firstChild.nodeValue;

      f.scheduleId.value = scheduleId;
      f.title.value = title;
      f.address.value = address;
      f.meetingId.value = meetingId;
      f.schContent.value = schContent;
      if(ifPrivate == 0)
       f.ifPrivate.checked = true;
      else
       f.ifPrivate.checked = false;

      f.beginTime.value = beginTime;
      f.endTime.value = endTime;
      f.option.value = "doModify";
     }
   }
   httpRequest.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
   httpRequest.send(postStr);
  }

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

dom4j-1.6.1.jar

import org.dom4j.Document;
import org.dom4j.DocumentHelper;
import org.dom4j.Element;

    Document doc = DocumentHelper.createDocument();
    Element node = doc.addElement("Depart");

    Element departId = node.addElement("departId");
    departId.setText(item.getDepartId().toString());
    Element branchId = node.addElement("branchId");
    branchId.setText(item.getBranchId().toString());
    Element departName = node.addElement("departName");
    departName.setText(item.getDepartName());
    Element principalUserId = node.addElement("principalUserId");
    principalUserId.setText(item.getPrincipalUserId().toString());
    Element connectTelNo = node.addElement("connectTelNo");
    connectTelNo.setText(item.getConnectTelNo());
    Element connectMobileTelNo = node.addElement("connectMobileTelNo");
    connectMobileTelNo.setText(item.getConnectMobileTelNo());
    Element faxes = node.addElement("faxes");
    faxes.setText(item.getFaxes());

    PrintWriter out = response.getWriter();
    out.println(doc.asXML());
    out.flush();
    out.close();

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

request.setContentType("text/xml");

httpRequest.resoponseXML;

===========================
利用函数格式�?POST ��h��参数

function addParam(paramObj, paramName, paramValue){
  if(paramObj.length > 0)
   paramObj += "&";
  return paramObj + encodeURIComponent(paramName)
   + "=" + encodeURIComponent(paramValue);
}

=============================================
javascript 里面的遍�?br />
for (pop in windowxxxx){
    .....
}

黄小�?/a> 2009-03-22 09:50 发表评论

属�?/th>	此事件发生在何时...	IE	F	O	W3C
onabort	囑փ�的加载被中断�?/td>	4	1	9	Yes
onblur	元素失去焦点�?/td>	3	1	9	Yes
onchange	域的内容被改变�?/td>	3	1	9	Yes
onclick	当用��L��L��个对象时调用的事件句柄�?/td>	3	1	9	Yes
ondblclick	当用户双��L��个对象时调用的事件句柄�?/td>	4	1	9	Yes
onerror	在加载文档或囑փ�时发生错误�?/td>	4	1	9	Yes
onfocus	元素获得焦点�?/td>	3	1	9	Yes
onkeydown	某个键盘按键被按下�?/td>	3	1	No	Yes
onkeypress	某个键盘按键被按下�ƈ村ּ��?/td>	3	1	9	Yes
onkeyup	某个键盘按键被松开�?/td>	3	1	9	Yes
onload	一张页面或一�q�图像完成加载�?/td>	3	1	9	Yes
onmousedown	鼠标按钮被按下�?/td>	4	1	9	Yes
onmousemove	鼠标被移动�?/td>	3	1	9	Yes
onmouseout	鼠标从某元素�U�d��?/td>	4	1	9	Yes
onmouseover	鼠标�U�d��某元素之上�?/td>	3	1	9	Yes
onmouseup	鼠标按键被松开�?/td>	4	1	9	Yes
onreset	重置按钮被点凅R�?/td>	4	1	9	Yes
onresize	�H�口或框架被重新调整大小�?/td>	4	1	9	Yes
onselect	文本被选中�?/td>	3	1	9	Yes
onsubmit	��认按钮被点凅R�?/td>	3	1	9	Yes
onunload	用户退出页面�?/td>	3	1	9	Yes

属�?/th>	描述	IE	F	O	W3C
altKey	�q�回当事件被触发�Ӟ��"ALT" 是否被按下�?/td>	6	1	9	Yes
button	�q�回当事件被触发�Ӟ��哪个鼠标按钮被点凅R�?/td>	6	1	9	Yes
clientX	�q�回当事件被触发�Ӟ��鼠标指针的水�q�_��标�?/td>	6	1	9	Yes
clientY	�q�回当事件被触发�Ӟ��鼠标指针的垂直坐标�?/td>	6	1	9	Yes
ctrlKey	�q�回当事件被触发�Ӟ��"CTRL" 键是否被按下�?/td>	6	1	9	Yes
metaKey	�q�回当事件被触发�Ӟ��"meta" 键是否被按下�?/td>	No	1	9	Yes
relatedTarget	�q�回与事件的目标节点相关的节炏V�?/td>	No	1	9	Yes
screenX	�q�回当某个事件被触发�Ӟ��鼠标指针的水�q�_��标�?/td>	6	1	9	Yes
screenY	�q�回当某个事件被触发�Ӟ��鼠标指针的垂直坐标�?/td>	6	1	9	Yes
shiftKey	�q�回当事件被触发�Ӟ��"SHIFT" 键是否被按下�?/td>	6	1	9	Yes

属�?/th>	描述
cancelBubble	如果事�g句柄想阻止事件传播到包容对象�Q�必��L��该属性设�?true�?/td>
fromElement	对于 mouseover �?mouseout 事�g�Q�fromElement 引用�U�d��鼠标的元素�?/td>
keyCode	对于 keypress 事�g�Q�该属性声明了被敲�ȝ��键生成的 Unicode 字符码。对�?keydown �?keyup 事�g�Q�它指定了被敲击的键的虚拟键盘码。虚拟键盘码可能和��用的键盘的布局相关�?/td>
offsetX,offsetY	发生事�g的地点在事�g源元素的坐标�pȝ��中的 x 坐标�?y 坐标�?/td>
returnValue	如果讄��了该属性，它的值比事�g句柄的返回��g��先��高。把�q�个属性设�\|��ؓ fasle�Q�可以取消发生事件的源元素的默认动作�?/td>
srcElement	对于生成事�g�?Window 对象、Document 对象�?Element 对象的引用�?/td>
toElement	对于 mouseover �?mouseout 事�g�Q�该属性引用移入鼠标的元素�?/td>
x,y	事�g发生的位�\|�的 x 坐标�?y 坐标�Q�它们相对于用CSS动态定位的最内层包容元素�?/td>

属�?/th>	描述	IE	F	O	W3C
bubbles	�q�回布尔��\|��指示事�g是否是�v泡事件类型�?/td>	No	1	9	Yes
cancelable	�q�回布尔��\|��指示事�g是否可拥可取消的默认动作�?/td>	No	1	9	Yes
currentTarget	�q�回其事件监听器触发该事件的元素�?/td>	No	1	9	Yes
eventPhase	�q�回事�g传播的当前阶�D�c�?/td>				Yes
target	�q�回触发此事件的元素�Q�事件的目标节点�Q��?/td>	No	1	9	Yes
timeStamp	�q�回事�g生成的日期和旉��?/td>	No	1	9	Yes
type	�q�回当前 Event 对象表示的事件的名称�?/td>	6	1	9	Yes

亚洲精品国产专区91在线,亚洲精品乱码久久久久久,久久亚洲精品高潮综合色a片

Javascript学习指南�Q�第2版）�W�记(�? DOM、Ajax及其数据

Javascript学习指南�Q�第2版）�W�记(�? ���览器对象、cookie

Javascript学习指南�Q�第2版）�W�记(�? 表单、表单事件及校验

事�g句柄 (Event Handlers)

创徏Tooltips�Ҏ��

动态添�?删除HTML元素

Ajax 寚w��面元素的操作

关于手写 Ajax

Javascript学习指南�Q�第2版）�W�记(�? ��览器对象、cookie

事�g句柄　(Event Handlers)