前端工具使用記錄(css/js/htm)

一、css功能(Cascading Style Sheets)
1.內部樣式表直接在標籤內部定義,使用style屬性,寫法如下:

<style></style>

2.使用外部樣式表時,CSS文件與網頁文件(html)是分離開來的。要讓某一個網頁調用一個外部CSS文件,你需要在網頁的部分插入以下內容:

<link rel="stylesheet" type="text/css"  href="文件位置/你的CSS文件名.css" />

3.內聯樣式是直接在html標籤上定義該標籤的css樣式,如:

<div style="width:200px;height:30px;"></div>

順序:
瀏覽器默認樣式 < 瀏覽器用戶自定義樣式 < 外部樣式表 < 內部樣式表 < 內聯樣式表
樣式表內部選擇器生效順序:
標籤選擇器 <類選擇器 < 類派生選擇器 < ID選擇器 < ID派生選擇器

生效規則:

  1. 樣式表的元素選擇器選擇越精確,則其中的樣式優先級越高。
    id選擇器指定的樣式 > 類選擇器指定的樣式 > 元素類型選擇器指定的樣式
  2. 對於相同類型選擇器指定的樣式,在樣式表文件中,越靠後的優先級越高。
  3. 一個元素同時應用多個class,後定義的優先(即近者優先)
  4. 如果要讓某個樣式的優先級變高,可以使用!important來指定。

權重分爲四個等級

第一等:內聯樣式,權重1000,即標籤內的style屬性設置的樣式

第二等:ID選擇器,權重100,例如#id{...}

第三等:類選擇器,僞類選擇器,屬性選擇器,權重10,例如.class{...}、:hover{...}、[arrtibute=value]

第四等:標籤選擇器,僞元素選擇器,權重1,例如div{...}、::after{...}

根據樣式根據以上規則,按照選擇器累加計算權重,例如
#my-id .my-class div p{…}
對於p標籤的來說,這個樣式的權重就是100+10+1+1=112,如果p還有別的樣式,只要小於(嚴格小於)112,就使用這個樣式,別的樣式無效。

display 屬性 none(此元素不會被顯示)、block(此元素將顯示爲塊級元素,此元素前後會帶有換行符)、inline(默認。此元素會被顯示爲內聯元素,元素前後沒有換行符)、inline-block(行內塊元素)

二、html
全寫: HyperText Mark-up Language 譯名: 超文本標識語言.
通過標籤來控制網頁的文檔、字符和段落等的格式,以及對腳本語言等的調用;純文本文件;文件擴展名: .html;html文件必須在Web瀏覽器上運行。

一份 HTML 文件的基本架構 :

<!doctype html>
<HTML>  
<HEAD>  
<title>HTML超文本標記語言在線教程</title>
 <meta http-equiv="Content-Type" content="text/html; charset=gb2312">
  <meta name="author" content="合肥世傑">  
<meta name="keywords" content="html,css,asp,jsp,php">
 <meta name="description" content="世傑教育網站!"> 
 <meta http-equiv="refresh" content="10">  
 <meta http-equiv="refresh" content="2;url=http://www.163.com"> 
  <meta http-equiv="Expires" content="01 Jan 2008 00:00:00"> 
  <base href="http://www.sje.com.cn" target="_blank"> 
  <link href="../css.css" rel="stylesheet" type="text/css">  
  <link rel="fontdef" src="Amelia.pfr"> 
  </HEAD>  
  <BODY> 網頁的內容,很多標記都作用於此  
  <script src="/jquery.js"></script>
  </BODY> 
   </HTML>

三、bootstrap
文本的顏色:.text-muted, .text-primary, .text-success, .text-info, .text-warning, .text-danger, .text-secondary, .text-white, .text-dark and .text-light
背景顏色:.bg-primary, .bg-success, .bg-info, .bg-warning, .bg-danger, .bg-secondary, .bg-dark 和 .bg-light

四、javascript
以on爲前綴的屬性綁定一個回調,例如onclick
window.οnlοad=function(){//當文檔加載完成後,執行}

use strict //如果瀏覽器支持,開啓ECMAScript 5的嚴格模式
JavaScript是用unicode字符集編寫的。區分大小寫。
JavaScript標識符由字母、下劃線或美元符號($)開始,後續字符由字母、數字、下劃線或美元符號。
JavaScript數據類型分爲原始類型(primitive type)和對象類型(Object type)。JavaScript原始類型分爲數字、字符串、布爾類型。JavaScript有兩個特殊的原始值:null(空)和undefined(未定義)。
不在函數內聲明的變量稱爲全局變量,在JavaScript程序中任何地方都可見。
在函數內聲明的變量,只在函數內可見。

運算符包括加法(+)、減法(-)、乘法(*)、除法(/)和求餘(%)。
返回undefined說明這個屬性或元素不存在,如果函數沒有返回值,則返回undefined。
在函數體內,局部變量的優先級高於全局變量。

JavaScript爲屬性訪問有兩種:
expression.identifier
expression[expression]

===稱爲嚴格相等運算符,檢查兩個操作數是否嚴格相等;==檢查兩個操作數是否相等,允許進行數據轉換。

delete刪除對象屬性或數組元素,例如:
delete o.x
delete a[2]

每個對象擁有三個相關的對象特性:
1.對象的原型 對象的屬性繼承自它的原型對象
2.對象的類 標識對象類型的字符串
3.對象的擴展標記

創建對象方法:
1.對象直接量 var empty = {}
2.關鍵字new var empty = new Object()
3.Object.create()

查詢一個不存在的屬性,並不會報錯,而是返回undefined
getter和setter屬性
var oo = {
name : ‘賢心’,
get sex(){
return ‘man’;
}
};
oo.sex = ‘woman’;
console.log(oo.sex); //結果依然是man

數據屬性的4個特性是:值、可寫性、枚舉、可配置性。
對象的三個屬性:原型(prototype)、類(class)和可擴展性(extensible attribute)。
要想創建屬性或設置屬性,需要調用Object.defineProperty()
Object.defineProperty(obj, prop, descriptor) // 對象、屬性、描述符
Object.defineProperty(a, “length”, {writeable:false})

JSON.stringify()序列化
JSON.parse()反序列化

數組元素可以是任意類型,並且同一個數組中的元素可以是不同的類型。
var a = [];
var b = new Array();

push()在數組尾部添加一個元素
pop() 方法將刪除 arrayObject 的最後一個元素,把數組長度減 1,並且返回它刪除的元素的值。如果數組已經爲空,則 pop() 不改變數組,並返回 undefined 值。
遍歷可以用for()或for( in )方式
arrayObject.join(separator)該字符串是通過把 arrayObject 的每個元素轉換爲字符串,然後把這些字符串連接起來,在兩個元素之間插入 separator 字符串而生成的.
arrayObject.reverse()方法用於顛倒數組中元素的順序
arrayObject.sort(sortby)方法用於對數組的元素進行排序。如果調用該方法時沒有使用參數,將按字母順序對數組中的元素進行排序,說得更精確點,是按照字符編碼的順序進行排序。
function sortNumber(a, b) {
return a - b;
}
var a = [11, 2, -3, 4, 5];
a.sort(sortNumber);
arrayObject.concat(arrayX,arrayX,…,arrayX)方法用於連接兩個或多個數組
arrayObject.slice(start,end)方法可從已有的數組中返回選定的元素。
arrayObject.splice(index,howmany,item1,…,itemX) :index 必需。整數,規定添加/刪除項目的位置,使用負數可從數組結尾處規定位置。
howmany必需。要刪除的項目數量。如果設置爲 0,則不會刪除項目。
item1, …, itemX 可選。向數組添加的新項目。

arrayObject.shift()方法用於把數組的第一個元素從其中刪除,並返回第一個元素的值。如果數組是空的,那麼 shift() 方法將不進行任何操作,返回 undefined 值。請注意,該方法不創建新數組,而是直接修改原有的 arrayObject
arrayObject.unshift(newelement1,newelement2,…,newelementX)方法可向數組的開頭添加一個或更多元素,並返回新的長度。
every() 方法用於檢測數組所有元素是否都符合指定條件(通過函數提供)。如果數組中檢測到有一個元素不滿足,則整個表達式返回 false ,且剩餘的元素不會再進行檢測;如果所有元素都滿足條件,則返回 true。every() 不會對空數組進行檢測;不會改變原始數組。
array.every(function(currentValue,index,arr), thisValue)
some() 方法用於檢測數組中的元素是否滿足指定條件(函數提供)。如果有一個元素滿足條件,則表達式返回true , 剩餘的元素不會再執行檢測。some() 不會對空數組進行檢測;不會改變原始數組。array.some(function(currentValue,index,arr),thisValue)
stringObject.indexOf(searchvalue,fromindex)方法可返回某個指定的字符串值在字符串中首次出現的位置。
Array.isArray(obj)方法用於判斷一個對象是否爲數組。
array.reduce(function(total, currentValue, currentIndex, arr), initialValue)方法接收一個函數作爲累加器,數組中的每個值(從左到右)開始縮減,最終計算爲一個值。

匿名函數:沒有實際名字的函數
(function (){
//由於沒有執行該匿名函數,所以不會執行匿名函數體內的語句。
console.log(“張培躍”);
})
如果需要執行匿名函數,在匿名函數後面加上一個括號即可立即執行!
(function (str){
console.log(“str=”+str);
})(“good luck!”)

function前面的圓括號是必須的,JavaScript解析器會將其解析爲函數定義表達式,函數後面跟着(),這樣定義的函數會立即調用。
閉包就是跨作用域訪問變量 —— 內部作用域可以保持對外部作用域中變量的引用從而使得(更)外部作用域可以訪問內部作用域中的變量。
閉包引用的外層作用域內的變量依然存在,並且將一直存在,直到執行閉包的的作用域被銷燬,這裏的局部變量纔會被銷燬。

爲什麼需要閉包?
局部變量無法共享和長久的保存,而全局變量可能造成變量污染,所以我們希望有一種機制既可以長久的保存變量又不會造成全局污染。

特點:佔用更多內存;不容易被釋放

如何使用?
1.定義外層函數,封裝被保護的局部變量
2.定義內層函數,執行對外部函數變量的操作
3.外層函數返回內層函數的對象,並且外層函數被調用,結果保存在一個全局的變量中

function fn(){
var num = 3;
return function(){
var n = 0;
console.log(++n);
console.log(++num);
}
}
var fn1 = fn();
fn1();
fn1();
輸出: 1 4 1 5
匿名函數作爲fn的返回值被賦值給了fn1,這時候相當於fn1=function(){var n = 0 … },並且匿名函數內部引用着fn裏的變量num,所以變量num無法被銷燬,而變量n是每次被調用時新創建的,所以每次fn1執行完後它就把屬於自己的變量連同自己一起銷燬,於是乎最後就剩下孤零零的num,於是這裏就產生了內存消耗的問題。

call 和 apply 都是爲了改變某個函數運行時的上下文(context)而存在的,換句話說,就是爲了改變函數體內部 this 的指向。
function fruit(){}
fruit.prototype = {
color: ‘red’,
say: function(){
console.log(“My color is:” + this.color);
}
}
var apple = new fruit();
apple.say();
var banana = {
color: ‘yellow’,
};
apple.say.call(banana);
apple.say.apply(banana);
輸出:My color is:red
My color is:yellow
My color is:yellow
可以看出 call 和 apply 是爲了動態改變 this 而出現的,當一個 object 沒有某個方法(本栗子中banana沒有say方法),但是其他的有(本栗子中apple有say方法),我們可以藉助call或apply用其它對象的方法來操作。
call 需要把參數按順序傳遞進去,而 apply 則是把參數放在數組裏。

var f = function(){};
var o = new f();
console.log(’–’ + (o.constructor == f));
輸出:true
在這裏插入圖片描述
正則表達
i 執行不區分大小寫匹配
g 執行全局匹配,即找出所有的匹配
m 多行匹配,^匹配一行的開頭和字符串的開頭, $匹配行的結束和字符串的結束。

history是你瀏覽過的網頁的url(簡單的說就是網址)的集合,也就是你的瀏覽器裏的那個歷史記錄。它在js裏是一個內置對象,就跟document一樣,它有自己的方法,go就是其中一個。javascript:history.go(-1)就是返回之前的頁面。

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章