1.htm(超文本標(biāo)記語言，類型毛坯房）
? ?<1>頭組成(html(頭標(biāo)簽) body（尾部標(biāo)簽）)和標(biāo)簽組成（<標(biāo)簽 標(biāo)簽屬性=“屬性值”>）
? <2>標(biāo)簽 （p,br,b,i,font(size ,color,family字體類型),ol(src,type)<itme>,ul(src,type)<item>,hn（1-6）,img（src,alt）a(href)（#，_blank），表格標(biāo)簽（table(colspan合并列)rowspan合并行）,表單標(biāo)簽（form《action ，method》），）
<3>特效?
（顏色取色（- 英文 ?16進制 ? ?三基色 rgb(0~255,0~255,0~255)）
圖片鏈接（a href），音樂播放器（audio），vidieo,frameset（集合的框架））
2.css(層疊樣式表)
<0.1>屬性
字體屬性，文本屬性，列表屬性（a href）， 背景屬性（background）
<0.2>優(yōu)先級
就近原則（link rel,="" shref; ? ? ? ? ? ? ? ? <style></style》
<0.3>選擇器
? 基本(scrpt)，類（class），id選擇器 ? ?
? ?組合（span,id等）和關(guān)聯(lián)（span,id）
<0.4>html頁面寫css代碼
<0.5>setInterval和setTimeOut的區(qū)別
? ? ? 前者是周期性操作，后者是延時操作
?<1>span和div的區(qū)別
? ? ? span不自動換行，無標(biāo)識性
? ? ? civ自動換行有標(biāo)識性
<2>組成
? ? ?<標(biāo)簽 標(biāo)簽名（style）=“屬性：屬性值”>
<3>標(biāo)簽屬性
?width,height，font,background....
<4>特效（頁面浮動（float :right),定位position:absolut）盒子模型）
3..js(javascrpt 腳本語言)
<0.1>格式
《scrpt》</scrpt>
<0.2>函數(shù)
有參數(shù)，有無返回值函數(shù)，匿名函數(shù)
<0.3>document.getElementById（“”）//獲取對象Id
<0.4>圖片切換案例
《0.5》innerHtml ?插入html值
<0.6>鼠標(biāo)事件
?onMouseMove，onMouseDown，onMouseUp
<0.7>表單數(shù)據(jù)的檢測
<1>java與js的區(qū)別
? ? ????java面向?qū)ο蟮模琷s基于對象
? ?????java是強類型語言（定義數(shù)據(jù)具有規(guī)則性,跨品臺使用），js是弱類型語言（沒有規(guī)則性的變量運算）
?如 var i="haha" ??
<2>java和js的類型
????????java ： byte char int float doble long
?????????js： var number string ,undefine null
<3>js的運算符
????????+ ，-，*()，/(值可為小數(shù))
<4>js的語句
? ????? for,while，if..else..
<5>js的表達(dá)形式
? ????? <script>?
? ?????function ?函數(shù)名（）｛
????????｝
?????????//匿名函數(shù)
?????windows.onLoad()=function(){????
????}
????? ?</script>
<6>setinteval和setTimeOut的差別
? ? ?setInterval（‘函數(shù)名’，響應(yīng)時長）;周期性延時操作
? ? ?setTimeOut();延時操作
<6.1>js的數(shù)組
? ?js只有一級數(shù)組，沒有二級數(shù)組
var ?attr = ?new ?Array();
? ?attr[下標(biāo)的索引]=｛｝
<7>案例事例
? ? ? ? ? ? ? ? (1) 廣告框的延時彈框
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? 思路：1..創(chuàng)建該頁面，廣告放置頁面上
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? 如<img src="" display：block>
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?2，創(chuàng)建顯示logo的showad（）和隱藏Logo的 ? ? ? ? HideAd（） ? ? ? 如 window.onload()=setInterval(code,3000)｛｝
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?3.頁面加載時顯現(xiàn)，間隔幾秒后消失
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?如：showAd（img.style.display=block）， ? ? hideAd（img.style.display="none）
? ? ? ? ? ? ? ? ?（2）二級聯(lián)動
? ? ? ? ? ? ? ? ? ? 思路：1.創(chuàng)建select<option>選擇控件
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?2.獲取select.option的數(shù)據(jù)集
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?3.遍歷每個選線的集合，通過appenChild添加到里面的元素中去 ? ?aparen\tChild
? ? ? ? ? ? ? //注意設(shè)置選項的option.length=0；
? ? ? ? ? ? ? ? ? （3）表格的各行換色
思路：1創(chuàng)建表格<table></table>
2. 獲取表格所有行的集合tab.rows（）
3對表格行進行判斷
.css
4.jq
<1>jq的介紹
?jq是一種輕量級的框架，js的建議框架
<2>js和jq的轉(zhuǎn)換
js《——jq ? ?【var $number= ? $（"nuber“) ? var $number= $number.get[0]
jq《___js ? ? ? var $ =￥(”nuber")
<3>jq的選擇器(選取元素達(dá)到想要的結(jié)果）
? ?1.基本選擇器：id選擇器 :標(biāo)簽選擇器，類選擇器，全匹配（*），組合式選擇
?2.層級選擇器：$("body div")（父子容器選擇所有容器） ? ?$("body>div") （同級別的容器） ? $("#one+div") （id為one的下一代div） ? ? ? ?$("#one~div")(id為one的所有div同輩)
3.篩選選擇器：first,（“”#btn：firstdiy“”） last，even(偶數(shù))，odd基數(shù)）
4.屬性選擇器：div[title]，[title='one']
5表單選擇器：$("#btn1").click(function(){
? ? ? ? ?$(":password").css("background-color","red");
});
6.案例：廣告的顯示和隱藏
? ? ? ? ? ? ? $(function() {
? ? ? ? ? ? ?setTimeout('showAd()', 3000);
? ? ? ? ? ? ?});
? ? ? ? ? ? ?function showAd() {
? ? ? ? ? ? ?//獲得廣告區(qū)域?qū)ο?/p>
? ? ? ? ? ? ? var $adObj = $("#adId");
? ? ? ? ? ? // $adObj.show();
? ? ? ? ? ? // $adObj.slideDown();
? ? ? ? ? ?$adObj.fadeIn();
? ? ? ? ? ? ?//創(chuàng)建setTimeout('hideAd()',3000)
? ? ? ? ? ? setTimeout('hideAd()', 3000);
? ? ? ? ? ? ?}
? ? ? ? ? ? ?function hideAd() {
? ? ? ? ? ? ? ? ? ? ? //獲得廣告區(qū)域?qū)ο?調(diào)用hide()方法
? ? ? ? ? ? ? var $adObj = $("#adId");
? ? ? ? ? ? ? ? ? ? //$adObj.hide();
? ? ? ? ? ? ? ? ? ?// $adObj.slideUp();
? ? ? ? ? ? ? ?$adObj.fadeOut();
? ? ? ? }
7.案例隔行換色
? ? ? ? ? ? $(function(){
? ? ? ? ? ? ?//偶數(shù)行
? ? ? ? ? ? ?$("tr:even").css("background-color","#008001");
? ? ? ? ? ? ?//奇數(shù)行
? ? ? ? ? ? ? ?$("tr:odd").css("background-color","#FED700");
? ? ? ? ? ? ? ?});
8.案例隔行換色
? ? $(function(){
? ?//偶數(shù)行(給所有的偶數(shù)的tr添加了一個even的類名)
? ?$("tr:even").addClass("even");
? ?//奇數(shù)行(給所有的偶數(shù)的tr添加了一個odd的類名)
? ? ? ?$("tr:odd").addClass("odd");
});
9.添加屬性
? var $fObj = $("font");
? //添加的是標(biāo)簽屬性,不是css屬性
?$fObj.attr("color","red");
10.移除屬性
var $img = $("#img");
//移除src屬性
$img.removeAttr("src");
11.下表屬性
var rows = tabObj.rows;
var trObj = rows[i];
if(i % 2 == 0) {
trObj.style.backgroundColor = "#008001";
} else {
trObj.style.backgroundColor = "#FED700";
}
13遍歷數(shù)組
var attr = [1,2,3,4,5];
//把js對象轉(zhuǎn)jq對象
var $attr =? $(attr);
//如果是一個參數(shù)(i),i就是數(shù)組的下標(biāo); 如果有兩個參數(shù)(i,n),i就是下標(biāo),n就是對應(yīng)的值
$attr.each(function(i,n){
alert("attr["+i+"]="+n);
});
14.遍歷數(shù)組
$.each([1,2,3,4,5],function(i,n){
alert("attr["+i+"]="+n);
});
15.遍歷二維數(shù)組
var attr = new Array(3);
attr[0] = ["深圳", "廣州", "東莞", "惠州"];
attr[1] = ["武漢", "黃岡", "鄂州", "黃石"];
attr[2] = ["濟南", "青島", "煙臺", "威海", "日照"];
$(attr).each(function(i,n){//builder模式 StringBuilder sb.append().append()
//alert(n);
$(n).each(function(j,m){
alert(m);
})
});
16.jq操作文檔
$("#pId").append("你好");
16.移除屬性
$(function(){
$("#btn1").click(function(){
$("#fId").remove();
});
});
17.二級聯(lián)動
$("#province").change(function() {//得到省份的值var pValue = this.value; //是js對象//得到城市下拉框?qū)ο髒ar $cityNode = $("#city");//清除之前的數(shù)據(jù)(把jq對象轉(zhuǎn)換成js對象,再清除)//把jq對象轉(zhuǎn)換成js對象var cityNode = $cityNode[0];//清除之前的數(shù)據(jù)cityNode.options.length = 1;//得到省份的值,更新城市的數(shù)據(jù)if(pValue >= 0){// pValue=0var citys = attr[pValue];//["深圳", "廣州", "東莞", "惠州"];//把citys對象轉(zhuǎn)換成jq對象調(diào)用each方法遍歷$(citys).each(function(i,n){// n = 深圳//把城市添加到右邊的下拉框(append(""))$cityNode.append(""+n+"");});
17.聯(lián)動添加
$(function(){
$("#btn1").click(function(){
//在函數(shù)里面篩選出被選中的option,添加到右邊的select里面
$("#left option:selected").appendTo("#right");
});
$("#btn2").click(function(){
//得到左邊下拉框的option對象集合,添加到右邊的select里面
$("#left option").appendTo("#right");
});
});
18.find查找標(biāo)簽移除
$(function(){
$("#btn1").click(function(){
$("body").find("font").remove();
});
});
