前端之jQuery
1. jQuery介紹
jQuery 是一個 JavaScript 庫。它封閉了原生的js程式碼，能夠在書寫更小的程式碼完成js操作。類似Python中的模組，但是在前端中叫類庫。
它相容多個瀏覽器。jQuery的宗旨:write less do more
1.1 jQuery版本
- 1.x：相容IE678,使用最為廣泛的，官方只做BUG維護，功能不再新增。因此一般專案來說，使用1.x版本就可以了，最終版本：1.12.4 (2016年5月20日)
- 2.x：不相容IE678，很少有人使用，官方只做BUG維護，功能不再新增。如果不考慮相容低版本的瀏覽器可以使用2.x，最終版本：2.2.4 (2016年5月20日)
- 3.x：不相容IE678，只支援最新的瀏覽器。需要注意的是很多老的jQuery外掛不支援3.x版。目前該版本是官方主要更新維護的版本。
jQuery版本選擇3.x的版本，下載時有裡有壓縮和不壓縮之分，在生產環境使用壓縮版本。
1.2 jQuery匯入
jQuery需要匯入才能使用
本地匯入:
<head>
<script src='jquery-3.6.0.min.js'></script>
</head>
網路匯入
免費jquery CDN網站:https://www.bootcdn.cn/jquery/
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
1.3 jQuery基本語法
jQuery(選擇器).action() 這麼寫比較複雜 jQuery可以簡寫為$
$(選擇器).action()
原生js程式碼和jQuery程式碼對比
// jS程式碼:
let pEle = document.getElementsByTagName('p')[0]
pEle.style.color='green'
// jQuery程式碼:
jQuery('p').css('color','blue')
1.4 jQuery中查詢標籤
1.4.1 基本選擇器
//html程式碼:
<head>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js">
</script>
</head>
<body>
<div id="d1"></div>
<p class="c1">春來江水綠如藍</p>
<span></span>
</body>
//jquery
ID選擇器
$('#d1')
類選擇器
$(".c1")
標籤選擇器
$('span')
//jquery取的值為jquery物件, 表現形式為陣列。
jQuery物件變成標籤物件:
$('#d1')[0] //因為為陣列可以切片取值
標籤物件轉jquery物件：
使用$()括號起來就行：
$(document.getElementById('d1'))
1.4.2 組合選擇器
//HTML程式碼
<body>
<div id="d1">div
<span>div-->span</span>
<p id="d2">div-->p
<span>div-->p-->span</span>
</p>
<span>div-->span</span>
</div>
<div class="c1"></div>
</body>
// jquery程式碼:
$('div#d1') // 找id為d1的div標籤
$('div.c1') // 找class為c1的div標籤
$('#d1,.c1,p') // 同一級別 id為d1的標籤,class為c1的標籤和p標籤
$('div span') //後代
$('div>span') //兒子
$('div+span') //毗鄰
$('div~span') //弟弟
這些選擇器和CSS的一模一樣。
1.4.3 基本篩選器
//HTML程式碼
<body>
<ul>
<li>100</li>
<li>101</li>
<li>102</li>
<li>103</li>
<li>104</li>
<li>105</li>
<li class="c1">106</li>
<li>107</li>
<li id="d1">108</li>
<li>109</li>
</ul>
</body>
//jquery:
$('ul li:first') //第一個元素標籤
$('ul li:last') //最後一個元素標籤
$('ul li:eq(2)') //索引值是2的標籤
$('ul li:even') //索引值是偶數的標籤(包含0)
$('ul li:odd') //索引值是奇數的標籤
$('ul li:gt(2)') //索引值大於2的標籤
$('ul li:lt(2)') //索引值小於2的標籤
$('ul li:not("#d1")') //取反，id不是d1的標籤
//HTML
<div>
<p>div--p</p>
</div>
<div>
div not p
</div>
//jquery:
$('div:has("p")') //div裡有p標籤的 has包含 有
1.4.4 屬性選擇器
//HTML
<body>
<input type="text" username="hello">
<input type="text" username="hi">
<p username="hello"></p>
</body>
//jQuery:
$('[username]') //有username的標籤
$('[username="hi"]') //有username並且等於hi的標籤
$('p[username="hello"]') //username等於hello的p標籤
1.4.5 表單篩選器
//HTML
<body>
<p>username<input type="text" ></p>
<p>password<input type="password" ></p>
<button>提交</button>
</body>
//jquery:
$('input[type="text"]') //input標籤裡型別是text的
$('input[type="password"]') //input標籤裡型別是password的
//上面的寫的法有點複雜在表單篩選器中，可以簡寫
$(':text')
$(':password')
//還有一些簡寫：
$(':file')
$(':radio')
$(':checkbox') //使用時它不僅會拿到checked也會把selected也能拿到，如果只想拿到checked則加一些條件限制一下$(input:checked)
$(':submit')
$(':reset')
$(':button')
上面的只可以在表單篩選器中使用
1.4.6 篩選器方法
<body>
<!--<p>username<input type="text" ></p>-->
<!--<p>password<input type="password" ></p>-->
<!--<button>提交</button>-->
<span id="d1">span</span>
<span>span</span>
<div id="d2">
<span>div-->span</span>
<p>div-->p
<span id="d3">div->p->span</span>
</p>
<span>div-->span</span>
</div>
<span>span</span>
<span>span</span>
<span class="c1">span</span>
</body>
// jQuery程式碼:
$('#d1').next() //同級別下一個
$('#d1').nextAll() //同級下面的全部
$('#d1').nextUntil('.c1') //下面到class為c1為止(不包含c1)
$('.c1').prev() //同級別上一個
$('.c1').prevAll() // 上面的全部
$('.c1').prevUntil('#d2') //上面到id 為d2的為止
$('#d3').parent() // 父標籤
$('#d3').parent().parent() // 父標籤的父標籤
$('#d3').parents() //全部父標籤(祖譜)
$('#d3').parentUntil('body') // 查詢父標籤到body為止
$('#d2').children() // 子標籤
$('#d2').siblings() // 全部同級別(上下都包含)標籤(兄弟標籤)
$('div').find('p') // find在某個區域內找P標籤和$('div p')一樣
$('div span').first() //div中第一個span標籤
$('div span').last() //div中最後一個span標籤
$('div span').not('#d3') // /div中全部不包含id為d3的span標籤
1.5 操作標籤
操作類
| js版本 | jQuery版本 | 含義 |
|---|---|---|
| classList.add() | addClass() | 增加 |
| classList.remove() | removeClass() | 刪除類 |
| classList.contains() | hasClass() | 是否包含 |
| classList.toggle() | toggleClass() | 有刪除，沒有就新增 |
jQuery的鏈式操作
<body>
<p>AAA</p>
<p>BBB</p>
</body>
//一行程式碼把AAA變成紅色，BBB變成藍色
$('p').first().css('color','red').next().css('color','blue')
jQuery操作css樣式： .css()
jQuery操作jQuery物件返回的還是jQuery物件那麼還可以繼續操作
獲取當前標籤的位置
$('p').offset() //獲取標籤在視窗中的偏移量
$('p').position() //獲取標籤針對父標籤的偏移量
$(windows).scrolltop() //獲取垂直滾動條位置
$(windows).scrolltop(500) //
尺寸
$('p').height() //文字的高度
$('p').width() //文字的寬度
$('p').innerHeight() // 文字+padding
$('p').innerWidth()
$('p').outerHeight() //文字+padding+border
$('p').outerWidth() //
文字操作
| js版本 | jQuery版本 | 含義 |
|---|---|---|
| innnerText() | text() | 獲取文字(不載入樣式)，如果括號裡面有值則為設定 |
| innerHtml() | html() | 獲取文字(載入樣式)，如果括號裡面有值則為設定 |
| .value | .val() | 獲取值，如果括號裡有值則設定 |
示例:
//HTML
<body>
<p>AAA</p>
</body>
$('p').text() //獲取文字
$('p').text("HHHH") //設定文字
$('p').text("<h1>AAAA</h1>") //原樣輸出
$('p').html()//獲取文字
$('p').html("<h1>AAAA</h1>") //設定本(有樣式)
// 獲取輸入值：
<body>
<input type="text" id="d1">
</body>
$('#d1').val()
"asdf"
// 獲取上傳的檔案：
<body>
<input type="file" id="d1">
</body>
$('#d1')[0].files[0]
屬性操作
| js版本 | jQuery版本 | 含義 |
|---|---|---|
| setAttribute() | attr(name,value) | 設定屬性 |
| getAttribute() | attr(name) | 獲取屬性 |
| removeAttribute() | removeAttr(name) | 刪除屬性 |
let $pEle=$('p')
$pEle.attr('id') //獲取id的屬性
"d1"
$pEle.attr('class') //獲取class的屬性
$pEle.attr('class' ,'c1') //設定class的屬性
$pEle.removeAttr('class') //刪除class的屬性
/*
對於標籤上有的能夠看到的屬性和自定義屬性用attr
對於返回布林值的如:checkbox radio option是否被選中的用prop
*/
$('#d2').prop('checked') //獲取
$('#d2').prop('checked',true) //選中
$('#d2').prop('checked',false) // 取消選中
文件處理
createElement() $('<p>')
appendChild() append()
//HTML:
<div id="d2">
<span>div-->span</span>
<p>div-->p
<span id="d3">div->p->span</span>
</p>
<span>div-->span</span>
</div>
//jquery程式碼:
let $pEle=$('<p>') //新建立一個p標籤
$pEle.text("Hello World") //給這個P標籤加文字
$pEle.attr('id','i1') //給這個P標籤設定id為i1
$('#d2').append($pEle) //在id為d2的標籤最後面加上這個p標籤
$pEle.appendTo($('#d1')) //這個和上面的命令作用一樣，把這個p標籤加到id為d2的標籤裡面
$('#d2').prepend($pEle) //在頭部追加
$pEle.prependTo($('#d1'))
$('#d3').after($pEle) //在某個標籤的後面
$pEle.afterTo($('#d3'))
$('#d3').before($pEle) //在某個標籤的前面
$pEle.beforeTo($('#d3'))
$('#d2').remove() //從DOM樹中刪除標籤(包含裡面的全部標籤)
$('#d2').remove() //清空標籤內部所有的內容
2. jQuery 事件
2.1 繫結事件
<body>
<button id="d1">Hello</button>
<button id="d2">Hi</button>
<script>
//第一種繫結方法
$('#d1').click(function (){
alert("Hello World")
})
// 第二種繫結方法
$('#d2').on('click', function (){
alert("Hi World")
})
</script>
</body>
// 第二種繫結方法更強大，它還支援事件委託
2.2 克隆事件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<style>
#d1 {
height: 100px;
width: 100px;
background-color: lightblue;
border:1px solid red;
}
</style>
</head>
<body>
<button id='d1'>一入江湖歲月枯</button>
<script>
$('#d1').on('click',function (){
$(this).clone().insertAfter($('body'))
//把操作的這個物件插入到body的後面
})
</script>
</body>
</html>
// this 指代的是當前被操作的標籤物件
// clone 預設情況下只克隆html和css樣式，不克隆事件。
// 就是克隆出來的物件點選時它是無法建立物件的。
// 如果要把事件也克隆出來則需要給clone()轉個true引數
<script>
$('#d1').on('click',function (){
$(this).clone(true).insertAfter($('body'))
})
</script>
//加上後克隆出來的物件點選時它就可以建立物件了。
2.３ 自定義模態框
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<style>
body {
margin: 0;
}
.cover {
position: fixed;
left: 0;
right: 0;
top: 0;
bottom: 0;
background-color: rgba(0,0,0,0.5);
z-index: 99;
}
.modal{
background-color: white;
height: 200px;
width: 400px;
position: fixed;
left: 50%;
top: 50%;
z-index: 100;
margin-left: -200px;
margin-top: -100px;
padding-left: 10px;
z-index: 100;
}
.hide {
display: none;
}
</style>
</head>
<body>
<div id="d1">
最底層
</div>
<button id="d2">彈出視窗</button>
<div id="d3" class="cover hide"></div>
<div id="d4" class="modal hide">
<p>username:<input type="text"></p>
<p>password:<input type="password"></p>
<input type="button" value="確認">
<input type="button" value="取消" id="d5">
</div>
<script>
let $coverEle=$('.cover')
let $modalEle=$('.modal')
$('#d2').click(function (){
$coverEle.removeClass('hide')
$modalEle.removeClass('hide')
})
$('#d5').on('click', function (){
$coverEle.addClass('hide')
$modalEle.addClass('hide')
})
</script>
</body>
</html>
2.4 左側選單欄
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>-
<style>
.left {
float: left;
background-color: darkgray;
width: 20%;
height: 100%;
position: fixed;
}
.title{
font-size: 36px;
color: white;
text-align: center;
}
.items{
border: 1px solid black;
}
.hide{
display: none;
}
</style>
</head>
<body>
<div class="left">
<div class="menu">
<div class="title"> 選單一
<div class="items">111</div>
<div class="items">222</div>
<div class="items">333</div>
</div>
<div class="title"> 選單二
<div class="items">111</div>
<div class="items">222</div>
<div class="items">333</div>
</div>
<div class="title"> 選單三
<div class="items">111</div>
<div class="items">222</div>
<div class="items">333</div>
</div>
</div>
</div>
<script>
$('.title').click(function (){
//給所有的items加hide
$('.items').addClass('hide')
//將被 點選標籤內部的hide移除
$(this).children().removeClass('hide')
})
</script>
</body>
</html>
2.5 返回頂部
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<style>
.hide {
/*border: 3px black solid;*/
/*background-color: orange;*/
/*position: relative;*/
display: none;
}
#d1 {
background-color: orange;
position: fixed;
border: 3px black solid;
right: 20px;
bottom: 20px;
height: 50px;
width: 50px;
}
</style>
</head>
<body>
<a href="", id="d1"></a>
<div style="height: 500px;background-color:lightblue"></div>
<div style="height: 500px;background-color:lightgreen"></div>
<div style="height: 500px;background-color:blue"></div>
<a href="#d1" class="hide">回到頂部</a>
<script>
$(window).scroll(function (){
if($(window).scrollTop()>100){
$('#d1').removeClass('hide')
}else {
$('#d1').addClass('hide')
}
})
</script>
</body>
</html>
2.6 自定義登入檢驗
//如果使用者名稱或密碼沒有輸入則提示
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
</head>
<body>
<p>username:
<input type="text" id="username">
<span style="color: red"></span>
</p>
<p>password:
<input type="password" id="password">
<span style="color: red"></span>
</p>
<button id="d1">提交</button>
<script>
let $userName=$('#username')
let $passWord=$('#password')
$('#d1').click(function (){
let userName = $userName.val()
let passWord = $passWord.val()
if(!userName){
$userName.next().text("使用者名稱不能為空")
}
if(!passWord){
$passWord.next().text("密碼不能為空")
}
})
//把滑鼠放到輸入框中提示資訊消失
$('input').focus(function (){
$(this).next().text('')
})
</script>
</body>
</html>
2.7 input框實時監控
<body>
<input type="text" id="username">
<script>
$('#username').on('input', function (){
console.log(this.value)
})
</script>
</body>
2.8 滑鼠懸浮
<body>
<p id="d2">測試懸浮</p>
<script>
$('#d2').hover(function (){
alert(123)
})
</script>
</body>
// hover是有兩個事件組成，一個是滑鼠懸浮一個是滑鼠移開。
// 如果只寫一個函式則兩個事件都用這一個。如果寫兩個函式，則懸浮和移開使用不同的函式
<body>
<p id="d2">測試懸浮</p>
<script>
$('#d2').hover(
function (){
alert(123)
},
function (){
alert(456)
}
)
</script>
</body>
//如果只想讓它彈出來一次，則讓第二個函式為空
2.9 鍵盤按鍵事件
<script>
$(window).keydown(function (event){
console.log(event.keyCode)
if (event.keyCode == 65) {
alert("按下了a鍵")
}
})
</script>
// 監測在鍵盤上按下什麼鍵
2.10 阻止後續事件執行
<body>
<form action="">
<span id="d3" style="color: red"></span>
<input type="submit" id="d4">
</form>
<script>
$('#d4').click(function (){
$('#d3').text("Hello")
})
</script>
</body>
// 提交後顯示這個hello，但是提交後hello閃而過，這就是因為它有後續事件
阻止方法一:
<body>
<form action="">
<span id="d3" style="color: red"></span>
<input type="submit" id="d4">
</form>
<script>
$('#d4').click(function (){
$('#d3').text("Hello")
return false
})
</script>
</body>
方法二:
<script>
$('#d4').click(function (e){
$('#d3').text("Hello")
e.preventDefault()
})
</script>
2.11 阻止事件冒泡
<body>
<div id="d5"> div
<br>
<p id="d6"> div-->p
<br>
<span id="d7">div-->p-->span</span>
</p>
</div>
<script>
$('#d5').click(function (){
alert('div')
})
$('#d6').click(function (){
alert('div--p')
})
$('#d7').click(function (){
alert('div--p--span')
})
</script>
</body>
// 點選div-->p-->span 後上面的p和div也會彈出來(因為這三個標籤是包含的，點了是裡面的也會觸發上面的)，不符合我們的預期。
//解決方法:
<script>
$('#d5').click(function (){
alert('div')
})
$('#d6').click(function (){
alert('div--p')
})
$('#d7').click(function (){
alert('div--p--span')
//方法一：
return false
})
</script>
//方法二：
<script>
$('#d5').click(function (){
alert('div')
})
$('#d6').click(function (){
alert('div--p')
})
$('#d7').click(function (e){
alert('div--p--span')
//方法二：
e.stopPropagation()
})
</script>
2.12 事件委託
<body>
<button>如何委婉的說你已經叛變了？</button>
<script>
$('button').click(function (){ //無法影響到動態建立的標籤
alert("皇軍託我給你帶個話")
})
</script>
</body>
//動態增加一個button標籤:
let butEle=$('<button>')
butEle.text("委託")
$('body').append(butEle)
//但新增加的這個按鈕是沒有辦法彈出視窗的。如果也要彈出視窗，寫法:
<script>
$('body').on('click', 'button', function (){
alert("皇軍託我給你帶個話") // 在指定範圍內所有的點選事件都委託給button按鈕觸發
})
</script>
2.13 頁面載入
等待頁面載入完畢後再執行程式碼
//之前的方法:
window.onload = function(){
js程式碼
}
// jQuery中等待頁面載入完後再執行:
//方法一:
$(document).ready(function(){
js程式碼
})
//方法二:
$(function(){
js程式碼
})
//方法三:
直接寫在body內部最後面
3. jQuery其他
3.1 動畫效果
<div id="d8">
<img src="img_1.png">
</div>
$('#d8').hide(5000) //5秒鐘隱藏
$('#d8').show(5000) //5秒鐘出現
$('#d8').slideUp(5000) //5秒鐘以滑動方式隱藏(自下而上)
$('#d8').slideDown(5000) // 5秒鐘向下滑動
$('#d8').fadeOut(5000) //淡出可見
$('#d8').fadeIn(5000) //淡入已隱藏的元素
$('#d8').fadeTo(5000,0.4) //允許漸變為給定的不透明度（值介於 0 與 1 之間）
3.2 其他
// each
$('div').each(function(index){console.log(index)}) //拿索引
$('div').each(function(index,obj){console.log(index,obj)}) //拿索引和值
$.each([1,2,3],function(index,obj{console.log(index,obj)})
//data
能夠讓標籤幫我們儲存資料，並且資料使用者看不到
$('div').data('info','Hello World') //給所有div加一個info屬性值是Hello World.
//驗證:
$('div').first().data('info')
Hello World
//刪除:
$('div').first().removeData('info')