首頁 > 開發者 > JavaScript
標籤：action span doc 常見 examples 基於 window obj text
JavaScript1.概述JavaScript是一種基於對象和事件驅動，並具有安全效能的指令碼語言。
2.文法
HTML 中的指令碼必須位於 <script> 與 </script> 標籤之間。
指令碼可被放置在 HTML 頁面的 <body> 和 <head> 部分中；
多數情況下放在<head>部分中，可優於其他代碼被載入執行。
例：
<!DOCTYPE html>
<html>
<body>
<h1>我的 Web 頁面</h1>
<p id="demo">一個段落</p>
<button type="button" onclick="myFunction()">嘗試一下</button>
<script> function myFunction()
{
document.getElementById("demo").innerHTML="我的第一個 JavaScript 函數";
}
</script>
</body>
</html>
2.1 innerHTML
innerHTML在JS是雙向功能： 擷取對象的內容 或 向對象插入內容。
文法：
HTMLElementObject.innerHTML=text
例：
<div id="aa">這是內容</div>
可通過document.getElementById(‘aa‘).innerHTML 來擷取id為aa的對象的內嵌內容；
也可以對某對象插入內容：
document.getElementById(‘abc‘).innerHTML=‘這是被插入的內容‘;
//向id為abc的對象插入內容。
2.2連結指令檔
格式：
<head>
<script type=”text/javascript” src=”xxx.js”></script>
</head>
註：.js檔案中只有指令碼，不包含HTML標記。
JQuery1：概述
Jquery是js的一個工具庫
2：jquery的功能
HTML 元素選取
HTML 元素操作
CSS 操作
HTML 事件函數
JavaScript 特效和動畫
HTML DOM 遍曆和修改
AJAX
Utilities
除此之外，Jquery還提供了大量的外掛程式。最常見的是jquery UI和jquery easyui。
3：引用jquery
<head>
<script src="jquery-1.10.2.min.js"></script>
</head>
4：文法
$(selector).action()
例：$(this).hide() - 隱藏當前元素
$("p").hide() - 隱藏所有 <p> 元素
$("p.test").hide() - 隱藏所有 class="test" 的 <p> 元素
$("#test").hide() - 隱藏所有 id="test" 的元素
5：關於入口函數與JS的區別
jquery的入口函數：
$(document).ready(function(){
// 執行代碼
});
或者
$(function(){
// 執行代碼
});
JavaScript 入口函數:
window.onload = function () {
// 執行代碼
}
jQuery 的入口函數是在 html 所有標籤(DOM)都載入之後，就會去執行。
JavaScript 的 window.onload 事件是等到所有內容，包括外部圖片之類的檔案載入完後，才會執行。
6：事件處理區別
事件來源：
Js：document.getElementById(“id”)
jQuery：$(“#id”)
事件：
Js :document.getElementById(“id”).onclick
jQuery: $(“#id”).click
註：jQuery的事件不帶on
事件處理常式：
Js :
document.getElementById(“id”).onclick = function(){// 語句}
jQuery :
$(“#id”).click(function(){// 語句});
(第6點有參考，連結我忘記了，誰知道的話幫我貼一下）
javascript執行個體參考：http://www.runoob.com/js/js-examples.html
jquery執行個體參考：http://www.runoob.com/jquery/jquery-examples.html
javascript和jquery
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
