jQuery學習筆記-1-基礎知識

基礎知識

本章主要記錄jQuery基本操作和信息，這些內容來自學習的網上的一些資料。

一.簡介：

	    1.jQuery 是一個 JavaScript 庫。

		2.jQuery 極大地簡化了 JavaScript 編程。

		3.jQuery 很容易學習。

		4.jQuery 庫可以通過一行簡單的標記被添加到網頁中。

二.學習前提：

	對以下基礎知識有了解：

		HTML
		CSS
		JavaScript

三.特點：

jQuery是一個JavaScript函數庫。

jQuery是一個輕量級的"寫的少，做的多"的JavaScript庫。

jQuery庫包含以下功能：

HTML 元素選取
HTML 元素操作
CSS 操作
HTML 事件函數
JavaScript 特效和動畫
HTML DOM 遍歷和修改
AJAX
Utilities

提示：除此之外，Jquery還提供了大量的插件。

四.jQuery 安裝：

可以通過多種方法在網頁中添加 jQuery。您可以使用以下方法：

從 jquery.com 下載 jQuery 庫
從 CDN 中載入 jQuery, 如從 Google 中加載 jQuery

jQuery 庫是一個 JavaScript 文件，您可以使用 HTML 的<script> 標籤引用它：

<head>
<script src="jquery-1.10.2.min.js"></script>
</head>

如果您不希望下載並存放 jQuery，那麼也可以通過 CDN（內容分發網絡）引用它。

Staticfile CDN:

<head>
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
</script>
</head>

百度 CDN:

<head>
<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js">
</script>
</head>

又拍雲 CDN:

<head>
<script src="https://upcdn.b0.upaiyun.com/libs/jquery/jquery-2.0.2.min.js">
</script>
</head>

新浪 CDN:

<head>
<script src="https://lib.sinaapp.com/js/jquery/2.0.2/jquery-2.0.2.min.js">
</script>
</head>

Google CDN:

<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
</script>
</head>

五.語法

通過 jQuery，您可以選取（查詢，query） HTML 元素，並對它們執行"操作"（actions）。

基礎語法： $(selector).action()

美元符號定義 jQuery
選擇符（selector）“查詢"和"查找” HTML 元素
jQuery 的 action() 執行對元素的操作

實例:

$(this).hide() - 隱藏當前元素
$(“p”).hide() - 隱藏所有
元素
$(“p.test”).hide() - 隱藏所有 class=“test” 的
元素
$("#test").hide() - 隱藏所有 id=“test” 的元素

文檔就緒事件


$(document).ready(function(){
 
   // 開始寫 jQuery 代碼...
 
});

jQuery 函數位於一個 document ready 函數中，這是爲了防止文檔在完全加載（就緒）之前運行 jQuery 代碼，即在 DOM 加載完成後纔可以對 DOM 進行操作。
如果在文檔沒有完全加載之前就運行函數，操作可能失敗。

jQuery 入口函數:

$(document).ready(function(){
    // 執行代碼
});
或者
$(function(){
    // 執行代碼
});

JavaScript 入口函數:

window.onload = function () {
    // 執行代碼
}

六.jQuery 選擇器

jQuery 選擇器允許您對 HTML 元素組或單個元素進行操作。

jQuery 選擇器基於元素的 id、類、類型、屬性、屬性值等"查找"（或選擇）HTML 元素。它基於已經存在的 CSS 選擇器，除此之外，它還有一些自定義的選擇器。

jQuery 中所有選擇器都以美元符號開頭：$()。

元素選擇器

jQuery 元素選擇器基於元素名選取元素。

在頁面中選取所有

元素:

$("p")

例：當用戶點擊按鈕後，所有

元素都隱藏

<script>
$(function(){
	$("button").click(function(){
		$("p").hide();
	});
});
</script>
<p>這是一個段落</p>
<p>段落都會被隱藏</p>

#id 選擇器

jQuery #id 選擇器通過 HTML 元素的 id 屬性選取指定的元素。

頁面中元素的 id 應該是唯一的，所以您要在頁面中選取唯一的元素需要通過 #id 選擇器。

通過 id 選取元素語法如下：

$("#test")

例子：
當用戶點擊按鈕後，有 id=“test” 屬性的元素將被隱藏：

<script>
$(function(){
	$("button").click(function(){
		$("#test").hdie();
	});
});
</script>
<p id="test">這個段落會被隱藏</p>
<button>點擊按鈕會隱藏上面的段落</button>

.class 選擇器

jQuery 類選擇器可以通過指定的 class 查找元素。

語法如下：

$(".test")

例子：

用戶點擊按鈕後所有帶有 class=“test” 屬性的元素都隱藏：

<script>
$(document).ready(function(){
	$("button").click(function(){
		$(".test").hide();
	});
});
</script>

<h3 class="test">這是一個標題</h3>
<p class="test">這一個段落</p>
<button>點擊會隱藏標題和段落</button>

更多實例

語法	描述
$("*")	選取所有元素
$(this)	選取當前HTML元素
$(“p.intro”)	選擇class爲intro的<p>元素
$(“p:first”)	選擇第一個<p>元素
$(“ul li:first”)	選擇第一個<ul>元素和第一個<li>元素
$("[href]")	選取帶有href屬性的元素
$(":button")	選取所有 type=“button” 的 <input> 元素和 <button> 元素
$(“tr:even”)	選取偶數位置的<tr> 元素
$(“tr:odd”)	選取奇數位置的 <tr> 元素

獨立文件中使用 jQuery 函數

如果您的網站包含許多頁面，並且您希望您的 jQuery 函數易於維護，那麼請把您的 jQuery 函數放到獨立的 .js 文件中。

當我們在教程中演示 jQuery 時，會將函數直接添加到部分中。不過，把它們放到一個單獨的文件中會更好，就像這樣（通過 src 屬性來引用文件）：

<head>
<script src="http://cdn.static.runoob.com/libs/jquery/1.10.2/jquery.min.js">
</script>
<script src="my_jquery_functions.js"></script>
</head>

七.jQuery 事件

jQuery 是爲事件處理特別設計的。

什麼是事件？

頁面對不同訪問者的響應叫做事件。

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

實例：

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

jQuery 事件方法語法

在 jQuery 中，大多數 DOM 事件都有一個等效的 jQuery 方法。

頁面中指定一個點擊事件：

$("p").click();

下一步是定義什麼時間觸發事件。您可以通過一個事件函數實現：

$("p").click(function(){
    // 動作觸發後執行的代碼!!
});

常用的 jQuery 事件方法

click()

click() 方法是當按鈕點擊事件被觸發時會調用一個函數。

該函數在用戶點擊 HTML 元素時執行。

在下面的實例中，當點擊事件在某個

元素上觸發時，隱藏當前的

元素：

   <script>
$(document).ready(function(){
  $("p").click(function(){     //點擊1、2、3，對應數字會消失（元素選擇器  $("元素名")）
  //$("#demo").click(function(){       //點擊2,2會消失 （id選擇器 $("#id")）
  //$(".test").click(function(){       //點擊3,3會消失 （類選擇器 $(".class")）
    $(this).hide();
  });
});
</script>

<p>1</p>
<p id="demo">2</p>
<p class="test">3</p>

dblclick()

當雙擊元素時，會發生 dblclick 事件。

dblclick() 方法觸發 dblclick 事件，或規定當發生 dblclick 事件時運行的函數：

$("p").dblclick(function(){
  $(this).hide();
});

mouseenter()

當鼠標指針穿過元素時，會發生 mouseenter 事件。

mouseenter() 方法觸發 mouseenter 事件，或規定當發生 mouseenter 事件時運行的函數：

$("#p1").mouseenter(function(){
    alert('您的鼠標移到了 id="p1" 的元素上!');
});

mouseleave()

當鼠標指針離開元素時，會發生 mouseleave 事件。

mouseleave() 方法觸發 mouseleave 事件，或規定當發生 mouseleave 事件時運行的函數：

$("#p1").mouseleave(function(){
    alert("再見，您的鼠標離開了該段落。");
});

mousedown()

當鼠標指針移動到元素上方，並按下鼠標按鍵時，會發生 mousedown 事件。

mousedown() 方法觸發 mousedown 事件，或規定當發生 mousedown 事件時運行的函數：

$("#p1").mousedown(function(){
    alert("鼠標在該段落上按下！");
});

mouseup()

當在元素上鬆開鼠標按鈕時，會發生 mouseup 事件。

mouseup() 方法觸發 mouseup 事件，或規定當發生 mouseup 事件時運行的函數：

$("#p1").mouseup(function(){
    alert("鼠標在段落上鬆開。");
});

hover()

hover()方法用於模擬光標懸停事件。

當鼠標移動到元素上時，會觸發指定的第一個函數(mouseenter);當鼠標移出這個元素時，會觸發指定的第二個函數(mouseleave)。

$("#p1").hover(
    function(){
        alert("你進入了 p1!");
    },
    function(){
        alert("拜拜! 現在你離開了 p1!");
    }
);

focus()

當元素獲得焦點時，發生 focus 事件。

當通過鼠標點擊選中元素或通過 tab 鍵定位到元素時，該元素就會獲得焦點。

focus() 方法觸發 focus 事件，或規定當發生 focus 事件時運行的函數：

$("input").focus(function(){
  $(this).css("background-color","#cccccc");
});

blur()

當元素失去焦點時，發生 blur 事件。

blur() 方法觸發 blur 事件，或規定當發生 blur 事件時運行的函數：

$("input").blur(function(){
  $(this).css("background-color","#ffffff");
});

jQuery學習筆記-1-基礎知識

基礎知識

一.簡介：

二.學習前提：

三.特點：

四.jQuery 安裝：

五.語法

六.jQuery 選擇器

七.jQuery 事件

【簡寫Mybatis-02】註冊機的實現以及SqlSession處理

手繪二維碼

.NET藉助虛擬網卡實現一個簡單異地組網工具

svg之transform

svg之入門

jQuery學習筆記-5-Ajax

jQuery學習筆記-1-基礎知識

easyUI基礎-draggable拖動

Mac下配置sublime實現LaTeX

https://yachay.unat.edu.pe/blog/index.php?comment_area=format_blog&comment_component=blog&comment_co

linux以太網驅動總結