87,907
社区成员
发帖
与我相关
我的任务
分享Jquery怎样得到div中img的路径
比如
当点击div hello时怎样取出img的src 来
我用的方法是
$(this).children("open").children("img").attr("src");
这样取出的是undifine，希望大家帮忙
<div class="hello">
<div class="open"><img src="../pictrues/hello.png"></div>
</div>
当点击div hello时怎样取出img的src 来
我用的方法是
$(this).children("open").children("img").attr("src");
这样取出的是undifine，希望大家帮忙
...全文
请发表友善的回复…
发表回复
嘟嘟xo 2009-11-04
- 打赏
- 举报
$(this).find("img").attr("src")yate123 2009-11-04
- 打赏
- 举报
谢谢六楼，你一直帮我的忙
chen_xiangguo 2009-11-04
- 打赏
- 举报
还可以这样：
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script src="js/jquery-1.3.2.min.js"></script>
</head>
<body>
<div class="hello">
<div class="open"><img src="image/24k.gif"></div>
</div>
<strong></strong>
</body>
<script language="javascript">
$(function()
{
$('div.hello').click(function()
{
alert("图片路径是:"+$('div.hello').find("img")[0].src);
});
});
</script>
</html>
浴火涅磐 2009-11-04
- 打赏
- 举报
$(this).children(".open").children("img").attr("src"); 楼主少了一个点
dujingjing1230 2009-11-04
- 打赏
- 举报
javascript写的时候一定要细心。。。。。
spllot 2009-11-04
- 打赏
- 举报
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="">
<META NAME="Keywords" CONTENT="">
<META NAME="Description" CONTENT="">
<script type="text/javascript" src="jquery-1.2.1.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$(".hello").click(function(){
var sr = $(".hello .open img").attr("src");
alert(sr);
});
});
</script>
</HEAD>
<BODY>
<div class="hello" style="width:200px;height:100px;background:red">
<div class="open"><img src="http://c.csdn.net/bbs/t/5/i/pic_logo.gif"></div>
</div>
</BODY>
</HTML>
jamm1986 2009-11-04
- 打赏
- 举报
你的方式可以去呀，你自己写错了，$(this).children("open").children("img").attr("src");---- open是clss，前面要加点号的
sohighthesky 2009-11-04
- 打赏
- 举报
$(".hello .open img").attr("src")
王集鹄 2009-11-04
- 打赏
- 举报
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script>
<script>
$(document).ready(function() {
alert($("div[@class=hello] div[@class=open] img").attr("src"));
});
</script>
</head>
<body>
<div class="hello">
<div class="open"><img src="../pictrues/hello.png"></div>
</div>
</body>
</html>
使用说明
需要使用jQuery库文件(目前版本1.3)和jQuery Image Flyout库文件(目前版本1.1)
可选JS库文件：增强图片显示特效可使用jQuery插件Easing Plugin库文件
素材准备
可自定义CSS样式，控制jQuery插件jQuery Image Flyout提示小图片显示效果。
实例代码
一，包含文件部分
[removed][removed]
[removed][removed]
[removed][removed]
二，HTML部分(DIV层内所用图片链接)
<div>jQuery插件flyout弹出图片div>
<div id="biuuu">
<img src="iphone_small.jpg" alt="iphone" />
div>
三，Javascript部分(jQuery插件jQuery Image Flyout弹出图片调用)
[removed]
<!--
$(function() {
$('#biuuu a').flyout();
-->
[removed]
实例中将ID为biuuu的DIV内所有链接元素增加javascript弹出放大图片功能，其中链接href部分为表示弹出的大图片路径。使用jQuery插件jQuery Image Flyout弹出图片，实现javascript弹出放大图片功能只需要一行代码即可实现。
四，用户自定义设置
结合jQuery插件Easing Plugin，可增强javascript图片放大和缩小过程中图片显示的效果。
一，自定义预加载提示图片
$('#biuuu a').flyout({loadingSrc:'thumb-loading.gif',outEase:'easeInCirc',inEase:'easeOutBounce'});
loadingSrc表示预加载提示图片路径
outEase表示弹出图片放大过程使用的jQuery插件Easing Plugin特效，如：easeInCirc
inEase表示弹出图片缩小过程使用的jQuery插件Easing Plugin特效，如：easeOutBounce
二，自定义弹出图片后图片显示样式
$('#biuuu a').flyout({loadingSrc:'thumb-loading.gif',outEase:'easeOutQuad',inEase:'easeInBack',loader:'loader2',widthMargin:300,heightMargin:300});
loader表示弹出图片后调用的CSS样式
widthMargin表示弹出图片后显示的margin宽度
heightMargin表示弹出图片后显示的margin高度
