當前位置：首頁 > 前端技术 > HTML >内容正文

HTML

前端编程之jQuery

發布時間：2024/4/14 HTML 33 豆豆

生活随笔收集整理的這篇文章主要介紹了前端编程之jQuery 小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

什么是jQuery

jQuery 是一個 JavaScript 庫。
jQuery 極大地簡化了 JavaScript 編程，宗旨“Write less, do more.“

jQuery對象

jQuery對象就是通過jQuery包裝DOM對象后產生的對象。jQuery對象是 jQuery獨有的。如果一個對象是 jQuery對象，那么它就可以使用jQuery里的方法。

我們約定在聲明一個jQuery對象變量的時候在變量名前面加上$：
var $variable = jQuery對像
var variable = DOM對象（js原生對象）

jQuery對像與js原生對象的互相轉換：

jQuery對像轉化成js原生對象 ?? jQuery對像[0]
js原生對象轉化成jQuery對像 ?? $(js原生對象

注：$相當于jQuery的簡寫

jQuery 基礎語法

(selector).action()

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

jQuery 選擇器

基本選擇器

id選擇器：　　　　　　 ? $("#id")
標簽選擇器：　　　　　　 $("tagName")
class選擇器：　　　　　 ?$(".className")
所有元素選擇器：　　　　 $("*")

基本選擇器之間可以配合與組合使用

例：$("div.c1") ;? 選取有c1 class類的div元素

　　$("div span"); 選取div下的所有span元素

基本篩選器

:first 　　　　　　// 第一個
:last 　　　　　　// 最后一個
:eq(index)　　　? // 索引等于index的那個元素
:even 　　　　　 // 匹配所有索引值為偶數的元素，從 0 開始計數
:odd 　　　　 ? ? // 匹配所有索引值為奇數的元素，從 0 開始計數
:gt(index)　　　? // 匹配所有大于給定索引值的元素
:lt(index)　　　　// 匹配所有小于給定索引值的元素
:not(元素選擇器)? // 移除所有滿足not條件的標簽
:has(元素選擇器) // 選取所有包含一個或多個標簽在其內的標簽(指的是從后代元素找)

例：

?

?屬性選擇器

[attribute]
[attribute=value]// 屬性等于
[attribute!=value]// 屬性不等于

例：

$("a[target='_blank']") ?? ?選取所有 target 屬性值等于 "_blank" 的 <a> 元素 ?? ?
$("a[target!='_blank']") ?? ?選取所有 target 屬性值不等于 "_blank" 的 <a> 元素

?表單篩選器

顧名思義，作用于表單的篩選器，只對input，select，textarea有效

篩選器方法

下一個元素：

$("#id").next()
$("#id").nextAll()
$("#id").nextUntil("#i2")

上一個元素：

$("#id").prev()
$("#id").prevAll()
$("#id").prevUntil("#i2")

父親元素：

$("#id").parent()
$("#id").parents()? // 查找當前元素的所有的父輩元素
$("#id").parentsUntil() // 查找當前元素的所有的父輩元素，直到遇到匹配的那個元素為止。

兒子和兄弟元素：

$("#id").children();// 兒子們
$("#id").siblings();// 兄弟們

jQuery支持鏈式操作

操作標簽

樣式操作

addClass();　　　　 ?// 添加指定的CSS類名。
removeClass();　　?? // 移除指定的CSS類名。
hasClass();　　　　 ?// 判斷樣式存不存在
toggleClass();　　　　// 切換CSS類名，如果有就移除，如果沒有就添加。

位置操作

offset()　　　　　　// 獲取匹配元素在當前窗口的相對偏移或設置元素位置
position()　　　　 ?// 獲取匹配元素相對父元素的偏移
scrollTop()　　　　 // 獲取匹配元素相對滾動條頂部的偏移
scrollLeft()　　　　// 獲取匹配元素相對滾動條左側的偏移

尺寸操作

height()
width()
innerHeight()
innerWidth()
outerHeight()
outerWidth()

文本操作

html()　　　　　　　　// 取得第一個匹配元素的html內容
html(val)　　　　　　 ?// 設置所有匹配元素的html內容
text()　　　　　　　　// 取得所有匹配元素的內容
text(val)　　　　　　　// 設置所有匹配元素的內容
val()　　　　　　　　　// 取得第一個匹配元素的當前值
val(val)　　　　　　　　// 設置所有匹配元素的值
val([val1, val2])　　　　 // 設置多選的checkbox、多選select的值

屬性操作

用于ID等或自定義屬性：

attr(attrName)　　　　　　　　// 返回第一個匹配元素的屬性值
attr(attrName, attrValue)　　　 // 為所有匹配元素設置一個屬性值
attr({k1: v1, k2:v2}　　　　　　// 為所有匹配元素設置多個屬性值
removeAttr()　　　　　　　　 ?// 從每一個匹配的元素中刪除一個屬性

用于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()　　　　　　　　　? // 刪除匹配的元素集合中所有的子節點。

?替換

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>人類的本質就是復讀機</button><script>// $('button').click(function () {//// })$('button').on('click',function () {$(this).clone(true).insertBefore(this)}) </script> </body> </html>

clon()不加參數時，只復制標簽，不復制事件，要想復制事件，就要賦值true

this相當于python里面的self，它指代前面查到的元素，這個示例里指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>來玩啊,老弟!</p><script>$('p').hover(function () {alert('我跳出來了')},function () {alert("沒想到吧，我又跳出來了")}) </script> </body> </html>

input框實時獲取用戶輸入

事件冒泡

事件冒泡就是當父元素和子元素存在同一事件時在子元素的事件處理程序中會自動調用其父級元素的事件處理程序。

<!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>

事件委托

事件委托就是利用事件冒泡的原理，把事件加到父級上，通過判斷事件來源的子集，執行相應的操作。事件委托首先可以極大的減少事件綁定次數，其次也可以讓新加入的子集元素也擁有相同的操作

<!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>千萬別點我</button><script>// $('button').click(function () {// alert(123)// })// 事件委托$('body').on('click','button',function () {alert(123)})</script> </body> </html>

?事件的兩種寫法

1.　　　$('button').click(function () {
??? 　　　　alert(123)
　　　　?})

2.　　　　$('body').on('click','button',function () {
??????? 　　alert(123)
?　　　　})

第一種方法有時候會出現無效的情況，所以統一用第二種方法

each循環

.each(function(index, Element))：
描述：遍歷一個jQuery對象，為每個匹配元素執行一個函數。
.each() 方法用來迭代jQuery對象中的每一個DOM元素。每次回調函數執行時，會傳遞當前循環次數作為參數(從0開始計數)。由于回調函數是在當前DOM元素為上下文的語境中觸發的，所以關鍵字 this 總是指向這個元素。

轉載于:https://www.cnblogs.com/tuanzibuku/p/10976384.html

超強干貨來襲云風專訪：近40年碼齡，通宵達旦的技術人生

總結

以上是生活随笔為你收集整理的前端编程之jQuery的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。

jquery

上一篇：雷林鹏分享：PHP 字符串变量
下一篇：记录一下pom文件scope各种配置所作