jQuery菜鳥教程02

時間 2019-12-12

標籤 jquery 菜鳥教程欄目 JQuery 简体版

原文原文鏈接

jQuery 入口函數與 JavaScript 入口函數的區別：css

jQuery 的入口函數是在 html 全部標籤(DOM)都加載以後，就會去執行。
JavaScript 的 window.onload 事件是等到全部內容，包括外部圖片之類的文件加載完後，纔會執行。

jQuery 選擇器

jQuery 選擇器容許您對 HTML 元素組或單個元素進行操做。html

1：元素選擇器jquery

2：#id 選擇器瀏覽器

3：.class 選擇器app

jQuery 事件

什麼是事件？函數

頁面對不一樣訪問者的響應叫作事件。學習

事件處理程序指的是當 HTML 中發生某些事件時所調用的方法。動畫

實例：spa

在元素上移動鼠標。
選取單選按鈕
點擊元素

在事件中常常使用術語"觸發"（或"激發"）例如： "當您按下按鍵時觸發 keypress 事件"。code

就是經過點擊事件，觸發執行JavaScript代碼，進行增刪改查頁面的內容。

jQuery效果

jQuery的效果就是讓div塊元素，能夠來回移動。實現動畫效果，經過改變圖像的位置，實現動態效果。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
</script>
<script> 
$(document).ready(function(){
  $("button").click(function(){
    var div=$("div");
    div.animate({height:'300px',opacity:'0.4'},"slow");
    div.animate({width:'300px',opacity:'0.8'},"slow");
    div.animate({height:'100px',opacity:'0.4'},"slow");
    div.animate({width:'100px',opacity:'0.8'},"slow");
  });
});
</script> 
</head>
 
<body>
<button>開始動畫</button>
<p>默認狀況下，全部的 HTML 元素有一個靜態的位置，且是不可移動的。 
若是須要改變爲，咱們須要將元素的 position 屬性設置爲 relative, fixed, 或 absolute!</p>
<div style="background:#98bf21;height:100px;width:100px;position:absolute;">
</div>

</body>
</html>