原创 標籤實現響應式圖片

一個picture標籤裏面可以包含多個source標籤,每個source標籤裏可以使用媒體查詢和設置srcset屬性,瀏覽器會遍歷picture標籤中的每個source標籤,根據當下的情況,找到最合適的srcset,然後來設置i

原创 HTML5 註釋標籤

ruby可以作註釋標籤,內部有rp和rt標籤。 <ruby> 標記定義註釋或音標。 <rp>  告訴那些不支持ruby元素的瀏覽器該如何顯示。 <rt> 標記定義對ruby註釋的內容文本。 代碼如下,來給一句日語做個

原创 面對對象和prototype繼承的理解總結

一些基於自己的理解和總結,如有錯誤望指出。 1怎麼理解構造函數 構造函數:所謂"構造函數",其實就是一個普通函數,但是內部使用了this變量。對構造函數使用new運算符,就能生成實例,並且this變量會指向實例對象。 構造函數每次實例化都是

原创 ScrollTop的兼容問題

今天在練習一個項目的時候,發現效果不能同時在谷歌和火狐正常顯示,原來是因爲通過判斷DTD是否聲明而導致了瀏覽器不兼容。 一下是解決的幾種方法。 方法一: // 獲取scrolltop function getScrollTop(

原创 對於面對對象和prototype的理解

面向過程和麪向對象 面向過程和麪向對象的區別 面向過程就是分析出解決問題所需要的步驟,然後用函數把這些步驟一步一步實現,使用的時候一個一個依次調用就可以了。就是使用函數將一個大的功能分成很多小功能,每個功能稱之爲一個過程,這就是面向過程

原创 函數的公有屬性和私有屬性

公有屬性:函數內部定義的屬性,但是在對象實例化後也可以調用。 私有屬性:只能在函數內部使用。好處就是安全,就類似閉包中的函數一樣,減少污染。 function Person(name){ //私有屬性,只能在對象構造函數內部使

原创 內存

引用類型和值類型 哪些是引用類型,哪些是值類型? undefined, number, string, boolean屬於值類型,不是對象。 函數、數組、對象、null 都是對象。他們都是引用類型。 <script> cons

原创 HTML5 <ruby>註釋標籤

ruby可以作註釋標籤,內部有rp和rt標籤。 <ruby> 標記定義註釋或音標。 <rp>  告訴那些不支持ruby元素的瀏覽器該如何顯示。 <rt> 標記定義對ruby註釋的內容文本。 代碼如下,來給一句日語做個小注釋:

原创 JS得到CSS的樣式

obj.style.attr 在js中得到css的樣式一般可以用obj.style.attr的形式來獲取。 obj 需要得到樣式的目標節點。 attr 要得到的樣式屬性。 例如 obj.style.left 得到obj的left的值

原创 JS/jQuery判斷數據類型的幾種方式

JavaScript提供判斷數據類型的一些方法: 方法一:typeof; 方法二:tostring.call(); 方法三:Instanceof 和 constructor; 方法四:hasOwnProperty; <script>

原创 JS格式化時間

'use strict'; // 對Date的擴展,將 Date 轉化爲指定格式的String // 月(M)、日(d)、小時(h)、分(m)、秒(s)、季度(q) 可以用 1-2 個佔位符, // 年(y)可以用 1-4 個佔位符,毫

原创 oninput/ onpropertychange仿淘寶搜索框

oninput 大部分瀏覽器支持 檢測用戶表單輸入內容 onpropertychange ie678 檢測用戶表單輸入內容 <!DOCTYPE html> <html> <head lang="en"> <meta ch

原创 class類的封裝

目的 : 解決了瀏覽器對document.getElementsByClassName()的兼容問題。 思維導圖: 代碼: <!DOCTYPE html> <head> <meta charset="UTF-8"> <t

原创 JS實現全選和反選

<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <script> window.onloa

原创 JS封裝一個緩動運動框架

// 得到css樣式 function getStyle(obj,attr) { if (obj.currentStyle) { return obj.currentStyle[attr]; // ie瀏覽器