複習日記-HTML+css+js+jquery

一：

1.HTML書寫規則：

　　　　超文本：超越通常文本，描述文本的字體、顏色、圖片

　　　　標記：標籤

　　　　文件後綴名： .html(推薦） 或者 .htm

　　　　屬性：key = "value"推薦用引號

　　　　路徑的寫法：

　　　　　　相對路徑：

　　　　　　　　寫法一：./（當前路徑）或者什麼也不寫，都表明當前目錄

　　　　　　　　寫法二：../（上一級目錄）

　　　　　　絕對路徑：

　　　　　　　　1.帶協議的絕對路徑

　　　　　　　　　　　http://www.itheima.com

　　　　　　　　2.不帶協議的絕對路徑

　　　　大小的寫法：

　　　　　　像素：123px

　　　　　　百分比：20%

　　　　meta

　　　　　　元信息

　　　　　　HTML5的寫法：

　　　　　　<meta charset="UTF-8">指定瀏覽器用什麼編碼打開此頁面

　　　　　　HTML4的寫法：

　　　　　　<meta  http-equiv=」Content-Type「 content="text/html; charset="UTF-8"/>指定瀏覽器用什麼編碼打開此頁面

　　　　　　

 

2.顏色的取值：(RGB紅綠藍,光的三元色)

　　　　方式一： #xxxxxx　　x爲16進制   eg: color="#ff0000"

　　　　方式二：英文單詞　　eg: color="red"

3.target默認屬性;_self在自己頁面打開

4.form默認get提交　

　　　　若要提交單選框、複選框或者下拉框中的值，須要給value屬性

　　　　單/復/的默認值寫法：

　　　　　　　　checked="checked"（推薦）或者只寫checked

　　　　下拉選擇默認值寫法：

　　　　　　　　selected="selected"

5.get和post的區別：

　　1.get請求會把請求參數追加到地址欄

　　2.get請求參數大小有限制，post沒有限制

　　3.post相對於get請求安全些

6.設置input="disable/readonly"，則該文本框參數不會提交

7.隱藏於hidden能夠將hidden參數提交到後臺　

二：

css相關：渲染

　　層疊樣式表

　　做用：

　　　　渲染頁面

　　　　提升工做效率

　　格式：

　　　　選擇器{屬性1:值;屬性2:值}

　　後綴名：

　　　　.css 獨立的css文件

　　和html元素的整合

　　　　方式一：內聯樣式表    經過標籤的style屬性設置樣式，在head中有style標籤

　　　　方式二：內部樣式表　在當前頁面中直接定義使用的樣式

　　　　方式三：外部樣式表　經過link標籤引入外部css文件

div:塊標籤(獨自佔一行)

span:行內標籤

選擇器：

　　id選擇器

　　　　要求：

　　　　　　HTML標籤必須有id屬性且有值，id是惟一的

　　　　　　在css中經過#+id值書寫樣式：#id1{...}

　　class選擇器　　

　　　　　　HTML標籤必須有class屬性且有值

　　　　　　在css中經過.class值書寫樣式：#class1{...}

　　元素選擇器

　　　　　　直接用元素名便可：eg: p{...}

派生的選擇器：

　　屬性選擇器

　　　要求：

　　　　　　HTML元素必須有一個屬性且有值<xxx  nihao="wohenhao"/>

　　　　　　css中經過下面的方式使用

　　　　　　　　元素名[屬性="屬性值"] {...}

　　　　　　　　eg:xxx[nihao="wohenhao"] {color : red}

　　後代選擇器

　　　　選擇器  後代選擇器{...}  在知足第一個選擇器的條件下找後代的選擇器，給知足條件的元素添加樣式

瞭解的選擇器

　　錨僞類選擇器

　　　　在支持 CSS 的瀏覽器中，連接的不一樣狀態均可以不一樣的方式顯示，這些狀態包括：活動狀態，已被訪問狀態，未被訪問狀態，和鼠標懸停狀態。

 {color: #FF0000}	/* 未訪問的連接 */經常使用
　　　　 {color: #00FF00}	/* 已訪問的連接 */
　　　　 {color: #FF00FF}	/* 鼠標移動到連接上 */經常使用
　　　　 {color: #0000FF}	/* 選定的連接 */
　　　　a:linka:visiteda:hovera:active

　　　　提示：在 CSS 定義中，a:hover 必須被置於 a:link 和 a:visited 以後，纔是有效的。

　　　　提示：在 CSS 定義中，a:active 必須被置於 a:hover 以後，纔是有效的。

　　　　提示：僞類名稱對大小寫不敏感。

選擇器使用小結：

　　id:一個元素

　　class:一類元素

　　元素選擇器：一種元素

　　屬性選擇器：元素選擇器特殊用法

使用的時候注意：

　　若多個樣式做用於一個元素時，不一樣的樣式會疊加，相同的樣式會經過最近原則選擇樣式　　

　　若多個選擇器做用於一個元素時，越特殊優先級越高id優先級最高

屬性（瞭解）

　　字體：

　　　　font-family:設置字體（隸書），設置字體家族

　　　　font-size:設置字體大小

　　　　font-style:設置字體風格（例如：斜體）

　　文本;改變文本的顏色，字符間距等

　　　　color：文本顏色

　　　　line-height：設置行高

　　　　text-decoration:向文本添加修飾

　　　　text-align:文本對齊方式

　　列表：

　　　　list-style-type:設置列表項的類型   例如： a   1   實心圓

　　　　list-style-image:設置圖片爲列表項類型，使用url函數　　url("圖片地址")

　　背景：

　　　　background-color:背景顏色

　　　　background-image:背景圖片 url

　　尺寸：

　　　　width

　　　　height

　　浮動;

　　　　float:可選值left、right

　　　　clear：設置元素的兩邊是否容許有其它浮動元素，可選值：left(左邊不容許)、right(右邊...)、both(兩邊均不容許)等

　　　　display:設置是否以及如何顯示元素

　　　　　　none：此元素不會顯示

　　　　　　block：此元素顯示爲塊級元素，先後帶換行符

　　　　　　inline：此元素顯示爲內聯元素

　　框模型：

　　　　一個元素外面有padding(內邊距) border  margin(外邊距)

　　　　　　padding:元素和邊框的距離

　　　　　　margin：元素最外邊的空白

　　　　　　上面三個屬性都有簡寫屬性，順序：上右下左，若只寫一個值，表明四個方向值均爲該值，若只寫兩個值，表明方向值均爲該值，

　三：JavaScript

　組成部分：

　　　ECMAScript：js基礎語法

　　　Bom：瀏覽器對象模型

　　　Dom：文檔對象模型

　做用：

　　　修改HTML頁面的內容、樣式、表單驗證、操做瀏覽器任何東西

　注意：

　　　js能夠在頁面上直接寫，也能夠獨立出去寫成一個庫，例如jQuery，獨立出去的文件使用.js後綴名

　　　js和HTML的整合

　　　　方式一：頁面直接寫--將js代碼放在script標籤中，<script></script/>標籤原則上能夠存放在任意位置，通常放在head標籤中

　　　　方式二：獨立的js文件，經過script標籤的src屬性引入

　js變量聲明：

　　　var  變量名 = 初始值；

　　　注意：

　　　　　　var能夠省略，建議不要省略

　　　　　　一行要以分號結尾，最後一行的分號能夠省略，建議保留

   js的數據類型：

　　原始類型5種：

　　　　NULL：undefined 是聲明瞭變量但未對其初始化時賦予該變量的值，null 則用於表示還沒有存在的對象。若是函數或方法要返回的是對象，

　　　　　　　 那麼找不到該對象時，返回的一般是 null。

　　　　String：字符型

　　　　Number：數字

　　　　Boolean：布爾

　　　　Undefined：沒有初始化

　　　　經過typeof運算符能夠判斷一個值或者變量是否屬於原始類型以及屬於哪一個原始類型

　　　　　　typeof 變量 | 值   eg: var age=18      typeof   age/18

　　　　

　對變量或值調用 typeof 運算符將返回下列值之一：

• undefined - 若是變量是 Undefined 類型的
• boolean - 若是變量是 Boolean 類型的
• number - 若是變量是 Number 類型的
• string - 若是變量是 String 類型的
• object - 若是變量是一種引用類型或 Null 類型的    

　　經過typeof運算符能夠判斷一個值或者變量是否屬於原始類型以及屬於哪一個原始類型

　　　　　　typeof 變量 | 值   eg: var age=18      typeof   age/18

　　爲何 typeof 運算符對於 null 值會返回 "Object"。這其實是 JavaScript 最初實現中的一個錯誤，而後被 ECMAScript 沿用了。

　　如今，null 被認爲是對象的佔位符，從而解釋了這一矛盾，但從技術上來講，它仍然是原始值。

　　引用類型： 

  js:事件驅動函數

　　函數定義格式：

　　　　方式一：function  函數名(參數) {

　　　　　　　　}　

　　　　方式二：var  函數名 = function(參數) { 函數體}　

　　　　注意：js中不須要聲明返回值，參數也不須要添加類型，eg:function add(a,b) {  alert(a+b);  }       函數調用：add(1,2);　　

  js事件

　　常見的事件：

　　　　單擊：onclick　 

　　　　表單提交：onsubmit   加在form表單上的onsubmit="return  函數名()"    注意函數返回值必須爲Boolean類型   

　　　　頁面加載：onload　

　　　　頁面關閉：onunload

  js事件和函數的綁定

　　方式一：經過標籤的事件屬性  eg: <xxx   onclick="函數名(參數)"></xxx>

　　方式二：經過給元素派發事件來綁定　　

　　　　　　document.getElementById("id值").onclick = function(參數) { 函數體 }

　　　　　　document.getElementById("id值").onclick = 函數名

　　注意：由於js是直譯式語言，即從上到下依次翻譯，所以內存中存在某元素時才能夠給其派發事件，解決方式

　　　　　　1.將方式二的js代碼放在HTML頁面最下面

　　　　　　2.在頁面加載成功後再運行方式二的js代碼，即便用onload事件

 js獲取元素：

　　方式一：

　　　　var obj = document.getElementById("id值")；

　　　　獲取元素value值：obj.value;

　　　　獲取元素標籤體中的內容：obj.innerHTML;

 js實現輪播圖：

　　BOM中window對象的定時器方法

　　定時器：

　　　　var  id  =  setInterval(code,毫秒數)：每隔指定的毫秒數執行一次函數，週期執行　

　　　　var  id  =  setInterout(code,毫秒數)：延遲指定的毫秒數執行一次函數，單次執行　　　　　　　

　　清楚定時器：

　　　　clearInterval(id);

　　　　clearTimout(id);

 補充：

　　運算符：

　　　　比較運算符：>   >=   <   <=

　　　　若兩邊都是數字直接比較大小；

　　　　若一邊爲數字，另外一邊爲字符串形式的數字，則先轉換爲數字再比較

　　　　若一邊爲數字，另外一邊爲字符串，則返回false

　　　　若兩邊均是字符串，則比較ASCII碼

　　等性運算符   ==   ===

　　　　==：只判斷值是否相等

　　　 ===：不只判斷值是否相等，還判斷類型是否相等

　js操做css屬性

　　事件是Event，css樣式天然是Style，在手冊中能夠找到操做樣式屬性的語句

　　　　eg；document.getElementById("id」).style.屬性="值"

　　　　屬性就是css中的屬性。若是有-號，例如background-color只需將-刪除，後面第一個字母大寫便可。及backgroundColor

　　注意：只要是window對象的屬性和方法，window均可以省略掉，eg：window.omload = onload　　　

bom總結

　　全部的瀏覽器都有5個對象

　　　　window：窗口

　　　　location：定位信息

　　　　history：歷史信息

window對象詳解：

　　若是文檔包含框架(frame或iframe)，瀏覽器會爲整個HTML文檔建立一個window對象，再爲每個frame建立一個額外的window對象

　　經常使用的屬性:

　　　　經過window能夠獲取其它四個對象   window.location = location ...

　　經常使用的方法：

　　　　消息框：

　　　　　　alert("...")，     警告框

　　　　　　confirm("...")，確認框，返回值爲Boolean

　　　　　　prompt("...’)，輸入框，返回值爲輸入的內容

　　　　定時器

　　　　打開和關閉　

　　　　　　open(url)：打開

　　　　　　close()：關閉

location對象：定位信息

　　經常使用屬性：

　　　　href:獲取或者設置當前頁面的url(定位信息)

　　　　location.href;    獲取url

　　　　location.href="...";設置url，至關於a標籤

history對象：瀏覽歷史

　　經常使用方法：

　　　　back()：加載history列表中前一個url

　　　　forward()：加載history列表中下一個url

　　　　go(int)：加載history列表中某個具體頁面

　　　　　　go(-1) = back()

　　　　　　go(1) = forward()

注意：js調用函數的參數，this用法：

function  login（a）{

　　alert(a);

　}

<xxx    onblur = "login(this.value)"/>         

此處的this表明這個元素xxx，即表明當前dom對象，

這麼作就不用在login中寫document.get..ById(id)來獲取value值，經過傳參獲取

事件總結：

　　常見的事件：

　　　　焦點事件：onfoucs、onblur

　　　　表單事件：onsubmit、onchange

　　　　頁面加載事件：onload

　　　　鼠標事件：onclick（還有雙擊事件，鼠標按下等等）、鼠標懸停(onmouseover)、鼠標移出(onmouserout)

阻止默認事件發生，Event中的方法

阻止瀏覽器的事件傳播

幾個js經典案例：

　　1.表格隔行換色：onload以後獲取全部tr，放在js集合裏，根據arr.length%2的結果設置樣式style

　　2.全選/全不選：獲取onclick的checked屬性值，取得全部複選框放置在數組中，依次設置checked屬性值

dom(文檔對象模型)：

　　　　當瀏覽器接受到HTML代碼時，瀏覽器會將全部的代碼裝載到內存中，造成一棵樹，這棵樹有四種節點

　　　　Node接口有如下四種實現類：

　　　　1.文檔節點　　document

　　　　2.元素節點　　element

　　　　3.屬性節點　　attributed

　　　　4.文本節點　　text

　　獲取節點：

　　　　經過document能夠獲取其它結點：

　　　　　　經常使用方法：

　　　　　　　　document.getElementById("id") ：獲取一個特定元素

　　　　　　　　...相似方法還有經過TagName、ClassName、Name

　　　　　　　　設置獲取節點的value屬性

　　　　　　　　　　dom對象.value;獲取

　　　　　　　　　　dom對象.value="";設置

　　　　　　　　設置獲取結點的標籤體：

　　　　　　　　　　dom對象.innerHTML;獲取

　　　　　　　　　　dom對象.innerHTML="";設置

　　　　　　　　設置獲取節點的style屬性

　　　　　　　　　　dom對象.style.屬性;獲取

　　　　　　　　　　dom對象.style.屬性=「」；設置

　　　　　　　　總結：獲取或者設置屬性：dom對象.屬性

在HTML DOM查找不到的方法，能夠去XML DOM去看一下

　　關於document的操做在XML DOM的document中

　　關於element的操做...element中

練習案例：選項左右移動，先選中元素，點擊按鈕，移動選中元素到另外一邊

技術分析：

　　1.肯定時間onclick

　　2.編寫函數

　　　　點擊移動單個：

　　　　　　a.獲取左邊選中的選項

　　　　　　b.將其追加到右邊的下拉選中

　　　　點擊移動全部的：

　　　　　　a.獲取左邊全部選項

　　　　　　b.一個個追加過去

注意小細節：注意arr.length會由於移動元素致使長度變化，因此for循環中要i--

谷歌內核瀏覽器：調代碼，點擊source打斷點調試

案例：省市聯動（前端案例，應該從數據庫加載）

需求：選中省的時候，自動加載該省的市

技術分析：

數組：

　　語法：new Array(); new Array(size);new Array(e1,e2..)

注意：js數組長度是動態可變的,不存在角標越界，只會提示undefined

步驟分析：

　　1.省的option添加值遞增的value屬性，看成數組索引

　　2.初始化市

　　3.選擇省的時候，onchange事件

　　4.根據不一樣的省value下標建立不一樣的arr[i]的對應市數組

js引用類型總結：

　　原始類型的String、Number、Boolean都是僞對象，能夠調用相應的方法

　　Array:數組

　　String：var s = new String("11");     

　　　　　　var s1 = String("11");

　　　　當 String() 和運算符 new 一塊兒做爲構造函數使用時，它返回一個新建立的 String 對象，存放的是字符串 s 或 s 的字符串表示。

　　　　當不用 new 運算符調用 String() 時，它只把 s 轉換成原始的字符串，並返回轉換後的值。

　　Boolean:

　　　　new Boolean("");//Boolean("");

　　Number

　　Date

　　　　new Date();

　　　　經常使用方法：toLocalString()

　　RegExp:正則表達式

　　　　語法兩種：

　　　　　　直接量語法： /正則表達式/(參數)

　　　　　　new RegExp("正則表達式",(參數))

　　　　　　參數：

　　　　　　　　i:忽略大小寫

　　　　　　　　g:全局查找

　　　　　　經常使用方法：Boolean test(s);

　　Math：

　　　　經常使用常量：Math.PI、Math.random()

　　全局：

　　　　decodeURI：解碼某個編碼的URI

　　　　encodeURI：把字符串編碼爲URI 

　　　　eval(s):計算js字符串，並把它看成腳本執行

　　　　parseInt():嘗試強轉爲整數

　　　　parseFloat:強制強轉爲浮點數

JQuery：一種js類庫，其中2.0之後版本不兼容IE六、IE七、IE8，所以使用1.0版本中的高版本

之前經過js獲取元素：

　　var obj = document.getElementById("id");

JQuery:  var obj = $("選擇器")；

如何區分dom對象和jQuery對象，有一種約定

原生dom對象：var obj

jQuery對象：var $obj

dom對象obj和jQuery對象的轉換：

dom--->jquery

var $o = $(obj);

jQuery----》dom

方式一：jQuery對象[索引]

方式二：jQuery對象.get(索引下標)

jQuery中頁面加載：

　　js:  window.onload=function()  ---頁面中只能出現一次

　　jQuery：

　　　　方式一：$(function() {...})---頁面中能夠出現屢次

　　　　方式二：

　　　　　　　　$(document).ready(function() {});----頁面中能夠出現屢次

派發事件：經常使用。由於不用更改HTML，直接使用js監聽事件

　　eg: $("選擇器「).click(function() {...});

等價於原生js的事件去掉on

jQuery選擇器總結：

　　基本選擇器：$("#id值")    $(".class值")    $("標籤名")

　　　　獲取多個選擇器：$("#id",".class值"),用逗號隔開

　　　　jQuery設置樣式： eg: $("#id").css("樣式key","樣式value",...)

　　層次選擇器：

　　　　a  b: a的全部b後代　　 

　　　　a>b:a的全部第一層b孩子

　　　　a+b:a的下一個兄弟(大弟弟)

　　　　a~b:a的全部弟弟

　　基本過濾選擇器：

　　　　:first 

　　　　:last

　　　　:odd:索引爲奇數

　　　　:even:索引爲偶數

　　　　:eq(index)指定索引

　　　　:gt(index)大於指定索引

　　　　:lt(index)小於指定索引

　　內容過濾選擇器：

　　　　:has("選擇器")  包含指定選擇器的元素，例如：選取div元素且要求選取的div元素的class選擇器的值爲mini

　　可見過濾選擇器

　　　　:hidden  在頁面上不展現的元素，通常指input  type="hidden"和樣式中diaplay:none

　　　　:visible   頁面可見元素

例如：選取全部可見div      $("div:visible");

　　屬性選擇器：

　　　　寫法一：[屬性名]  

　　　　寫法二：[屬性名=屬性值]...例如：$("div[title]")

　　表單過濾：

　　　　:input   全部表單子標籤

jQuery的屬性和css操做總結：

　　　對屬性的操做：

　　　　　方式一：attr方法(有BUG，所以在jQuery1.6版本以後推薦用prop方法替代)

　　　　　　　獲取：attr("屬性名稱")；

　　　　　　　設置：attr("屬性名"，」屬性值「)

　　　　　　　設置多個屬性：attr({

　　　　　　　　　　　　"屬性一"：」值1「，

　　　　　　　　　　　　」屬性二「：」值2「

                             })

　　　　　　　移除屬性：removeAttr("屬性名稱"） 

　　　　還有一個專門針對class屬性的方法：addClass、removeClass都是對上面attr方法的封裝

　　對css的操做：操做元素的style屬性

　　　　css():獲取或者設置css樣式

　　　　　　方式一：獲取  css("屬性名")

　　　　　　方式二：設置一個屬性    css("屬性名"，」屬性值「)

　　　　　　方式三：設置多個，json形式    css({

　　　　　　　　　"":"",

　　　　　　　　　"":""　　　

                               });　

　　　　獲取元素的尺寸：width()、height

jQuery數組操做

　　遍歷數組：數組.each(function(){...});     $.each(function(){...});

　　設置/獲取value屬性

　　　　jQuery對象.val();獲取

　　　　jQuery對象.val("");設置

　　設置/獲取標籤體的內容

　　　　html()

　　　　text()

　　　　xxx();獲取   xxx("");設置

　　html()和text()方法的區別：

　　　　使用html(s)方法會解析字符串s，能夠填入腳本

　　　　使用html()方法獲取的值是通過解析的字符串值，例如超連接會被解析爲源碼

　　　　text(s)方法會將s看成普通字符串輸出

　　　　使用text()方法獲取的值是頁面展現的字符串值

 表單對象屬性過濾選擇器：

　　:enabled     可用

　　:disabled　不可用

　　:checked　選中

　　:selected　下拉選中

<button>標籤默認是submit類型，若只是普通按鈕，請註明type=button或者直接用<input   type=button/>