原创 HTML新增API(練習)

拖拽練習1 第一種方式 在外部用一個obj變量存儲着拖拽元素,在到dragstart事件中利用事件委託的形式把每次點擊的元素存儲到obj這個變量當中,在到drop事件中用事件委託的形式把obj添加到節點上(別忘了在dragover事件中清

原创 Jquery插件的編寫及使用分享

jQuery插件開發在項目中的使用是非常方便的,那麼如何來寫一個jQuery插件?接下來我們就來看一看jQuery插件的編寫及使用。 引言: 在項目中不同頁面經常要用到已經寫好的交互,比如彈窗,比如下拉菜單,比如選項卡,比如刪除... 此

原创 Node核心模塊之fs模塊02

前言 我們知道node.js 當中有一個fs.readFile異步方法來讀取文件,其實這個方法是一下子都讀取過來數據的這就造成了你讀取的時候數據比較多的情況,而我們接下來簡紹的流式讀取方式是一點點的讀取而不是一下子都讀取過來的,這樣就解決

原创 HTML表單標籤元素總彙2

textarea(文本區域):定義輸入區也就是所謂的多行文本框 當需要用戶輸入大量數據時使用textarea元素最佳選擇 cols屬性:定義文本區的寬度 rows屬性:定義文本區的高度 wrap屬性:定義用戶輸入內容大小文本域

原创 HTML表單標籤元素總彙1

form(形狀):定義表單的意思 form元素也是一個包含框他包含了所有的表單域元素 enctype是(包裝類型)的簡稱 該屬性將設置表單中用戶輸出的數據發送到服務器時,瀏覽器使用編碼類型 application/x-w

原创 js 函數防抖與節流

前言 我們爲什麼需要函數防抖與節流 我們在實際開發當中,可定會遇見持續觸發的事件如:onmousemove,onchange,resize等這種持續觸發的事件,我們還可能會遇見那麼持續需要點擊的功能:抽獎,點擊購買商品等功能 以

原创 JS題目

第一題 ["1", "2", "3"].map(parseInt) 第二題 [typeof null, null instanceof Object] 第三題 [ [3,2,1].reduce(Math.pow), [].re

原创 H5canvas(繪製矩形,繪製圓形,繪製線段,繪製文字,繪製曲線)

Canvas簡介 canvas 最早由Apple引入WebKit,用於Mac OS X 的 Dashboard,後來又在Safari和Google Chrome被實現。 基於 Gecko 1.8的瀏覽器,比如 Firefox 1.5, 同

原创 H5canvas(保存圖片,globalCompositeOperation)

保存圖片 前言 canvas是畫布的概念,那麼canvas在瀏覽器表現出來的是一張圖片 那麼我們可以把這張圖片右鍵保存(把canvas以圖片的形式保存)(保存的圖片格式是png(底部的透明的) ) 那麼怎麼用js代碼下載canvas圖片

原创 JS當中DOM操作成本到底高在哪兒?

從我接觸前端到現在,一直聽到的一句話:操作DOM的成本很高,不要輕易去操作DOM。尤其是react、vue等mvvm框架的出現,數據驅動視圖的模式越發深入人心,jQuery時代提供的強大便利地操作DOM的API在前端工程裏用的越來越少。

原创 寫React/Vue項目時爲什麼要在列表組件中寫key,其作用是什麼?

寫React/Vue項目時爲什麼要在列表組件中寫key,其作用是什麼? 沒有綁定key的情況下,在遍歷簡會導致虛擬新單模板的情況下,舊節點對比更快,節點也會複用。而這種複用是就地複用,一種鴨子辯型的複用。 <div id="app">

原创 H5canvas(漸變,繪製圖片和視頻,畫布變換,製作馬賽克)

繪製漸變 前言 繪製一條線段 讓這個線段的寬度是10 顏色是藍色 var canvas = document.getElementById('myCanvas'); var cxt = canvas.getContext('2d');

原创 簡紹Node.js

什麼是Node.js 一、node.js是什麼? node.js(他是一個運行環境) 是一個基於 Chrome V8 引擎的 JavaScirpt 運行環境。 二、node使用場景 ' Node 公開宣稱的目標是 “旨在提供一種簡單的構建

原创 HTML列表和表格標籤總彙

列表 1,ul:無序列表(有很多列表信息是不分順序的 在CSS狀態下能夠很好的顯示) ol:有序列表(不過涉及到新聞、買賣條目等信息時可以考慮用有序列表進項結構化這樣可以能夠體現信息的時間順序) li:列表項目 2,type:自定

原创 H5本地存儲(localStorage,sessionStorage)

本地存儲 前言 當你從瀏覽器的角度想一下,以下代碼會在瀏覽器當中執行什麼?? var a = 1; console.log(a);//1 當打開瀏覽器,瀏覽器會解析標籤和腳本做一些事情 1)當前通過谷歌瀏覽器打開了html頁面解析了內部