上一篇文章說了一下,PHP利用正規表達式來獲取htnl內容中的所有圖片,并獲取其中的各個屬性。但是在很多的地方還是利JQ來改變DOM節點可以達到這樣的目的。今天就遇到了一個,圖片燈箱的插件,需要改變圖片的屬性來實現效果,當然在我們編輯文章的時候,是不可能每次都要改變圖片的屬性的,尤其對小白來說。

比如我用到的插件,需要向在文章中的圖片元素中加入“data-source”屬性,并賦予其圖片的地址。如果我們在編輯文章直接給圖片這樣的屬性,是很好的解決問題,但如果讓一個不懂代碼的小白去編輯文章呢?

利用JQuery來獲取HTML中的所有圖片以及圖片屬性

實現要要求:

1、向文章中所有的圖片加入“data-source”屬性,并賦予其圖片地址

2、加入其他屬性,比如"class"其值為“js-lightbox”

3、用JQuery代碼實現

HTML代碼

<div id="mochu">
    <p>內容。。。。<./p>
    <p><img src="xxxx.png"/></p>
    <p><img src="xxxx1.png"/></p>
    <p><img src="xxxx2.png"/></p>
    <p>內容</p>
</div>

JQuesy代碼

$("#mochu img").each(function(){
    var url = $(this).attr("src");
    $(this).attr("data-source",url);
    $(this).attr("class","js-lightbox");
});

代碼解釋:

1、先確定要修改圖片元素的位,也就是哪個元素下的所有圖片

2、.each()方法規定為每個匹配元素規定運行的函數,也就是循環

3、獲取每個圖片的地址,并賦值給新插入的屬性data-source

国产视频app4、插入新屬性class 并賦值js-lightbox

国产视频app5、完成,收工.......

代碼在本地測試無問題,如果你使用此代碼不運行或運行出錯,那個你第一個要檢查一下,是否引入了JQuery這個文件,第二檢查一下元素的ID或是clsaa屬性值是否匹配。

今天,寫到這樣,如果你感覺此代碼不錯,就點個贊吧!打賞一下也可以(捂臉笑)