分类存档: javascript - 第2页

JavaScript:appendChild、insertBefore和insertAfter的使用方法

很久没有用到appendChild、insertBefore和insertAfter 方法了,这些方法有时还是很重要的,现在分别温习一下,以巩固对这些方法的使用。

appendChild定义
appendChild(newChild: Node) : Node
Appends a node to the childNodes array for the node.
Supported: IE 5.0+, Mozilla 1.0+, Netscape 6.0+, Safari 1.0+, Opera 7.0+
添加一个节点到指定的节点的子节点数组中,读起来好象有点拗口,简单地说就是将元素添加到指定的节点中

appendChild用法
target.appendChild(newChild)
newChild作为target的子节点插入最后的一子节点之后

appendChild例子

var newElement = document.Document.createElement('label');
newElement.Element.setAttribute('value', 'Username:');
var usernameText = document.Document.getElementById('username');
usernameText.appendChild(newElement);

insertBefore定义
The insertBefore() method inserts a new child node before an existing child node.
insertBefore() 方法的作用是:在现有的子节点前插入一个新的子节点

insertBefore用法
target.insertBefore(newChild,existingChild)
newChild作为target的子节点插入到existingChild节点之前
existingChild为可选项参数,当为null时其效果与appendChild一样

insertBefore例子

var oTest = document.getElementById("test");
var newNode = document.createElement("p");
newNode.innerHTML = "This is a test";

oTest.insertBefore(newNode,oTest.childNodes[0]);
 

好了那么有insertBefore的应该也有insertAfter吧?
好那我们来用Aptana编写一个例子吧,但Aptana的智能提示告诉我其实没有insertAfter这个方法
那么就自己定义一个罗:)

insertAfter定义

function insertAfter(newEl, targetEl)
        {
            var parentEl = targetEl.parentNode;

            if(parentEl.lastChild == targetEl)
            {
                parentEl.appendChild(newEl);
            }else
            {
                parentEl.insertBefore(newEl,targetEl.nextSibling);
            }
        }
 

insertAfter用法与例子

var txtName = document.getElementById("txtName");
var htmlSpan = document.createElement("span");
htmlSpan.innerHTML = "This is a test";
insertAfter(htmlSpan,txtName);

将htmlSpan 作为txtName 的兄弟节点插入到txtName 节点之后

总结:
1、appendChild和insertBefore是做对节点的方法来使用的,而insertAfter只是自定义的一个函数
2、insertBefore相对于appendChild来说,比较灵活可以将新的节点插入到目标节点子节点数组中的任一位置。
3、使用appendChild和insertBefore来插入新的节点前提是,其兄弟节点必须有共同的父节点

document.compatMode属性

document.compatMode用来判断当前浏览器采用的渲染方式。

官方解释:

BackCompat:标准兼容模式关闭。
CSS1Compat:标准兼容模式开启。

当document.compatMode等于BackCompat时,浏览器客户区宽度是document.body.clientWidth;
当document.compatMode等于CSS1Compat时,浏览器客户区宽度是document.documentElement.clientWidth。

浏览器客户区高度、滚动条高度、滚动条的Left、滚动条的Top等等都是上面的情况。

一个准确获取网页客户区的宽高、滚动条宽高、滚动条Left和Top的代码:

if (document.compatMode == \”BackCompat\”) {
cWidth = document.body.clientWidth;
cHeight = document.body.clientHeight;
sWidth = document.body.scrollWidth;
sHeight = document.body.scrollHeight;
sLeft = document.body.scrollLeft;
sTop = document.body.scrollTop;
}
else { //document.compatMode == \”CSS1Compat\”
cWidth = document.documentElement.clientWidth;
cHeight = document.documentElement.clientHeight;
sWidth = document.documentElement.scrollWidth;
sHeight = document.documentElement.scrollHeight;
sLeft = document.documentElement.scrollLeft == 0 ? document.body.scrollLeft : document.documentElement.scrollLeft;
sTop = document.documentElement.scrollTop == 0 ? document.body.scrollTop : document.documentElement.scrollTop;
}

(以上代码兼容目前流行的全部浏览器,包括:IE、Firefox、Safari、Opera、Chrome)

scrollLeft,scrollTop等等详解(转载)

scrollLeft,scrollTop….常用的一些js方法,在这里保存以下,以后能用的上。

网页可见区域宽: document.body.clientWidth;

网页可见区域高: document.body.clientHeight;

网页可见区域宽: document.body.offsetWidth (包括边线的宽);

网页可见区域高: document.body.offsetHeight (包括边线的宽);

网页正文全文宽: document.body.scrollWidth;

网页正文全文高: document.body.scrollHeight;

网页被卷去的高: document.body.scrollTop;

网页被卷去的左: document.body.scrollLeft;

网页正文部分上: window.screenTop;

网页正文部分左: window.screenLeft;

屏幕分辨率的高: window.screen.height;

屏幕分辨率的宽: window.screen.width;

屏幕可用工作区高度: window.screen.availHeight;

屏幕可用工作区宽度:window.screen.availWidth;

1、offsetLeft

假设 obj 为某个 HTML 控件。

obj.offsetTop 指 obj 距离上方或上层控件的位置,整型,单位像素。

obj.offsetLeft 指 obj 距离左方或上层控件的位置,整型,单位像素。

obj.offsetWidth 指 obj 控件自身的宽度,整型,单位像素。

obj.offsetHeight 指 obj 控件自身的高度,整型,单位像素。

我们对前面提到的“上方或上层”与“左方或上层”控件作个说明。

例如:

“提交”按钮的 offsetTop 指“提交”按钮距“tool”层上边框的距离,因为距其上边最近的是 “tool” 层的上边框。

“重置”按钮的 offsetTop 指“重置”按钮距“tool”层上边框的距离,因为距其上边最近的是 “tool” 层的上边框。

“提交”按钮的 offsetLeft 指“提交”按钮距“tool”层左边框的距离,因为距其左边最近的是 “tool” 层的左边框。

“重置”按钮的 offsetLeft 指“重置”按钮距“提交”按钮右边框的距离,因为距其左边最近的是“提交”按钮的右边框。

以上属性在 FireFox 中也有效。

另 外:我们这里所说的是指 HTML 控件的属性值,并不是 document.body,document.body 的值在不同浏览器中有不同解释(实际上大多数环境是由于对 document.body 解释不同造成的,并不是由于对 offset 解释不同造成的),点击这里查看不同点。

标题:offsetTop 与 style.top 的区别

预备知识:offsetTop、offsetLeft、offsetWidth、offsetHeight

我们知道 offsetTop 可以获得 HTML 元素距离上方或外层元素的位置,style.top 也是可以的,二者的区别是:

一、offsetTop 返回的是数字,而 style.top 返回的是字符串,除了数字外还带有单位:px。

二、offsetTop 只读,而 style.top 可读写。

三、如果没有给 HTML 元素指定过 top 样式,则 style.top 返回的是空字符串。

offsetLeft 与 style.left、offsetWidth 与 style.width、offsetHeight 与 style.height 也是同样道理。

标题:clientHeight、offsetHeight和scrollHeight

我们这里说说四种浏览器对 document.body 的 clientHeight、offsetHeight 和 scrollHeight 的解释,这里说的是 document.body,如果是 HTML 控件,则又有不同,点击这里查看。

这四种浏览器分别为IE(Internet Explorer)、NS(Netscape)、Opera、FF(FireFox)。

2、clientHeight

clientHeight

大家对 clientHeight 都没有什么异议,都认为是内容可视区域的高度,也就是说页面浏览器中可以看到内容的这个区域的高度,一般是最后一个工具条以下到状态栏以上的这个区域,与页面内容无关。

offsetHeight

IE、Opera 认为 offsetHeight = clientHeight + 滚动条 + 边框。

NS、FF 认为 offsetHeight 是网页内容实际高度,可以小于 clientHeight。

scrollHeight

IE、Opera 认为 scrollHeight 是网页内容实际高度,可以小于 clientHeight。

NS、FF 认为 scrollHeight 是网页内容高度,不过最小值是 clientHeight。

简单地说

clientHeight 就是透过浏览器看内容的这个区域高度。

NS、 FF 认为 offsetHeight 和 scrollHeight 都是网页内容高度,只不过当网页内容高度小于等于 clientHeight 时,scrollHeight 的值是 clientHeight,而 offsetHeight 可以小于 clientHeight。

IE、Opera 认为 offsetHeight 是可视区域 clientHeight 滚动条加边框。scrollHeight 则是网页内容实际高度。

同理

clientWidth、offsetWidth 和 scrollWidth 的解释与上面相同,只是把高度换成宽度即可。

但是

FF 在不同的 DOCTYPE 中对 clientHeight 的解释不同, xhtml 1 trasitional 中则不是如上解释的。其它浏览器则不存在此问题。

标题:scrollTop、scrollLeft、scrollWidth、scrollHeight

3、scrollLeft

scrollTop 是“卷”起来的高度值,示例:

如果为 p 设置了 scrollTop,这些内容可能不会完全显示。

由于为外层元素 p 设置了 scrollTop,所以内层元素会向上卷。

scrollLeft 也是类似道理。

我们已经知道 offsetHeight 是自身元素的宽度。

而 scrollHeight 是内部元素的绝对宽度,包含内部元素的隐藏的部分。

上述中 p 的 scrollHeight 为 300,而 p 的 offsetHeight 为 100。

scrollWidth 也是类似道理。

IE 和 FireFox 全面支持,而 Netscape 和 Opera 不支持 scrollTop、scrollLeft(document.body 除外)。

发表时间:2007-10-15 20:20:16

标题:offsetTop、offsetLeft、offsetWidth、offsetHeight

4、clientLeft

返回对象的offsetLeft属性值和到当前窗口左边的真实值之间的距离,可以理解为边框的长度

一直以来对offsetLeft,offsetTop,scrollLeft,scrollTop这几个方法很迷糊,花了一天的时间好好的学习了一下.得出了以下的结果:

1.offsetTop :

当前对象到其上级层顶部的距离.

不能对其进行赋值.设置对象到页面顶部的距离请用style.top属性.

2.offsetLeft :

当前对象到其上级层左边的距离.

不能对其进行赋值.设置对象到页面左部的距离请用style.left属性.

3.offsetWidth :

当前对象的宽度.

与style.width属性的区别在于:如对象的宽度设定值为百分比宽度,则无论页面变大还是变小,style.width都返回此百分比,而offsetWidth则返回在不同页面中对象的宽度值而不是百分比值

4.offsetHeight :

与style.height属性的区别在于:如对象的宽度设定值为百分比高度,则无论页面变大还是变小,style.height都返回此百分比,而offsetHeight则返回在不同页面中对象的高度值而不是百分比值

5.offsetParent :

当前对象的上级层对象.

注意.如果对象是包括在一个DIV中时,此DIV不会被当做是此对象的上级层,(即对象的上级层会跳过DIV对象)上级层是Table时则不会有问题.

利用这个属性,可以得到当前对象在不同大小的页面中的绝对位置.

得到绝对位置脚本代码

1function GetPosition(obj)

2{

3 var left = 0;

4 var top = 0;

5

6 while(obj != document.body)

7 {

8 left = obj.offsetLeft;

9 top = obj.offsetTop;

10

11 obj = obj.offsetParent;

12 }

13

14 alert(“Left Is : ” + left + “\r\n” + “Top Is : ” + top);

15}

6.scrollLeft :

对象的最左边到对象在当前窗口显示的范围内的左边的距离.

即是在出现了横向滚动条的情况下,滚动条拉动的距离.

7.scrollTop

对象的最顶部到对象在当前窗口显示的范围内的顶边的距离.

即是在出现了纵向滚动条的情况下,滚动条拉动的距离.

我们这里说说四种浏览器对 document.body 的 clientHeight、offsetHeight 和 scrollHeight 的解释,这里说的是 document.body,如果是 HTML 控件,则又有不同,点击这里查看。

这四种浏览器分别为IE(Internet Explorer)、NS(Netscape)、Opera、FF(FireFox)。

clientHeight

大家对 clientHeight 都没有什么异议,都认为是内容可视区域的高度,也就是说页面浏览器中可以看到内容的这个区域的高度,一般是最后一个工具条以下到状态栏以上的这个区域,与页面内容无关。

offsetHeight

IE、Opera 认为 offsetHeight = clientHeight + 滚动条 + 边框。

NS、FF 认为 offsetHeight 是网页内容实际高度,可以小于 clientHeight。

scrollHeight

IE、Opera 认为 scrollHeight 是网页内容实际高度,可以小于 clientHeight。

NS、FF 认为 scrollHeight 是网页内容高度,不过最小值是 clientHeight。

简单地说

clientHeight 就是透过浏览器看内容的这个区域高度。

NS、 FF 认为 offsetHeight 和 scrollHeight 都是网页内容高度,只不过当网页内容高度小于等于 clientHeight 时,scrollHeight 的值是 clientHeight,而 offsetHeight 可以小于 clientHeight。

IE、Opera 认为 offsetHeight 是可视区域 clientHeight 滚动条加边框。scrollHeight 则是网页内容实际高度。

同理

clientWidth、offsetWidth 和 scrollWidth 的解释与上面相同,只是把高度换成宽度即可。

说明

以 上基于 DTD HTML 4.01 Transitional,如果是 DTD XHTML 1.0 Transitional 则意义又会不同,在 XHTML 中这三个值都是同一个值,都表示内容的实际高度。新版本的浏览器大多支持根据页面指定的 DOCTYPE 来启用不同的解释器。下载或浏览测试文件。

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;

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

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