我的JQUERY之旅~~~

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    
<title>Hello World jQuery!</title>
    
<script type="text/javascript" src="scripts/jquery-1.3.2-vsdoc2.js"></script>
</head>
<body>
    
<div id="divMsg">Hello World!</div>
    
<input id="btnShow" type="button" value="显示" />
    
<input id="btnHide" type="button" value="隐藏" /><br />
    
<input id="btnChange" type="button" value="修改内容为 Hello World, too!" />
    
<script type="text/javascript" >
        $(
"#btnShow").bind("click"function(event) $("#divMsg").show(); });
        $(
"#btnHide").bind("click"function(event) $("#divMsg").hide(); });
        $(
"#btnChange").bind("click"function(event) $("#divMsg").html("Hello World, too!"); });      
    
</script>
</body>
</html>

我的JQUERY之旅~~~

1,Dom转jQuery包装集

如果要使用jQuery提供的函数,  就要首先构造jQuery包装集.  我们可以使用本文即将介绍的jQuery选择器直接构造jQuery包装集,比如:

$("#testDiv");
上面语句构造的包装集只含有一个id是testDiv的元素.
或者我们已经获取了一个Dom元素,比如:
var div = document.getElementByIdx_x("testDiv");
上面的代码中div是一个Dom元素, 我们可以将Dom元素转换成jQuery包装集:
var domToJQueryObject = $(div);
 //$是jQuery对象的引用:
2,将元素添加到对象上
我们可以使用上面两种方式创建一个而元素, 但是上面已经提到一定不要在页面加载时就改变页面的DOM结构, 比如添加一个元素. 正确的做法是在页面加载完毕后添加或删除元素.
传统上, 使用window.onload完成上述目的:
//DOM加载完毕后添加元素
//传统方法
window.onload = function() { testDiv.innerHTML = "<div style=\"border:solid 1px #FF0000\">动态创建的div</div>"; }
 

解决办法就是等DOM被解析后, 在图像和外部资源加载之前执行我们的函数.在jQuery中让这一实现变得可行:
//jQuery 使用动态创建的$(document).ready(function)方法
$(document).ready(
        function() { testDiv.innerHTML = "<div style=\"border:solid 1px #FF0000\">使用动态创建的$(document).ready(function)方法</div>"; }
);


或者使用简便语法:
//jQuery 使用$(function)方法
$(
        function() { testDiv.innerHTML += "<div style=\"border:solid 1px #FF0000\">使用$(function)方法</div>"; }
);
3,事件与事件对象
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    
<title>javascript中的事件</title>

    
<script type="text/javascript" src="scripts/jquery-1.3.2-vsdoc2.js"></script>

    
<script type="text/javascript">
        $(
function()
        {
            document.getElementByIdx_x(
"testDiv2").onclick = showMsg;
        })

        
function showMsg(event)
        {
            alert(
"!!!");
               
    
</script>
</head>
<body>
    
<div id="testDiv1" onclick="showMsg();">单击事件 1</div>
    
<div id="testDiv2">单击事件 2</div>
</body>
</html>

IE中,事件对象是window对象的一个属性.事件处理函数必须这样访问事件对象:

        obj.οnclick=function()
        {
            var oEvent = window.event;
        }

在DOM标准中,事件对象必须作为唯一参数传给事件处理函数:

        obj.οnclick=function()
        {
            var oEvent = arguments[0];
        }

除了使用argument[0]访问此参数, 我们也可以指定参数名称,上面的代码等同于:

        obj.οnclick=function(oEvent)
        {
            
        }

目前兼容DOM的浏览器有Firefox,Safari,Opera,IE7等.


4,jQuery中的事件

事件处理  Event Handling:bind,

$("p").bind("click", function(){
  alert( $(this).text() );
});

名称说明举例

bind( type, [data], fn )

为每一个匹配元素的特定事件(像click)绑定一个事件处理器函数。当每个段落被点击的时候,弹出其文本:

$("p").bind("click", function(){
  alert( $(this).text() );
});

one( type, [data], fn ) 为每一个匹配元素的特定事件(像click)绑定一个一次性的事件处理函数。当所有段落被第一次点击的时候,显示所有其文本:

$("p").one("click", function(){
  alert( $(this).text() );
});

trigger( event, [data] )在每一个匹配的元素上触发某类事件。

这个函数也会导致浏览器同名的默认行为的执行。比如,如果用trigger()触发一个'submit',则同样会导致浏览器提交表单。如果要阻止这种默认行为,应返回false。

你也可以触发由bind()注册的自定义事件

给一个事件传递参数:

$("p").click( function (event, a, b) {
  // 一个普通的点击事件时,a和b是undefined类型
  // 如果用下面的语句触发,那么a指向"foo",而b指向"bar"
} ).trigger("click", ["foo", "bar"]);

triggerHandler( event, [data] ) 这个特别的方法将会触发指定的事件类型上所有绑定的处理函数。但不会执行浏览器默认动作.如果你对一个focus事件执行了 .triggerHandler() ,浏览器默认动作将不会被触发,只会触发你绑定的动作:

$("#old").click(function(){
  $("input").trigger("focus");
});
$("#new").click(function(){
  $("input").triggerHandler("focus");
});
$("input").focus(function(){   $("<span>Focused!</span>").appendTo("body").fadeOut(1000); });

unbind( type, fn )bind()的反向操作,从每一个匹配的元素中删除绑定的事件。

如果没有参数,则删除所有绑定的事件。

你可以将你用bind()注册的自定义事件取消绑定。

如果提供了事件类型作为参数,则只删除该类型的绑定事件。

如果把在绑定时传递的处理函数作为第二个参数,则只有这个特定的事件处理函数会被删除。

把所有段落的所有事件取消绑定:
$("p").unbind()

将段落的click事件取消绑定:
$("p").unbind( "click" )

删除特定函数的绑定,将函数作为第二个参数传入:

var foo = function () {
  // 处理某个事件的代码
};
$("p").bind("click", foo); // ... 当点击段落的时候会触发 foo
$("p").unbind("click", foo); // ... 再也不会被触发 foo

bind( type, [data], fn )

为每一个匹配元素的特定事件(像click)绑定一个事件处理器函数。当每个段落被点击的时候,弹出其文本:

$("p").bind("click", function(){
  alert( $(this).text() );
});

5,jQuery中的Ajax应用

bind( type, [data], fn )

为每一个匹配元素的特定事件(像click)绑定一个事件处理器函数。当每个段落被点击的时候,弹出其文本:

$("p").bind("click", function(){
  alert( $(this).text() );
});

bind( type, [data], fn )

为每一个匹配元素的特定事件(像click)绑定一个事件处理器函数。当每个段落被点击的时候,弹出其文本:

$("p").bind("click", function(){
  alert( $(this).text() );
});

bind( type, [data], fn )

为每一个匹配元素的特定事件(像click)绑定一个事件处理器函数。当每个段落被点击的时候,弹出其文本:

$("p").bind("click", function(){
  alert( $(this).text() );
});

bind( type, [data], fn )

为每一个匹配元素的特定事件(像click)绑定一个事件处理器函数。当每个段落被点击的时候,弹出其文本:

$("p").bind("click", function(){
  alert( $(this).text() );
});

bind( type, [data], fn )

为每一个匹配元素的特定事件(像click)绑定一个事件处理器函数。当每个段落被点击的时候,弹出其文本:

$("p").bind("click", function(){
  alert( $(this).text() );
});

bind( type, [data], fn )

为每一个匹配元素的特定事件(像click)绑定一个事件处理器函数。当每个段落被点击的时候,弹出其文本:

$("p").bind("click", function(){
  alert( $(this).text() );
});

bind( type, [data], fn )

为每一个匹配元素的特定事件(像click)绑定一个事件处理器函数。当每个段落被点击的时候,弹出其文本:

$("p").bind("click", function(){
  alert( $(this).text() );
});

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    
<title>jQuery Ajax</title>
    
<script type="text/javascript" src="scripts/jquery-1.3.2-vsdoc2.js"></script>
    
<script type="text/javascript">
        $(
function()
                   
            $(
"#btnGetHtml").click(function(event)
            {
                $(
"#divResult").load("data/AjaxGetCityInfo.aspx""resultType""html" });
            });       
        })        
    
</script>
</head>
<body>    
    
<button id="btnAjaxJquery">使用jQuery的load方法</button>
    
<br />
    
<div id="divResult"></div>
</body>
</html>

使用原始Ajax, 我们需要做较多的事情, 比如创建XmlHttpRequest对象,  判断请求状态, 编写回调函数等.

而用jQuery的Load方法, 只需要一句话:

$("#divResult").load("data/AjaxGetCityInfo.aspx", { "resultType": "html" })

(1)  load( url, [data], [callback] )

Returns: jQuery包装集

说明:

load方法能够载入远程 HTML 文件代码并插入至 DOM 中。

默认使用 GET 方式, 如果传递了data参数则使用Post方式.

- 传递附加参数时自动转换为 POST 方式。jQuery 1.2 中,可以指定选择符,来筛选载入的 HTML 文档,DOM 中将仅插入筛选出的 HTML 代码。语法形如 "url #some > selector", 默认的选择器是"body>*".

讲解:

load是最简单的Ajax函数, 但是使用具有局限性:

  1. 它主要用于直接返回HTML的Ajax接口
  2. load是一个jQuery包装集方法,需要在jQuery包装集上调用,并且会将返回的HTML加载到对象中, 即使设置了回调函数也还是会加载.

不过不可否认load接口设计巧妙并且使用简单.下面通过示例来演示Load接口的使用:

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    
<title>jQuery Ajax Load</title>

    
<script type="text/javascript" src="../scripts/jquery-1.3.2-vsdoc2.js"></script>

    
<script type="text/javascript">
        $(
function()
        {
            $(
"#btnAjaxGet").click(function(event)
            {
                
//发送Get请求
                $("#divResult").load("../data/AjaxGetMethod.aspx?param=btnAjaxGet_click" + "&timestamp=" + (new Date()).getTime());
            });

            $(
"#btnAjaxPost").click(function(event)
            {
                
//发送Post请求
                $("#divResult").load("../data/AjaxGetMethod.aspx""param""btnAjaxPost_click" });
            });

            $(
"#btnAjaxCallBack").click(function(event)
            {
                
//发送Post请求, 返回后执行回调函数.
                $("#divResult").load("../data/AjaxGetMethod.aspx""param""btnAjaxCallBack_click" }, function(responseText, textStatus, XMLHttpRequest)
                {
                    responseText 
= " Add in the CallBack Function! <br/>" + responseText
                    $(
"#divResult").html(responseText); //或者: $(this).html(responseText);
                });
            });

            $(
"#btnAjaxFiltHtml").click(function(event)
            {
                
//发送Get请求, 从结果中过滤掉 "鞍山" 这一项
                $("#divResult").load("../data/AjaxGetCityInfo.aspx?resultType=html" + "&timestamp=" + (new Date()).getTime() + " ul>li:not(:contains('鞍山'))");
            });

        })
    
</script>

</head>
<body>    
    
<button id="btnAjaxGet">使用Load执行Get请求</button><br />
    
<button id="btnAjaxPost">使用Load执行Post请求</button><br />
    
<button id="btnAjaxCallBack">使用带有回调函数的Load方法</button><br />
    
<button id="btnAjaxFiltHtml">使用selector过滤返回的HTML内容</button>
    
<br />
    
<div id="divResult"></div>
</body>
</html>

提示:我们要时刻注意浏览器缓存,  当使用GET方式时要添加时间戳参数 (net Date()).getTime() 来保证每次发送的URL不同, 可以避免浏览器缓存.

提示: 当在url参数后面添加了一个空格, 比如"  "的时候, 会出现"无法识别符号"的错误, 请求还是能正常发送. 但是无法加载HTML到DOM. 删除后问题解决.

(2). jQuery.get( url, [data], [callback], [type] ) 

Returns: XMLHttpRequest

说明:

通过远程 HTTP GET 请求载入信息。

这是一个简单的 GET 请求功能以取代复杂 $.ajax 。请求成功时可调用回调函数。如果需要在出错时执行函数,请使用 $.ajax。

讲解:

此函数发送Get请求, 参数可以直接在url中拼接, 比如:

$.get("../data/AjaxGetMethod.aspx?param=btnAjaxGet_click");

或者通过data参数传递:

$.get("../data/AjaxGetMethod.aspx", { "param": "btnAjaxGet2_click" });

两种方式效果相同, data参数会自动添加到请求的url中

如果url中的某个参数, 又通过data参数传递, 不会自动合并相同名称的参数.

回调函数的签名如下

function (data, textStatus) {
  
// data could be xmlDoc, jsonObj, html, text, etc
  this// the options for this ajax request
}

其中data是返回的数据, testStatus表示状态码, 可能是如下值:

"timeout","error","notmodified","success","parsererror"
在回调函数中的this是获取options对象的引用.有关options的各种说明, 请参见:
http://docs.jquery.com/Ajax/jQuery.ajax#options
 type参数是指data数据的类型, 可能是下面的值:
"xml", "html", "script", "json", "jsonp",  "text".
默认为"html".

jQuery.getJSON( url, [data], [callback] ) 方法就相当于 jQuery.get(url, [data],[callback], "json")

(3). jQuery.getJSON( url,  [data], [callback] )

Returns: XMLHttpRequest

相当于:   jQuery.get(url, [data],[callback], "json")

说明:

通过 HTTP GET 请求载入 JSON 数据。

在 jQuery 1.2 中,您可以通过使用JSONP 形式的回调函数来加载其他网域的JSON数据,如 "myurl?callback=?"。jQuery 将自动替换 ? 为正确的函数名,以执行回调函数。

注意:此行以后的代码将在这个回调函数执行前执行。

讲解:

getJSON函数仅仅将get函数的type参数设置为"JSON"而已. 在回调函数中获取的数据已经是按照JSON格式解析后的对象了:

$.getJSON("../data/AjaxGetCityInfo.aspx""resultType""json" }, function(data, textStatus)
{
      alert(data.length);
      alert(data[
0].CityName);
});

服务器端返回的字符串如下:

[{""pkid"":""0997"",""ProvinceId"":""XJ"",""CityName"":""阿克苏"",""CityNameEn"":""Akesu"",""PostCode"":""843000"",""isHotCity"":false},
 {""pkid"":""0412"",""ProvinceId"":""LN"",""CityName"":""鞍山"",""CityNameEn"":""Anshan"",""PostCode"":""114000"",""isHotCity"":false}]
 
 

(4).jQuery.getScript( url, [callback] )


Returns: XMLHttpRequest
相当于:   jQuery.get(url, null, [callback], "script")
说明:
通过 HTTP GET 请求载入并执行一个 JavaScript 文件。
jQuery 1.2 版本之前,getScript 只能调用同域 JS 文件。 1.2中,您可以跨域调用 JavaScript 文件。注意:Safari 2 或更早的版本不能在全局作用域中同步执行脚本。如果通过 getScript 加入脚本,请加入延时函数。
讲解:
以前我使用dojo类库时官方默认的文件不支持跨域最后导致我放弃使用dojo(虽然在网上找到了可以跨域的版本, 但是感觉不够完美).  所以我特别对这个函数的核心实现和使用做了研究.
首先了解此函数的jQuery内部实现, 仍然使用get函数, jQuery所有的Ajax函数包括get最后都是用的是jQuery.ajax(), getScript将传入值为"script"的type参数,  最后在Ajax函数中对type为script的请求做了如下处理:
var head = document.getElementsByTagName_r("head")[0];            
var script = document.createElement_x("script");
script.src = s.url;
上面的代码动态建立了一个script语句块, 并且将其加入到head中:
head.appendChild(script);


当脚本加载完毕后, 再从head中删除:
            // Handle Script loading
            if ( !jsonp ) {
                var done = false;

                // Attach handlers for all browsers
                script.onload = script.onreadystatechange = function(){
                    if ( !done && (!this.readyState ||
                            this.readyState == "loaded" || this.readyState == "complete") ) {
                        done = true;
                        success();
                        complete();

                        // Handle memory leak in IE
                        script.onload = script.onreadystatechange = null;
                        head.removeChild( script );
                    }
                };
            }

$("#btnAjaxGetJSON").click(function(event)
            {
                $.getScript(
"../scripts/getScript.js"function(data, textStatus)
                {
                    alert(data);
                    alert(textStatus);
                    alert(
this.url);
                });
            });

            $(
"#btnAjaxGetJSONXSS").click(function(event)
            {
                $.getScript(
"http://resource.elong.com/getScript.js"function(data, textStatus)
                {
                    alert(data);
                    alert(textStatus);
                    alert(
this.url);
                });
            });

(5). jQuery.post( url, [data], [callback], [type] )

Returns: XMLHttpRequest

说明:

通过远程 HTTP POST 请求载入信息。

这是一个简单的 POST 请求功能以取代复杂 $.ajax 。请求成功时可调用回调函数。如果需要在出错时执行函数,请使用 $.ajax。

讲解:

具体用法和get相同, 只是提交方式由"GET"改为"POST".


(6). jQuery.ajax( options )

Returns: XMLHttpRequest

说明:

通过 HTTP 请求加载远程数据。

jQuery 底层 AJAX 实现。简单易用的高层实现见 $.get, $.post 等。

$.ajax() 返回其创建的 XMLHttpRequest 对象。大多数情况下你无需直接操作该对象,但特殊情况下可用于手动终止请求。

$.ajax() 只有一个参数:参数 key/value 对象,包含各配置及回调函数信息。详细参数选项见下。

注意: 如果你指定了 dataType 选项,请确保服务器返回正确的 MIME 信息,(如 xml 返回 "text/xml")。错误的 MIME 类型可能导致不可预知的错误。见 Specifying the Data Type for AJAX Requests

注意:如果dataType设置为"script",那么所有的远程(不在同一域名下)的POST请求都将转化为GET请求。(因为将使用DOM的script标签来加载)

jQuery 1.2 中,您可以跨域加载 JSON 数据,使用时需将数据类型设置为 JSONP。使用 JSONP 形式调用函数时,如 "myurl?callback=?" jQuery 将自动替换 ? 为正确的函数名,以执行回调函数。数据类型设置为 "jsonp" 时,jQuery 将自动调用回调函数。

讲解:

这是jQuery中Ajax的核心函数, 上面所有的发送Ajax请求的函数内部最后都会调用此函数.options参数支持很多参数, 使用这些参数可以完全控制ajax请求. 在Ajax回调函数中的this对象也是options对象.

因为平时使用最多的还是简化了的get和post函数, 所以在此不对options参数做详细讲解了. options参数文档请见:

http://docs.jquery.com/Ajax/jQuery.ajax#options


  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值