HTML中利用jQuery仿AJAX效果

最新推荐文章于 2022-10-28 16:00:20 发布

iteye_7259

最新推荐文章于 2022-10-28 16:00:20 发布

阅读量80

点赞数

分类专栏： jQuery 文章标签： HTML Ajax jQuery JavaScript IE ViewUI

jQuery 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

<!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中效果：