【學習筆記】前端學習筆記 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內使用$了。