當前位置：首頁 > 前端技术 > javascript >内容正文

javascript

史上最全的javascript知识点总结，浅显易懂。

發布時間：2024/3/13 javascript 54 豆豆

生活随笔收集整理的這篇文章主要介紹了史上最全的javascript知识点总结，浅显易懂。小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

來源于：http://blog.csdn.net/qiushi_1990/article/details/40260471

一，認識javascript
1-1
為什么學習JavaScript
一）、你知道，為什么JavaScript非常值得我們學習嗎？
1. 所有主流瀏覽器都支持JavaScript。
2. 目前，全世界大部分網頁都使用JavaScript。
3. 它可以讓網頁呈現各種動態效果。
4. 做為一個Web開發師，如果你想提供漂亮的網頁、令用戶滿意的上網體驗，JavaScript是必不可少的工具。
二）、易學性
1.學習環境無外不在，只要有文本編輯器，就能編寫JavaScript程序。
2.我們可以用簡單命令，完成一些基本操作。

1-2
引用JS外部文件
通過前面知識學習，我們知道使用<script type="text/javascript">標簽在HTML文件中添加JavaScript代碼
我們也可以把HTML文件和JS代碼分開,并單獨創建一個JavaScript文件(簡稱JS文件),其文件后綴通常為.js，然后將JS代碼直接寫在JS文件中。

注意:在JS文件中，不需要<script>標簽,直接編寫JavaScript代碼就可以了。
JS文件不能直接運行，需嵌入到HTML文件中執行，我們需在HTML中添加如下代碼，就可將JS文件嵌入HTML文件中。
<script src="script.js"></script>

1-3
JS的位置
我們可以將JavaScript代碼放在html文件中任何位置，但是我們一般放在網頁的head或者body部分。
放在<head>部分
最常用的方式是在頁面中head部分放置<script>元素，瀏覽器解析head部分就會執行這個代碼，然后才解析頁面的其余部分。
放在<body>部分
JavaScript代碼在網頁讀取到該語句的時候就會執行。

注意: javascript作為一種腳本語言可以放在html頁面中任何位置，但是瀏覽器解釋html時是按先后順序的，所以前面的script就先被執行。比如進行頁面顯示初始化的js必須放在head里面，因為初始化都要求提前進行（如給頁面body設置css等）；而如果是通過事件調用執行的function那么對位置沒什么要求的。

1-4
js語句和符號
JavaScript語句是發給瀏覽器的命令。這些命令的作用是告訴瀏覽器要做的事情。
每一句JavaScript代碼格式:?
語句;
先來看看下面代碼
<script type="text/javascript">
? ?alert("hello!");
</script>
例子中的alert("hello!");就是一個JavaScript語句。
一行的結束就被認定為語句的結束，通常在結尾加上一個分號";"來表示語句的結束。

注意:
1. “;”分號要在英文狀態下輸入，同樣，JS中的代碼和符號都要在英文狀態下輸入。
2. 雖然分號“;”也可以不寫，但我們要養成編程的好習慣，記得在語句末尾寫上分號。

1-5
注釋很重要，和Java一樣。
注釋的作用是提高代碼的可讀性，幫助自己和別人閱讀和理解你所編寫的JavaScript代碼，注釋的內容不會在網頁中顯示。注釋可分為單行注釋與多行注釋兩種。
我們為了方便閱讀，注釋內容一般放到需要解釋語句的結尾處或周圍。
單行注釋，在注釋內容前加符號 “//”。
<script type="text/javascript">
? document.write("單行注釋使用'//'"); ?// 我是注釋，該語句功能在網頁中輸出內容
</script>
多行注釋以"/*"開始，以"*/"結束。
<script type="text/javascript">
? ?document.write("多行注釋使用/*注釋內容*/");
? ?/*
? ? 多行注釋
? ? 養成書寫注釋的良好習慣
? ?*/

1-6
變量
從字面上看，變量是可變的量；從編程角度講，變量是用于存儲某種/某些數值的存儲器。我們可以把變量看做一個盒子，為了區分盒子，可以用BOX1,BOX2等名稱代表不同盒子，BOX1就是盒子的名字（也就是變量的名字）。
定義變量使用關鍵字var,
語法如下：
var 變量名

變量名可以任意取名，但要遵循命名規則:
? ? 1.變量名必須使用字母或者下劃線(_)開始。
? ? 2.變量名必須使用英文字母、數字、下劃線(_)組成。
? ? 3.變量名不能使用JavaScript關鍵詞與JavaScript保留字。
變量要先聲明再賦值，如下：
var mychar;
mychar="javascript";
變量可以重復賦值，如下：
var mychar;
mychar="javascript";
mychar="hello";
注意:
1. 在JS中區分大小寫，如變量mychar與myChar是不一樣的，表示是兩個變量。
2. 變量雖然也可以不聲明，直接使用，但不規范，需要先聲明，后使用。

1-7
函數
函數是完成某個特定功能的一組語句。如沒有函數，完成任務可能需要五行、十行、甚至更多的代碼。這時我們就可以把完成特定功能的代碼塊放到一個函數里，直接調用這個函數，就省重復輸入大量代碼的麻煩。
如何定義一個函數呢？基本語法如下:
function 函數名()
{
? ? ?函數代碼;
}
說明:
1. function定義函數的關鍵字。
2. "函數名"你為函數取的名字。
3. "函數代碼"替換為完成特定功能的代碼。
我們來編寫一個實現兩數相加的簡單函數,并給函數起個有意義的名字：“add2”，代碼如下：
function add2(){
? ?var sum = 3 + 2;
? ?alert(sum);
}

二，js的互動
1-1
1，輸出內容（document.write）

2，警告（alert 消息對話框）
我們在訪問網站的時候，有時會突然彈出一個小窗口，上面寫著一段提示信息文字。如果你不點擊“確定”，就不能對網頁做任何操作，這個小窗口就是使用alert實現的。
語法:
alert(字符串或變量);?

3，確認（confirm 消息對話框）
confirm 消息對話框通常用于允許用戶做選擇的動作，如：“你對嗎？”等。彈出對話框(包括一個確定按鈕和一個取消按鈕)。
語法:
confirm(str);
參數說明:
str：在消息對話框中要顯示的文本
返回值: Boolean值
返回值:
當用戶點擊"確定"按鈕時，返回true
當用戶點擊"取消"按鈕時，返回false
注: 通過返回值可以判斷用戶點擊了什么按鈕
看下面的代碼:
<script type="text/javascript">
? ? var mymessage=confirm("你喜歡JavaScript嗎?");
? ? if(mymessage==true)
? ? { ? document.write("很好,加油!"); ? }
? ? else
? ? { ?document.write("JS功能強大，要學習噢!"); ? }
</script>

注: 消息對話框是排它的，即用戶在點擊對話框按鈕前，不能進行任何其它操作。

4，提問（prompt 消息對話框）
prompt彈出消息對話框,通常用于詢問一些需要與用戶交互的信息。彈出消息對話框（包含一個確定按鈕、取消按鈕與一個文本輸入框）。
語法:
prompt(str1, str2);
參數說明：
str1: 要顯示在消息對話框中的文本，不可修改
str2：文本框中的內容，可以修改。（但是寫代碼時不用寫str2，寫的話就是文本框中的默認內容）

返回值:
1. 點擊確定按鈕，文本框中的內容將作為函數返回值
2. 點擊取消按鈕，將返回null
看看下面代碼:
var myname=prompt("請輸入你的姓名:");
if(myname!=null)
? { ? alert("你好"+myname); }
else
? { ?alert("你好 my friend."); ?}

5，打開新窗口（window.open）
open() 方法用于打開一個新的窗口。
語法：
window.open(<URL>, <窗口名稱>, <參數字符串>)
參數說明:
URL：打開窗口的網址或路徑。
窗口名稱：被打開窗口的名稱。
? ? ? ? ? ? ? 可以是"_top"、"_blank"、"_selft"等。
參數字符串：設置窗口參數，各參數用逗號隔開。
參數表:

例如:打開http://www.imooc.com網站，大小為300px * 200px，無菜單，無工具欄，無狀態欄，有滾動條窗口：
<script type="text/javascript">?
window.open('http://www.imooc.com','_blank','width=300,height=200,menubar=no,toolbar=no, status=no,scrollbars=yes')
</script>
注意：
a.參數之間逗號及等號前后有空格，該字符串無效，只有刪除空格才能正常運行。
b.運行結果考慮瀏覽器兼容問題。

二，DOM操作
2-1認識DOM
文檔對象模型DOM（Document Object Model）定義訪問和處理HTML文檔的標準方法。DOM 將HTML文檔呈現為帶有元素、屬性和文本的樹結構（節點樹）。
先來看看下面代碼:
<a href="http://www.imooc.com">JavaScript DOM</a>

HTML文檔可以說由節點構成的集合，三種常見的DOM節點:
1. 元素節點：上面的<a>等都是元素節點，即標簽。
2. 文本節點:向用戶展示的內容，如上面的的JavaScript DOM等文本內容。
3. 屬性節點:元素屬性，如<a>標簽的鏈接屬性href="http://www.imooc.com"。

2-2
通過ID獲取元素
學過HTML/CSS樣式，都知道，網頁由標簽將信息組織起來，而標簽的id屬性值是唯一的，就像是每人有一個身份證號一樣，只要通過身份證號就可以找到相對應的人。那么在網頁中，我們通過id先找到標簽，然后進行操作。
語法:
?document.getElementById(“id”)?

2-3
innerHTML 屬性
innerHTML 屬性用于獲取或替換 HTML 元素的內容。
語法:
Object.innerHTML
注意:
1.Object是獲取的元素對象，如通過document.getElementById("ID")獲取的元素。
2.注意書寫，innerHTML區分大小寫。
我們通過id="con"獲取<p> 元素，并將元素的內容輸出和改變元素內容，代碼如下:
<script type="text/javascript">

? var mychar=document.getElementById("con");
? document.write("原標題:"+mychar.innerHTML+"<br>");//輸出原h2標簽內容
? mychar.innerHTML="修改后的內容"

? document.write("修改后的標題:"+mychar.innerHTML); //輸出修改后h2標簽內容
</script>

2-4
改變 HTML 樣式
HTML DOM 允許 JavaScript 改變 HTML 元素的樣式。如何改變 HTML 元素的樣式呢？
語法:
Object.style.property=new style;
注意:Object是獲取的元素對象，如通過document.getElementById("id")獲取的元素。

注意:該表只是一小部分CSS樣式屬性，其它樣式也可以通過該方法設置和修改。
看看下面的代碼:
改變 <p> 元素的樣式，將顏色改為紅色，字號改為20,背景顏色改為藍：
<p id="pcon">Hello World!</p>
<script>
? ?var mychar = document.getElementById("pcon");
? ?mychar.style.color="red";
? ?mychar.style.fontSize="20";
? ?mychar.style.backgroundColor ="blue";
</script>

2-5
顯示和隱藏（display屬性）
網頁中經常會看到顯示和隱藏的效果，可通過display屬性來設置。
語法：
Object.style.display = value
注意:Object是獲取的元素對象，如通過document.getElementById("id")獲取的元素。
value取值:
none：隱藏內容
block：顯示內容。

2-6
控制類名（className 屬性）
className 屬性設置或返回元素的class 屬性。
語法：
object.className = classname
作用:
1.獲取元素的class 屬性
2. 為網頁內的某個元素指定一個css樣式來更改該元素的外觀
<style>
? ??
body{ font-size:16px;}
? ??
.one{

border:1px solid #eee;

width:230px;

height:50px;

background:#ccc;

color:red;
? ? }

.two{

border:1px solid #ccc;

width:230px;

height:50px;

background:#9CF;

color:blue;
}

</style>

</head>

<body>

<p id="p1" > 要添加樣式的內容</p>
? ? ? ? ? ?
<input type="button" value="添加樣式" οnclick="add()"/>

<p id="p2" class="one">要更改樣式的內容</p>
? ?
<input type="button" value="更改外觀" οnclick="modify()"/>

<script type="text/javascript">

? ??var mychar=document.getElementById("p2");

? ??document.write("p2元素class值為："+mychar.className)

function add(){

? ? ? var p1 = document.getElementById("p1");
? ? ? p1.className="one";
??
}
??
function modify(){

? var p2 = document.getElementById("p2");
? ? ? ? p2.className="two";

}

</script>

</body>

轉載于:https://www.cnblogs.com/ys-wuhan/p/5848456.html

總結

以上是生活随笔為你收集整理的史上最全的javascript知识点总结，浅显易懂。的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。