<!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中效果：
- 大小: 8.1 KB
- 大小: 9.2 KB
分享到：
相关推荐
"利用Ajax+Jquery实现异步进度条效果"这个主题正是围绕这一目标展开，它涉及到C#后端开发、.NET框架、Ajax技术以及Jquery库的前端应用。下面将详细阐述这些知识点。 首先，C#是一种面向对象的编程语言，广泛应用于...
本教程将探讨如何利用jQuery和AJAX技术来实现这样的树形结构，并且这个项目可以直接在MyEclipse环境中运行。 首先，我们需要理解jQuery和AJAX的基本概念。jQuery是一个广泛使用的JavaScript库，它简化了DOM操作、...
下面将详细介绍如何利用jQuery-AJAX调用ASP.NET后台方法。 1. **创建WebMethod** 在ASP.NET的C#或VB.NET代码中，我们可以创建一个静态的WebMethod，标记为 `[WebMethod]` 或 `[ScriptMethod]`，以便可以从...
在Asp.Net MVC框架中，jQuery和AJAX的结合使用极大地提升了用户体验，使得网页能够实现异步数据交互，无需刷新整个页面即可完成数据的增删查改操作。本实例将深入探讨如何在Asp.Net MVC项目中应用jQuery与AJAX。 一...
该资源主要涉及的是一个使用JavaScript库jQuery实现的仿淘宝商品列表的展示效果，结合了Ajax技术，用于创建动态和交互性的用户体验。以下是这个项目中涉及的关键知识点： 1. **jQuery库**：jQuery是一个广泛使用的...
在Struts2框架中，我们可以利用jQuery的Ajax功能进行数据交互。Struts2提供了JSON结果类型，方便与前端的Ajax请求配合。首先，你需要在Action类中添加JSON支持，并返回一个Map或自定义对象。然后，前端通过$.ajax()...
【基于jQuery的Ajax聊天室程序】是一个典型的Web交互应用，它利用了Ajax技术来实现实时的、无需页面刷新的用户交流。Ajax（Asynchronous JavaScript and XML）是一种在不重新加载整个网页的情况下，能够更新部分网页...
总的来说，这个项目的核心在于利用jQuery的Ajax功能向服务器发送异步请求，服务器端处理程序`s_AutoCompleteHandler`根据请求的内容查询数据，并将结果返回到前端，`autoComplete.js`解析这些数据并动态地更新页面，...
本示例"Jquery跨域Ajax请求测试"将详细讲解如何利用jQuery实现这一功能。 首先，了解同源策略是理解跨域问题的关键。同源策略是浏览器为了保障用户安全而设定的一项机制，它规定了只有来自同一协议、同一域名和同一...
在Asp.net开发中，利用jQuery实现Ajax效果可以极大地提升用户体验，因为它允许页面部分更新而无需刷新整个页面。Ajax（Asynchronous JavaScript and XML）技术通过异步方式与服务器通信，使得用户界面更加流畅和响应...
在Web开发中，jQuery是一个非常流行的JavaScript库，它极大地简化了DOM操作、事件处理以及Ajax交互。本主题聚焦于jQuery中的Ajax功能，特别是如何利用它进行异步用户名验证。Ajax，即Asynchronous JavaScript and ...
"基于jQuery的ajax对话框"是一个利用jQuery实现的功能，它可以在不刷新整个页面的情况下，通过Ajax技术加载并显示新的内容在一个弹出的对话框里，提供了一种优雅的用户体验。 首先，让我们来了解jQuery的核心概念。...
这里我们将深入探讨如何利用jQuery实现一个仿盖章效果，让用户能够在页面上自由选择盖章的位置，并能保存盖章后的状态。 首先，jQuery是一个广泛使用的JavaScript库，它简化了DOM操作、事件处理、动画制作以及Ajax...
在“第八章后jQueryAjax的使用”中，我们将深入探讨如何利用jQuery进行AJAX操作。 **AJAX基础** AJAX（Asynchronous JavaScript and XML）是一种创建动态网页的技术，允许在不重新加载整个页面的情况下，与服务器...
jQuery，一个轻量级、功能丰富的JavaScript库，结合AJAX（异步JavaScript和XML）技术，可以实现动态、高效的分页效果。本篇文章将深入探讨jQuery AJAX分页的原理与实践，通过具体的实例来展示如何实现炫酷的分页功能...
**jQuery的Ajax方法**是JavaScript库中的核心特性之一，它为开发者提供了简单、高效的数据交互方式，无需刷新页面即可实现异步与服务器进行通信。在Web开发中，jQuery的Ajax功能极大地简化了XMLHttpRequest对象的...
了解以上知识点后，你可以创建一个允许用户无刷新交互的JSP应用，提高用户体验，同时利用jQuery简化前端代码。在实际开发中，还要注意跨域问题、数据安全、错误处理等方面，确保应用的稳定性和安全性。
3. **丰富的插件库**：jQuery 社区提供了大量的插件，涵盖了各种功能，如图表、表单验证、滚动效果等，这些都可以与 AJAX 结合使用，增强用户体验。 4. **学习曲线平缓**：jQuery 的 API 设计简洁，易于上手，使得...
在这个“jQuery+ajax实现三级级联”的实例中，我们主要探讨如何利用这两种技术来创建一个能够逐级联动的下拉菜单系统，这在数据筛选和表单填写中十分常见，如地区选择、部门分类等场景。 首先，jQuery是一个轻量级...
3. **Ajax请求**：利用jQuery的`$.ajax()`方法发起请求。设置URL为PHP脚本的路径，方法通常为GET或POST，根据需求决定是否传递数据。 4. **PHP处理**：在服务器端，PHP脚本接收Ajax发送的数据（如果有的话），可能...