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

贊助商

分類目錄

贊助商

最新文章

搜索

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

作者:admin    時(shí)間:2016-11-12 0:24:43    瀏覽:

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

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

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)頁(yè)或文章或某DIV所有圖片_JS實(shí)例_卡卡網(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)頁(yè)所有圖片：";
            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

上述例子是通過(guò) document.getElementsByTagName('img') 來(lái)獲得網(wǎng)頁(yè)所有圖片對(duì)象的，然后通過(guò)for循環(huán)得到各圖片的URL地址。

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

實(shí)際使用中，我們往往不要獲得網(wǎng)頁(yè)的所有圖片，而是要獲得某個(gè)區(qū)塊的圖片，例如如果我們要獲得文章的所有圖片，那又該怎么寫Javascript代碼呢？請(qǐ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)頁(yè)或文章或某DIV所有圖片_JS實(shí)例_卡卡網(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

其實(shí)我們只需更改上述代碼的一條語(yǔ)句即可，即是把

document.getElementsByTagName('img')

改為

document.getElementById('容器ID').getElementsByTagName('img')

或改為

document.getElementsByClassName('容器類名')[0].getElementsByTagName('img')

特別注意，getElementsByClassName('容器類名')返回一個(gè)數(shù)組列，例如網(wǎng)頁(yè)有多個(gè)div使用了此類，所以要用 [0]、[1]、[2]...來(lái)準(zhǔn)確定位是哪個(gè)。

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

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

我們還可以通過(guò)

document.getElementsByName('name名稱')

來(lái)獲得容器對(duì)象。

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

JQuery獲取網(wǎng)頁(yè)文章或某個(gè)容器的所有圖片的寫法跟Javascript有些不同，其實(shí)思路是一樣。

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)頁(yè)或文章或某DIV所有圖片_JS實(shí)例_卡卡網(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時(shí)要先引用jquery文件。

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

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)頁(yè)或文章或某DIV所有圖片_JS實(shí)例_卡卡網(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時(shí)要先引用jquery文件。

本文實(shí)例演示及源碼文件下載

demodownload

 

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