HTML中利用jQuery仿AJAX效果

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
 <HEAD>
 <TITLE>fck</TITLE>
 <META http-equiv="Content-Type" CONTENT="text/html; charset=utf-8" />
 <script type="text/javascript" src="jquery-1.3.2.min.js"></script>
</HEAD>

 <BODY>
 <form id="frm1">
 <div>默认图片:<img id="article_img2" src="" style="display:none;width:50px;height:50px;"/><select id="article_img"></select></div>
 <div>文章内容:<textarea id="article_content">aa</textarea></div>
 <div>添加图片:<input type="file" id="article_file" /></div>
 <input type="button" value="显示内容" id="b1"/>
 <input type="button" value="隐藏图片" id="b2"/>
 </form>
 <script language="javascript">
 $(document).ready(function(){
 	$("#article_file").change(function(){
		$("#article_content").append("<img src='"+$(this).val()+"'/>") ;
	});
	//文档改变事件
	//$("#article_content").change()事件不起作用
	$("#article_file").change(setSelect); //如果添加了新的图片,就改SELECT的选项

	$("#b1").click(showContentImg);

	$("#article_img").change(changeImg);

	$("#b2").click(DelImg);

 });


 function showContentImg(){
 	$("#article_content>img").each(function(i){
		alert(i+":"+$(this).attr("src"));
	});
 }

 function setSelect(){
	$("#article_img").empty();//清除所有子节点
 	$("#article_content>img").each(function(i){
		$("#article_img").append("<option value='"+$(this).attr('src')+"'>"+$(this).attr('src')+"</option");
	});
	changeImg();
 }

 function changeImg(){
	$("#article_img2").attr("src",$("#article_img").val()).show();
 }

 function DelImg(){
	$("#article_img2").attr("src","").hide();
 }
 </script>
 </BODY>
</HTML>

 不过在IE7和FF中效果不一样

 

IE中效果:

FF中效果:

你可能感兴趣的:(JavaScript,html,jquery,Ajax,IE)