前端编程之jQuery
什么是jQuery
- jQuery 是一個(gè) JavaScript 庫(kù)。
- jQuery 極大地簡(jiǎn)化了 JavaScript 編程，宗旨“Write less, do more.“
jQuery對(duì)象
jQuery對(duì)象就是通過(guò)jQuery包裝DOM對(duì)象后產(chǎn)生的對(duì)象。jQuery對(duì)象是 jQuery獨(dú)有的。如果一個(gè)對(duì)象是 jQuery對(duì)象，那么它就可以使用jQuery里的方法。
我們約定在聲明一個(gè)jQuery對(duì)象變量的時(shí)候在變量名前面加上$：
var $variable = jQuery對(duì)像
var variable = DOM對(duì)象（js原生對(duì)象）
jQuery對(duì)像與js原生對(duì)象的互相轉(zhuǎn)換：
- jQuery對(duì)像轉(zhuǎn)化成js原生對(duì)象 ?? jQuery對(duì)像[0]
- js原生對(duì)象轉(zhuǎn)化成jQuery對(duì)像 ?? $(js原生對(duì)象
注：$相當(dāng)于jQuery的簡(jiǎn)寫(xiě)
?
?
jQuery 基礎(chǔ)語(yǔ)法
(selector).action()
通過(guò) jQuery，可以選取（查詢，query） HTML 元素，并對(duì)它們執(zhí)行"操作"（actions）
jQuery 選擇器
基本選擇器
?
- id選擇器： ? $("#id")
- 標(biāo)簽選擇器： $("tagName")
- class選擇器： ?$(".className")
- 所有元素選擇器： $("*")
?
基本選擇器之間可以配合與組合使用
例：$("div.c1") ;? 選取有c1 class類的div元素
$("div span"); 選取div下的所有span元素
基本篩選器
:first // 第一個(gè)
:last // 最后一個(gè)
:eq(index) ? // 索引等于index的那個(gè)元素
:even // 匹配所有索引值為偶數(shù)的元素，從 0 開(kāi)始計(jì)數(shù)
:odd ? ? // 匹配所有索引值為奇數(shù)的元素，從 0 開(kāi)始計(jì)數(shù)
:gt(index) ? // 匹配所有大于給定索引值的元素
:lt(index) // 匹配所有小于給定索引值的元素
:not(元素選擇器)? // 移除所有滿足not條件的標(biāo)簽
:has(元素選擇器) // 選取所有包含一個(gè)或多個(gè)標(biāo)簽在其內(nèi)的標(biāo)簽(指的是從后代元素找)
例：
?
?屬性選擇器
[attribute]
[attribute=value]// 屬性等于
[attribute!=value]// 屬性不等于
例：
$("a[target='_blank']") ?? ?選取所有 target 屬性值等于 "_blank" 的 <a> 元素 ?? ?
$("a[target!='_blank']") ?? ?選取所有 target 屬性值不等于 "_blank" 的 <a> 元素
?表單篩選器
顧名思義，作用于表單的篩選器，只對(duì)input，select，textarea有效
?
?
篩選器方法
下一個(gè)元素：
$("#id").next()
$("#id").nextAll()
$("#id").nextUntil("#i2")
上一個(gè)元素：
$("#id").prev()
$("#id").prevAll()
$("#id").prevUntil("#i2")
?
父親元素：
$("#id").parent()
$("#id").parents()? // 查找當(dāng)前元素的所有的父輩元素
$("#id").parentsUntil() // 查找當(dāng)前元素的所有的父輩元素，直到遇到匹配的那個(gè)元素為止。
?
兒子和兄弟元素：
$("#id").children();// 兒子們
$("#id").siblings();// 兄弟們
jQuery支持鏈?zhǔn)讲僮?/h2>
?
操作標(biāo)簽
?
樣式操作
addClass(); ?// 添加指定的CSS類名。
removeClass(); ?? // 移除指定的CSS類名。
hasClass(); ?// 判斷樣式存不存在
toggleClass(); // 切換CSS類名，如果有就移除，如果沒(méi)有就添加。
?
位置操作
offset() // 獲取匹配元素在當(dāng)前窗口的相對(duì)偏移或設(shè)置元素位置
position() ?// 獲取匹配元素相對(duì)父元素的偏移
scrollTop() // 獲取匹配元素相對(duì)滾動(dòng)條頂部的偏移
scrollLeft() // 獲取匹配元素相對(duì)滾動(dòng)條左側(cè)的偏移
?
尺寸操作
height()
width()
innerHeight()
innerWidth()
outerHeight()
outerWidth()
文本操作
html() // 取得第一個(gè)匹配元素的html內(nèi)容
html(val) ?// 設(shè)置所有匹配元素的html內(nèi)容
text() // 取得所有匹配元素的內(nèi)容
text(val) // 設(shè)置所有匹配元素的內(nèi)容
val() // 取得第一個(gè)匹配元素的當(dāng)前值
val(val) // 設(shè)置所有匹配元素的值
val([val1, val2]) // 設(shè)置多選的checkbox、多選select的值
?
?
屬性操作
用于ID等或自定義屬性：
attr(attrName) // 返回第一個(gè)匹配元素的屬性值
attr(attrName, attrValue) // 為所有匹配元素設(shè)置一個(gè)屬性值
attr({k1: v1, k2:v2} // 為所有匹配元素設(shè)置多個(gè)屬性值
removeAttr() ?// 從每一個(gè)匹配的元素中刪除一個(gè)屬性
用于checkbox和radio
prop() // 獲取屬性
removeProp() // 移除屬性
?
文檔處理
$(A).append(B) // 把B追加到A
$(A).appendTo(B) ? // 把A追加到B
$(A).prepend(B) // 把B前置到A
$(A).prependTo(B) ?// 把A前置到B
$(A).after(B) ? ? // 把B放到A的后面
$(A).insertAfter(B) ? // 把A放到B的后面
$(A).before(B) ? // 把B放到A的前面
$(A).insertBefore(B) // 把A放到B
remove() // 從DOM中刪除所有匹配的元素。
empty() ? // 刪除匹配的元素集合中所有的子節(jié)點(diǎn)。
?
?替換
replaceWith()
replaceAll()
?
?克隆
clone（）
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Title</title><script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script><style>button{background-color: red;}</style> </head> <body> <button>人類的本質(zhì)就是復(fù)讀機(jī)</button><script>// $('button').click(function () {//// })$('button').on('click',function () {$(this).clone(true).insertBefore(this)}) </script> </body> </html>clon()不加參數(shù)時(shí)，只復(fù)制標(biāo)簽，不復(fù)制事件，要想復(fù)制事件，就要賦值true
this相當(dāng)于python里面的self，它指代前面查到的元素，這個(gè)示例里指button
?
?事件
懸浮事件
hover(function(){...})
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Title</title><script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script> </head> <body> <p>來(lái)玩啊,老弟!</p><script>$('p').hover(function () {alert('我跳出來(lái)了')},function () {alert("沒(méi)想到吧，我又跳出來(lái)了")}) </script> </body> </html>input框?qū)崟r(shí)獲取用戶輸入
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Title</title><script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script> </head> <body> <input type="text"><script>$('input').on('input',function () {console.log(this.value)}) </script> </body> </html>?
事件冒泡
事件冒泡就是當(dāng)父元素和子元素存在同一事件時(shí)在子元素的事件處理程序中會(huì)自動(dòng)調(diào)用其父級(jí)元素的事件處理程序。
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Title</title><script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script> </head> <body> <div>div<p>div>p<span>div>p>span</span></p> </div> <script>$('div').click(function () {alert('div')});$('p').click(function (a) {alert('p');a.stopPropagation()});$('span').click(function (e) {alert('span');}); </script> </body> </html>?
?
事件委托
事件委托就是利用事件冒泡的原理，把事件加到父級(jí)上，通過(guò)判斷事件來(lái)源的子集，執(zhí)行相應(yīng)的操作。事件委托首先可以極大的減少事件綁定次數(shù)，其次也可以讓新加入的子集元素也擁有相同的操作
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Title</title><script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script> </head> <body> <button>千萬(wàn)別點(diǎn)我</button><script>// $('button').click(function () {// alert(123)// })// 事件委托$('body').on('click','button',function () {alert(123)})</script> </body> </html>?事件的兩種寫(xiě)法
1. $('button').click(function () {
??? alert(123)
?})
2. $('body').on('click','button',function () {
??????? alert(123)
? })
第一種方法有時(shí)候會(huì)出現(xiàn)無(wú)效的情況，所以統(tǒng)一用第二種方法
?
each循環(huán)
.each(function(index, Element))：
描述：遍歷一個(gè)jQuery對(duì)象，為每個(gè)匹配元素執(zhí)行一個(gè)函數(shù)。
.each() 方法用來(lái)迭代jQuery對(duì)象中的每一個(gè)DOM元素。每次回調(diào)函數(shù)執(zhí)行時(shí)，會(huì)傳遞當(dāng)前循環(huán)次數(shù)作為參數(shù)(從0開(kāi)始計(jì)數(shù))。由于回調(diào)函數(shù)是在當(dāng)前DOM元素為上下文的語(yǔ)境中觸發(fā)的，所以關(guān)鍵字 this 總是指向這個(gè)元素。
?
?
轉(zhuǎn)載于:https://www.cnblogs.com/tuanzibuku/p/10976384.html
超強(qiáng)干貨來(lái)襲 云風(fēng)專訪：近40年碼齡，通宵達(dá)旦的技術(shù)人生總結(jié)
以上是生活随笔為你收集整理的前端编程之jQuery的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。
- 上一篇： 雷林鹏分享：PHP 字符串变量
- 下一篇： Python 前端框架【Bootstra