要获取网页所有图片,我们可以通过Javascript就能轻松实现,不过要想获得文章或某容器(如:Div)里所有图片,使用JQuery而不是Javascript来实现就会变得更加简单。本文将给你详细介绍。 通过Javascript获取网页所有图片html代码 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="zh-CN" lang="zh-CN"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <meta http-equiv="Content-Language" content="zh-CN" /> <title>JS/JQuery获取网页或文章或某DIV所有图片_JS实例_卡卡网 webkaka.com</title> </head> <body> <img src="http://www.webkaka.com/img/top_logo-new.png" > <br><br> <img src="http://www.webkaka.com/img/nowiterm_bg.gif" > <br><br> <textarea id=textarea1 cols=50 rows=10></textarea> <br><br> <script type="text/javascript"> function getAllImg(){ var obj=document.getElementsByTagName('img'); var strImg = "网页所有图片:"; for(var i=0;i<obj.length;i++){ if(obj[i].getAttribute('src')){ strImg = strImg + "\r\n" + obj[i].getAttribute('src'); } } document.getElementById('textarea1').value = strImg; } getAllImg(); </script> </body> </html> execcodegetcode 上述例子是通过 document.getElementsByTagName('img') 来获得网页所有图片对象的,然后通过for循环得到各图片的URL地址。 通过Javascript获取网页文章或某个容器的所有图片实际使用中,我们往往不要获得网页的所有图片,而是要获得某个区块的图片,例如如果我们要获得文章的所有图片,那又该怎么写Javascript代码呢?请看代码 。 html代码如下 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="zh-CN" lang="zh-CN"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <meta http-equiv="Content-Language" content="zh-CN" /> <title>JS/JQuery获取网页或文章或某DIV所有图片_JS实例_卡卡网 webkaka.com</title> </head> <body> <img src="http://www.webkaka.com/img/top_logo-new.png" ><br> <font style="color:red">非文章</font>图片地址:http://www.webkaka.com/img/top_logo-new.png <br><br> <div id="main" class="content" style="padding:15px;border:1px solid #666;width:500px;margin:15px;"> <img src="http://www.webkaka.com/img/nowiterm_bg.gif" ><br> <font style="color:blue">文章</font>图片地址:http://www.webkaka.com/img/nowiterm_bg.gif <br><br> <img src="http://www.webkaka.com/img/menu_bg_right.jpg" ><br> <font style="color:blue">文章</font>图片地址:http://www.webkaka.com/img/menu_bg_right.jpg <br><br> </div> <textarea id=textarea1 cols=50 rows=10></textarea> <br><br> <script type="text/javascript"> function getAllImg(){ var obj=document.getElementsByClassName('content')[0].getElementsByTagName('img'); var strImg = "文章所有图片:"; for(var i=0;i<obj.length;i++){ if(obj[i].getAttribute('src')){ strImg = strImg + "\r\n" + obj[i].getAttribute('src'); } } document.getElementById('textarea1').value = strImg; } getAllImg(); </script> </body> </html> execcodegetcode 其实我们只需更改上述代码的一条语句即可,即是把 document.getElementsByTagName('img') 改为 document.getElementById('容器ID').getElementsByTagName('img') 或改为 document.getElementsByClassName('容器类名')[0].getElementsByTagName('img') 特别注意,getElementsByClassName('容器类名')返回一个数组列,例如网页有多个div使用了此类,所以要用 [0]、[1]、[2]...来准确定位是哪个。 此外,如果容器声明了name属性,如: <div id="main" class="content" name="mycontent">...</div> 我们还可以通过 document.getElementsByName('name名称') 来获得容器对象。 通过JQuery获取网页文章或某个容器的所有图片JQuery获取网页文章或某个容器的所有图片的写法跟Javascript有些不同,其实思路是一样。 html代码如下 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="zh-CN" lang="zh-CN"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <meta http-equiv="Content-Language" content="zh-CN" /> <title>JS/JQuery获取网页或文章或某DIV所有图片_JS实例_卡卡网 webkaka.com</title> </head> <body> <img src="http://www.webkaka.com/img/top_logo-new.png" ><br> <font style="color:red">非文章</font>图片地址:http://www.webkaka.com/img/top_logo-new.png <br><br> <div id="main" class="content" style="padding:15px;border:1px solid #666;width:500px;margin:15px;"> <img src="http://www.webkaka.com/img/nowiterm_bg.gif" ><br> <font style="color:blue">文章</font>图片地址:http://www.webkaka.com/img/nowiterm_bg.gif <br><br> <img src="http://www.webkaka.com/img/menu_bg_right.jpg" ><br> <font style="color:blue">文章</font>图片地址:http://www.webkaka.com/img/menu_bg_right.jpg <br><br> </div> <textarea id=textarea1 cols=50 rows=10></textarea> <br><br> <script src="http://libs.baidu.com/jquery/1.9.0/jquery.min.js" type="text/javascript"></script> <script type="text/javascript"> $(document).ready(function() { //获取Class为content里面的所有img var imglist=$(".content img"); //或使用下面这句,获取ID为main里面的所有img //var imglist=$("#main img"); var strImg = "文章所有图片:"; for(var i=0;i<imglist.length;i++){ if(imglist[i].getAttribute('src')){ strImg = strImg + "\r\n" + imglist[i].getAttribute('src'); } } document.getElementById('textarea1').value = strImg; }); </script> </body> </html> execcodegetcode 关键代码 $("#main img") 或 $(".content img") 获得容器里的所有图片。并且要注意使用JQuery时要先引用jquery文件。 JQuery获取网页文章或某个容器的所有图片,还有另一个写法。html代码 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="zh-CN" lang="zh-CN"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <meta http-equiv="Content-Language" content="zh-CN" /> <title>JS/JQuery获取网页或文章或某DIV所有图片_JS实例_卡卡网 webkaka.com</title> </head> <body> <img src="http://www.webkaka.com/img/top_logo-new.png" ><br> <font style="color:red">非文章</font>图片地址:http://www.webkaka.com/img/top_logo-new.png <br><br> <div id="main" class="content" style="padding:15px;border:1px solid #666;width:500px;margin:15px;"> <img src="http://www.webkaka.com/img/nowiterm_bg.gif" ><br> <font style="color:blue">文章</font>图片地址:http://www.webkaka.com/img/nowiterm_bg.gif <br><br> <img src="http://www.webkaka.com/img/menu_bg_right.jpg" ><br> <font style="color:blue">文章</font>图片地址:http://www.webkaka.com/img/menu_bg_right.jpg <br><br> </div> <textarea id=textarea1 cols=50 rows=10>文章所有图片:</textarea> <br><br> <script src="http://libs.baidu.com/jquery/1.9.0/jquery.min.js" type="text/javascript"></script> <script type="text/javascript"> $(document).ready(function() { $(".content img").each(function(index, element) { //$(".content img") 可换为 $("#main img") if($(element).attr('src')){ var obj = document.getElementById('textarea1'); obj.value = obj.value + "\r\n" + $(element).attr('src'); } }); }); </script> </body> </html> execcodegetcode 这写法前面的写法代码少一些,推荐使用。注意使用JQuery时要先引用jquery文件。 本文实例演示及源码文件下载demodownload
|