【學習筆記】前端學習筆記 HTML+CSS+JavaScript+JQuery
阿新 • • 發佈：2018-12-12
學這些太痛苦了，我一定要成為演算法工程師！
HTML
簡介
- Hyper Text Mark Language，超文字標記語言，使用一套標記標籤來描述網頁。
- 標籤，開始標籤，結束標籤，標籤內容，屬性。開始標籤後加
/來結束，如<br/>。推薦使用小寫。 - 標題
<h1>,註釋<!-- 註釋-->，水平線<hr />，段落<p>。 - 樣式
<style>，直接修改樣式的標籤已被廢棄。<p style="font-family:arial; color:red; font-size:20px;">A paragraph.</p>. - 格式化：文字格式化，輸出格式化，引用，留坑。
- 連結：
<a href="url">Link text</a>，新視窗顯示，target屬性target="_blank"，定義錨name="tips"，指向錨<a href="#tips">.注意：將正斜槓新增到子資料夾後。 - 影象：
<img>，影象來源src，替換文字（無法顯示時）alt。<map>和<area>可以定義影象地圖，留坑。 - 表格：表格
<table>，表頭<th>，行<tr>，單元格<td>，空單元格佔位（空格） 。 - 列表：無序列表
<ul>,<li>，有序列表<ol>,<li>，自定義列表<dl>,<dt>,<dd>. - 塊元素
<div>等，會換行；內聯元素<span>等，不換行。都可以設定類。div經常用於佈局。
例項http://www.w3school.com.cn/html/html_layout.asp. - 響應式設計Responsive Web Design，以可變尺寸傳遞網頁，Bootstrap留坑。
- 框架
<frameset>，同一頁面上顯示多份文件，不可與<body>同時使用。不可修改大小noresize="noresize".可用作導航等，跳轉等。 - 內聯框架
<iframe>，顯示子網頁，可以在子網頁中開啟指定的連結。 - 頭部元素：定義標題
<title>，預設連結<base href="" targrt="">定義元資料<meta>
編碼<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
重定向``` - 可以寫名字的顏色
aqua、black、blue、fuchsia、gray、green、lime、maroon、navy、olive、purple、red、silver、teal、white、yellow. - html5宣告
<!DOCTYPE html>
CSS
簡介
- CSS是指Cascading Style Sheets（層疊樣式表），有三種方式指定樣式：外部樣式表，內部樣式表，內聯樣式，越往內的層越有優先權。
- css語法：
selector1,selector2 {property1: value; property2: value...}，如果value是多個單詞，要加雙引號。萬用字元選擇器以*定義，會選中所有的選擇器。 - 派生選擇器
li strong{dec}只會對<li><strong>這些部分</strong></li>有用。 - id選擇器以#定義，
#red{color:red}，對制定了相應id的標籤起作用有用<p id="red">這就是紅色了</p>，每個id只能定義一次，但一個id可以有多個派生選擇器。 - 類選擇器以.定義，
.center {text-align: center}，會對指定了class的標籤起作用<h1 class="center">這些部分</h1>起作用。 - 屬性選擇器以[]定義，
[title]{color:red;}，可以指定值，包含值，以值開頭等等。常用於設定表單樣式。
樣式
- 背景：
background-color, background-image, background-repeat, background-position（關鍵字，數值，百分比）, background-attachment，背景樣式不會繼承。 - 文字：
首行縮排text-indent（正，負，百分比，會繼承）, 水平對齊text-align(left,right,center)，單詞間隔word-spacing, 字母間隔letter-spacing，字元轉換text-transform(none,uppercase,lowercase,capitalize), 文字裝飾text-decoration（不同層會替換而不累積），空白處理white-space - 字型：留坑
- 連結：a:link未被訪問，a:visited已被訪問，a:hover滑鼠放在上方，a:active滑鼠點選時。
- 列表：留坑
- 表格：留坑
- 輪廓：留坑
框模型
- 元素，內邊距，邊框，外邊距。
- 內邊距負責展示元素的背景，設定值為padding，上右下左。
- 邊框border，需要先指定邊框樣式style（solid是實線）。可以設定width，color。
- 外邊距負責展示元素周圍的空白，設定值為margin，可以為負值。注意：相鄰的不同元素（或空的相同元素）的外邊距會合並，每次只展示最大值。
定位
- 相對定位position: relative，相對於本來位置平移，設定left，top會使得元素向右下方平移。
- 絕對定位：absolute，相對於最近已定位的祖先元素平移，通過設定z-index控制堆放次序。
- 浮動：float，可以實現包圍效果，留坑。
例項
a:link,a:visited
{
display:block;
font-weight:bold;
font-size:14px;
font-family:Verdana, Arial, Helvetica, sans-serif;
color:#FFFFFF;
background-color:#98bf21;
width:120px;
text-align:center;
padding:4px;
text-decoration:none;
}
a:hover,a:active
{
background-color:#7A991A;
}
JavaScript
- 輸出
document.write(); document.getElementById().innerHtml; - 陣列
var cars=["Audi","BMW","Volvo"]; - 物件由花括號分隔。在括號內部，物件的屬性以名稱和值對的形式 (name : value) 來定義。屬性由逗號分隔,
var person={firstname:"Bill", lastname:"Gates", id:5566}; - 迴圈
for(item in items) - DOM(Document Object Model)，文件物件模型獨立於平臺和語言的介面，允許程式和指令碼動態訪問和更新文件的內容、結構以及樣式。
- 事件：處理cookie：onload, onunload，處理輸入：onchange,處理滑鼠事件：onmouseover,onmouseout,onmousedown,onmouseup,onclick
- 新增元素（節點）：
document.createElement()element.appendChild()
建立文字節點：document.createTextNode()
刪除節點：element.parentNode.removeElement(element) - 建立物件。JS是面向物件的語言，但JS不適用類。
function person(firstname,lastname,age,eyecolor)
{
this.firstname=firstname;
this.lastname=lastname;
this.age=age;
this.eyecolor=eyecolor;
this.changeName=changeName;
function changeName(name)
{
this.lastname=name;
}
}
JQuery
- jQuery 是一個 JavaScript 函式庫，可以通過
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js">引入。 - 語法：文件就緒函式
$(document).ready(function(){ /* 將真正的函式放入其中 */});。jQuery使用選擇器技術來選取html物件，$(selector).action()，如$(this).hide(),id選擇$("#test").hide(),元素選擇$("p").hide()，類選擇$(".test").hide()，屬性選擇器等。$符號表示這是jQuery函式，等價於jQuery
效果
$(selector).hide(speed,callback)隱藏某元素。speed為隱藏速度，可選slow,fast或毫秒，callback為執行完畢後呼叫的函式。show函式同理，toggle函式可以在show和hide之間切換。$(selector).fadeIn(speed,callback)淡入淡出，fadeOut,fadeToggle同理。$(selector).fadeTo(speed,opacity,callback);可以到給定的透明度。- 滑動
$(selector).slideDown(speed,callback);slideUp,slideToggle - 動畫
$(selector).animate({params},speed,callback);，留坑，stop停止一切效果。 - 效果可以連結，太真實了。
HTML
text(),html(),val()獲得文字，html(帶標記)、值。可以加引數來設定。attr()可以設定屬性，傳入一個物件來設定多個屬性。這些函式可以添加回調函式。回撥函式由兩個引數：被選元素列表中當前元素的下標，以及原始（舊的）值。然後以函式新值返回您希望使用的字串。
舉例子$("button").click(function(){ $("#w3s").attr("href", function(i,origValue){ return origValue + "/jquery"; }); });- 新增元素
append() - 在被選元素的結尾插入內容,prepend() - 在被選元素的開頭插入內容,after() - 在被選元素之後插入內容,before() - 在被選元素之前插入內容 - 刪除元素
remove()刪除被選元素，empty()刪除被選元素的子元素,remove的引數可以新增選擇器。 - 修改class以修改樣式
addClass(),removeClass(),toggleClass(),css()返回所有屬性，css(pro)返回對應屬性css(pro,value)設定屬性，css({})設定多個屬性。
遍歷
查詢所需的dom，留坑。
JQuery AJAX
- AJAX = Asynchronous JavaScript and XML（非同步的 JavaScript 和 XML），是與伺服器交換資料並更新部分網頁的藝術，在不重新載入整個頁面的情況下。
$(selector).load(URL,data,callback);從伺服器載入資料，並放回被選元素中$("button").click(function(){ $("#div1").load("demo_test.txt",function(responseTxt,statusTxt,xhr){ if(statusTxt=="success") alert("外部內容載入成功！"); if(statusTxt=="error") alert("Error: "+xhr.status+": "+xhr.statusText); }); });$.get(URL,callback);使用get請求獲得資料。$.post(URL,data,callback);使用post請求獲得資料。
noConflict()
- 當其它框架函式名需要使用$符號時，呼叫
$.noConflict();來釋放$符號。 - 這個函式返回一個jQuery的引用，可以用來建立其它別名。
- 可以把
$傳遞給ready()，這樣就可以在ready內使用$了。