文档库
文档库 最新最全的文档下载
当前位置：文档库 › jQuery aja1

jQuery aja1

jQuery aja1
jQuery aja1

jQuery ajax ——一些细节以及主函数扩展出来的方法jQuery.ajaxSetup

我们可以从主函数看出，参数是通过jQuery.ajaxSetup产生的：

// 通过jQuery.ajaxSetup改造参数对象

s = jQuery.ajaxSetup( {}, options ),

那么jQuery.ajaxSetup在干些什么呢？

jQuery.ajaxSetup = function( target, settings ) {

// 如果有参数

return settings ?

// 创建一个设置对象，先将jQuery.ajaxSettings的属性放进去，

// 然后将参数也放进去

ajaxExtend( ajaxExtend( target, jQuery.ajaxSettings ), settings ) :

// 并将设置对象的属性放进jQuery.ajaxSettings对象里

ajaxExtend( jQuery.ajaxSettings, target );

};

ajaxExtend

ajaxExtend和jQuery.extend有一些不同，避免有些不需要深复制的属性进行深复制。

function ajaxExtend( target, src ) {

var key, deep,

flatOptions = jQuery.ajaxSettings.flatOptions || {};

// 遍历src对象中的所有key

for ( key in src ) {

// 如果值不是undefined

if ( src[ key ] !== undefined ) {

// 判断是不是不需要深复制的，如果不需要深复制，将属性直接写进target，

// 否则写进deep里存起来

// 我们可以从jQuery.ajaxSettings.flatOptions看到，

// 实际上不需要深复制的是url和context

( flatOptions[ key ] ? target : ( deep || (deep = {}) ) )[ key ] =src[ key ]; }

}

// 如果deep不是undefined，证明需要深复制

if ( deep ) {

// 开始深复制

jQuery.extend( true, target, deep );

}

// 返回target

return target;

}

ajaxHandleResponses

主体函数中response是通过ajaxHandleResponses来处理的：

// 得到响应数据

if ( responses ) {

// 通过ajaxHandleResponses处理数据

response = ajaxHandleResponses( s, jqXHR, responses );

}

我们来看看该函数干了些什么。

function ajaxHandleResponses( s, jqXHR, responses ) {

var ct, type, finalDataType, firstDataType,

contents = s.contents,

dataTypes = s.dataTypes,

responseFields = s.responseFields;

// 将responseXXX填入jqXHR指定位置，也就是responseXML或者responseText

// 其中jqXHR.xml对应responseXML，jqXHR.text对应responseText

for ( type in responseFields ) {

if ( type in responses ) {

jqXHR[ responseFields[type] ] = responses[ type ];

}

}

// 删除掉通配dataType，得到返回的Content-Type

while( dataTypes[ 0 ] === "*" ) {

dataTypes.shift();

if ( ct === undefined ) {

ct = s.mimeType || jqXHR.getResponseHeader("Content-Type");

}

}

// 看看是不是我们能处理的Content-Type，比如图片这类二进制类型就不好处理了

if ( ct ) {

// 实际上能处理的就是text、xml和json

for ( type in contents ) {

if ( contents[ type ] && contents[ type ].test( ct ) ) {

// 如果是这三种类型，则推入dataTypes里

dataTypes.unshift( type );

break;

}

}

}

// 如果dataTypes是我们想要的，也就是text、xml、json

if ( dataTypes[ 0 ] in responses ) {

// 则最终dataType就是这个了

finalDataType = dataTypes[ 0 ];

// 否则

} else {

// 尝试转换成我们要的dataType

for ( type in responses ) {

// 如果dataTypes[ 0 ]不存在，则直接用type作为最终dataType

// 否则，看看能不能转换，能的话就用type作为最终dataType

if ( !dataTypes[ 0 ] || s.converters[ type + " " + dataTypes[0] ] ) {

finalDataType = type;

break;

}

// 保存第一个type

if ( !firstDataType ) {

firstDataType = type;

}

}

// 用最终dataType或者用第一个type

finalDataType = finalDataType || firstDataType;

}

// 如果有最终dataType

if ( finalDataType ) {

// 如果最终dataType不是dataTypes[ 0 ]

if ( finalDataType !== dataTypes[ 0 ] ) {

// 将finalDataType推入dataTypes队列里

dataTypes.unshift( finalDataType );

}

// 返回responses对应的finalDataType数据

return responses[ finalDataType ];

}

}

jQuery.fn.load

实际上有两个jQuery.fn.load，一个是类似于onload的方法，另一个则是载入指定html页面。

前一个是jQuery.fn.on的简单扩展，而后面一个则是使用jQuery.ajax方法的扩展。

jQuery.fn.load = function( url, params, callback ) {

// 如果url不是string，且_load存在

// 证明这是onload方法，则调用保存的_load方法

if ( typeof url !== "string" && _load ) {

return _load.apply( this, arguments );

}

var selector, type, response,

self = this,

off = url.indexOf(" ");

// 看看是不是载入指定元素，比如参数是'ajax/test.html #container'

if ( off >= 0 ) {

// 分隔出需要载入的元素

selector = url.slice( off, url.length );

// 分隔出真正的url

url = url.slice( 0, off );

}

// 模拟重载

if ( jQuery.isFunction( params ) ) {

// 如果是函数那么就当这个是回调函数

callback = params;

params = undefined;

// 如果参数是objects，那么定义type是POST

} else if ( params && typeof params === "object" ) {

type = "POST";

}

// 如果有需要修改的元素，开始请求

if ( self.length > 0 ) {

jQuery.ajax({

url: url,

// 如果type为undefined，那么就会缺省为GET方法

type: type,

dataType: "html",

data: params

// 完成后回调

}).done(function( responseText ) {

// 保存reponse

response = arguments;

// 对元素写入html

// 如果selector存在

self.html( selector ?

// 先用一个div来存储整个html页面的DOM，在找到selector的相关html jQuery("

").append( jQuery.parseHTML( responseText ) ).find( selector ) :

// 否则直接用responseText

responseText );

// 如果回调函数存在，则回调

}).complete( callback && function( jqXHR, status ) {

self.each( callback, response || [ jqXHR.responseText, status, jqXHR ] );

});

}

return this;

};

jQuery.get & jQuery.post

这两个方法实际上就是通过jQuery.ajax扩展而来的。

// 加上get和post方法

jQuery.each( [ "get", "post" ], function( i, method ) { // jQuery.get或jQuery.post为

jQuery[ method ] = function( url, data, callback, type ) { // 模拟重载

if ( jQuery.isFunction( data ) ) {

type = type || callback;

callback = data;

data = undefined;

}

// 利用jQuery.ajax完成任务

return jQuery.ajax({

url: url,

type: method,

dataType: type,

data: data,

success: callback

});

};

});

jQuery.getScript & jQuery.getJSON

jQuery.getScript和jQuery.getJSON则是由jQuery.get扩展而来的。

jQuery.getScript = function( url, callback ) {

return jQuery.get( url, undefined, callback, "script" ); };

jQuery.getJSON = function( url, data, callback ) { return jQuery.get( url, data, callback, "json" );

}

js和jquery获取父级元素、子级元素、兄弟元素的方法

原文地址：js和jquery获取父级元素、子级元素、兄弟元素的方法作者：草根gis 先说一下JS的获取方法，其要比JQUERY的方法麻烦很多，后面以JQUERY的方法作对比。 JS的方法会比JQUERY麻烦很多，主要则是因为FF浏览器，FF浏览器会把你的换行也当最DOM元素 原生的JS获取ID为test的元素下的子元素。可以用： var a = docuemnt.getElementById("test").getElementsByTagName_r("div"); 这样是没有问题的 此时a.length=2； 但是如果我们换另一种方法 var b =document.getElementByIdx_x("test").childNodes; 此时b.length 在IE浏览器中没问题，其依旧等于2，但是在FF浏览器中则会使4，是因为FF把换行也当做一个元素了。 所以，在此，我们就要做处理了，需遍历这些元素，把元素类型为空格而且是文本都删除。 functiondel_ff(elem){ varelem_child = elem.childNodes; for(vari=0; i< p=""> if(elem_child[i].nodeName == "#text" && !/s/.test(elem_child.nodeValue)) {elem.removeChild(elem_child)

} } } 上述函数遍历子元素，当元素里面有节点类型是文本并且文本类型节点的节点值是空的。就把他删除。 nodeNames可以得到一个节点的节点类型，/s/是非空字符在JS里的正则表达式。前面加！,则表示是空字符 test() 方法用于检测一个字符串是否匹配某个模式.语法是：RegExpObject.test(string) 如果字符串string 中含有与RegExpObject 匹配的文本，则返回true，否则返回false。 nodeValue表示得到这个节点里的值。 removeChild则是删除元素的子元素。 之后，在调用子，父，兄，这些属性之前，调用上面的函数把空格清理一下就可以了 下面介绍JQUERY的父，子，兄弟节点查找方法 jQuery.parent(expr) 找父亲节点，可以传入expr进行过滤，比如$("span").parent()或者$("span").parent(".class") jQuery.parents(expr),类似于jQuery.parents(expr),但是是查找所有祖先元素，不限于父元素

jQuery选择题

1.以下关于jQuery的描述错误的是（）。（选一项） A、jQuery 是一个 JavaScript 函数库 B、jQuery 极大地简化了 JavaScript 编程 C、jQuery 的宗旨是“write less，do more” D、jQuery的核心功能不是根据选择器查找HTML元素，然后对这些元素执行相应的操作 2.在jQuery中，下列关于文档就绪函数的写法错误的是（）。（选一项） A、$(document).ready(function() { }); B、$(function() { }); C、$(document)(function() { }); D、$().ready(function() { }); 3.以下（）选项不能够正确地得到这个标签：（选一项） A、$("#btnGo") B、$(".btnGo") C、$(".btn") D、$("input[type='button']") 4.在HTML页面中有如下结构的代码：

请问下列选项（）所示jQuery代码，不能够让汉字“四”的颜色变成红色。（选一项） A、$("#header ul li:eq(3)").css("color","red"); B、$("#header li:eq(3)").css("color","red"); C、$("#header li:last").css("color","red"); D、$("#header li:gt(3)").css("color","red"); 5.在HTML页面中有如下结构的代码：

侵权投诉  © 2013-2023 www.wendangku.net  站点地图 | 手机版

闽ICP备11023808号-7  本站文档均来自互联网及网友上传分享，本站只负责收集和整理，有任何问题可通过上访投诉通道进行反馈