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