资源下载 - 从此开始!

下载我_精品源码软件教程资源网

您的位置:主页 > 网络编程 > 正文

JS/JQuery获取网页或文章或某DIV所有图片

2018-10-30 16:51 来源:互联网 编辑:admin

要获取网页所有图片,我们可以通过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 + "
" + 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 + "
" + 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 + "
" + 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 + "
" + $(element).attr('src');
        }
    });
  });
</script>
</body>
</html>

execcodegetcode

这写法前面的写法代码少一些,推荐使用。注意使用JQuery时要先引用jquery文件。

本文实例演示及源码文件下载

demodownload

 

 

打赏一下,我们会为大家提供更多优质资源!

相关文章,95%的人会看!{有内幕、有真相...}

看过本文的人还看过

微信扫一扫

站长微信账号