JQuery概述、屬性、方法集-創(chuàng)新互聯(lián)

JQuery是一個(gè)javascript再次封裝的模塊,語法簡單。

創(chuàng)新互聯(lián)于2013年成立,先為睢縣等服務(wù)建站,睢縣等地企業(yè),進(jìn)行企業(yè)商務(wù)咨詢服務(wù)。為睢縣企業(yè)網(wǎng)站制作PC+手機(jī)+微官網(wǎng)三網(wǎng)同步一站式服務(wù)解決您的所有建站問題。

模塊下載地址:http://jquery.com/download/

JQuery語法說明 :http://jquery.cuishifeng.cn/

jQuery 入口函數(shù)與 JavaScript 入口函數(shù)的區(qū)別:

  • jQuery 的入口函數(shù)是在 html 所有標(biāo)簽(DOM)都加載之后,就會(huì)去執(zhí)行。

  • JavaScript 的 window.onload 事件是等到所有內(nèi)容,包括外部圖片之類的文件加載完后,才會(huì)執(zhí)行。

JQuery概述、屬性、方法集

功能:

查找元素

操作元素

HTML中引用:頭部文件加入<script src='js文件路徑'></script>

DOM與JQuery轉(zhuǎn)換:

DOM轉(zhuǎn)換成JQuery:$(dom對(duì)象)

JQuery轉(zhuǎn)DOM:

<div?id="d1">hello!?</div> <script> ????var?j=$(d1); ????document.write(j); ????document.write(j[0]); ???? ????var?d=document.getElementById('d1'); ????document.write(d); ????document.write($(d));???? ???? </script>

一、JQuery選擇器:JQuery()簡寫$()

*所有,字符串代表標(biāo)簽名,#id名,逗號(hào)表組合,空格表層級(jí)。

語法描述
$("*")選取所有元素
$("div")選取所有div標(biāo)簽
$("#id10")選取所有id10的標(biāo)簽
$(this)選取當(dāng)前 ? HTML 元素
$("p.intro")選取 ? class 為 intro 的 <p> 元素
$("p:first")選取第一個(gè) ? <p> 元素
$("ul li:first")選取第一個(gè) ? <ul> 元素的第一個(gè) <li> 元素
$("ul li:first-child")選取每個(gè) ? <ul> 元素的第一個(gè) <li> 元素
$("[href]")選取帶有 ? href 屬性的元素
$("a[target='_blank']")選取所有 ? target 屬性值等于 "_blank" 的 <a> 元素
$("a[target!='_blank']")選取所有 ? target 屬性值不等于 "_blank" 的 <a> 元素
$(":button")選取所有 ? type="button" 的 <input> 元素 和 <button> 元素
$("[src$=.'jpg]'")選取所有src屬性以.jpg結(jié)尾的元素
$("[src^='http']")選取所有src屬性以http開頭的元素
$("tr:even")選取偶數(shù)位置的 ? <tr> 元素
$("tr:odd")選取奇數(shù)位置的 ? <tr> 元素
$(".test")
包含樣式名為test的元素
$("a,.test1,test2")組合選擇器,樣式名為test1,test2的a標(biāo)簽
$('div #d2 .test1')層級(jí)選擇器,div下的id=d2的test1樣式
選擇器實(shí)例選取
*$("*")所有元素
#id$("#lastname")id="lastname" ? 的元素
.class$(".intro")所有 的元素
element$("p")所有 <p> 元素
.class.class$(".intro.demo")所有 且 的元素



:first$("p:first")第一個(gè) <p> 元素
:last$("p:last")最后一個(gè) <p> 元素
:even$("tr:even")所有偶數(shù) <tr> 元素
:odd$("tr:odd")所有奇數(shù) <tr> 元素



:eq(index)$("ul ? li:eq(3)")列表中的第四個(gè)元素(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")所有標(biāo)題元素 <h2> - <h7>
:animated
所有動(dòng)畫元素



:contains(text)$(":contains('W3School')")包含指定字符串的所有元素
:empty$(":empty")無子(元素)節(jié)點(diǎn)的所有元素
: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" 結(jié)尾的元素



: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 元素

二、JQuery事件:

方法描述
bind()向匹配元素附加一個(gè)或更多事件處理器
blur()觸發(fā)、或?qū)⒑瘮?shù)綁定到指定元素的 ? blur 事件
change()觸發(fā)、或?qū)⒑瘮?shù)綁定到指定元素的 ? change 事件
click()觸發(fā)、或?qū)⒑瘮?shù)綁定到指定元素的 ? click 事件
dblclick()觸發(fā)、或?qū)⒑瘮?shù)綁定到指定元素的 ? double click 事件
delegate()向匹配元素的當(dāng)前或未來的子元素附加一個(gè)或多個(gè)事件處理器
die()移除所有通過 ? live() 函數(shù)添加的事件處理程序。
error()觸發(fā)、或?qū)⒑瘮?shù)綁定到指定元素的 ? error 事件
event.isDefaultPrevented()返回 ? event 對(duì)象上是否調(diào)用了 event.preventDefault()。
event.pageX相對(duì)于文檔左邊緣的鼠標(biāo)位置。
event.pageY相對(duì)于文檔上邊緣的鼠標(biāo)位置。
event.preventDefault()阻止事件的默認(rèn)動(dòng)作。
event.result包含由被指定事件觸發(fā)的事件處理器返回的最后一個(gè)值。
event.target觸發(fā)該事件的 ? DOM 元素。
event.timeStamp該屬性返回從 ? 1970 年 1 月 1 日到事件發(fā)生時(shí)的毫秒數(shù)。
event.type描述事件的類型。
event.which指示按了哪個(gè)鍵或按鈕。
focus()觸發(fā)、或?qū)⒑瘮?shù)綁定到指定元素的 ? focus 事件
keydown()觸發(fā)、或?qū)⒑瘮?shù)綁定到指定元素的 ? key down 事件
keypress()觸發(fā)、或?qū)⒑瘮?shù)綁定到指定元素的 ? key press 事件
keyup()觸發(fā)、或?qū)⒑瘮?shù)綁定到指定元素的 ? key up 事件
live()為當(dāng)前或未來的匹配元素添加一個(gè)或多個(gè)事件處理器
load()觸發(fā)、或?qū)⒑瘮?shù)綁定到指定元素的 ? load 事件
mousedown()觸發(fā)、或?qū)⒑瘮?shù)綁定到指定元素的 ? mouse down 事件
mouseenter()觸發(fā)、或?qū)⒑瘮?shù)綁定到指定元素的 ? mouse enter 事件
mouseleave()觸發(fā)、或?qū)⒑瘮?shù)綁定到指定元素的 ? mouse leave 事件
mousemove()觸發(fā)、或?qū)⒑瘮?shù)綁定到指定元素的 ? mouse move 事件
mouseout()觸發(fā)、或?qū)⒑瘮?shù)綁定到指定元素的 ? mouse out 事件
mouseover()觸發(fā)、或?qū)⒑瘮?shù)綁定到指定元素的 ? mouse over 事件
mouseup()觸發(fā)、或?qū)⒑瘮?shù)綁定到指定元素的 ? mouse up 事件
one()向匹配元素添加事件處理器。每個(gè)元素只能觸發(fā)一次該處理器。
ready()文檔就緒事件(當(dāng) ? HTML 文檔就緒可用時(shí))
resize()觸發(fā)、或?qū)⒑瘮?shù)綁定到指定元素的 ? resize 事件
scroll()觸發(fā)、或?qū)⒑瘮?shù)綁定到指定元素的 ? scroll 事件
select()觸發(fā)、或?qū)⒑瘮?shù)綁定到指定元素的 ? select 事件
submit()觸發(fā)、或?qū)⒑瘮?shù)綁定到指定元素的 ? submit 事件
toggle()綁定兩個(gè)或多個(gè)事件處理器函數(shù),當(dāng)發(fā)生輪流的 ? click 事件時(shí)執(zhí)行。
trigger()所有匹配元素的指定事件
triggerHandler()第一個(gè)被匹配元素的指定事件
unbind()從匹配元素移除一個(gè)被添加的事件處理器
undelegate()從匹配元素移除一個(gè)被添加的事件處理器,現(xiàn)在或?qū)?/td>
unload()觸發(fā)、或?qū)⒑瘮?shù)綁定到指定元素的 ? unload 事件

三、文檔操作方法:

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

四、屬性操作:

屬于文檔操作,但是下面這些方法對(duì)于 XML 文檔和 HTML 文檔均是適用的,除了:html()。

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

五、CSS 操作函數(shù)

CSS 屬性描述
css()

設(shè)置或返回匹配元素的樣式屬性。.css('屬性','值'),屬性就是CSS去掉-,-后字母大寫

或者傳字典:css({'CSS屬性':'值', 'CSS屬性':'值','CSS屬性':'值'})

height()設(shè)置或返回匹配元素的高度。
offset()返回第一個(gè)匹配元素相對(duì)于文檔的位置。
offsetParent()返回最近的定位祖先元素。
position()返回第一個(gè)匹配元素相對(duì)于父元素的位置。
scrollLeft()設(shè)置或返回匹配元素相對(duì)滾動(dòng)條左側(cè)的偏移。
scrollTop()設(shè)置或返回匹配元素相對(duì)滾動(dòng)條頂部的偏移。
width()設(shè)置或返回匹配元素的寬度。

六、jQuery 遍歷函數(shù)

函數(shù)描述
.add()將元素添加到匹配元素的集合中。
.andSelf()把堆棧中之前的元素集添加到當(dāng)前集合中。
.children()獲得匹配元素集合中每個(gè)元素的所有子元素。
.closest()從元素本身開始,逐級(jí)向上級(jí)元素匹配,并返回最先匹配的祖先元素。
.contents()獲得匹配元素集合中每個(gè)元素的子元素,包括文本和注釋節(jié)點(diǎn)。
.each()對(duì) ? jQuery 對(duì)象進(jìn)行迭代,為每個(gè)匹配元素執(zhí)行函數(shù)。
.end()結(jié)束當(dāng)前鏈中最近的一次篩選操作,并將匹配元素集合返回到前一次的狀態(tài)。
.eq()將匹配元素集合縮減為位于指定索引的新元素。
.filter()將匹配元素集合縮減為匹配選擇器或匹配函數(shù)返回值的新元素。
.find()獲得當(dāng)前匹配元素集合中每個(gè)元素的后代,由選擇器進(jìn)行篩選。
.first()將匹配元素集合縮減為集合中的第一個(gè)元素。
.has()將匹配元素集合縮減為包含特定元素的后代的集合。
.is()根據(jù)選擇器檢查當(dāng)前匹配元素集合,如果存在至少一個(gè)匹配元素,則返回 ? true。
.last()將匹配元素集合縮減為集合中的最后一個(gè)元素。
.map()把當(dāng)前匹配集合中的每個(gè)元素傳遞給函數(shù),產(chǎn)生包含返回值的新 ? jQuery 對(duì)象。
.next()獲得匹配元素集合中每個(gè)元素緊鄰的同輩元素。
.nextAll()獲得匹配元素集合中每個(gè)元素之后的所有同輩元素,由選擇器進(jìn)行篩選(可選)。
.nextUntil()獲得每個(gè)元素之后所有的同輩元素,直到遇到匹配選擇器的元素為止。
.not()從匹配元素集合中刪除元素。
.offsetParent()獲得用于定位的第一個(gè)父元素。
.parent()獲得當(dāng)前匹配元素集合中每個(gè)元素的父元素,由選擇器篩選(可選)。
.parents()獲得當(dāng)前匹配元素集合中每個(gè)元素的祖先元素,由選擇器篩選(可選)。
.parentsUntil()獲得當(dāng)前匹配元素集合中每個(gè)元素的祖先元素,直到遇到匹配選擇器的元素為止。
.prev()獲得匹配元素集合中每個(gè)元素緊鄰的前一個(gè)同輩元素,由選擇器篩選(可選)。
.prevAll()獲得匹配元素集合中每個(gè)元素之前的所有同輩元素,由選擇器進(jìn)行篩選(可選)。
.prevUntil()獲得每個(gè)元素之前所有的同輩元素,直到遇到匹配選擇器的元素為止。
.siblings()獲得匹配元素集合中所有元素的同輩元素,由選擇器篩選(可選)。
.slice()將匹配元素集合縮減為指定范圍的子集。

六、jQuery 數(shù)據(jù)操作函數(shù)

函數(shù)描述
.clearQueue()從隊(duì)列中刪除所有未運(yùn)行的項(xiàng)目。
.data()存儲(chǔ)與匹配元素相關(guān)的任意數(shù)據(jù)。
jQuery.data()存儲(chǔ)與指定元素相關(guān)的任意數(shù)據(jù)。
.dequeue()從隊(duì)列最前端移除一個(gè)隊(duì)列函數(shù),并執(zhí)行它。
jQuery.dequeue()從隊(duì)列最前端移除一個(gè)隊(duì)列函數(shù),并執(zhí)行它。
jQuery.hasData()存儲(chǔ)與匹配元素相關(guān)的任意數(shù)據(jù)。
.queue()顯示或操作匹配元素所執(zhí)行函數(shù)的隊(duì)列。
jQuery.queue()顯示或操作匹配元素所執(zhí)行函數(shù)的隊(duì)列。
.removeData()移除之前存放的數(shù)據(jù)。
jQuery.removeData()移除之前存放的數(shù)據(jù)。

七、jQuery DOM 元素方法

函數(shù)描述
.get()獲得由選擇器指定的 ? DOM 元素。
.index()返回指定元素相對(duì)于其他指定元素的 ? index 位置。
.size()返回被 ? jQuery 選擇器匹配的元素的數(shù)量。
.toArray()以數(shù)組的形式返回 ? jQuery 選擇器匹配的元素。

八、jQuery 核心函數(shù)

函數(shù)描述
jQuery()接受一個(gè)字符串,其中包含了用于匹配元素集合的 ? CSS 選擇器。
jQuery.noConflict()運(yùn)行這個(gè)函數(shù)將變量 $ 的控制權(quán)讓渡給第一個(gè)實(shí)現(xiàn)它的那個(gè)庫。

九、JQuery屬性

屬性描述
context在版本 1.10 ? 中被棄用。包含傳遞給 jQuery() 的原始上下文。
jquery包含 ? jQuery 版本號(hào)。
jQuery.fx.interval改變以毫秒計(jì)的動(dòng)畫速率。
jQuery.fx.off全局禁用/啟用所有動(dòng)畫。
jQuery.support表示不同瀏覽器特性或漏洞的屬性集合(用于 ? jQuery 內(nèi)部使用)。
length包含 ? jQuery 對(duì)象中的元素?cái)?shù)目。

十、效果函數(shù)

方法描述
animate()對(duì)被選元素應(yīng)用“自定義”的動(dòng)畫
clearQueue()對(duì)被選元素移除所有排隊(duì)的函數(shù)(仍未運(yùn)行的)
delay()對(duì)被選元素的所有排隊(duì)函數(shù)(仍未運(yùn)行)設(shè)置延遲
dequeue()運(yùn)行被選元素的下一個(gè)排隊(duì)函數(shù)
fadeIn()逐漸改變被選元素的不透明度,從隱藏到可見
fadeOut()逐漸改變被選元素的不透明度,從可見到隱藏
fadeTo()把被選元素逐漸改變至給定的不透明度
hide()隱藏被選的元素
queue()顯示被選元素的排隊(duì)函數(shù)
show()顯示被選的元素
slideDown()通過調(diào)整高度來滑動(dòng)顯示被選元素
slideToggle()對(duì)被選元素進(jìn)行滑動(dòng)隱藏和滑動(dòng)顯示的切換
slideUp()通過調(diào)整高度來滑動(dòng)隱藏被選元素
stop()停止在被選元素上運(yùn)行動(dòng)畫
toggle()對(duì)被選元素進(jìn)行隱藏和顯示的切換

十、jQuery Ajax 操作函數(shù)

函數(shù)描述
jQuery.ajax()執(zhí)行異步 HTTP ? (Ajax) 請(qǐng)求。
.ajaxComplete()當(dāng) ? Ajax 請(qǐng)求完成時(shí)注冊(cè)要調(diào)用的處理程序。這是一個(gè) Ajax 事件。
.ajaxError()當(dāng) ? Ajax 請(qǐng)求完成且出現(xiàn)錯(cuò)誤時(shí)注冊(cè)要調(diào)用的處理程序。這是一個(gè) Ajax 事件。
.ajaxSend()在 ? Ajax 請(qǐng)求發(fā)送之前顯示一條消息。
jQuery.ajaxSetup()設(shè)置將來的 ? Ajax 請(qǐng)求的默認(rèn)值。
.ajaxStart()當(dāng)首個(gè) ? Ajax 請(qǐng)求完成開始時(shí)注冊(cè)要調(diào)用的處理程序。這是一個(gè) Ajax 事件。
.ajaxStop()當(dāng)所有 ? Ajax 請(qǐng)求完成時(shí)注冊(cè)要調(diào)用的處理程序。這是一個(gè) Ajax 事件。
.ajaxSuccess()當(dāng) ? Ajax 請(qǐng)求成功完成時(shí)顯示一條消息。
jQuery.get()使用 ? HTTP GET 請(qǐng)求從服務(wù)器加載數(shù)據(jù)。
jQuery.getJSON()使用 ? HTTP GET 請(qǐng)求從服務(wù)器加載 JSON 編碼數(shù)據(jù)。
jQuery.getScript()使用 ? HTTP GET 請(qǐng)求從服務(wù)器加載 JavaScript 文件,然后執(zhí)行該文件。
.load()從服務(wù)器加載數(shù)據(jù),然后把返回到 ? HTML 放入匹配元素。
jQuery.param()創(chuàng)建數(shù)組或?qū)ο蟮男蛄谢硎荆m合在 ? URL 查詢字符串或 Ajax 請(qǐng)求中使用。
jQuery.post()使用 ? HTTP POST 請(qǐng)求從服務(wù)器加載數(shù)據(jù)。
.serialize()將表單內(nèi)容序列化為字符串。
.serializeArray()序列化表單元素,返回 ? JSON 數(shù)據(jù)結(jié)構(gòu)數(shù)據(jù)。

實(shí)例:

1、每次點(diǎn)擊增加DIV寬度

<script?type="text/javascript"?src="/jquery/jquery.js"></script> <script?type="text/javascript"> $(document).ready(function(){ ??$("div").click(function()?{ ????$(this).css( ??????"width",?function(index,?value)?{return?parseFloat(value)?*?1.2;} ????); ??}); }); </script> <style> div?{width:100px;?height:50px;?background-color:red;} </style> </head> <body> <div>請(qǐng)點(diǎn)擊這里</div> </body>

另外有需要云服務(wù)器可以了解下創(chuàng)新互聯(lián)cdcxhl.cn,海內(nèi)外云服務(wù)器15元起步,三天無理由+7*72小時(shí)售后在線,公司持有idc許可證,提供“云服務(wù)器、裸金屬服務(wù)器、高防服務(wù)器、香港服務(wù)器、美國服務(wù)器、虛擬主機(jī)、免備案服務(wù)器”等云主機(jī)租用服務(wù)以及企業(yè)上云的綜合解決方案,具有“安全穩(wěn)定、簡單易用、服務(wù)可用性高、性價(jià)比高”等特點(diǎn)與優(yōu)勢(shì),專為企業(yè)上云打造定制,能夠滿足用戶豐富、多元化的應(yīng)用場(chǎng)景需求。

網(wǎng)站題目:JQuery概述、屬性、方法集-創(chuàng)新互聯(lián)
網(wǎng)站URL:http://muchs.cn/article30/cdgopo.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián),為您提供App設(shè)計(jì)、網(wǎng)站內(nèi)鏈、Google、網(wǎng)站建設(shè)、用戶體驗(yàn)、網(wǎng)站改版

廣告

聲明:本網(wǎng)站發(fā)布的內(nèi)容(圖片、視頻和文字)以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主,如果涉及侵權(quán)請(qǐng)盡快告知,我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如需處理請(qǐng)聯(lián)系客服。電話:028-86922220;郵箱:631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載,或轉(zhuǎn)載時(shí)需注明來源: 創(chuàng)新互聯(lián)

商城網(wǎng)站建設(shè)