首頁 > 開發者 > JavaScript

精通javascript+jQuery（視頻筆記）第二講到第六講

來源：互聯網
上載者：User
創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！

第二節：Javascript基礎

主要講了三方面的內容：文法 語句 函數

資料類型：
字串類型：slice 和substring slice（1，3）從第二個取到第三
個 substring一樣 slice（4） 從第五個開始到最後

數實值型別 alert進行輸出

布爾值 true不加引號 通過typeof（）判斷類型

數組 var aMap= new array 通過amap.length 判斷長度

語句： 比較和邏輯操作符 輸出document.write

> < == && || ！

if語句 用Number（prompt）prompt 是手工輸入轉換轉換成數值類
型 用isNaN來判斷是否為數值型

swich語句

迴圈語句：while語句聲明變數 迴圈語句 輸出
for語句

函數： function sayName（sName）{alert ("hello"+sName);}
sayName("freshegas"); 文字框輸出： hello freshegas

第三節：Css

@import url（1.css）

標記選取器 h1

類別選取器 .class

ID選取器 #id

選取器的嵌套聲明 p b

子選取器 例子：ul.11>li>a 只有a標記中起作用 如果去了大於符號
那麼所有的li都起作用

<ul class="11">
<li>
<a href></a>
<ul><li></li></ul>
</li>
</ul>

第四節：Css進階

div和span標記的區別 塊 行內

盒子模型 content border padding margin

float定位

position：absolute relative
z-index

排版：
container banner content links footer
css定位

第五節：dom模型

document object moudle 文件物件模型

dom模型中的節點： 元素節點 文本節點 屬性節點

如何使用： 訪問節點： getElementsByTagName
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0
Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-
transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html;
charset=utf-8" />
<title>getElementByTagName</title>
<script language="javascript">
function searchDOM(){
//放在函數內，頁面載入完成後才用<body>的onload載入
var oLi=document.getElementsByTagName("li");
//輸出長度、標籤名稱以及某項的文本節點值
alet(oLi.length+" "+oLi[0].tagName+" "+oLi
[3].childNodes[0].nodeValue);

var oUl=document.getElementsByTagName("ul");
var oLi2=oUl[1].getElementByTagName("li");
alert(oLi2.length+" "+oLi2[0].tagName+" "+oLi2
[1].childNodes[0].nodeValue);
}
</script>
</head>

<body onload="searchDOM()">
<ul>用戶端語言
<li>HTML</li>
<li>JavaScript</li>
<li>CSS</li>
</ul>
<ul>伺服器端語言
<li>ASP.NET</li>
<li>JSP</li>
<li>PHP</li>
</ul>

</body>
</html>
說明： childNodes是元素的子節點 nodevalue是元素值

getElementById

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0
Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-
transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html;
charset=utf-8" />
<title>getElementById</title>
<script language="javascript">
function searchDOM(){
var oLI=document.getElementById("cssLi");
alert(oLI.tagName+" "+oLI.childNodes[0].nodeValue);
}
</script>
</head>

<body onload="searchDOM()">
<ul>用戶端語言
<li>HTML</li>
<li>JavaScript</li>
<li id="cssLI">CSS</li>
</ul>
<ul>伺服器端語言
<li>ASP.NET</li>
<li>JSP</li>
<li>PHP</li>
</ul>

</body>
</html>

父子關係childnodes
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0
Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-
transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html;
charset=utf-8" />
<title>getElementById</title>
<script language="javascript">
function myDOMInspector(){
var oUl=document.getElementById("myList");
varDOMString="";
if(oUl.hasChildNodes()){
var oCh=oUl.childNodes;
for(var i=0; i<oCh[i].length;i++)
DOMString+=oCh[i].nodeName+"\n";
}
alert(DOMString);
}
</script>
</head>
<body onload="myDOMInspector()">
<ul id="myList">
<li>糖醋排骨</li>
<li>泡菜與</li>
<li>半勺立即</li>
<li>麻婆豆腐</li>
</ul>
</body>
</html>

節點的屬性
<script language="javascript">
function myDOMInspector(){
//擷取圖片
var myImg=document.getElementsByTagName("img")[0];
//擷取圖片title屬性
alert(myImg.getAttribute("title"));
}

</script>
</head>
<body onload="myDOMInspector()">
<img src="01.jpg" title="情人坡" />

建立新節點
<script language="javascript">
function creatP(){
var oP=document.createElement("p");
var oText=document.createTextNode("這是一段感人的故
事");
oP.appendChild(oText);
document.body.appendChild(oP);
}

</script>
</head>
<body onload="creatP()">
<p>事先寫一行文字在這裡，測試appendChild()方法的添加位置</p>

innerHTML 表示某個標記之間的所有內容，包括代碼本身
<script language="javascript">
function myDOMInnerHTML(){
var myDiv=document.getElementById("myTest");
alert(myDiv.innerHTML);
//直接顯示innerHTML的內容
myDiv.innerHTML="<img src='01.jpg' title='情人坡'>";
}

</script>
</head>
<body onload="myDOMInnerHTML()">
<div id="myTest">
<span>圖庫</span>
<p>這是一行用於測試的文字</p>
</div>

第六課：事件
事件流
事件監聽
事件對象

冒泡型事件
<title>冒泡型事件</title>
<script language="javascript">
window.onload=function(){
var oP=document.getElementById("myP");
oP.onclick=function(){alert('我被電擊了');}
}
</script>
</head>
<body >
<div >
<p id="myP">Click Me</p>
</div>
捕獲型事件（ie不支援）

事件的監聽
簡單的通用方法（不能將方法刪除）
ie
<title>IE的監聽函數</title>
<script language="javascript">
function fnClick(){
alert("我被點擊了");
oP.detachEvent("onclick",fnClick); //點擊了一次刪
除監聽函數

window.onload=function(){
oP=document.getElementById("myP"); //找到對象
oP.attachEvent("onclick",fnClick); //添加監聽函數
}
</script>
</head>
<body >
<div >
<p id="myP">Click Me</p>
</div>
標準DOM的事件監聽
<title>標準DOM的監聽函數</title>
<script language="javascript">
function fnClick1(){
alert("我被fnClick1點擊了");
//oP.removeEventListener("click",fnClick2,false);
//點擊了一次刪除監聽函數
}
function fnClick2(){
alert("我被fnClick2點擊了");
//oP.removeEventListener("click",fnClick2,false);
//點擊了一次刪除監聽函數
}
var oP;
window.onload=function(){
oP=document.getElementById("myP"); //找到對象
oP.addEventListener("click",fnClick1,false); //
添加監聽函數2 false表示是採用冒泡型函數
oP.addEventListener("click",fnClick2,false); //添
加監聽函數2
}
</script>
</head>
<body >
<div >
<p id="myP">Click Me</p>
</div>

事件對象
IE瀏覽器中事件對象是window對象的一個屬性event
oP.onclick=function(){ var oEvent=window.event;}
DOM中規定的event對象必須最為唯一的參數傳給事件處理函數
oP.onclick=function(oEvent){}

相容瀏覽器 oP.onclik=funtion(oEvent){if(window.event)
oEvent=window.event;}

事件類型
<script language="javascript">
function handle(oEvent){
var oDiv=document.getElementById("display");
if(window.event)oEvent=window.event;
if(oEvent.type=="click")
oDiv.innerHTML+="你點擊了我&nbsp&nbsp; "
else if(oEvent.type=="mouseover")
oDiv.innerHTML+="你移動到了我上方&nbsp&nbsp; "
}
var oP;
window.onload=function(){
var oImg=document.getElementsByTagName("img")[0];
oImg.onclick=handle;
oImg.onmouseover=handle;
}
</script>
</head>
<body >
<div >
<img src="01.jpg" border="0" />
<div id="display"></div>
</div>

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

相關關鍵詞：
javascript jquery missing manual 3rd edition javascript and jquery interactive front end web development pdf javascript and jquery interactive front end web development exit jquery htmlspecialchars jquery jquery exit jquery uppercase
相關文章
漂亮簡單Javascript 調色盤代碼
javascript的indexOf忽略大小寫方法_javascript技巧
JavaScript的parseInt 取整使用
用js一招破解所有網頁的加密原始碼的方法
Wireshark基本介紹和學習TCP三向交握，wiresharktcp
jQuery AJAX timeout 逾時問題詳解，jqueryajax

聯繫我們

該頁面正文內容均來源於網絡整理，並不代表阿里雲官方的觀點，該頁面所提到的產品和服務也與阿里云無關，如果該頁面內容對您造成了困擾，歡迎寫郵件給我們，收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容，歡迎發送郵件至： info-contact@alibabacloud.com 進行舉報並提供相關證據，工作人員會在 5 個工作天內聯絡您，一經查實，本站將立刻刪除涉嫌侵權內容。

熱門內容

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

  • Sales Support

    1 on 1 presale consultation

    Chat Contact Sales

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

    Open a Ticket

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

    Learn More