Jquery學習1-基礎語法

時間 2019-11-14

標籤 jquery 學習基礎語法欄目 JQuery 简体版

原文原文鏈接

jQuery 語法

jQuery 語法實例 javascript

$(this).hide()css

演示 jQuery hide() 函數，隱藏當前的 HTML 元素。html

$("#test").hide()java

演示 jQuery hide() 函數，隱藏 id="test" 的元素。jquery

$("p").hide()ide

演示 jQuery hide() 函數，隱藏全部 <p> 元素。函數

$(".test").hide()學習

演示 jQuery hide() 函數，隱藏全部 class="test" 的元素。網站

jQuery 語法 this

jQuery 語法是爲 HTML 元素的選取編制的，能夠對元素執行某些操做。

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

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

示例

$(this).hide() - 隱藏當前元素

$("p").hide() - 隱藏全部段落

$(".test").hide() - 隱藏全部 class="test" 的全部元素

$("#test").hide() - 隱藏全部 id="test" 的元素

提示：jQuery 使用的語法是 XPath 與 CSS 選擇器語法的組合。在本教程接下來的章節，您將學習到更多有關選擇器的語法。

文檔就緒函數

您也許已經注意到在咱們的實例中的全部 jQuery 函數位於一個 document ready 函數中：

$(document).ready(function(){

--- jQuery functions go here ----

});

這是爲了防止文檔在徹底加載（就緒）以前運行 jQuery 代碼。

若是在文檔沒有徹底加載以前就運行函數，操做可能失敗。下面是兩個具體的例子：

試圖隱藏一個不存在的元素
得到未徹底加載的圖像的大小

jQuery 選擇器

jQuery 元素選擇器和屬性選擇器容許您經過標籤名、屬性名或內容對 HTML 元素進行選擇。

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

在 HTML DOM 術語中：

選擇器容許您對 DOM 元素組或單個 DOM 節點進行操做。

jQuery 元素選擇器

jQuery 使用 CSS 選擇器來選取 HTML 元素。

$("p") 選取 <p> 元素。

$("p.intro") 選取全部 class="intro" 的 <p> 元素。

$("p#demo") 選取全部 id="demo" 的 <p> 元素。

jQuery 屬性選擇器

jQuery 使用 XPath 表達式來選擇帶有給定屬性的元素。

$("[href]") 選取全部帶有 href 屬性的元素。

$("[href='#']") 選取全部帶有 href 值等於 "#" 的元素。

$("[href!='#']") 選取全部帶有 href 值不等於 "#" 的元素。

$("[href$='.jpg']") 選取全部 href 值以 ".jpg" 結尾的元素。

jQuery CSS 選擇器

jQuery CSS 選擇器可用於改變 HTML 元素的 CSS 屬性。

下面的例子把全部 p 元素的背景顏色更改成紅色：

實例

$("p").css("background-color","red");

更多的選擇器實例

語法	描述
$(this)	當前 HTML 元素
$("p")	全部 <p> 元素
$("p.intro")	全部 class="intro" 的 <p> 元素
$(".intro")	全部 class="intro" 的元素
$("#intro")	id="intro" 的元素
$("ul li:first")	每一個 <ul> 的第一個 <li> 元素
$("[href$='.jpg']")	全部帶有以 ".jpg" 結尾的屬性值的 href 屬性
$("div#intro .head")	id="intro" 的 <div> 元素中的全部 class="head" 的元素

jQuery 事件

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

jQuery 事件函數

jQuery 事件處理方法是 jQuery 中的核心函數。

事件處理程序指的是當 HTML 中發生某些事件時所調用的方法。術語由事件"觸發"（或"激發"）常常會被使用。

一般會把 jQuery 代碼放到 <head>部分的事件處理方法中：

實例

<html>

<head>

$(document).ready(function(){

$("button").click(function(){

$("p").hide();

});

</script>

</head>

<body>

<h2>This is a heading</h2>

<p>This is a paragraph.</p>

<p>This is another paragraph.</p>

<button>Click me</button>

</body>

</html>

親自試一試

在上面的例子中，當按鈕的點擊事件被觸發時會調用一個函數：

$("button").click(function() {..some code... } )

該方法隱藏全部 <p> 元素：

$("p").hide();

單獨文件中的函數

若是您的網站包含許多頁面，而且您但願您的 jQuery 函數易於維護，那麼請把您的 jQuery 函數放到獨立的 .js 文件中。

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

實例

<head>

</head>

jQuery 名稱衝突

jQuery 使用 $ 符號做爲 jQuery 的簡介方式。

某些其餘 JavaScript 庫中的函數（好比 Prototype）一樣使用 $ 符號。

jQuery 使用名爲 noConflict() 的方法來解決該問題。

var jq=jQuery.noConflict()，幫助您使用本身的名稱（好比 jq）來代替 $ 符號。

親自試一試

結論

因爲 jQuery 是爲處理 HTML 事件而特別設計的，那麼當您遵循如下原則時，您的代碼會更恰當且更易維護：

把全部 jQuery 代碼置於事件處理函數中
把全部事件處理函數置於文檔就緒事件處理器中
把 jQuery 代碼置於單獨的 .js 文件中
若是存在名稱衝突，則重命名 jQuery 庫

jQuery 事件

下面是 jQuery 中事件方法的一些例子：

Event 函數	綁定函數至
$(document).ready(function)	將函數綁定到文檔的就緒事件（當文檔完成加載時）
$(selector).click(function)	觸發或將函數綁定到被選元素的點擊事件
$(selector).dblclick(function)	觸發或將函數綁定到被選元素的雙擊事件
$(selector).focus(function)	觸發或將函數綁定到被選元素的得到焦點事件
$(selector).mouseover(function)	觸發或將函數綁定到被選元素的鼠標懸停事件