技術(shù)頻道導(dǎo)航
HTML/CSS
.NET技術(shù)
IIS技術(shù)
PHP技術(shù)
Js/JQuery
Photoshop
Fireworks
服務(wù)器技術(shù)
操作系統(tǒng)
網(wǎng)站運營

贊助商

分類目錄

贊助商

最新文章

搜索

JS/JQuery獲取網(wǎng)頁或文章或某DIV所有圖片

作者:admin    時間:2016-11-12 0:24:43    瀏覽:

要獲取網(wǎng)頁所有圖片，我們可以通過Javascript就能輕松實現(xiàn)，不過要想獲得文章或某容器（如：Div）里所有圖片，使用JQuery而不是Javascript來實現(xiàn)就會變得更加簡單。本文將給你詳細(xì)介紹。

通過Javascript獲取網(wǎng)頁所有圖片

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獲取網(wǎng)頁或文章或某DIV所有圖片_JS實例_卡卡網(wǎng) webkaka.com</title>
</head>
<body>
<img src="http://www.howtostagehomes.com/img/top_logo-new.png" >
<br><br>
<img src="http://www.howtostagehomes.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 = "網(wǎng)頁所有圖片：";
            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') 來獲得網(wǎng)頁所有圖片對象的，然后通過for循環(huán)得到各圖片的URL地址。

通過Javascript獲取網(wǎng)頁文章或某個容器的所有圖片

實際使用中，我們往往不要獲得網(wǎng)頁的所有圖片，而是要獲得某個區(qū)塊的圖片，例如如果我們要獲得文章的所有圖片，那又該怎么寫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獲取網(wǎng)頁或文章或某DIV所有圖片_JS實例_卡卡網(wǎng) webkaka.com</title>
</head>
<body>
<img src="http://www.howtostagehomes.com/img/top_logo-new.png" ><br>
<font style="color:red">非文章</font>圖片地址：http://www.howtostagehomes.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.howtostagehomes.com/img/nowiterm_bg.gif" ><br>
<font style="color:blue">文章</font>圖片地址：http://www.howtostagehomes.com/img/nowiterm_bg.gif
<br><br>
<img src="http://www.howtostagehomes.com/img/menu_bg_right.jpg" ><br>
<font style="color:blue">文章</font>圖片地址：http://www.howtostagehomes.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('容器類名')返回一個數(shù)組列，例如網(wǎng)頁有多個div使用了此類，所以要用 [0]、[1]、[2]...來準(zhǔn)確定位是哪個。

此外，如果容器聲明了name屬性，如：

<div id="main" class="content" name="mycontent">...</div>

我們還可以通過

document.getElementsByName('name名稱')

來獲得容器對象。

通過JQuery獲取網(wǎng)頁文章或某個容器的所有圖片

JQuery獲取網(wǎng)頁文章或某個容器的所有圖片的寫法跟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獲取網(wǎng)頁或文章或某DIV所有圖片_JS實例_卡卡網(wǎng) webkaka.com</title>
</head>
<body>
<img src="http://www.howtostagehomes.com/img/top_logo-new.png" ><br>
<font style="color:red">非文章</font>圖片地址：http://www.howtostagehomes.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.howtostagehomes.com/img/nowiterm_bg.gif" ><br>
<font style="color:blue">文章</font>圖片地址：http://www.howtostagehomes.com/img/nowiterm_bg.gif
<br><br>
<img src="http://www.howtostagehomes.com/img/menu_bg_right.jpg" ><br>
<font style="color:blue">文章</font>圖片地址：http://www.howtostagehomes.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

關(guān)鍵代碼 $("#main img") 或 $(".content img") 獲得容器里的所有圖片。并且要注意使用JQuery時要先引用jquery文件。

JQuery獲取網(wǎng)頁文章或某個容器的所有圖片，還有另一個寫法。

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獲取網(wǎng)頁或文章或某DIV所有圖片_JS實例_卡卡網(wǎng) webkaka.com</title>
</head>
<body>
<img src="http://www.howtostagehomes.com/img/top_logo-new.png" ><br>
<font style="color:red">非文章</font>圖片地址：http://www.howtostagehomes.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.howtostagehomes.com/img/nowiterm_bg.gif" ><br>
<font style="color:blue">文章</font>圖片地址：http://www.howtostagehomes.com/img/nowiterm_bg.gif
<br><br>
<img src="http://www.howtostagehomes.com/img/menu_bg_right.jpg" ><br>
<font style="color:blue">文章</font>圖片地址：http://www.howtostagehomes.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

 

標(biāo)簽: JQuery  
相關(guān)文章
    x
    • 站長推薦
    /* 左側(cè)顯示文章內(nèi)容目錄 */