jQuery很簡單很基礎的

時間 2019-11-15

標籤 jquery 簡單基礎欄目 JQuery 简体版

原文原文鏈接

1、瞭解jQueryjavascript

　　一、jQuery是一個JavaScript庫；極大地簡化了JavaScript編程；易學。css

　　二、jQuery庫能夠經過一行簡單標記添加到網頁中html

　　　　特徵：HTML元素選取、操做；CSS操做；HTML事件函數；JavaScript特效和動畫；HTML DOM遍歷和修改；AJAX；Utility。前端

三、添加jQuery庫（位於一個JavaScript文件中，其中包含了全部的jQuery函數），<script>標籤應該位於頁面的<head>部分java

<head>
    <script type="text/javascript" src="jquery.js"></script>
</head>

　　注意： type="text/javascript" ，在 HTML5 中，其可省略。JavaScript 是 HTML5 以及全部現代瀏覽器中的默認腳本語言！jquery

　　四、下載一個jQuery庫來引用，通常狀況下谷歌和微軟服務器都存有jQueryajax

如需從谷歌或微軟中引用，代碼以下：編程

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

　　使用谷歌或微軟的jQuery，有一個很大的優點，可減小加載時間，同時大多數CDN均可以確保當用戶向其請求文件時，會從離用戶最近的服務器上返回響應，這樣也能夠提升加載速度。api

　　五、jQuery語法：（經過jQuery，可選取（查詢、query）HTML元素，並對它們執行「操做」（action））數組

jQuery hide()函數：$(this).hide()——隱藏當前的HTML元素； $("#test").hide()——隱藏id=「test」的元素； $("p").hide()——隱藏全部元素； $(".test").hide()——隱藏全部class="test"的元素。

　　jQuery語法爲Html元素的選取編制的，能夠對元素執行某些操做，基礎語法：$(sslctor).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 元素選擇器和屬性選擇器容許您經過標籤名、屬性名或內容對 HTML 元素進行選擇。

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

在 HTML DOM 術語中：選擇器容許對 DOM 元素組或單個 DOM 節點進行操做。

　　八、jQuery選擇器

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

$("p") 選取 元素。

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

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

　　九、jQuery屬性選擇器

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

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

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

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

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

　　十、jQuery CSS選擇器，可用於改變HTML元素的css屬性

$("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中的核心函數；

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

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

<html>
<head>
    <script type="text/javascript" src="jquery.js"></script>
    <script type="text/javascript">
        $(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").hide();

　　十二、單獨文件中的函數

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

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

<head>
    <script type="text/javascript" src="jquery.js"></script>
    <script type="text/javascript" src="my_jquery_functions.js"></script>
</head>

　　1三、jQuery 名稱衝突

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

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

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

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

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

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

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

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

2、

一、選擇器

選擇器	實例	選取
*	$("*")	全部元素
#id	$("#lastname")	id="lastname" 的元素
.class	$(".intro")	全部 class="intro" 的元素
element	$("p")	全部 <p> 元素
.class.class	$(".intro.demo")	全部 class="intro" 且 class="demo" 的元素

:first	$("p:first")	第一個 <p> 元素
:last	$("p:last")	最後一個 <p> 元素
:even	$("tr:even")	全部偶數 <tr> 元素
:odd	$("tr:odd")	全部奇數 <tr> 元素

:eq(index)	$("ul li:eq(3)")	列表中的第四個元素（index 從 0 開始）
:gt(no)	$("ul li:gt(3)")	列出 index 大於 3 的元素
:lt(no)	$("ul li:lt(3)")	列出 index 小於 3 的元素
:not(selector)	$("input:not(:empty)")	全部不爲空的 input 元素

:header	$(":header")	全部標題元素 <h1> - <h6>
:animated		全部動畫元素

:contains(text)	$(":contains('W3School')")	包含指定字符串的全部元素
:empty	$(":empty")	無子（元素）節點的全部元素
:hidden	$("p:hidden")	全部隱藏的 <p> 元素
:visible	$("table:visible")	全部可見的表格

s1,s2,s3	$("th,td,.intro")	全部帶有匹配選擇的元素

[attribute]	$("[href]")	全部帶有 href 屬性的元素
[attribute=value]	$("[href='#']")	全部 href 屬性的值等於 "#" 的元素
[attribute!=value]	$("[href!='#']")	全部 href 屬性的值不等於 "#" 的元素
[attribute$=value]	$("[href$='.jpg']")	全部 href 屬性的值包含以 ".jpg" 結尾的元素

:input	$(":input")	全部 <input> 元素
:text	$(":text")	全部 type="text" 的 <input> 元素
:password	$(":password")	全部 type="password" 的 <input> 元素
:radio	$(":radio")	全部 type="radio" 的 <input> 元素
:checkbox	$(":checkbox")	全部 type="checkbox" 的 <input> 元素
:submit	$(":submit")	全部 type="submit" 的 <input> 元素
:reset	$(":reset")	全部 type="reset" 的 <input> 元素
:button	$(":button")	全部 type="button" 的 <input> 元素
:image	$(":image")	全部 type="image" 的 <input> 元素
:file	$(":file")	全部 type="file" 的 <input> 元素

:enabled	$(":enabled")	全部激活的 input 元素
:disabled	$(":disabled")	全部禁用的 input 元素
:selected	$(":selected")	全部被選取的 input 元素
:checked	$(":checked")	全部被選中的 input 元素

二、事件

事件方法會觸發匹配元素的事件，或將函數綁定到全部匹配元素的某個事件。

觸發實例：

$("button#demo").click()

上面的例子將觸發 id="demo" 的 button 元素的 click 事件。

綁定實例：

$("button#demo").click(function(){$("img").hide()})

上面的例子會在點擊 id="demo" 的按鈕時隱藏全部圖像。

方法	描述
bind()	向匹配元素附加一個或更多事件處理器
blur()	觸發、或將函數綁定到指定元素的 blur 事件
change()	觸發、或將函數綁定到指定元素的 change 事件
click()	觸發、或將函數綁定到指定元素的 click 事件
dblclick()	觸發、或將函數綁定到指定元素的 double click 事件
delegate()	向匹配元素的當前或將來的子元素附加一個或多個事件處理器
die()	移除全部經過 live() 函數添加的事件處理程序。
error()	觸發、或將函數綁定到指定元素的 error 事件
event.isDefaultPrevented()	返回 event 對象上是否調用了 event.preventDefault()。
event.pageX	相對於文檔左邊緣的鼠標位置。
event.pageY	相對於文檔上邊緣的鼠標位置。
event.preventDefault()	阻止事件的默認動做。
event.result	包含由被指定事件觸發的事件處理器返回的最後一個值。
event.target	觸發該事件的 DOM 元素。
event.timeStamp	該屬性返回從 1970 年 1 月 1 日到事件發生時的毫秒數。
event.type	描述事件的類型。
event.which	指示按了哪一個鍵或按鈕。
focus()	觸發、或將函數綁定到指定元素的 focus 事件
keydown()	觸發、或將函數綁定到指定元素的 key down 事件
keypress()	觸發、或將函數綁定到指定元素的 key press 事件
keyup()	觸發、或將函數綁定到指定元素的 key up 事件
live()	爲當前或將來的匹配元素添加一個或多個事件處理器
load()	觸發、或將函數綁定到指定元素的 load 事件
mousedown()	觸發、或將函數綁定到指定元素的 mouse down 事件
mouseenter()	觸發、或將函數綁定到指定元素的 mouse enter 事件
mouseleave()	觸發、或將函數綁定到指定元素的 mouse leave 事件
mousemove()	觸發、或將函數綁定到指定元素的 mouse move 事件
mouseout()	觸發、或將函數綁定到指定元素的 mouse out 事件
mouseover()	觸發、或將函數綁定到指定元素的 mouse over 事件
mouseup()	觸發、或將函數綁定到指定元素的 mouse up 事件
one()	向匹配元素添加事件處理器。每一個元素只能觸發一次該處理器。
ready()	文檔就緒事件（當 HTML 文檔就緒可用時）
resize()	觸發、或將函數綁定到指定元素的 resize 事件
scroll()	觸發、或將函數綁定到指定元素的 scroll 事件
select()	觸發、或將函數綁定到指定元素的 select 事件
submit()	觸發、或將函數綁定到指定元素的 submit 事件
toggle()	綁定兩個或多個事件處理器函數，當發生輪流的 click 事件時執行。
trigger()	全部匹配元素的指定事件
triggerHandler()	第一個被匹配元素的指定事件
unbind()	從匹配元素移除一個被添加的事件處理器
undelegate()	從匹配元素移除一個被添加的事件處理器，如今或未來
unload()	觸發、或將函數綁定到指定元素的 unload 事件

三、效果

方法	描述
animate()	對被選元素應用「自定義」的動畫
clearQueue()	對被選元素移除全部排隊的函數（仍未運行的）
delay()	對被選元素的全部排隊函數（仍未運行）設置延遲
dequeue()	運行被選元素的下一個排隊函數
fadeIn()	逐漸改變被選元素的不透明度，從隱藏到可見
fadeOut()	逐漸改變被選元素的不透明度，從可見到隱藏
fadeTo()	把被選元素逐漸改變至給定的不透明度
hide()	隱藏被選的元素
queue()	顯示被選元素的排隊函數
show()	顯示被選的元素
slideDown()	經過調整高度來滑動顯示被選元素
slideToggle()	對被選元素進行滑動隱藏和滑動顯示的切換
slideUp()	經過調整高度來滑動隱藏被選元素
stop()	中止在被選元素上運行動畫
toggle()	對被選元素進行隱藏和顯示的切換

四、文檔操做

這些方法對於 XML 文檔和 HTML 文檔均是適用的，除了：html()。

方法	描述
addClass()	向匹配的元素添加指定的類名。
after()	在匹配的元素以後插入內容。
append()	向匹配元素集合中的每一個元素結尾插入由參數指定的內容。
appendTo()	向目標結尾插入匹配元素集合中的每一個元素。
attr()	設置或返回匹配元素的屬性和值。
before()	在每一個匹配的元素以前插入內容。
clone()	建立匹配元素集合的副本。
detach()	從 DOM 中移除匹配元素集合。
empty()	刪除匹配的元素集合中全部的子節點。
hasClass()	檢查匹配的元素是否擁有指定的類。
html()	設置或返回匹配的元素集合中的 HTML 內容。
insertAfter()	把匹配的元素插入到另外一個指定的元素集合的後面。
insertBefore()	把匹配的元素插入到另外一個指定的元素集合的前面。
prepend()	向匹配元素集合中的每一個元素開頭插入由參數指定的內容。
prependTo()	向目標開頭插入匹配元素集合中的每一個元素。
remove()	移除全部匹配的元素。
removeAttr()	從全部匹配的元素中移除指定的屬性。
removeClass()	從全部匹配的元素中刪除所有或者指定的類。
replaceAll()	用匹配的元素替換全部匹配到的元素。
replaceWith()	用新內容替換匹配的元素。
text()	設置或返回匹配元素的內容。
toggleClass()	從匹配的元素中添加或刪除一個類。
unwrap()	移除並替換指定元素的父元素。
val()	設置或返回匹配元素的值。
wrap()	把匹配的元素用指定的內容或元素包裹起來。
wrapAll()	把全部匹配的元素用指定的內容或元素包裹起來。
wrapinner()	將每個匹配的元素的子內容用指定的內容或元素包裹起來。

五、屬性

下面列出的這些方法得到或設置元素的 DOM 屬性。

這些方法對於 XML 文檔和 HTML 文檔均是適用的，除了：html()。

方法	描述
addClass()	向匹配的元素添加指定的類名。
attr()	設置或返回匹配元素的屬性和值。
hasClass()	檢查匹配的元素是否擁有指定的類。
html()	設置或返回匹配的元素集合中的 HTML 內容。
removeAttr()	從全部匹配的元素中移除指定的屬性。
removeClass()	從全部匹配的元素中刪除所有或者指定的類。
toggleClass()	從匹配的元素中添加或刪除一個類。
val()	設置或返回匹配元素的值。

六、CSS

下面列出的這些方法設置或返回元素的 CSS 相關屬性。

CSS 屬性	描述
css()	設置或返回匹配元素的樣式屬性。
height()	設置或返回匹配元素的高度。
offset()	返回第一個匹配元素相對於文檔的位置。
offsetParent()	返回最近的定位祖先元素。
position()	返回第一個匹配元素相對於父元素的位置。
scrollLeft()	設置或返回匹配元素相對滾動條左側的偏移。
scrollTop()	設置或返回匹配元素相對滾動條頂部的偏移。
width()	設置或返回匹配元素的寬度。

七、AJAX操做函數

jQuery 庫擁有完整的 Ajax 兼容套件。其中的函數和方法容許咱們在不刷新瀏覽器的狀況下從服務器加載數據。

函數	描述
jQuery.ajax()	執行異步 HTTP (Ajax) 請求。
.ajaxComplete()	當 Ajax 請求完成時註冊要調用的處理程序。這是一個 Ajax 事件。
.ajaxError()	當 Ajax 請求完成且出現錯誤時註冊要調用的處理程序。這是一個 Ajax 事件。
.ajaxSend()	在 Ajax 請求發送以前顯示一條消息。
jQuery.ajaxSetup()	設置未來的 Ajax 請求的默認值。
.ajaxStart()	當首個 Ajax 請求完成開始時註冊要調用的處理程序。這是一個 Ajax 事件。
.ajaxStop()	當全部 Ajax 請求完成時註冊要調用的處理程序。這是一個 Ajax 事件。
.ajaxSuccess()	當 Ajax 請求成功完成時顯示一條消息。
jQuery.get()	使用 HTTP GET 請求從服務器加載數據。
jQuery.getJSON()	使用 HTTP GET 請求從服務器加載 JSON 編碼數據。
jQuery.getScript()	使用 HTTP GET 請求從服務器加載 JavaScript 文件，而後執行該文件。
.load()	從服務器加載數據，而後把返回到 HTML 放入匹配元素。
jQuery.param()	建立數組或對象的序列化表示，適合在 URL 查詢字符串或 Ajax 請求中使用。
jQuery.post()	使用 HTTP POST 請求從服務器加載數據。
.serialize()	將表單內容序列化爲字符串。
.serializeArray()	序列化表單元素，返回 JSON 數據結構數據。

八、遍歷

jQuery 遍歷函數包括了用於篩選、查找和串聯元素的方法。

函數	描述
.add()	將元素添加到匹配元素的集合中。
.andSelf()	把堆棧中以前的元素集添加到當前集合中。
.children()	得到匹配元素集合中每一個元素的全部子元素。
.closest()	從元素自己開始，逐級向上級元素匹配，並返回最早匹配的祖先元素。
.contents()	得到匹配元素集合中每一個元素的子元素，包括文本和註釋節點。
.each()	對 jQuery 對象進行迭代，爲每一個匹配元素執行函數。
.end()	結束當前鏈中最近的一次篩選操做，並將匹配元素集合返回到前一次的狀態。
.eq()	將匹配元素集合縮減爲位於指定索引的新元素。
.filter()	將匹配元素集合縮減爲匹配選擇器或匹配函數返回值的新元素。
.find()	得到當前匹配元素集合中每一個元素的後代，由選擇器進行篩選。
.first()	將匹配元素集合縮減爲集合中的第一個元素。
.has()	將匹配元素集合縮減爲包含特定元素的後代的集合。
.is()	根據選擇器檢查當前匹配元素集合，若是存在至少一個匹配元素，則返回 true。
.last()	將匹配元素集合縮減爲集合中的最後一個元素。
.map()	把當前匹配集合中的每一個元素傳遞給函數，產生包含返回值的新 jQuery 對象。
.next()	得到匹配元素集合中每一個元素緊鄰的同輩元素。
.nextAll()	得到匹配元素集合中每一個元素以後的全部同輩元素，由選擇器進行篩選（可選）。
.nextUntil()	得到每一個元素以後全部的同輩元素，直到遇到匹配選擇器的元素爲止。
.not()	從匹配元素集合中刪除元素。
.offsetParent()	得到用於定位的第一個父元素。
.parent()	得到當前匹配元素集合中每一個元素的父元素，由選擇器篩選（可選）。
.parents()	得到當前匹配元素集合中每一個元素的祖先元素，由選擇器篩選（可選）。
.parentsUntil()	得到當前匹配元素集合中每一個元素的祖先元素，直到遇到匹配選擇器的元素爲止。
.prev()	得到匹配元素集合中每一個元素緊鄰的前一個同輩元素，由選擇器篩選（可選）。
.prevAll()	得到匹配元素集合中每一個元素以前的全部同輩元素，由選擇器進行篩選（可選）。
.prevUntil()	得到每一個元素以前全部的同輩元素，直到遇到匹配選擇器的元素爲止。
.siblings()	得到匹配元素集合中全部元素的同輩元素，由選擇器篩選（可選）。
.slice()	將匹配元素集合縮減爲指定範圍的子集。

九、數據

這些方法容許咱們將指定的 DOM 元素與任意數據相關聯。

函數	描述
.clearQueue()	從隊列中刪除全部未運行的項目。
.data()	存儲與匹配元素相關的任意數據。
jQuery.data()	存儲與指定元素相關的任意數據。
.dequeue()	從隊列最前端移除一個隊列函數，並執行它。
jQuery.dequeue()	從隊列最前端移除一個隊列函數，並執行它。
jQuery.hasData()	存儲與匹配元素相關的任意數據。
.queue()	顯示或操做匹配元素所執行函數的隊列。
jQuery.queue()	顯示或操做匹配元素所執行函數的隊列。
.removeData()	移除以前存放的數據。
jQuery.removeData()	移除以前存放的數據。

十、DOM 元素

函數	描述
.get()	得到由選擇器指定的 DOM 元素。
.index()	返回指定元素相對於其餘指定元素的 index 位置。
.size()	返回被 jQuery 選擇器匹配的元素的數量。
.toArray()	以數組的形式返回 jQuery 選擇器匹配的元素。

十一、核心函數

函數	描述
jQuery()	接受一個字符串，其中包含了用於匹配元素集合的 CSS 選擇器。
jQuery.noConflict()	運行這個函數將變量 $ 的控制權讓渡給第一個實現它的那個庫。

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。