HTML CSS js jQuery

時間 2019-12-01

標籤 html css jquery 欄目 HTML 简体版

原文原文鏈接

html負責內容,css負責提供關於表示的信息,js負責關於"行爲"的信息.(結構層→表示層→行爲層)javascript

HTML

1 盒子模型 margin paddingcss

二、display:none和visibility:hidden區別html

CSS display:none;java

使用該屬性後，HTML元素（對象）的寬度、高度等各類屬性值都將「丟失」;node

visibility:hidden;程序員

使用該屬性後，HTML元素（對象）僅僅是在視覺上看不見（徹底透明），而它所佔據的空間位置仍然存在，也便是說它仍具備高度、寬度等屬性值。編程

三、亂碼解決閉包

我只是添加了一行app

<meta http-equiv="content-type" content="text/html;charset=UTF-8">

看文章，其實只要添加函數

<meta charset="utf-8">

四、給網頁的標籤加上logo

<link rel="shortcut icon" href="/path/to/your/logoico">

先本身畫好了logo，大小爲16×16像素的圖片，而後利用站點http://www.chami.com/html-kit/services/favicon/將你的圖片轉換成ico格式的，最後在你的文檔中增長上面一句話就OK啦！

CSS

一、在進行float設置以後會影響後面的div或者其餘標籤的float屬性，這時的解決方法是在後面加一個div

<div style="clear:both"></div>

這行代碼純粹是爲了消除float屬性

二、文檔流，css中很重要的一個屬性

文檔流：將窗體自上而下分紅一行行, 並在每行中按從左至右的順序排放元素。

position:absolute;絕對定位,

　　•即徹底脫離文檔流, 相對於position屬性非static值的最近父級元素進行偏移

position:fixed;固定定位,IE6及如下版本不支持。在 網頁中走不掉的廣告

　　•即徹底脫離文檔流, 相對於視區進行偏移.

position:relative;相對定位,

　　•這個屬性值保持對象所在文檔流中的位置，相對於元素在文檔流中位置進行偏移. 但保留原佔位.能夠設置top, left, right, bottom定位

position:static; 默認值文檔流

三、z-index

程序員讓屏幕變成了三維的了

z-index大的在上面，它的值越大，就越靠近瀏覽者的眼睛

四、margin標記能夠帶一個、二個、三個、四個參數，各有不一樣的含義。

margin: 20px;（上、下、左、右各20px。）

margin: 20px 40px;（上、下20px；左、右40px。）

margin: 20px 40px 60px;（上20px；左、右40px；下60px。）

margin: 20px 40px 60px 80px;（上20px；右40px；下60px；左80px。）

五、將ul變成一行

<head>
    <title>將ul變成一行</title>
    <style type="text/css">
        li{display:inline;padding:0 15px 0 0;}
    </style>
</head>
<body>
    <ul>
        <li>the first line</li>
        <li>the second line</li>
        <li>the third line</li>
        <li>the fourth line</li>
        <li>the fifth line</li>
    </ul>
</body>

這樣變成：

前面老是有個小的空隙（如上圖的紅色方框），根據查詢，須要將樣式設置爲

ul,li {margin:0;padding:0;}

因而樣式修改成：

<style type="text/css">
        li{display:inline;padding:0 15px 0 0;}
        ul{padding:0;}
</style>

這樣就好了。

六、display的做用

縱向排列的元素，display:inline以後就在一行了

橫向排列的元素，display:block以後每個元素就是一行了

display:none消失不見

七、position 屬性值的含義(來自w3school，這個要記錄一下，由於以前搞錯，還有float屬性)：

static: 元素框正常生成。塊級元素生成一個矩形框，做爲文檔流的一部分，行內元素則會建立一個或多個行框，置於其父元素中。
relative: 元素框偏移某個距離。元素仍保持其未定位前的形狀，它本來所佔的空間仍保留。
absolute: 元素框從文檔流徹底刪除，並相對於其包含塊（容器）定位。包含塊多是文檔中的另外一個元素或者是初始包含塊。元素原先在正常文檔流中所佔的空間會關閉，就好像元素原來不存在同樣。元素定位後生成一個塊級框，而不論原來它在正常流中生成何種類型的框。
fixed: 元素框的表現相似於將 position 設置爲 absolute，不過其包含塊（容器）是視窗自己。

static、relative是在文檔流中的，absolute、fixed是脫離文檔流的。

八、一開始沒理解好的css屬性：display、position、float

js(DOM腳本)

一、方法直接調用爲函數，用new調用爲對象

二、函數閉包(Closer)

簡單理解：閉包就是可以讀取其餘函數內部變量的函數。閉包有兩個很重要的做用：一個是前面提到的能夠讀取函數內部的變量，另外一個就是讓這些變量的值始終保持在內存中。

NOTE：理解了函數也是值。因此返回的是一個函數以及他的上下文，其實就是返回了一堆數值。這堆數值就是閉包。

三、一個節點的結構

<p id="discription" title="a gentle reminder">Don't forget to buy this stuff</p>

DOM節點包含着其餘類型的節點，這裏就列舉了其中的三種：元素節點、文本節點、文本節點。要注意的是，包含在<p>元素裏的文本是另外一種節點，他是<p>元素的第一個子節點。因此用alert(discription.nodeValue)返回的是null值，alert(discription.childNodes[0].nodeValue);或者alert(discription.firstChild.nodeValue);是能夠正常顯示文本節點中的內容的。

四、用return false能夠阻止js的動做

<a href="http://www.baidu.com" onclick="return false;">百度</a>

這樣按下「百度」，是不會跳轉到http://www.baidu.com，由於有了return false;

因此，onclick="showpic(this);return false;" 固然這裏的showpic(showwhat)已經在js中被定義，這樣就能夠執行了showpic的動做，而且不進行其餘的動做。

五、事件綁定

要注意一點在進行事件綁定的時候不能寫上參數上的括號，那樣是接受函數的返回值，而不是進行事件綁定。

//定義了一個函數
function firstFunction(a,b){....}
//定義第二個函數
function secondFunction(c,d){....}
//將函數綁定在window.onload事件上
window.onload=firstFunction；
//下面這樣寫是不正確的
window.onload=firstFunction();
//要是綁定了兩個函數能夠這樣寫
window.onload=function(){
    firstFunction();
    secondFunction();
}
//這樣寫是錯誤的
window.onload=firstFunction;
window.onload=secondFunction;     //這樣只是將secondFunction綁定在了window.onload上

六、爲了將「動做」與內容分離

在.js文件中定義事件

object.onclick=function(){.....}

七、在DOM看來，一個文檔就是一棵節點樹

八、動態建立標記

傳統的方法有:document.write()、innerHTML

DOM方法:先建立元素或者文本節點(createElement方法、createTextNode方法)，再將他們加載到文檔中(appendChild方法、insertBefore方法)。因此總結DOM方法動態建立就是：建立元素節點用createElement、建立屬性節點用object.setAttribute("","")、建立文本節點用createTextNode方法

九、對象關係

parentNode、nextSibling、previousSibling、childNodes、firstChild、lastChild
十、html標籤的style屬性以及用js設置樣式

typeof element.style獲得的結果不是一個string，而是object。能夠用element.style.color獲取對象的color屬性。

注意：style="font-family:.."　　獲取font-family不能用element.type.font-family這樣會吧-解析成減號，應寫成element.type.fontFamily。

這樣在js中設置樣式的格式就清晰了。好比：element.style.color="red";

另外一種思路：改變className屬性。不經過js改變樣式，樣式仍是由css寫，可是能夠經過js改變元素的className，或者增長他的class。

十一、動畫

動畫就是隨着時間改變樣式的例子。

十二、爲了使browser不會變得很複雜，js是一個單線程模型。爲了解決"等待中的任務佔用線程後面的任務不能及時進行"的困境，js利用了Event Loop

1三、函數也是值

因此在js的構造函數中，理解js面向對象編程，對象是一個容器，包括對象的屬性和方法。方法也能夠理解爲一個屬性，因此用一個JSON就能夠理解一個對象，記得用this。JavaScript語言沒有「類」，而改用構造函數（constructor）做爲對象的模板。

jQuery

一、jQuery很重要的一個概念就是jQuery的對象，又稱包裝集。能夠理解爲一個DOM對象集合。因此，一個jQuery對象能夠用「加一箇中括號，並填入相應的下標」，將一個jQuery對象轉化爲一個DOM對象。而一個DOM對象則直接將其放在$()中就能夠成爲一個jQuery對象。$("")中放一個css的選擇器也是jQuery對象。

<script>
    $(document)     //document是一個DOM對象，這樣封裝一下就是一個jQuery對象
    $("input")         //括號中間有雙引號，中間加一個input，就是全部input標籤
    $("input").[0]    //$("input")中的第一個對象，也是一個DOM對象
</script>