html+js+jQuery
WEB01 HTML
一、網站信息頁面顯示案例
Html標簽
標題標簽 <hn> </hn>
註釋 <!-- -->
水平線 <hr>
段落標簽 <p></p>
字體標簽 <font></font>
二、網站圖片顯示頁面
<img/>
Src：
絕對路徑
相對路徑
1.如果是同級
2.如果是上級：../文件名稱
3.如果是下一級：目錄名稱/文件名稱
三、網站友情鏈接顯示頁面
有序列表：<ol type=”1” start=”4”><li></li></ol>
屬性：
type：5個取值
無序列表：<ul type=”circle”><li></li></ul>
屬性：
Type:3個取值
超鏈接：<a href=”http://www.baidu.com” target=”_self、_blank”>百度</a>
四、網站首頁顯示頁面
表格標簽：<table><table/>
屬性：
1邊框 border
2.背景顏色：bgcolor
3.邊框與邊框：cellspacing
4.邊框與內容：cellpadding
表格的跨行和跨列 colspan rowspan
五、網站後臺系統頁面
框架集結構標簽：<frameset></frameset>
屬性：
cols:左右劃分
rows:上下切割
<frame><frame/>
WEB02 HTML
表單標簽：所有提交到服務器端的表單必須使用<form></from>括起來
Form標簽屬性：
action:整個表單提交的位置（可以是一個頁面，也可以是一個java後臺）
method:表單提交的方式
提交按鈕：<input type=”submit” value=”註冊”/><br/>
普通按鈕: <input type=”button” value=”註冊”/>
重置按鈕：<input type=”reset”/>
Div
是一個html標簽，一個快級元素（單獨顯示一行）。它單獨使用沒有意義
必須結合css來使用，用於頁面的布局
Span是一個html標簽，一個內聯元素（顯示一行），它單獨使用沒有意義，必須結合css來使用，它主要用於對括起的內容進行樣式的修飾
Css:層疊樣式表
1作用：使網站的內容和表現相分離
2語法規範：
選擇器{
屬性名1：屬性值
屬性名1：屬性值
屬性名1：屬性值
}
3.css選擇器（重要定位元素）
1）元素選擇器 div{}
2）類選擇器（class） .div2{}
3）id選擇器（id） #div5{} 設置id時要唯一
（其他選擇器）
4）層級選擇器 div p{}
5）屬性選擇器 input[type=‘text’]{}
4.css的引入方式
內部引入
<style type=”text/css”>
</style>
行內引入
<div style=”font-size:40px; color:blue;”> 就近原則
外部引入
新建一個css文件
<link rel=”stylesheet” href=”style.css” type=”text/css”/>
層疊樣式表 引入的文件 類型
Css的浮動：浮動的框可以向左或向右移動，直到它的外邊緣碰到包含框或另一個浮動的邊框為止
盒子模型：
手機：content
泡沫：padding
包裝盒：border
外包裝邊距：margin
|
|
|
Content |
WEB_03 JavaScript
1 使用JS完成簡單的數據校驗
2.使用js完成圖片輪播效果
3，使用JS完成頁面定時彈出廣告
4，使用JS完成表單檢驗
JavaScript 組成
1.ECMAScript
2.DOM:文檔對象模型 包含（整個html部分）
3.BOM：瀏覽器對象模型，包含（整個瀏覽器相關的內容）
特點：
1 區分大小寫
2. 變量是弱類型的
WEB_04 JavaScript
學習目標
1.使用JS獲得指定元素
2.使用JS創建元素
3.使用JS對元素的屬性進行操作
4.使用JS對文件的標簽體進行操作
5.使用JS對指定元素的樣式進行操作（獲得或者修改）
新標簽的學習
<thead>
<tr>
<th>
</th>
</tr>
</thead>
<tbody>
<tr>
<td>
</td>
</tr>
</tbody>
鎖定事件（頁面加載事件）
獲取元素:獲取表格+表格裏面的行數
Tbody裏面的行數（rows.length）
JS的遍歷
獲取奇數行和偶數行
設置背景顏色
實現一個表格的高亮顯示
1.確定事件（onmouseover 和onmouseout）並分別為其綁定一個函數
2.獲取鼠標移上去的那行，設置背景顏色
回顧事件:
Onsubmit()
Onclick()
Ondblclick()
Onload()
Onfocus() 鼠標聚焦、失焦事件
Onblur()
Onmouseover()
Onmouseout()
Onmousemove()
Onkeydown()
Onkeypress()
Onchange:當用戶改變內容時使用的這個事件
六、使用JS完成全選和選不選操作
1確定事件（鼠標單擊事件onclick）,事件綁定到復選框上
2.獲取編號前面復選框的狀態
獲取復選框：var checkAllEle = Document.getelementbyid(“id”);
獲取復選框的狀態：checkAllEle.checked?
3.獲取下面的所有復選框
Document.getelementbyname(“name”);
Document:整個html文件都成為一個document 文檔
Element: 所有的標簽都是Element元素
Attribute：屬性
Text :文本
Node: 文檔的任意內容
1.document
創建文本結點：document.createTextNode
創建元素結點：document.createElement()
2.element
Element.appendChild() 向元素添加新的子節點，作為最後一個子節點
Element.firstChild() 返回元素的首個子節點
Element.getAttribute() 獲取元素的屬性值
Element.innerHtml()
3.Attribute: 屬性
Dom練習
在頁面中使用列表來顯示一些城市
<ul>
<li>北京<li>
<li>上海<li>
<li>廣州<li>
</ul>
希望通過點擊一個按鈕實現動態添加城市
分析：
事件（onclick）
獲取ul結點
創建一個城市的文本結點
創建一個li元素結點
將文本結點添加到li元素結點中去
使用element裏面的appendChild()來添加子節點
七、使用JS完成省市二級聯動
1.確定事件（onchange）
2.使用一個二維數組來存儲省份和城市（二維數組的創建）
3.獲取用戶選擇的省份（使用方法傳參的方式 this：當前的操作對象）
4.遍歷數組（獲取該省份 對應的所有城市）
5.創建文本結點和元素結點並進行添加操作
步驟
1.確定事件（onchange）並為其綁定一個函數
2.創建一個二維數組
3.獲取用戶選擇的省份
4.遍歷二位數組中的省份
5.將遍歷的省份與用戶選擇的省份比較
6.如果相同。遍歷該省份下的所有城市
7.創建城市文本結點
8.創建option 元素結點
9.將城市文本結點添加到option元素結點中去
10.獲取第二個下拉列表，並將option元素添加進去
知識點：
1.This.value
2.數組的創建
長度：最大角標+1
3.createTextNode()
4.createElement()
WEB_05 jQuery
1.JS頁面加載與JQuery頁面加載的區別
1）JS：window.onload() 頁面加載較慢 會出現覆蓋
2）JQ：頁面加載較快 不會出現覆蓋
2.jQuery的獲取：
$(“#***”)
$("#btn").click(function(){
location.href="02_JS頁面加載與jQuery的區別.html";
});
3.Dom對象與JQ對象之間的轉換
1）JQ向DOM對象的轉換
//JQ對象向DOM對象的轉化 （方式一）
$("#span1").get(0).innerHTML="美美噠";
//JQ對象向DOM對象的轉換 （方式二
$("#span1")[0].innerHTML="棒棒噠";
2）Dom向JQ對象的轉換
var spanEle=document.getElementById("span1");
//DOM對象轉化為JQ對象
$(spanEle).html("思密達");
4.JQuery的選擇器
1）基本選擇器
元素選擇器
Id選擇器
類選擇器
2）層級選擇器
子孫選擇器 $(“dy div”)
兒子選擇器 $(“body>div”)
選擇id為two的下一個同級div元素: $(“#two +div”)
選擇id為one的其余所有同級div元素:$(“#two ~div”)
3）基本過濾選擇器
:first
:last
:even
:odd
4)屬性選擇器
選擇有id屬性的div : $(“div[id]”)
選擇有id屬性且值為two的div $(“div[id=two]”)
5)表單選擇器
$(“：input”) 匹配所有的input textarea select button
5. .show()
設置屬性：attr(“屬性”，“屬性值”)
設置某個標簽的內容：.html()
設置某個標簽的css樣式：css(“屬性”，“屬性值”)
給某個標簽添加屬性 addclass()
WEB_06 jQuery
- 能夠使用jQuery為標簽添加屬性或樣式
2.能夠為指定標簽添加字標簽或兄弟標簽
3.學會給標簽綁定時間
1.遍歷函數：each
$("img").each(function(i){
this.src = "test" + i + ".jpg";
});
$.each( [0,1,2], function(i, n){
alert( "Item #" + i + ": " + n );
});
2.插入：append appendto
3.事件：
改變下拉列表的狀態：$(“#provice”).change()
事件切換： A.hover(fn1,fn2) 等效於A.mouseover(fn1).mouseout(fn2);
4.js的vaildate()方法
Validate需要手動的聲明，對那個表單進行校驗
html+js+jQuery