javascript dom編程藝術筆記之圖片庫的改進

来源:http://www.cnblogs.com/wr314/archive/2016/03/28/5328599.html
-Advertisement-
Play Games

dom的操作要遵守的原則 1.平穩退化 2.分離javascript 3.向後相容 4.性能考慮 改進後的顯示圖片方法 新添加的分離html和javascript方法 添加事件的方法 ...


dom的操作要遵守的原則

1.平穩退化

2.分離javascript

3.向後相容

4.性能考慮

 

改進後的顯示圖片方法

 

function showpic(whichpic){
    if(!document.getElementById("placeholder")) return false;
    var source=whichpic.getAttribute("href");
    var placeholder=document.getElementById("placeholder");
    if(placeholder.nodeName!="IMG") return false;
    placeholder.setAttribute("src",source);
    if(document.getElementById("description")){
    var text=whichpic.getAttribute("title")?whichpic.getAttribute("title"):"";
    var description=document.getElementById("description");
    if(description.firstChild.nodeType==3){
        discription.firstChild.nodeValue=text;
     }
    }
    return true;
}

 

新添加的分離html和javascript方法

function prepareGallery(){
    if(!document.getElementById) return false;
    if(!document.getElementByTagName) return false;
    if(!document.getElementById("imagegallery")) return false;
    var gallery=document.getElementById("imagegallery");
    var link=gallery.getElementByTagName("a");
    for(var i=0; i<link.length ;i++){
        link[i].onclick=function(){
            return showpic(this) ? false:true;
        }
    }
}

 

添加事件的方法

function addLoadEvent(func){
    var oldonload=window.onload;
    if(typeof window.onload!='function'){
        window.onload=func;
    }else{
        window.onload-function(){
            oldonload();
            func();
        }
    }
 }

您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • 獲取【下載地址】 QQ: 313596790 【免費支持更新】三大資料庫 mysql oracle sqlsever 更專業、更強悍、適合不同用戶群體【新錄針對本系統的視頻教程,手把手教開發一個模塊,快速掌握本系統】A 集成代碼生成器(開發利器); 技術:313596790 增刪改查的處理類,ser ...
  • × 目錄 [1]text-align [2]writing-mode [3]dir[4]direction[5]unicode-bidi 前面的話 一般地,正常網頁文本方向都是從上到下,從左到右。實際上,有多種設置文本方向的屬性,前面已經詳細介紹過text-align,HTML全局屬性中有一個"di ...
  • Sass Maps 的函數-map-remove($map,$key),keywords($args) map-remove($map,$key) map-remove($map,$key)函數是用來刪除當前$map中的某一個$key,從而得到一個新的 map,其返回的值是一個map.他並不能直接從 ...
  • 作為一名Vue.js的忠實用戶,我想有必要寫點文章來歌頌這一門美好的語言了,我給它的總體評價是“簡單卻不失優雅,小巧而不乏大匠”,下麵將圍繞這句話給大家介紹Vue.js,希望能夠激發你對Vue.js的興趣。 Vue.js簡介 Vue.js的作者為Evan You(尤雨溪),任職於Google Cre ...
  • 1. bootstrap 是什麼? 簡潔、直觀、強悍的前端開發框架,讓web開發更迅速、簡單。 2. bootstrap 原理介紹。 Bootstrap建立了一個響應式的12列格網佈局系統,它引入了(固定式)fixed和(流式)fluid-with兩種佈局方式。Bootstrap 是移動設備優先的。 ...
  • <script> function 事件名字(){var 代稱=document.getElementById("標簽id“) 代稱.style.css 代稱.style.css ...... } </script> 滑鼠點擊 滑鼠放上去 滑鼠離開等效果執行事件名字 alert:彈出提示框 aler ...
  • javascript!是一門非常強大的腳本語言,應用的範圍非常廣泛,每一個web開發者學好javascript也是必須的,本套視頻教程詳細的講解了javascript各個知識點、關鍵點,其中涉及到高深的函數概念、原型概念、介面概念、單體概念、更是詳細的講解了javascript設計模式。 本視頻教程 ...
  • Media Queries是CSS3最具革命性的功能之一,它使得我們的網站能夠適配各種不同的設備。具體來說,開發人員可以使用Media Queries來識別設備環境,然後根據不同的設備環境應用不同的CSS規則,從而可以實現在不同的設備下,使用不同的佈局和皮膚。 語法 應用Media Queries有 ...
一周排行
    -Advertisement-
    Play Games
  • 移動開發(一):使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說,近來想嘗試開發一款安卓APP,考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP,畢竟是使用Visual Studio開發工具,使用起來也比較的順手,結合微軟官方的教程進行了安卓 ...
  • 前言 QuestPDF 是一個開源 .NET 庫,用於生成 PDF 文檔。使用了C# Fluent API方式可簡化開發、減少錯誤並提高工作效率。利用它可以輕鬆生成 PDF 報告、發票、導出文件等。 項目介紹 QuestPDF 是一個革命性的開源 .NET 庫,它徹底改變了我們生成 PDF 文檔的方 ...
  • 項目地址 項目後端地址: https://github.com/ZyPLJ/ZYTteeHole 項目前端頁面地址: ZyPLJ/TreeHoleVue (github.com) https://github.com/ZyPLJ/TreeHoleVue 目前項目測試訪問地址: http://tree ...
  • 話不多說,直接開乾 一.下載 1.官方鏈接下載: https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe,運行開始下載SQL server; 二. ...
  • 前言 隨著物聯網(IoT)技術的迅猛發展,MQTT(消息隊列遙測傳輸)協議憑藉其輕量級和高效性,已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫,為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog支持多種接收器用於日誌存儲,增強器用於添加屬性,LogContext管理動態屬性,支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項,適用於不同需求。 ...
  • 目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據,爬取信息時需要模擬瀏覽器行為,否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下: 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • 1.前言 什麼是熱更新 游戲或者軟體更新時,無需重新下載客戶端進行安裝,而是在應用程式啟動的情況下,在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR,Xlua,ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles,Addressable, ...
  • 本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺,其實像阿裡雲,騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後,它會送 ...
  • 通過以下方式可以高效,並保證數據同步的可靠性 1.API設計 使用RESTful設計,確保API端點明確,並使用適當的HTTP方法(如POST用於創建,PUT用於更新)。 設計清晰的請求和響應模型,以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證,確保接收到的數據符合預期格 ...