html --html 超文本標記語言 --塊級元素<h1>--<h6> <p> <blockquote> <pre> <ul> <ol> <li> <dl> <dd> <dt> <div> <table> <tr> <td> <form>javascript
--內嵌元素<a> <img> <iframe> <b> <em> <label> <span> <input> <button> <textArea> <select> <option> css -- css在頁面的運用方式 1. 外聯樣式表 <link rel="stylesheet" type="text/css" href=""> 2. 內嵌樣式表 <style type="text/css">.css{}</style> 3. 內聯樣式表 <div style="color:red"></div>css
選擇器: ID選擇器 # 100 類選擇器 . 10 元素選擇器 1 style 1000 兄弟選擇器 ul+ul 後代選擇器 ul li ul~li ul > li 僞元素選擇器 : ul:hover ul:link ul:active ul:visited 僞類選擇器 : ul:first-child{} ul:last-child ul:before{} ul:after{}html
外邊距:margin 左外邊距:margin-left 內邊距:padding 右內邊距:padding-right border 邊框java
display:none|block|inline|inline-block; // 使用none或者block來實現元素的抽離文檔流(隱藏),和迴歸文檔流(顯示) //隱藏以後不保留元素原先的位置node
visibility:hidden|visible; //設置元素隱藏或者顯示 特色:保留元素的位置進行隱藏數組
float:浮動 float:left; float:right;瀏覽器
clear:both|left|right;字體
position:static|relative|absolute|fixed; relative:相對定位 默認按照元素原先的位置進行定位 absolute:絕對定位 默認根據頁面的body進行定位 //若是絕對定位元素的上一級存在定位元素,則按照父級定位元素的邊框進行定位 fixed:固定定位 默認根據瀏覽器的可視區域邊框進行定位 this
文本屬性 字體屬性 背景屬性spa
js
javascript: 自己是一種解釋型語言(腳本語言) 是由瀏覽器解釋執行的 原始數據類型: boolean,number,string,undifined,null, undefined == null ==判斷值是否相等 ===不只判斷值還得判斷類型 引用數據類型:var obj = new Object(); var arr = new Array(); var date = new Date(); 原聲對象: jacasvript提供的對象(ECMA標準) 內置對象: Global.parseInt() Global.parseFloat() Global.eval() 宿主對象:DOM BOM
NaN: not a number 非數字 //alert("asd"*5); undefined:alert(a+b); var a; function asd(){ var a = 0;} var www = asd();
事件: 各類瀏覽器的事件處理方式 IE: 事件冒泡 //事件對象是經過window.event;獲取 DOM:事件捕獲 //事件對象是經過參數傳遞的方式獲取
傳統事件: 便於使用以及兼容好 各類瀏覽器都支持 不能同時給一個元素添加多個響應時間 現代事件: 在不一樣的瀏覽器中有不一樣的寫法 現代事件IE: obj.attachEvent("onclick",function); obj.dettachEvent("onclick",function); 現代事件DOM: obj.addEventListener("click","function",false); obj.removeEventListener("click","function",false); 事件類型的分類: 1.HTML事件 onload -- 在頁面加載完成後執行什麼 onload(); //表示刷新當前頁面 2.鼠標事件 mouseover mouseout mouseup mousedown mosuemo 3.鍵盤事件 keydown keyup keypress event 事件對象 function testEvent(e){ var thisEvent = window.event|e; thisEvent.keyCode thisEvent.clientX thisEvent.clientY thisEvent.srcElement || thisEvent.target; }
DOM 操做元素自己,屬性,樣式 獲取元素對象 1.document.getElementById("id");//返回一個對象 2.document.getElementsByName("name");// 能夠是多個 返回對象數組 3.document.getElementsByTagName("li");//能夠獲取多個。返回一個對象數組
操做元素: <div id="obj">asd</div> var obj =document.getElementById("obj"); obj.firstChild.nodeValue; 獲得元素對象中的內容 obj.firstChild.nodeValue = "張三"; //設置元素的文本內容
obj.innerHTML = "";設置當前div的內容 obj.innerHTML;獲取當前div中的內容 //innerHTML不支持 select table
操做屬性: obj.getAttribute("屬性名稱");//獲得屬性值 obj.屬性名稱; obj["屬性名稱"];
obj.setAttribute("屬性名稱","屬性值"); obj.屬性名稱 = 屬性值; obj["屬性名稱"] = 屬性值;
removeAttribute("屬性名稱");//移除指定的屬性
操做樣式: 獲取: 操做外部樣式 var cssObj = document.styleSheet[0].cssRules || document.styleSheet[0].rules; cssObj.style.樣式屬性 操做內聯樣式表 obj.style.樣式屬性 設置: obj.style.樣式屬性= "樣式值"; //設置樣式的時候沒有限制