前端 -- jQuery
11.4 Jquery
jQuery的優點css
-
js代碼對瀏覽器的兼容性更好html
-
隱式循環jquery
-
鏈式操做數組
jQuery是什麼? -- 高度封裝了js代碼塊的模塊,封裝了dom節點,封裝了操做dom節點的簡便方法瀏覽器
$: 就是jQuery的簡寫.app
jQuery對象和DOM對象的互相轉換dom
jQuery封裝了DOM
DOM轉換成jQuery : jQuery(DOM對象) / $(DOM對象)
jQuery轉成DOM : jQuery對象[index]
</ jQuery對象轉換成了 DOM 對象以後，能夠直接調用 DOM 提供的一些功能
11.4.1 jQuery選擇器
1. 基礎選擇器
| 代碼 | 解釋 |
|---|---|
| $("#id") | id選擇器 |
| $("tagName") | 標籤選擇器 |
| $(".className") | 類選擇器 |
| $("*") | 通用選擇器 |
| $("div.className") | 交集選擇器(含有className的div標籤 |
| $("#id, .className, tagName") | 並集選擇器 |
2. 層級選擇器
| 代碼 | 解釋 |
|---|---|
| $("div li") | 後代選擇器,div下面的全部li標籤 |
| $("div>ul>li") | 子代選擇器,div下面的ul標籤裏的全部裏標籤 |
| $(".xxx+li") | 毗鄰選擇器,有類名xxx標籤的下一個li標籤 |
| $(".xxx~li") | 弟弟選擇器,有類名xxx標籤的下面的全部li標籤 |
3. 屬性選擇器
| 代碼 | 解釋 |
|---|---|
| $('[屬性名]') | 含有某屬性的標籤 |
| $('xxx[屬性名]') | 含有某屬性的xxx標籤 |
| $('選擇器[屬性名]') | 符合選擇器且含有某屬性的標籤 |
| $('選擇器[屬性名='xxx']') | 符合選擇器且某屬性值='xxx'的標籤 |
| $('選擇器[屬性名$='xxx']') | 符合選擇器且某屬性值以xxx結尾的標籤 |
| $('選擇器[屬性名^='xxx']') | 符合選擇器且某屬性值以xxx開頭的標籤 |
| $('選擇器[屬性名*='xxx']') | 符合選擇器且某屬性值包含xxx的標籤 |
| $('選擇器[屬性名1] [屬性名2='xxx']') | 符合選擇器且擁有屬性1和屬性2,且屬性2的值爲xxx的標籤 |
11.4.2 jQuery篩選器
1. 基礎篩選器
| 代碼 | 解釋 |
|---|---|
| $('選擇器:篩選器') | 做用域選擇器選擇出來的結果 |
| $('選擇器:first') | 找第一個的標籤 |
| $('選擇器:last') | 找最後一個的標籤 |
| $('選擇器:eq(index)') | 經過索引找的標籤 |
| $('選擇器:even') | 找偶數索引的標籤 |
| $('選擇器:odd') | 找奇數索引的標籤 |
| $('選擇器:gt(index)') | 找大於索引的標籤 |
| $('選擇器:lt(index)') | 找小於索引的標籤 |
| $('選擇器:not(選擇器)') | 找沒有某選擇器的標籤 |
| $('選擇器:has(標籤)') | 找含有xxx標籤的的標籤 |
2. 表單篩選器
type篩選器
| 代碼 | 解釋 |
|---|---|
| $(':text') | 找type屬性值爲text的標籤(文本框) |
| $(':password') | 找type屬性值爲password的標籤(密碼框) |
| $(':radio') | 找type屬性值爲radio的標籤(單選框) |
| $(':checkbox') | 找type屬性值爲checkbox的標籤(多選框) |
| $(':file') | 找type屬性值爲file的標籤(文件選擇框) |
| $(':submit') | 找type屬性值爲submit的標籤(提交按鈕框) |
| $(':reset') | 找type屬性值爲reset的標籤(重置按鈕框) |
| $(':button') | 找type屬性值爲button的標籤(普通按鈕框) |
<!-- date , type的input是找不到的 -->ide
狀態篩選器
enabled //可選擇的 disabled //不可選擇 checked //默認選擇 selected //默認選擇 $(':disabled') jQuery.fn.init [input, prevObject: jQuery.fn.init(1)] $(':enabled') jQuery.fn.init(15) [input, input, input, input, input, input, input, input, input, input, input, select, option, option, option, prevObject: jQuery.fn.init(1)] $(':checked') jQuery.fn.init(4) [input, input, input, option, prevObject: jQuery.fn.init(1)] $(':selected') $(':checkbox:checked') jQuery.fn.init(2) [input, input, prevObject: jQuery.fn.init(1)] $('input:checkbox:checked') jQuery.fn.init(2) [input, input, prevObject: jQuery.fn.init(1)]
11.4.3 jQuery篩選器方法
| 代碼 | 解釋 |
|---|---|
| $('ul p').siblings() | 找兄弟 |
| $('ul p').prev() / next() / parent() | 找上一個哥哥 / 弟弟 / 祖宗 |
| $('ul p').prevAll() / nextAll() / parents() | 找全部哥哥 / 弟弟 / 祖宗 |
| $('ul p').prevUntil('選擇器') / nextUntil('選擇器') parentsUnitil('選擇器') | 找哥哥 / 弟弟 / 祖宗到某一個地方就中止 |
| $('ul').children() | 找兒子 |
// 篩選方法
first()
last()
eq(index)
not('選擇器') 去掉知足選擇器條件的
filter('選擇器')交集選擇器,在全部的結果中繼續找知足選擇器要求的
find('選擇器') 後代選擇器,找全部結果中符合選擇器要求的後代
has('選擇器') 經過後代關係找當代
<!-- 注意:內容補充 -->函數
// 不要用for(i in li_list){}的方式循環一個jq對象,每一個對象會封裝方法 for(let i=0;i<li_list.length;i++){ //let 聲明的變量的做用域只在for循環中 console.log(i) }
11.4.5 事件綁定
爲button按鈕綁定單擊事件，單機按鈕彈出警告框 $('button').click( function () { alert('別點我啊') } )
11.4.6 標籤的文本操做
$('li:first').text() //獲取第一個列表的文本內容
$('li:first').text('小白') //將第一個列表的文本值改成小白
$('li:last').html() //獲取最後一個列表的內容
$('li:last').html('大白') //將最後一個列表的內容改成xxx
$('li:first').html('<a href="https://www.baidu.com">百度一下</ a>') // 設置a標籤屬性
var a = document.createElement('a')
a.innerText = 'AD鈣'
$('li:last').html(a) // a 是dom對象
var a2 = document.createElement('a')
var jqobj = $(a2)
jqobj.text('旺仔')
$('li:last').html(jqobj) // jqobj是jquery對象
</ html能夠接受 標籤,dom對象,jq對象
11.4.7 標籤的操做
1. 增長
父子關係: (父).append(子) //給父級的最後添加一個子 (子).appendTo(父) //將子添加到父級的最後 (父).prepend(子) //給父級的最前添加一個子 (子).prependTo(父) //將子添加到父級的最前 兄弟關係: 參考點.before(插入內容) //在參考點以前插入內容 $(插入內容).insertBefore(參考點) //將內容插入在參考點以前 參考點.after(插入內容) //在參考點以後插入內容 $(插入內容).insertAfter(參考點) //將內容插入在參考點以前 </ 若是被添加的標籤本來就在文檔樹中,就至關於移動,參考點能夠是標籤,id,class等
2. 刪除
remove / detach / empty var obj = $('button').remove() //刪除標籤和事件,被刪除的對象作返回值,將對象從新添加回去,有標籤但沒有事件 var obj = $('button').detach() //刪除標籤保留事件,被刪掉的對象作返回值,將對象從新添加回去,有標籤也有事件 $('ul').empty() //清空ul裏面的li標籤,ul標籤仍保留(清空內部內容,保留自己)
3. 修改
$('li').replaceWith(p) //用p對象內容替換全部的li標籤
$(p).replaceAll('li') //將全部的li標籤替換成p對象內容
4. 複製
var btn = $(this).clone() //克隆標籤但不能克隆事件 var btn = $(this).clone(true) //克隆標籤和事件 $('button').click( function () { var btn = $(this).clone(true); $(this).after(btn); } )
11.4.8 標籤的屬性操做
1. 通用屬性
attr 獲取屬性的值 $('a').attr('href') 設置/修改屬性的值 $('a').attr('href','http://www.baidu.com') 設置多個屬性值 $('a').attr({'href':'http://www.baidu.com','title':'baidu'}) removeAttr $('a').removeAttr('title') //刪除title屬性 # 若是一個標籤只有true和false兩種狀況,適合用prop處理 $('input').prop('checked'); //查看是否有某屬性,返回true或false $('input').prop('checked',false); //取消所有選擇 $('input').prop('checked',true); //所有選擇
2. 類的操做
添加類 addClass $('div').addClass('red') //添加一個類 $('div').addClass('red bigger') //添加多個類 刪除類 removeClass $('div').removeClass('bigger') //刪除一個類 $('div').removeClass('red bigger') //刪除多個類 轉換類 toggleClass //有就刪除,沒有就添加 $('div').toggleClass('red') $('div').toggleClass('red bigger')
3. 值的操做
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="../jQuery3.4.1.js"></script>
</head>
<body>
<input type="text">
<input type="password">
<input type="radio" name="sex" value="1" checked>男
<input type="radio" name="sex" value="2">女
<input type="checkbox" name="hobby" value="1" checked>足球
<input type="checkbox" name="hobby" value="2">音樂
<input type="checkbox" name="hobby" value="3">遊戲
<input type="checkbox" name="hobby" value="4">電影
<select name="city" id="">
<option value="1">北京</option>
<option value="2">上海</option>
<option value="3">天津</option>
<option value="4">山東</option>
<option value="5">河南</option>
</select>
</body>
<script>
$(':text').val() //查看值
$(':text').val('123456'); //設置value值爲xxx
$(':password').val('456456');//設置value值爲xxx
$(':radio').val([2]); //選擇value值爲2的選擇
$(':checkbox').val([1,3]); //選擇value值爲1,3的選項
$('select').val([5]) //選擇value值爲5的城市
</script>
</html>
# 對於選擇框 : 單選,多選,下拉選擇 -- 設置選中的值須要放在數組中.
11.4.9 css樣式
$('div').css('background-color','red') //設置一個樣式
$('div').css({'height':'100px','width':'100px'}) //設置多個樣式
11.4.10 滾動條
$(window).scrollLeft() //水平滾動條距離左邊的距離 $(window).scrollTop() //垂直滾動條距離頂部的距離
11.4.11 盒子模型
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
div{
background-color: tomato;
}
</style>
<script src="../jQuery3.4.1.js"></script>
</head>
<body>
<div></div>
</body>
<script>
// $('div').css({'width':'100px','height':'100px'})
$('div').height(100); //設置content高度
$('div').height(); //查看content中content的高度
$('div').width(100); //設置content寬度
$('div').width(); //查看content中content的寬度
$('div').css('padding','20px'); //設置padding距離
$('div').innerHeight(); //查看content+padding的高度
$('div').innerWidth(); //查看content+padding的寬度
$('div').css({'border':'5px','border-style':'solid'}); //設置border的寬度
$('div').outerHeight(); //查看content+padding+border的高度
$('div').outerWidth(); //查看content+padding+border的寬度
$('div').css('margin','10px'); //設置margin的距離
$('div').outerHeight(true); //查看content+padding+border+margin的高度
$('div').outerWidth(true); //查看content+padding+border+margin的寬度
$('div').innerHeight(500) //設置值,改變的是content的高度
</script>
</html>
# 設置值:變得永遠是content的值
11.4.12 動畫
slied滑動系列 sliedDown : 向下滑動顯示 siledUp : 向上滑動隱藏 sliedToggle : down和up交替 # 動畫時間用毫秒錶示,也能夠加回調函數 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .container{ position: relative; float: right; height: 40px; width: 120px; background-color: lightblue; } .box{ position: absolute; height: 100px; width: 300px; background-color: lightcoral; top: 40px; right: 0; display: none; } .car{ position: absolute; width: 120px; line-height: 40px; text-align: center; top: 0; right: 0; } </style> <script src="../jQuery3.4.1.js"></script> </head> <body> <div class="container"> <div class="car">購物車(<span>0</span>)</div> <div class="box"></div> </div> </body> <script> var block = false; $('.car').click( function () { // $('.box').slideToggle(500); if(block){ $('.box').slideUp(500,fn2); //fn1 , fn2 是回調函數 block = false; }else { $('.box').slideDown(500,fn1); block = true; } function fn1() { $('.car').css('color','orange') } function fn2() { $('.car').css('color','black') } } ) </script> </html>
show系列 show : 對角滑動顯示 hide : 對角滑動隱藏 toggle : show和hide交替 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="../jQuery3.4.1.js"></script> <style> div{ height: 200px; width: 200px; background-color: lawngreen; display: block; } </style> </head> <body> <button>顯示</button> <div></div> </body> <script> $('button').click( function () { $('div').stop(); //若是沒有stop,連續點擊,執行完當前動做,纔會執行下一個動做 // $('div').show(1000) //顯示 // $('div').hide(1000) //隱藏 $('div').toggle(1000,fn) //交替 } ) function fn() { if($('button').text()==='顯示'){ $('button').text('隱藏') }else { $('button').text('顯示') } } </script> </html>
11.4.13 事件的綁定
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="../jQuery3.4.1.js"></script>
</head>
<body>
<button>點擊</button>
</body>
<script>
// 方式一
$('button').click({'a':'b'},fn); //能夠不傳參
function fn(e){
console.log(e.data);
console.log(e.data.a);
console.log('小白')
}
// 方式二
$('button').bind('click',{'a':'b'},fn); //能夠不傳參
function fn(e) {
console.log(e); //打印事件
console.log(e.data); //打印事件參數
console.log(e.data.a); //打印事件參數的值
console.log('參數')
}
//解除綁定事件
$('button').unbind('click',fn);
</script>
</html>
11.4.14 各類事件
| 事件 | 解釋 |
|---|---|
| click(function(){...}) | 單擊事件.點擊觸發 |
| blur(function(){...}) | 失去焦點 |
| focus(function(){...}) | 得到焦點 |
| change(function(){...}) | input框鼠標離開時,內容改變觸發 |
| keyup(function(){...}) | 按下鍵盤觸發事件, 獲取字符編號: e.keyCode |
| hover(function(){...}) | 鼠標懸浮觸發 |
| mouseover / mouseout | 父元素綁定此事件,若是有子元素出入子元素也會觸發 |
| mouseenter / mouseleave | 鼠標懸浮觸發,鼠標進入 / 離開 |
1. 得到 / 失去焦點
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="../jQuery3.4.1.js"></script>
</head>
<body>
<input type="text">
</body>
<script>
$('input').focus(
function () {
console.log('得到焦點')
}
);
$('input').blur(
function () {
console.log('失去焦點')
}
);
$('input').change(
function () {
console.log('內容改變')
}
)
</script>
</html>
2. keyup
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="../jQuery3.4.1.js"></script>
<style>
.mask{
position: absolute;
background-color: rgba(255,255,0,0.3);
width: 100%;
height: 100%;
top: 0;
left: 0;
}
.tk{
position: absolute;
width: 400px;
height: 300px;
background-color: lightblue;
top: 50%;
left: 50%;
margin-left: -200px;
margin-top: -150px;
}
</style>
</head>
<body>
<input type="text">
<h1>那女孩對我說,說我保護她的夢</h1>
<div class="mask">
<div class="tk"></div>
</div>
</body>
<script>
// $('input').keyup(
// function (e) {
// console.log(e.keyCode) //keyCode:字符的ASCLL編號
// }
// )
$(window).keyup(
function (e) {
if(e.keyCode===27){
$('.mask').css('display','none')
}
}
)
</script>
</html>
3. mouseenter / leave
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.container{
position: relative;
float: right;
height: 40px;
width: 120px;
background-color: lightblue;
}
.box{
position: absolute;
height: 100px;
width: 300px;
background-color: lightcoral;
top: 40px;
right: 0;
display: none;
}
.car{
position: absolute;
width: 120px;
line-height: 40px;
text-align: center;
top: 0;
right: 0;
}
</style>
<script src="../jQuery3.4.1.js"></script>
</head>
<body>
<div class="container">
<div class="car">購物車(<span>0</span>)</div>
<div class="box"></div>
</div>
</body>
<script>
$('.container').mouseenter( //鼠標懸浮觸發
function () {
$('.box').stop();
$('.box').slideDown(500);
}
);
$('.container') .mouseleave(
function () {
$('.box').stop();
$('.box').slideUp(500);
}
)
$('.container').hover( //鼠標懸浮觸發,上面兩個結合
function(){
$('.box').stop();
$('.box').toggle(500);
}
)
</script>
</html>
4. mouseover / out
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="../jQuery3.4.1.js"></script>
<style>
.out{
width: 500px;
height: 500px;
background-color: lightpink;
}
.inner{
position: absolute;
width: 200px;
height: 200px;
left: 150px;
top: 150px;
background-color: purple;
}
</style>
</head>
<body>
<div class="out">
<div class="inner"></div>
</div>
</body>
<script>
$('.out').mouseover( //進入父元素打印,進入子元素打印
function () {
console.log('enter')
}
);
$('.out').mouseout( //出來父元素打印,出來子元素打印
function () {
console.log('out')
}
)
</script>
</html>
11.4.15 事件冒泡
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.out{
width: 500px;
height: 500px;
background-color: lightpink;
}
.inner{
position: absolute;
width: 200px;
height: 200px;
left: 150px;
top: 150px;
background-color: purple;
}
</style>
<script src="../jQuery3.4.1.js"></script>
</head>
<body>
<div class="out">
<div class="inner"></div>
</div>
</body>
<script>
$('.out').click(
function () {
alert('out')
}
);
$('.inner').click( //點擊子元素的同時,也至關於點擊了父元素
function (e) {
alert('inner');
return false //阻止事件冒泡1
// e.stopPropagation() //阻止事件冒泡2
}
)
</script>
</html>
11.4.16 事件委託
# 後來添加的標籤,能夠擁有以前綁定的事件 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="../jQuery3.4.1.js"></script> </head> <body> <div> <button>點擊1</button> </div> </body> <script> $('div').on('click','button',function () { alert('點我幹嗎') }); var btn = document.createElement('button'); $(btn).text('點擊2').appendTo('div') </script> </html>
11.4.17 頁面加載
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="../jQuery3.4.1.js"></script>
<script>
window.onload = function(){ //window.onload要等到全部的文檔 音視頻都加在完畢才觸發.
$('button').click( //window.onload 只能綁定一次.屢次綁定,只有最後一次生效
function () {
alert('點我幹嗎')
}
)
};
window.onload = function(){
alert('點我幹嗎')
};
$(document).ready( //jQuery的方式,只等待文檔加載完畢以後就能夠執行
function () { //在同一個html頁面上能夠屢次使用
$('button').click(
function () {
alert('別點我')
}
)
}
);
$(document).ready(
function () {
alert('別點了')
}
);
//jQuery的簡寫方式
$(function () {
$('button').click(
function () {
alert('就這樣吧')
})
})
</script>
</head>
<body>
<button>點擊</button>
</body>
<!--<script>-->
<!-- $('button').click(-->
<!-- function () {-->
<!-- alert('點我幹嗎')-->
<!-- }-->
<!-- )-->
<!--</script>-->
</html>
11.4.18 each
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="../jQuery3.4.1.js"></script>
</head>
<body>
<ul>
<li>那女孩對我說</li>
<li>請先說你好</li>
<li>明天,你好</li>
</ul>
</body>
<script>
$('li').each(
function (index,val) { //主動傳index:每一項的索引,val:每一項的標籤對象
console.log(index,val)
}
)
</script>
</html>
相關文章
- 1. 前端-JQuery
- 2. 前端之Jquery
- 3. 【前端】jQuery
- 4. 前端 之 jQuery
- 5. 前端-jQuery
- 6. 前端之jQuery
- 7. 前端之JQuery
- 8. 前端JQuery（一）
- 9. 前端——jQuery
- 10. 前端 jQuery
- 更多相關文章...
- • WSDL 端口 - WSDL 教程
- • XSLT - 在客戶端 - XSLT 教程
- • 使用阿里雲OSS+CDN部署前端頁面與加速靜態資源
- • Docker容器實戰(一) - 封神Server端技術
相關標籤/搜索
每日一句
-
每一个你不满意的现在，都有一个你没有努力的曾经。
最新文章
歡迎關注本站公眾號,獲取更多信息
相關文章
- 1. 前端-JQuery
- 2. 前端之Jquery
- 3. 【前端】jQuery
- 4. 前端 之 jQuery
- 5. 前端-jQuery
- 6. 前端之jQuery
- 7. 前端之JQuery
- 8. 前端JQuery（一）
- 9. 前端——jQuery
- 10. 前端 jQuery