分类存档: jquery

jQuery1.5的改进细节

jQuery 1.5 beta1出来了,从学习跟进上来说,这一次已经比较晚了(我竟然不知道1.5什么时候出的alpha,就这么beta了)。

这个1.5版本最大的更新是AJAX的完全重写,提供了更强的可扩展性。但是受制于精力和篇幅,对新的AJAX的分析还是放到下回,本篇先简单介绍一下细节方面的改进。

jQuery._Deferred和jQuery.Deferred

首先不得不说这两个新生事物,因为他们是作为基础设施存在,不把这两个东西讲明白了,有些问题根本没办法解释。

首先,jQuery.Deferred是jQuery._Deferred的增强版,因此对于这个问题,从jQuery._Deferred入手,就能说明一大半的问题。

什么是Deferred?从字面上看,我的第一反应是“延迟加载”,首字母大写的应该是“类型”的定义,所以这大概是一个“透明提供延迟加载功能”的类型吧。然而实际上,虽然确实带有那么一点点“延迟”的意思,这个东西却不是用来实现延迟加载的。

简单来说,jQuery._Deferred是一个函数队列,他的作用有以下几点:

  • 保存若干个函数。
  • 在特定的时刻把保存着的函数全部执行掉。
  • 执行过后,新进来的函数会立刻执行。

感觉是不是和啥东西很像?对,jQuery的ready函数就是这样的逻辑,实际中jQuery 1.5中的ready函数也确实被嫁接到这上面去了。

jQuery._Deferred提供下面的接口:

  • done:function(fn1, fn2, …)的形式,用于把函数添加到队列中。
  • fire:function(context, args)的形式,使用context指定this对象,args指定参数,调用队列中所有函数。fire被调用后,_Deferred会进入isResolved状态,未来对done的调用不会再保存函数,而是直接调用函数。
  • resolve:相当于调用fire(this, arguments),一个简化的方法。
  • isResolved:用来判断_Deferred是否在isResolved状态,具体参考前面的fire函数的解释。
  • cancel:取消掉整个队列,这样不管未来是不是fire,队列中的函数都不会再被调用。

说明白了jQuery._Deferred,再来看看jQuery.Deferred。这个东西其实就是2个_Deferred组成的,第一个称为deferred,用于保管“正常”状态下的函数;第二个称为failDeferred,用于保管“出错”状态下的函数。同时jQuery.Deferred提供了一些新的接口:

  • then:function(done, fail)的形式,把done添加进deferred,把fail添加进failedDeferred。
  • fail:相当于failDeferred的done函数。
  • fireReject:相当于failDeferred的fire函数。
  • reject:相当于failDeferred的resolve函数。
  • isRejected:相当于failDeferred的isResolved函数。

同时jQuery.Deferred取消了cancel函数。

那么这个是啥用的呢?有“正常”和“出错”2个状态,同时又是异步的,很容易就能想到……对,给AJAX用的,在下一篇分析中再详细说明。

jQuery.ready的变化

因为有了jQuery._Deferred这个东西,jQuery.ready函数变成依赖于函数队列,具体的变化有:

原来的readyList变量已经不再是一个数组,而变成了jQuery._Deferred对象。

原本在DOMContentLoaded时,调用readList中所有函数的逻辑,现在也使用了jQuery._Deferred中,原来的代码:

while ( (fn = ready[ i++ ]) ) {
    fn.call( document, jQuery );
}

变成了:

readyList.fire( document , [ jQuery ] );

jQuery.parseXML函数

新增了静态函数jQuery.parseXML,用于提供浏览器兼容的从字符串转为XML文档的功能。

该函数的逻辑网上有很多,jQuery也没有特别的地方,大致分为以下2种:

  • 对于标准浏览器,使用DOMParser对象:
    var parser = new DOMParser();
    var xml = parser.parseFromString(text, 'text/html');
  • 对于IE,使用Microsoft.XMLDOM对象:
    var parser = new ActiveXObject('Microsoft.XMLDOM');
    parser.async = 'false';
    parser.loadXML(text);
    var xml = parser.documentElement;

data部分

添加了jQuery.hasData函数,用于判断一个元素是否有jQuery附加上去的数据。

修改了jQuery.expando的实现,在原来单纯地取当前时间的基础上,添加了一个随机数:

expando = "jQuery" + ( jQuery.fn.jquery + Math.random() ).replace( /\D/g, "" );

这样保证在同一时间,引入多个jQuery副本,这几个副本之间的expando不会相互冲突,导致元素上的data变得错乱。一般来说,是不会引入多个jQuery副本的,但是使用SealJS等的时候,配置不当的话,也是很容易出现此类问题的。

DOM操作部分

原本的hasClass、addClass、removeClass函数都需要将元素的class属性分隔为数组,在1.4.4版本中,通过\n或\t进行分隔,在1.5中增加了一个\r,用于对应Windows平台下的换行符(\r\n)。

jQuery.fn.attr函数,1.4.4版本中拒绝从TextNode和CommentNode上获取属性,在1.5版本中添加了一个AttributeNode(noteType == 2)。

在1.4.4版本中,jQuery会在页面unload的时候清理掉由jQuery维护的所有DOM事件,这是为了避免IE的内存泄露问题。但是在1.5中这一段代码不见了,不知是出于什么考虑。

对于IE下使用cloneNode复制节点,会将事件也一起复制过来的问题,1.4.4中是采取复制innerHTML的方式给予解决,而在1.5中则采纳了mootools团队提供的方法,使用cloneFixAttribute函数修正该问题。

cloneFixAttribute函数们于jQuery 1.5 beta1源码文件的5388-5438行,处理IE的BUG的原理很简单,当然前端里一些看似简单的东西,都是很难发现的:

  1. IE中有个叫clearAttributes的函数,会清除到节点上的所有属性,顺便把和事件相关的onclick之类的属性也去掉了。在复制出来的节点上调用这个函数,就会把属性清得干干净净。
  2. IE中还有一个叫mergeAttributes的函数,把一个节点的属性复制到另一个节点上,但他不会把和事件相关的属性复制过去。所以再把原始节点调用mergeAttributes,把属性重新放回复制出来的节点上,这就相当于起到了去除事件相关属性的作用。

另外cloneFixAttribute函数还处理了非常多IE6-8在cloneNode上的兼容性问题,非常值得详细研究。

AJAX部分

AJAX已经完全重写了,只留下一点边边角角保留着1.4.4版本的风采,这里只抽取一部分进行简单的说明。

原来版本中$.get和$.post的实现非常相似,具体来说仅有一个method配置项不同,因此在1.5版本中被合并起来了:

$.each(['get', 'post'], function(i, method) {
    $[method] = function() { ... };
});

ajaxSetup函数现在加了一行return this;,可以链式调用了。

serializeArray函数现在统一将value中的换行符替换成Windows的风格(\r\n)。

AJAX的回调函数中,作为参数的对象不再是原生的XMLHTTPRequest,而是jQuery自己封装的称为jXHR的对象,这个对象提供了XMLHTTPRequest的常用接口。

原本对于“请求成功”的浏览器状态码,除200-299以及304外,还有一个1223,来自于IE的一个BUG,会将204的状态码变成1223。现在因为有了jXHR对象,相当于中间多了一层,因此从jXHR对象获取statusCode不会出现1223的情况,已经被变回204了。

jQuery.ajax函数的配置项中多了一个statusCode项,其结构为map,用于指定返回特定状态码时的回调函数,大致形式如下:

jQuery.ajax({
    url: 'xxx',
    statusCode: {
        200: function() { 处理请求成功 },
        404: function() { 处理页面未找到 },
        503: function() { 处理Service Unavailable }
    }
});

再添加了这个回调后,jQuery.ajax函数已经有非常多的回调函数,其触发过程如下:

  1. 根据返回的状态码,触发success或者error回调。
  2. 根据状态码,触发对应的statusCode回调。
  3. 触发complete回调。
  4. 触发全局ajaxComplete回调。
  5. 如果此时没有正在执行的AJAX,触发全局ajaxStop回调。

其他细节

入口函数jQuery.fn.init现在多了一个参数,值始终为rootjQuery,用于加速init函数中对rootjQuery变量的查找速度(减少了一层作用域):

//jQuery 1.5 beta1 源码23行
jQuery = function( selector, context ) {
    // The jQuery object is actually just the init constructor 'enhanced'
    return new jQuery.fn.init( selector, context, rootjQuery );
}

jQuery对象支持继承了,具体的修改是将几处直接调用jQuery的代码改为了对this.constructor的调用:

202行:return this.constructor( context ).find( selector );
253行:var ret = this.constructor();
334行:return this.prevObject || this.constructor(null);

同时还提供了jQuery.subclass函数用于创建一个继承自jQuery的类型,由于不是很常用jQuery,更是从来没有用到过需要继承jQuery的情况,因此也不方便说这个功能的作用有多大。

原文地址:http://www.otakustay.com/jquery-1-5-enhanced-detail/

jQuery 1.5发布 Ajax模块重写

美国时间1月31日John Resig在jQuery官方博客发表文章,宣布jQuery 1.5正式版已经如期开发完成,可以下载使用。压缩版本jQuery Minified 29KB,不压缩版本jQuery Regular(用于阅读和调试)207KB。由于jQuery已经成为目前最流行的JavaScript库,得到广泛的支持,新版本的发布当然非常引人注目。

jQuery创始人John Resig在CSDN TUP活动上演讲(相关报道

另外,微软和Google也为jQuery 1.5提供了CDN支持,可以直接导入:

微软:http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.5.min.js

Google:https://ajax.googleapis.com/ajax/libs/jquery/1.5.0/jquery.min.js (发稿时为止尚未上线)

新版本的主要改进可以参见变更日志:http://api.jquery.com/category/version/1.5/

John Resig总结了几点比较引人注目的变化。

1. Ajax重写

Ajax模块完全进行了重写。新增一个jXHR对象,为不同浏览器内置的XMLHttpRequest提供了一致的超集。对于XMLHttpRequest之外的传输机制,比如JSONP请求,jXHR对象也可以进行处理。(详情可以参见:jQuery.ajax文档

此外,系统的可扩展性大大增强,可以附加各种数据处理器、过滤器和传输机制,为开发新的Ajax插件提供了方便。(详情参见:Ajax扩展文档

2. 延迟对象

延迟对象(Deferred Object,jQuery.Deferred对象)是一个可链接的(chainable)实用工具对象,实现了Promise接口,可以在回调队列中注册多个回调、调用回调队列并转发任何同步/异步函数的成败状态。正如Using Deferreds in jQuery 1.5一文中说明的,其结果是在jQuery中能够将依赖于某个任务(事件)结果的逻辑与任务本身解耦了。这一点在JavaScript中其实并不新鲜,Mochikit和Dojo等已经实现有些日子了。由于jQuery 1.5的Ajax模块内置使用了延迟对象,因此现在通过jQuery编写Ajax程序将自动获得这一功能。

开发人员借此可以使用无法立即获得的返回值(如异步Ajax请求的返回结果),而且第一次能够附加多个事件处理器。

例如,使用了新的jQuery内部Ajax API就可以实现下面的代码了:

// Assign handlers immediately after making the request,
// and remember the jxhr object for this request
var jxhr = $.ajax({ url: "example.php" })
    .success(function() { alert("success"); })
    .error(function() { alert("error"); })
    .complete(function() { alert("complete"); });

// perform other work here ...

// Set another completion function for the request above
jxhr.complete(function(){ alert("second complete"); });

此外,使用jQuery.Deferred还可以开发自己的延迟对象。更多详情参见:延迟对象文档。 

3. jQuery.sub()

jQuery 1.5提供了一种创建和修改jQuery副本的方式。可以用来添加不向外部公开的方法,或者对jQuery的某些方法进行重新定义以提供新功能,或者提供更好的封装、避免名称空间冲突。当然,也可以用来开发插件,但Resig强烈建议在开发插件之前,先考虑jQuery UI widget工厂。

值得注意的是,sub函数并不提供真正的隔离,所有方法、数据、调用仍然依靠jQuery本身来支持。

4. 遍历性能提高

在新版本中.children(), .pre(), .next()几个常用的遍历函数性能有了显著提高。比如.children()的数据如下所示:

详细的测试用例和数据可以参考这里

5. 内部开发系统

John Resig还特别提到了jQuery团队内部开发系统的两点改变:一是服务器端用Node.js替换了老的Java/Rhino系统,使得团队可以专注于JavaScript环境的新变化;二是所用的代码优化程序从Google Closure切换到UglifyJS,新工具的压缩效果非常令人满意。

有意思的是,此前UglifyJS开发者曾经公布过自己的测试结果,表明对jQuery的压缩结果UglifyJS要比Closure略大(都在72KB左右),但运行速度快得多,而且Closure不太安全。看来,这段时间UglifyJS的进展也很快啊。

对了,如果你在使用中发现问题,可以直接到这里报告bug:http://bugs.jquery.com/。另外,也可以到Reddit上参与讨论,别忘了,John Resig同学是那里的版主,随时盯着呢。

【延伸阅读】

jQuery 1.5的改进细节

学习jQuery必须知道常用的几种方法

Web开发者必知的12款jQuery插件

免费电子书:jQuery Fundamentals(英文)

jquery鼠标滑过显示摘要介绍,默认显示第一个

自己写的鼠标滑过显示摘要介绍,默认显示第一个,以下是主要代码:
html结构

        	<ul class="hot_course">
            	<li>
                	<span class="num">1.</span>
                    <a href="#" target="_blank"><img src="http://www.xueersi.com/img/kc.jpg" width="120" height="68" />六年级数学提高班...</a>
                    <b class="price"> &yen;99.00 </b>
                </li>
            	<li>
                	<span class="num">2.</span>
                    <a href="#" target="_blank"><img src="http://www.xueersi.com/img/kc.jpg" width="120" height="68" />六年级数学提高班...</a>
                    <b class="price"> &yen;99.00 </b>
                </li>
            	<li>
                	<span class="num">3.</span>
                    <a href="#" target="_blank"><img src="http://www.xueersi.com/img/kc.jpg" width="120" height="68" />六年级数学提高班...</a>
                    <b class="price"> &yen;99.00 </b>
                </li>
            	<li>
                	<span class="num">4.</span>
                    <a href="#" target="_blank"><img src="http://www.xueersi.com/img/kc.jpg" width="120" height="68" />六年级数学提高班...</a>
                    <b class="price"> &yen;99.00 </b>
                </li>
            	<li>
                	<span class="num">5.</span>
                    <a href="#" target="_blank"><img src="http://www.xueersi.com/img/kc.jpg" width="120" height="68" />六年级数学提高班...</a>
                    <b class="price"> &yen;99.00 </b>
                </li>
            </ul>

js

            <script type="text/javascript">
            	$(function(){
					$('.hot_course li').find('img').hide();
					$('.hot_course li').find('b').hide();
					$('.hot_course li').find('img').eq(0).show();
					$('.hot_course li').find('b').eq(0).show();
					$('.hot_course li').mouseover(function(){
						$(this).find('img').show();
						$(this).find('b').show();
						$(this).siblings().find('img').hide();
						$(this).siblings().find('b').hide();
					});
				});
            </script>

今天同事又给我了些思路,在原来的基础上优化了些,优化后的代码更少了,佩服jq的强大选择器!

js优化版

            <script type="text/javascript">
          //优化后
            	$(function(){
					$('.hot_course li').find('img').eq(0).show();
					$('.hot_course li').find('b').eq(0).show();
					$('.hot_course li').mouseover(function(){
						$(this).find('img,b').show().end().siblings().find('img,b').hide();//这里的end()作用是将返回到$(this)位置重新执行后面的操作
					});
				});
            </script>

通过事件(click)定位元素在窗口居中显示

最近在改公司网站终极页面的评论区域,需要点击“我要评论”在当前页直接跳转并且打开评论输入表单,和同事一起研究下,效果实现了,之后我又加了个功能:让打开的输入表单框在页面当前窗口垂直居中显示,以下是主要js代码:

		<script type="text/javascript">
			$(function(){
				//绑定click事件
				$('#comment_write').click(function(){
					show_comment_form('comment_form');
				});
				//显示输入表单函数,并将表单在页面垂直居中显示
				function show_comment_form(Id){
					var box_form = $('#'+Id);
					box_form.show();
					var window_h = $(window).height(); //获取当前窗口的高度
					var element_h = box_form.height(); //获取当前元素的高度
					var element_offsetTop = box_form.offset().top; //获取当前元素距文档顶部的偏移值
					$('html,body').animate({
						scrollTop:element_offsetTop-(window_h-element_h)/2  //设置垂直滚动条顶部偏移值
					},function(){
						box_form.find('textarea').focus(); //回调函数,设置输入框获得焦点
					});
				}
			});
		</script>

点击可查看demo效果:

提示:你可以先修改部分代码再运行。

jquery选项卡效果

前几天闲着写的一个效果,可以适用于同一页面多个表现形式的选项卡切换,下面是具体代码:
js部分:

		<script type="text/javascript">
		//封装的选项卡
		$(function(){
			function tabs(tabTit,on,tabCon){
				$(tabCon).each(function(){
					$(this).children().eq(0).show();
				});
				$(tabTit).children().click(function(){
					$(this).addClass(on).siblings().removeClass(on);
					var index = $(tabTit).children().index(this);
					$(tabCon).children().eq(index).show().siblings().hide();
				});
			}
			tabs('.tab_tit','on','.tab_con');
			tabs('.tab_tit2','on','.tab_con2');
		});
		</script>

html部分

		<div class="tab">
			<ul class="tab_tit">
				<li>1</li>
				<li>2</li>
				<li>3</li>
			</ul>
			<div class="tab_con">
				<div>111</div>
				<div>222</div>
				<div>333</div>
			</div>
		</div>
		<hr />
		<div class="tab">
			<ul class="tab_tit">
				<li>1</li>
				<li>2</li>
				<li>3</li>
			</ul>
			<div class="tab_con">
				<div>111</div>
				<div>222</div>
				<div>333</div>
			</div>
		</div>
		<hr />
		<div class="tab2">
			<ul class="tab_tit2">
				<li>1</li>
				<li>2</li>
				<li>3</li>
			</ul>
			<div class="tab_con2">
				<p>111</p>
				<p>222</p>
				<p>333</p>
			</div>
		</div>
		<style type="text/css">
			.on{ background-color:blue; color:#fff;}
			.tab_con div{ display:none;}
			.tab_con2 p{ display:none;}
		</style>

还在不断的完善中…

JQuery获取和设置Select选项方法(转)

Query获取和设置Select选项

获取Select :

获取select 选中的 text :

$(“#ddlRegType”).find(“option:selected”).text();

获取select选中的 value:

$(“#ddlRegType “).val();

获取select选中的索引:

$(“#ddlRegType “).get(0).selectedIndex;

设置select:

设置select 选中的索引:

$(“#ddlRegType “).get(0).selectedIndex=index;//index为索引值

设置select 选中的value:

$(“#ddlRegType “).attr(“value”,”Normal“);

$(“#ddlRegType “).val(“Normal”);

$(“#ddlRegType “).get(0).value = value;

设置select 选中的text:

var count=$(“#ddlRegType option”).length;

for(var i=0;i { if($(“#ddlRegType “).get(0).options[i].text == text)
{
$(“#ddlRegType “).get(0).options[i].selected = true;

break;
}
}

清空 Select:

$(“#ddlRegType “).empty();

jquery实现简单的图片切换

最近帮朋友写了一个广告的切换,用jquery写的,要求在一个页面放多个广告切换,为了方便调用,就直接把js封装到了一个函数内,然后函数带一个参数,传递不同的参数即可,代码很简洁,还是归功于jquery的强大,下面是具体的代码部分,。

js代码:

<script type="text/javascript">
$(function(){
	function adPlay(tagId){ //创建adPlay并带一参数
		$(tagId).children().eq(0).show(); //获取第一个子标签,让其显示
		var len = $(tagId).children().length;//获取子标签的数量赋值给len
		var index = 0;//声明变量index 值为0
		var playImg = setInterval(function(){ //自动切换图片
			showImg(index);
			index++
			if(index===len){index=0}
		},3000);
		function showImg(i){  //显示索引的当前图片,隐藏同辈的图片
			$(tagId).children().eq(i).show().siblings().hide();
		}
	}
	adPlay('#banner1');
	adPlay('#banner2');
});
</script>

html代码:

<div id="banner1">
    <div>
    <a href="http://www.chmta.net" target="_blank"><img class="imgbk" src="http://img.xywy.com/xwzx/news/zhxx/images/banner12.jpg" /></a>
    </div>
    <div>
    <a href="http://www.cihexpo.com/" target="_blank"><img class="imgbk" src="http://img.xywy.com/xwzx/news/zhxx/images/banner13.jpg" /></a>
    </div>
</div>
<br />
<br />
<br />
<hr />
<br />
<br />
<br />
<div id="banner2">
    <p>
    <a href="http://www.chmta.net" target="_blank"><img class="imgbk" src="http://img.xywy.com/xwzx/news/zhxx/images/banner12.jpg" /></a>
    </p>
    <p>
    <a href="http://www.cihexpo.com/" target="_blank"><img class="imgbk" src="http://img.xywy.com/xwzx/news/zhxx/images/banner13.jpg" /></a>
    </p>
</div>

下面是实例,可以运行查看效果:

提示:你可以先修改部分代码再运行。

如有不合理的地方望大家给予批评指正,期待您提出更好的解决方案!

jquery ajax学习总结

最近一段时间一直在学习jquery ajax 的应用,用了两周的时间把jquery基础教程上面的第六章看完,边看边练习感觉

还好,能够消化一部分,但还是有一些知识点理解的不够透彻,还需要继续努力啊,不过还是有必要先这里总结一下我

学会的东西,在这一章里主要讲了使用jquery基于请求加载数据(html、js、json、xml),下面来逐一进行分析。

一:追加html代码片段

使用load方法可以载入一段远程的html代码插入到dom中,写法很简单,如下:

$(function(){
	//load载入html代码
	/*$('#look a').click(function(){
		$('#newCon').load('a.html');//加载a.html页面,追加到id为newCon元素内
		return false;
	});*/
});

在这个方法中稍作修改可以加载你指定标签内的数据,比如$(‘#newCon’).load(‘a.html’);改成$(‘#newCon’).load(‘a.html ol’)只显示a.html页面内的ol(包括文本)元素。

二:加载js脚本文件 实例如下:
1、

$(function(){
	$('#btn').click(function(){
		$.getScript('c.js',function(){ //用getScript方法获取c.js文件成功后设置一个回调函数来对数据进行解析处理
			var html = '';//创建空的变量html
			$.each(entries,function(){  //entries 是c.js中的entries对象,解析后保存到html变量中
				html+='<div class="item">';
				html+='<h3 class="name">'+this['name']+'</h3>';
				html+='<strong class="vocation">'+this['vocation']+'</strong>';
				html+='<p class="definition">'+this['definition']+'</p>';
				html+='</div>';
				html+='<hr />';
			});
			$('#con').html(html);	将html 追加到id为con的元素中
		});
		return false;
	});
});

2、

$(function(){
		$.getScript('userInfo.js',function(){
			var html='';
			$.each(user,function(){
				var links = this['siteLinks'];//得到siteLinks所有的数据,即链接地址
				var tag_a = '<a href="'+links+'" target="_blank">'+this['name']+'</a>';//获取名字放入a标记内并设置a标记的链接
				//alert(tag_a);
				html+='<li class="item">';
				html+='<h2>'+'姓名:'+tag_a+'</h2>';
				html+='<em>'+'年龄:'+this['age']+'</em>';
				html+='<p>'+'介绍:'+this['intro']+'</p>';
				if(this['achievement']){
					html+='<div>';
					html+='<b>'+'成就:'+'</b>';
					$.each(this['achievement'],function(i,item){
						html+='<p>'+item+'</p>';
					});
					html+='</div>';
				}
				html+='</li>';
				html+='<hr />';
			});
			$('#list').html(html);
		});
	return false;
});

三:加载json文件,json格式的文件要求比较严格,所有的方括号、花括号、引号和逗号都必须合理而且适当的存在,否则会出现意想不到的错误实例代码如下:

$(function(){
$("#button").click(function(){
 $.getJSON( "json1.json" ,function(data){  // getJSON方法获得json文件的代码,其中的回调函数的参数data就是json代码
  $("#json").empty();  //清空带“json” ID的div标签的内容
  $.each(data,function(entryIndex,entry){ //each方法遍历json文件中的对象,entryIndex是当前索引, entry是当前项
   var html="<div class= entry >";
   html += "<h3 class= term >"+entry[ "term" ]+ "</h3>" ;
   html += "<div class= part >"+entry[ "part" ]+"</div>";
   html += "<div class= definition >"+entry[ "definition" ];
   if(entry[ "quote" ]){
    html+="<div class= quote >";
    $.each(entry[ "quote" ],function(quoteIndex,line){
     html+="<p>"+line+"</p>";
    });
    html+="</div>";
   }
   html+="</div>";
   html +="</div>";
   $("#json").append(html);
  });
 });
 return false;
});
});

四:加载xml文件,加载xml很简单和json很相识,在这里使用get方法获取xml文档,代码如下:

$(function(){
	$.get('a.xml',function(data){//得到xml文件并设置回调函数,参数data是当前xml对象
		$(data).find('item').each(function(){遍历xml内item标签
			var item = $(this);
			var html="<li>";
			html+= '<span>'+item.attr('term')+'</span>';
			html+= '<p>'+item.attr('part')+'</p>';
			html+='<p>'+item.find('num').text()+'</p>';
			html+='<strong>'+item.find('name').text()+'</strong>';
			html+='<div>'+item.find('city').text()+'</div>';
			html+='</li>';
			$('#list').append(html);
		});
		return false;
	});
});

以上是我所学到的一些ajax的知识,可能理解的不全对,还在继续的学习中……

jquery浮层效果第一版

js代码:

$(function(){
 var dialogLayer = $('#dialogLayer');
 var dialogBox = $('#dialogBox');
  dialogLayer.hide();
  dialogBox.hide();
  var pageH = $(document.body).height(); //获取页面文档的高度赋值给pageH
  var pageW = $(document.body).width(); //获取页面文档的宽度赋值给pageW
  var winH = $(window).height();//获取窗口可视区域的的高度赋值给winH
  var maxH = Math.max(winH,pageH);//winH 和 pageH 进行比较取得最大的值赋给maxH
  var dialogBox_x = (pageW - dialogBox.width())/2;//计算出dialogBox的x坐标
  var dialogBox_y = (winH - dialogBox.height())/2;//计算出dialogBox的y坐标
//给按钮绑定click事件,点击弹出浮层
  $(':button').click(function(){
       dialogLayer.show().width(pageW).height(maxH);
      dialogBox.show().css({'top':dialogBox_y+'px','left':dialogBox_x+'px'});
   });
//关闭浮层
  $('#close').click(function(){
      dialogBox.hide();
      dialogLayer.hide();
   });
});

css代码:

*{ margin:0px; padding:0px;}
body{ font-size:12px;}
.wrapper{ width:940px; border:1px solid #ccc; padding:10px; margin:0 auto; clear:both;}
.wrapper p{ line-height:24px;}
#dialogLayer{ position:absolute; background-color:#000; filter:alpha(opacity=60); opacity:0.6; left:0; top:0;}
#dialogBox{ position:absolute; width:400px; height:300px; border:3px solid blue; background-color:#fff; left:0; top:0;}
#dialogBox h2{ height25px; line-height:25px; color:#fff; font-size:12px; background-color:blue; padding:0 10px;}
#dialogBox h2 span{ float:right; font-weight:normal; cursor:pointer;}
.content{ padding:20px; text-align:center;}

html代码:

&lt;div id=&quot;dialogLayer&quot;&gt;&lt;/div&gt;
&lt;div id=&quot;dialogBox&quot;&gt;
&lt;h2&gt;&lt;span id=&quot;close&quot; title=&quot;关闭&quot;&gt;关闭&lt;/span&gt;请您登录&lt;/h2&gt;
&lt;div class=&quot;content&quot;&gt;content&lt;/div&gt;
&lt;/div&gt;
&lt;div style=&quot;text-align:center;&quot;&gt;&lt;input type=&quot;button&quot; value=&quot;点击弹出登陆框&quot; /&gt;&lt;/div&gt;

运行下面的代码可以查看效果:

提示:你可以先修改部分代码再运行。

jquery图片渐隐渐显效果

自己写的query图片渐隐渐显效果,很实用,代码少,很简洁,如果你觉得合适可以拿去用

提示:你可以先修改部分代码再运行。