1 基本概念
jQuery是javascript的一個庫，包含多個可重用的函數，用來輔助我們簡化javascript開發。
JavaScript的缺點：
- window.onload有事件覆蓋問題，只能寫一個；
- 代碼容錯性差；
- 瀏覽器兼容性問題；
- 書寫繁瑣，代碼多；
- 代碼較亂，各個頁面都有；
- 動畫效果難以實現。
2 jQuery的使用
1 引入
2 入口函數
3 JavaScript對象與jQuery對象
4 選擇器
5 動畫效果
6 屬性操作
7 文檔（標籤）操作
8 表單操作
9 位置操作
10 事件流
11 其他方法
12 Ajax方法
1 引入
<script type="text/javascript" src="jquery-3.4.0.js"></script>
2 入口函數
<script type="text/javascript" src="jquery-3.4.0.js"></script>
<script type="text/javascript">
console.log($(document)); //jquery對象，類似僞數組
console.log($(document)[0]); //js對象，該html文件對象//入口函數，類似js中window.onload(),但不會出現事件重疊現象
//方式1
$(document).ready(function(){
alert(1);
});
//方式2
$(function(){
alert(2);
});//方式3
$(window).ready(function(){
alert(3);
});
</script>
3 JavaScript對象與jQuery對象
$(function(){
var oDivJq = $("#box1"); //jQuery對象
var oDivJs = document.getElementById('box2'); //JavaScript對象console.log(oDivJq);
console.log(oDivJs);//轉換
//jQuery-->JavaScript
console.log(oDivJq[0]);
console.log(oDivJq.get(0));
//JavaScript-->jQuery
console.log($(oDivJs));
});
4 選擇器
//1 基本選擇器
//標籤選擇器
$(function(){
$("div").click(function(){
console.log(this); //此時this爲js對象
console.log($(this));console.log(this.innerText);
console.log($(this).text());
});
});
//類選擇器
console.log($(".box"));
//id選擇器
console.log($("#box"));
//2 層級選擇器
// 後代選擇器(所有級子代)
console.log($('div p'));
// >子代選擇器（最近一級的子代，親兒子）
console.log($('div > p'));
// +毗鄰選擇器 匹配 所有緊接在#brother元素後的下一個元素
$('#brother+li').css('color','yellow');
// ~兄弟選擇器
// 匹配所有#brother之後的所有兄弟姐妹元素
$('#brother~li').css('background','#996633');
//3 基本過濾選擇器
//:first 獲取第一個元素
$('li:first').text('真的嗎？')
//:last 獲取最後一個元素
$('li:last').html('我是最後一個元素？')//:odd 匹配所有索引值爲奇數的元素，從0開始計數
$('li:odd').css('color','green');
//:even 匹配所有索引值爲偶數的元素，從0開始計數
$('li:even').css('color','red')//:eq(index) 獲取給定索引值的元素 從0開始計數
$('li:eq(1)').css('font-size','30px')
//:gt(index)匹配所有大於給定索引值的元素
$('li:gt(1)').css('font-size','40px')
//:lt(index) 匹配所有小於給定索引值的元素
$('li:lt(1)').css('font-size','40px')
//4 屬性選擇器
//標籤名[屬性名] 查找所有含有id屬性的該標籤名的元素
$("li[id]").css('color','red')//[attr=value] 匹配給定的屬性是某個特定值的元素
$('li[class=what]').css('font-size','30px')
//[attr!=value] 匹配所有不含有指定的屬性，或者屬性不等於特定值的元素
$('li[class!=what]').css('color','darkgreen')//匹配給定的屬性是以某些值開始的元素
$('input[name^=username]').css('background','red')
//匹配給定的屬性是以某些值結尾的元素
$('input[name$=222]').css('background','yellow')
//匹配給定的屬性是以包含某些值的元素
$("button[class*='btn']").css('background','#0000FF')
//5 篩選選擇器
//獲取第n個元素 數值從0開始
$('span').eq(0).css('font-size','30px')//first()獲取第一個元素
$('span').first().css('background','red')
//last()獲取最後一個元素
$('span').last().css('background','red')//.parent() 選擇父親元素
$('span').parent('.p1').css({width:'300px',height:'300px',background:'yellow'})
//.children() 選擇孩子元素
$('span').children('.p1').css({width:'300px',height:'300px',background:'yellow'})
//.siblings()選擇所有的兄弟元素
$('.list').siblings('li').css('color','red')
//.find() 查找所有的後代元素
$('div').find('button').css('background','#313131')
//選項卡
$(function(){
$("#box1 li").click(function(){
$(this).css('color', 'red');
//恢復其他兄弟節點的樣式
$(this).siblings('li').css('color','black');
});
5 動畫效果
//動畫和定時器一樣，要先清理stop()，再開動畫
//show 對角線變化來動態顯示隱藏的匹配元素,show(speed,callback)
//speed：三種預定速度之一的字符串('slow','normal','fast')或表示動畫時長的毫秒值
//callback:在動畫完成時執行的函數，執行一次
$("#box").click(function(){
$(".box").stop().show(10000, function(){
$(".box").stop().hide(5000);
});
});
//hide 表示隱藏顯示的元素, hide(speed,callback)
//toggle 如果元素是可見的，切換爲隱藏的；如果元素是隱藏的，切換爲可見的。
//slideDown 通過高度變化（向下增大）來到動態地顯示所有匹配的元素，在顯示完成後觸發一個回調函數
//slideUp 通過高度變化（向上減小）來動態地隱藏所有匹配的元素，在隱藏完成後可選地觸發一個回調函數。
//slideToggle 通過高度變化來切換所有匹配元素的可見性，並在切換完成後可選地觸發一個回調函數
//fadeIn 通過不透明度的變化來實現所有匹配元素的淡入效果，並在動畫完成後可選地觸發一個回調函數。
//這個動畫只調整元素的不透明度，也就是說所有匹配的元素的高度和寬度不會發生變化
//fadeOut 通過不透明度的變化來實現所有匹配元素的淡出效果，並在動畫完成後可選地觸發一個回調函數。
//fadeToggle 通過不透明度的變化來開關所有匹配元素的淡入和淡出效果，並在動畫完成後可選地觸發一個回調函數。
//fadeTo 把所有匹配元素的不透明度以漸進方式調整到指定的不透明度。
//animate 用於創建自定義動畫的函數, animate(params,[speed],[fn])
//params:一組包含作爲動畫屬性和終值的樣式屬性和及其值的集合
//speed:三種預定速度之一的字符串("slow","normal", or "fast")或表示動畫時長的毫秒數值
//fn:在動畫完成時執行的函數，每個元素執行一次。
var cc = {
width: 100,
height: 100,
top: 200,
left: 200,
};
$("#hh").click(function(){
$(".box").stop().animate(cc, 5000);
})//stop 停止所有在指定元素上正在運行的動畫, stop([clearQueue],[jumpToEnd])
//clearQueue:如果設置成true，則清空隊列。可以立即結束動畫。
//gotoEnd:讓當前正在執行的動畫立即完成，並且重設show和hide的原始樣式，調用回調函數等
//delay 用來做延遲的操作,
delay(1000); //毫秒
6 屬性操作
//1 html屬性操作(標籤)：是對html文檔中的屬性進行讀取，設置和移除操作。比如attr()、removeAttr()
//attrn設置屬性值或者 返回被選元素的屬性值
//獲取值：attr()設置一個屬性值的時候 只是獲取值
var id = $('div').attr('id')
console.log(id)
//設置值(不建議用此方式設置類名)
//1.設置一個值 設置div的class爲box
$('div').attr('class','box')
//2.設置多個值，參數爲對象，鍵值對存儲
$('div').attr({name:'hahaha',class:'happy'})
//removeAttr 刪除某個屬性
$("div").removeAttr("id")
//2 DOM屬性操作(對象)：對DOM元素的屬性進行讀取，設置和移除操作。比如prop()、removeProp()
//prop 獲取在匹配的元素集中的第一個元素的屬性值.它是對當前匹配到的dom對象設置屬性。
//removeProp 刪除
//3 類樣式操作：是指對DOM屬性className進行添加，移除操作。比如addClass()、removeClass()、toggleClass()
//addClass（添加多個類名）爲每個匹配的元素添加指定的類名。
$('div').addClass("box"):添加一個類名
$('div').addClass("box box2"):添加多個類名
//removeClass 從所有匹配的元素中刪除全部或者指定的類。
$('div').removeClass('box')移除指定的類
$('div').removeClass()移除全部的類
//toggleClass 如果存在（不存在）就刪除（添加）一個類。
$('span').click(function(){
//動態的切換class類名爲active
$(this).toggleClass('active')
})
//4 值操作：是對DOM屬性value進行讀取和設置操作。比如html()、text()、val()
//html
//獲取值：是獲取選中標籤元素中所有的內容
var c = $('ul').html();
//設置值：設置該元素的所有內容 會替換掉 標籤中原來的內容
$('ul').html('<a href="#">百度一下</a>')
//可以使用函數來設置所有匹配元素的內容
$('ul').html(function(){
return '哈哈哈'
})
//text
//獲取值：獲取匹配元素包含的文本內容
var a = $("div").text();
//設置值：設置該所有的文本內容
$("div").text("aaaaaaaa");
注意：值爲標籤的時候 不會被渲染爲標籤元素 只會被當做值渲染到瀏覽器中//val
//獲取值：用於表單控件中獲取值，比如input textarea select等等
var a = $('input').val();
//設置值：
$('input').val('設置了表單控件中的值')
7 文檔（標籤）操作
//1、插入操作
//1、父元素.append(子元素) 追加某元素 父元素最後位置中添加新的元素 string | element | jquery元素
//如果直接的內容是當前頁面中的某些元素，那麼這些元素將從原位置上消失。簡言之，就是一個移動操作
var oli = document.createElement('li');
oli.innerHTML = '哈哈哈'
$('ul').append('<li>1233</li>') //string
$('ul').append(oli) //element
$('ul').append($('#app')) //jquery
//2、子元素.appendTo(父元素) 追加到某元素 子元素添加到父元素
$('<li>天王蓋地虎</li>').appendTo($('ul')).addClass('hu')//3、prepend（） 前置添加， 添加到父元素的第一個位置
$('ul').prepend('<li>我是第一個</li>')
//4、prependTo 後置添加，第一個元素添加到父元素中
$('<a href="#">路飛學誠</a>').prependTo('ul')//5、兄弟.after(兄弟) 在匹配的元素之後插入內容 與 兄弟.insertAfter(兄弟)
$('ul').after('<h4>我是一個h3標題</h4>')
$('<h5>我是一個h2標題</h5>').insertAfter('ul')//對於這種多行的，用反引號``
var a = "alex"; //插入變量
$('ul').after(`
<li>
<a href="">${a}</a>
</li>
`)//6、兄弟.before(兄弟) 在匹配的元素之前插入內容 與 兄弟.insertBefor(兄弟)
$('ul').before('<h3>我是一個h3標題</h3>')
$('<h2>我是一個h2標題</h2>').insertBefore('ul')
//2、複製操作
$('button').click(function() {
// 1.clone()：克隆匹配的DOM元素並且選中這些克隆的副本。
// 2.clone(true)：元素以及其所有的事件處理並且選中這些克隆的副本(副本具有與真身一樣的事件處理能力)
$(this).clone(true).insertAfter(this);
})
//3、替換操作
//1、被替換.replaceWith(替換值)：將所有匹配的元素替換成指定的HTML或DOM元素。
$('h5').replaceWith('<a href="#">hello world</a>')
$('h5').replaceWith($('#app'));//2、替換值.replaceAll(被替換):用匹配的元素替換掉所有
$('<br/><hr/><button>按鈕</button>').replaceAll('h4')
//4、刪除操作
//1、remove() 刪除節點後，事件也會刪除（刪除了整個標籤）
$('ul').remove();//2、detach() 刪除節點後，事件($btn)會保留
var $btn = $('button').detach()
//此時按鈕能追加到ul前
$('ul').prepend($btn)//3、empty(): 清空元素中的所有後代節點
//清空掉ul中的子元素，保留ul
$('ul').empty()
8 表單操作
<body>
<button>lala</button>
<form action="">
<input type="radio" name="sex" value="112" />男
<input type="radio" name="sex" value="11" checked="" />女
<input type="radio" name="sex" value="11" />gay<input type="checkbox" value="a" checked=""/>吃飯
<input type="checkbox" value="b" checked=""/>睡覺
<input type="checkbox" value="c" checked=""/>打豆豆<select name="timespan" id="timespan" class="Wdate" >
<option value="1">8:00-8:30</option>
<option value="2">8:30-9:00</option>
<option value="3">9:00-9:30</option>
</select>
<input type="text" name="" id="" value="111" />
</form>
<script type="text/javascript" src="jquery-3.4.0.js"></script>
<script type="text/javascript">
$(function(){
//單選框
//獲取值 被選中的， :checked
console.log($("input[type=radio]:checked").val());
//設置值
$("input[type=radio]:checked").val('hahahaha');
console.log($("input[type=radio]:checked").val());//複選框
console.log($('input[type=checkbox]:checked').val()); //a 第一個被選中的//下拉表單
//獲取值 被選中的， ：selected
console.log($("#timespan option:selected").val());
//設置值
$("button").click(function(){
$("select option").get(2).selected = true; //get的是索引值
})//文本框
console.log($("input[type=text]").val())//獲取文本框中的值
//設置值
$('input[type=text]').val('試試就試試')
});
</script>
</body>
9 位置操作
//position
//weight 取得匹配元素當前計算的寬度值
//獲取值
$('#box').width()
//設置值
$('#box').width(300)//height 取得匹配元素當前計算的高度值
//獲取值
$('#box').height()
//設置值
$('#box').height(300)//innerHeight 獲取第一個匹配元素內部區域高度（包括補白、不包括邊框）
console.log($('#box').innerHeight())
//innerWidth 獲取第一個匹配元素內部區域寬度（包括補白、不包括邊框）
console.log($('#box').innerWidth())
//outerHeight 獲取第一個匹配元素外部高度（默認包括補白和邊框）
console.log($('#box').outerHeight())
//outerWeight 獲取第一個匹配元素外部寬度（默認包括補白和邊框）
console.log($('#box').outerWidth())
//offset
//offset 獲取匹配元素在當前視口的相對偏移,返回的對象包含兩個整型屬性：top 和 left
$("p").offset()
$('div').offset().top
$("p").offset().left
//scoll
//scrollTop 獲取匹配元素相對滾動條頂部的偏移 文檔被捲起的像素值
//scrollLeft 獲取匹配元素相對滾動條左側的偏移 文檔被捲起的像素值
$(document).scrollTop()
$(document).scrollLeft()//監聽文檔滾動的jquery方法
$(document).scroll(function(){
console.log($(document).scrollTop())
console.log($(document).scrollLeft())
})
10 事件流
//“DOM2級事件”規定的事件流包括三個階段：
//1 事件捕獲階段
//2 處於目標階段
//3 事件冒泡階段
程序：
var oBtn = document.getElementById('btn');oBtn.addEventListener('click',function(){ //默認爲false，即不顯示捕獲階段
console.log('btn處於事件捕獲階段');
}, true);
oBtn.addEventListener('click',function(){
console.log('btn處於事件冒泡階段');
}, false);document.addEventListener('click',function(){
console.log('document處於事件捕獲階段');
}, true);
document.addEventListener('click',function(){
console.log('document處於事件冒泡階段');
}, false);document.documentElement.addEventListener('click',function(){
console.log('html處於事件捕獲階段');
}, true);
document.documentElement.addEventListener('click',function(){
console.log('html處於事件冒泡階段');
}, false);document.body.addEventListener('click',function(){
console.log('body處於事件捕獲階段');
}, true);
document.body.addEventListener('click',function(){
console.log('body處於事件冒泡階段');
}, false);
結果：
document處於事件捕獲階段
html處於事件捕獲階段
body處於事件捕獲階段
btn處於事件捕獲階段
btn處於事件冒泡階段
body處於事件冒泡階段
html處於事件冒泡階段
document處於事件冒泡階段
冒泡事件
//給按鈕綁定事件，在所有事件回調函數中有默認的事件對象，且爲js對象
$(".father button").click(function(event){
console.log(event);//event.stopPropagation(); //阻止冒泡產生
console.log($(this).text()) //發生事件冒泡，同時打印出父級事件的內容
})$(".father").click(function(){
alert("父親")
})
11 其他方法
//mouseover mouseout穿過被選元素及其子元素都會觸發
$(".father").mouseover(function(){
console.log("移入了");
})$(".father").mouseout(function(){
console.log("移出了");
})//mouseenter mouseleave只有穿過被選元素纔會觸發
$(".father").mouseenter(function(){
console.log("移入了");
})$(".father").mouseleavet(function(){
console.log("移出了");
})
//鼠標選中focus，失去選中blur
$("input[type=text]").focus(function(){
console.log("獲取焦點");
})$("input[type=text]").blur(function(){
console.log("失去焦點");
})
//捕獲鍵盤按下keydown，鍵盤彈起keyup
$('input[type=text]').keyup(function(e){
console.log(e.keyCode); //e爲輸入字符
})
//鼠標移動mousemove
//鼠標按下mousedown，鼠標彈起mouseup