html+css+js

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.樣式屬性= "樣式值"; //設置樣式的時候沒有限制  

相關文章
相關標籤/搜索