寫的少,做的多
1.為什么要使用jquery?
在javascript開發(fā)過程中,有很多很多缺點(diǎn):
1:代碼冗余.
2:有兼容性問題
3:遍歷數(shù)組很麻煩,通常要嵌套一大推的for循環(huán)
4:查找元素的方法單一,麻煩
5:想要實(shí)現(xiàn)簡(jiǎn)單的動(dòng)畫效果,麻煩的要死
2.使用了jquery
1:完全沒有兼容性問題
2:代碼簡(jiǎn)單,好用
3:查找元素的方法非常靈活
4:擁有隱式迭代特性,因此不再需要手寫for循環(huán)了
5:實(shí)現(xiàn)動(dòng)畫功能相當(dāng)簡(jiǎn)單,而且功能強(qiáng)大
jquery與原生js的對(duì)比
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="./jquery-1.12.4.js"></script>
<style>
.pink{
background-color: pink;
}
</style>
</head>
<body>
<button>按鈕</button>
<ul>
<li>哈哈</li>
<li>哈哈</li>
<li>哈哈</li>
<li>哈哈</li>
<li>哈哈</li>
</ul>
</body>
</html>
<script>
//沒使用前,給按鈕添加點(diǎn)擊事件
document.querySelector('button').onclick=function(){
var num=document.querySelectorAll('ul>li');
//沒使用前遍歷
for(var i=0;i<num.length;i++){
num[i].style.backgroundColor='pink';//設(shè)置顏色
}
}
-----------------------------------------------------
// 使用后,給按鈕添加點(diǎn)擊事件
$('button').click(function(){
//使用后遍歷
$('ul>li').css('backgroundColor','pink');//設(shè)置顏色
})
</script>
3.jquery到底是什么呢?
jQuery的官網(wǎng) http://jquery.com/
jQuery就是一個(gè)js庫(kù)忽孽，使用jQuery的話悔捶，會(huì)比使用JavaScript更簡(jiǎn)單鞋喇。
jQuery就是一個(gè)js文件,里面封裝了一大推方法提供給我們使用,方便我們的開發(fā),
4.jquery,原生js的入口函數(shù)的區(qū)別
1.jquery的入口函數(shù)有兩種寫法
<script>
//第一種寫法
$(document).ready(function(){
});
//第二種寫法
$(function(){
})
//兩種寫法的意思都一樣,通常都是用第二種,因?yàn)楦?jiǎn)單
</script>
2.jquery與原生js的入口函數(shù)對(duì)比
<script>
//原生js入口函數(shù)
//只能寫一個(gè),否則報(bào)錯(cuò)
window.onload=function(){
//js的入口函數(shù)要等頁面中的資源(包括圖片,文件)加載完之后執(zhí)行
}
//jquery入口函數(shù)
//可以寫多個(gè)
$(function(){
//jquery的入口函數(shù)只會(huì)等待文檔樹加載完成就開始執(zhí)行柜去，并不會(huì)等待圖片屎蜓、文件的加載
})
//所以jquery的入口函數(shù)的執(zhí)行時(shí)機(jī)要比原生js的要快
</script>
5.jq對(duì)象與dom對(duì)象
1.DOM對(duì)象:使用js中方法獲取頁面中的元素返回的對(duì)象就是dom對(duì)象
2.jQuery對(duì)象:jq對(duì)象就是使用jquery的方法獲取頁面中的元素返回的對(duì)象就是jq對(duì)象
3.jq對(duì)象其實(shí)就是DOM對(duì)象的包裝集包裝了DOM對(duì)象的集合(偽數(shù)組)
4.DOM對(duì)象與jq對(duì)象發(fā)方法不能混用
DOM對(duì)象轉(zhuǎn)換成jq對(duì)象:用$
<script>
var $obj=$('domobj');
//DOM對(duì)象轉(zhuǎn)成jq對(duì)象
</script>
jq對(duì)象轉(zhuǎn)成DOM對(duì)象:用下標(biāo)取值 get()方法
<script>
var $li = $("li");
//第一種方法（推薦使用）
$li[0]
//第二種方法
$li.get(0)
</script>
6.jquery選擇器
1.jquery選擇器是jquery為我們提供的一組方法,讓我們更加方便的獲取到頁面中的元素
2.jquery選擇器返回的是jquery對(duì)象
3.基本選擇器和層級(jí)選擇器跟css的選擇器用法一毛一樣
過濾選擇器
:eq(index) 獲取到的元素中,按索引來查找元素
:odd 獲取到的元素中,選中索引為奇數(shù)的元素
:even 獲取到的元素中,選中索引為偶數(shù)的元素
篩選選擇器
children() 子類選擇器
find() 后代選擇器
siblings() 查找兄弟節(jié)點(diǎn),不包括自己
parent() 查找父親
eq(index) index從0開始
next() 找下一個(gè)兄弟
prev() 找上一個(gè)兄弟
7.元素設(shè)置
1.樣式設(shè)置
<script>
//設(shè)置樣式,兩個(gè)參數(shù) 設(shè)置的樣式屬性,具體樣式
$('li').css('color','red');
//對(duì)象(設(shè)置的樣式屬性:具體樣式)
$('li').css({'color':'red'});
//設(shè)置多個(gè)樣式
$('li').css({
'color':'green',
'font-size':'20px'
})
</script>
2.類名設(shè)置
<script>
//添加一個(gè)類
$('li').addClass('title');
//刪除一個(gè)類
$('li').removeClass('title');
//切換一個(gè)類,有就刪除沒有就添加
$('li').toggleClass('title');
//匹配一個(gè)類,判斷是否包含某個(gè)類 如果包含返回true否則返回false
$('li').hasClass('title');
</script>
3.屬性設(shè)置
<script>
//獲取屬性
$('li').attr('name');
//設(shè)置屬性
$('li').attr('name','蔡徐坤');
//設(shè)置多個(gè)屬性
$('li').attr({
'name':'蔡徐坤',
'age':'38',
'xin':'女'
})
</script>
4.prop方法
<script>
//對(duì)于布爾類型的屬性,不要attr方法,應(yīng)該用prop方法,prop跟attr方法一樣
//給復(fù)選框添加屬性
$('#checkbox').prop('checked');
//添加屬性為true,選中狀態(tài)
$('#checkbox').prop('checked',true);
//添加屬性為false,不選中
$('#checkbox').prop('checked',false);
//刪除該屬性
$('#checkbox').removeProp('checked');
</script>
8.動(dòng)畫
前言我說過用jquery實(shí)現(xiàn)動(dòng)畫效果,是很簡(jiǎn)單很簡(jiǎn)單的
1.基本動(dòng)畫
<script>
//動(dòng)畫的本質(zhì)是改變?nèi)萜鞯拇笮『屯该鞫?//如果不傳參數(shù)是看不到動(dòng)畫的
//可傳入特殊的字符 fast normal slow 推薦使用數(shù)字傳參 單位毫秒
//展示動(dòng)畫
$('div').show();//相當(dāng)于display:block
//隱藏動(dòng)畫
$('div').hide();//相當(dāng)于display:none
//切換展示和隱藏動(dòng)畫
$('div').toggle();
</script>
2.滑入滑出
<script>
//該動(dòng)畫的本質(zhì)是改變?nèi)萜鞯母叨?//滑入動(dòng)畫
$('div').slideDown();
//滑出動(dòng)畫
$('div').slideUp();
//切換滑入滑出
$('div').slideToggle();
</script>
3.自定義動(dòng)畫
<script src="./jquery-1.12.4.js"></script>
<style>
div{
width: 200px;
height: 200px;
background-color: pink;
/* 一定要給元素加定位,否則動(dòng)不了 */
position:absolute;
}
</style>
</head>
<body>
<button>按鈕</button>
<div></div>
<script>
$(function(){
//參數(shù)1:需要做動(dòng)畫的屬性
//參數(shù)2:需要執(zhí)行動(dòng)畫的總時(shí)長(zhǎng)
//參數(shù)3:執(zhí)行動(dòng)畫的時(shí)候的速度
//參數(shù)4:執(zhí)行動(dòng)畫完成之后的回調(diào)函數(shù)
$('button').click(function(){
$('div').animate({left:800},5000,'swing',function(){
console.log('完成')
//在回調(diào)函數(shù)中可以在設(shè)置回調(diào)函數(shù)
$('div').animate({top:300},2000,'linear',function(){
alert('完成')
})
});
})
})
</script>
4.淡入淡出
<script src="./jquery-1.12.4.js"></script>
<style>
div{
width: 200px;
height: 200px;
background-color: pink;
}
</style>
</head>
<body>
<button>按鈕</button>
<div></div>
<script>
//入口函數(shù)
$(function(){
$('button').click(function(){
//淡入淡出動(dòng)畫的本質(zhì)是改變?nèi)萜鞯耐该鞫? //淡入動(dòng)畫
$('div').fadeIn();
//淡出動(dòng)畫
$('div').fadeOut();
//切換淡入淡出
$('div').fadeToggle();
//從哪里淡入到哪里
$('div').fadeTo('speed','opacity');
})
})
</script>
以上動(dòng)畫都能添加自定義,這里就不寫了,嘻嘻
5.動(dòng)畫隊(duì)列
jquery中有個(gè)動(dòng)畫隊(duì)列的機(jī)制,當(dāng)我們對(duì)一個(gè)對(duì)象添加多次動(dòng)畫效果時(shí)后添加的動(dòng)作就會(huì)被放入整個(gè)動(dòng)畫隊(duì)列中,等前面的動(dòng)畫完成后在開始執(zhí)行.
可是用戶的操作往往都比動(dòng)畫快,如果用戶對(duì)一個(gè)對(duì)象頻繁操作時(shí)不處理動(dòng)畫隊(duì)列就會(huì)造成隊(duì)列堆積,影響到原本的效果,有沒有辦法解決這個(gè)問題呢?當(dāng)然有!
stop方法解決
<script>
//停止當(dāng)前動(dòng)畫,如果動(dòng)畫隊(duì)列當(dāng)中還有動(dòng)畫立即執(zhí)行
$('div').stop();
//和stop()效果一致,說明這是默認(rèn)設(shè)置
$('div').stop(false,false);
//停止當(dāng)前動(dòng)畫,清除動(dòng)畫隊(duì)列
$('div').stop(true,false);
//停止當(dāng)前動(dòng)畫并且結(jié)束位置,清除子動(dòng)畫隊(duì)列
$('div').stop(true,true);
//停止當(dāng)前動(dòng)畫并且到結(jié)束位置,如果動(dòng)畫隊(duì)列當(dāng)中還有動(dòng)畫立即執(zhí)行
$('div').stop(false,true);
</script>
9.節(jié)點(diǎn)操作
1.創(chuàng)建節(jié)點(diǎn)
<script>
//創(chuàng)建節(jié)點(diǎn)
var $a=$('<a )
//在新的窗口打開鏈接
$('body').html($a);
</script>
2.克隆節(jié)點(diǎn)
<script>
//如果想克隆事件 false true事件
//jquery對(duì)象的變量名要加$,是一種規(guī)范,讓別人一看就知道這是一個(gè)jq對(duì)象
var $cloneP=$('p').clone(true);
</script>
3.添加/移動(dòng)節(jié)點(diǎn)
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>標(biāo)題</title>
</head>
<body>
<input type="button" value="append" id="btnAppend" />
<input type="button" value="prepend" id="btnPrepend" />
<input type="button" value="after" id="btnAfter" />
<input type="button" value="before" id="btnBefore" />
<input type="button" value="appendTo" id="btnAppendTo" />
<ul id="ul1">
<li>我是第1個(gè)li標(biāo)簽</li>
<li>我是第2個(gè)li標(biāo)簽</li>
<li id="li3">我是第3個(gè)li標(biāo)簽</li>
<li>我是第4個(gè)li標(biāo)簽</li>
<li>我是第5個(gè)li標(biāo)簽</li>
</ul>
<ul id="ul2">
<li>我是第1個(gè)li標(biāo)簽2</li>
<li>我是第2個(gè)li標(biāo)簽2</li>
<li id="li32">我是第3個(gè)li標(biāo)簽2</li>
<li>我是第4個(gè)li標(biāo)簽2</li>
<li>我是第5個(gè)li標(biāo)簽2</li>
</ul>
<script src="jquery-1.12.4.js"></script>
<script>
$(function () {
//1.append();
//元素A.append(元素B); 把元素B追加到元素A中,作為元素A的最后一個(gè)子元素添加.
$('#btnAppend').click(function () {
//1.1 新建的li標(biāo)簽,追加到ul1中去
// var $liNew = $('<li>我是蔡徐坤</li>');
// $('#ul1').append($liNew);
//1.2 把ul2中已知的某一個(gè)li標(biāo)簽,追加到ul1中. 剪切后追加
// var $li32 = $('#li32');
// $('#ul1').append($li32);
//1.3 把ul1中已知的某一個(gè)li標(biāo)簽,追加到ul中. 剪切后追加
var $li3 = $('#li3');
$('#ul1').append($li3);
});;
//2.prepend();
//元素A.prepend(元素B); 把元素B作為元素A的第一個(gè)子元素追加.
$('#btnPrepend').click(function () {
//2.1 新建的li標(biāo)簽,追加到ul1中去
// var $liNew = $('<li>我是蔡徐坤</li>');
// $('#ul1').prepend($liNew);
//2.2 把ul2中已知的某一個(gè)li標(biāo)簽,追加到ul1中. 剪切后追加
// var $li32 = $('#li32');
// $('#ul1').prepend($li32);
//2.3 把ul1中已知的某一個(gè)li標(biāo)簽,追加到ul中. 剪切后追加
var $li3 = $('#li3');
$('#ul1').prepend($li3);
});
//3.before()
//元素A.before(元素B); 把元素B插入到元素A的前面
$('#btnBefore').click(function () {
//新建一個(gè)div標(biāo)簽,作為兄弟元素插入到ul1的前面
var $divNew = $('<div>我是新建的div標(biāo)簽</div>');
$('#ul1').before($divNew);
});
//4.after();
//元素A.after(元素B); 把元素B插入到元素A的后面
$('#btnAfter').click(function () {
//新建一個(gè)div標(biāo)簽,作為兄弟元素插入到ul1的后面
var $divNew = $('<div>我是蔡徐坤</div>');
$('#ul1').after($divNew);
});
//5.appendTo();
//元素B.appendTo(元素A); 把元素B作為元素A的最后一個(gè)子元素添加.
$('#btnAppendTo').click(function () {
//5.1 新建的li標(biāo)簽,追加到ul1中去
var $liNew = $('<li>我是新建的li標(biāo)簽</li>');
$liNew.appendTo($('#ul1'));
});
});
</script>
</body>
</html>
4.刪除/清空節(jié)點(diǎn)
<script>
//清空div里面的元素
$('div').empty();
//刪除某個(gè)元素
$('div').remove();
</script>
5.val()方法
val方法用于設(shè)置和獲取表單元素的值,列如input,textarea的值
<input type="text" placeholder="蔡徐坤,請(qǐng)輸入">
<script>
//設(shè)置值
$('input').val('蔡徐坤');
//獲取值
$('input').val();
</script>
6.html()和text()方法
html方法相當(dāng)于innerHTML text方法相當(dāng)于innerText
區(qū)別：html方法會(huì)識(shí)別html標(biāo)簽，text方法會(huì)那內(nèi)容直接當(dāng)成字符串酱床，并不會(huì)識(shí)別html標(biāo)簽腹殿。
7.width()和height()方法
<body>
<img src="./images/01.jpg" alt="">
<script>
//不帶參數(shù)表示獲取高度
$('img').height();
//帶參數(shù)表示設(shè)置高度
$('img').height(200);
//獲取網(wǎng)頁的可視區(qū)寬高
//獲取可視區(qū)寬
$(window).width();
//獲取可視區(qū)高度
$(window).height();
</script>
</body>
8.scollTop和scrollLeft
設(shè)置或者垂直滾動(dòng)條的位置
9.offset方法與position方法
off方法獲取元素距離document的位置,返回值為對(duì)象,position方法獲取的是元素距離有定位的父元素的位置
10.jQuery事件機(jī)制
1.on事件注冊(cè)
// 表示給$(selector)綁定事件，并且由自己觸發(fā)蹬昌，不支持動(dòng)態(tài)綁定混驰。
$(selector).on( "click", function() {});
2.on注冊(cè)委托事件
// 表示給$(selector)綁定代理事件，當(dāng)必須是它的內(nèi)部元素span才能觸發(fā)這個(gè)事件，支持動(dòng)態(tài)綁定
$(selector).on( "click",'span', function() {});
3.on注冊(cè)事件的語法
// 第一個(gè)參數(shù)：events栖榨，綁定事件的名稱可以是由空格分隔的多個(gè)事件（標(biāo)準(zhǔn)事件或者自定義事件）
// 第二個(gè)參數(shù)：selector, 執(zhí)行事件的后代元素（可選）昆汹，如果沒有后代元素，那么事件將有自己執(zhí)行婴栽。
// 第三個(gè)參數(shù)：data满粗，傳遞給處理函數(shù)的數(shù)據(jù)，事件觸發(fā)的時(shí)候通過event.data來使用（不常使用）
// 第四個(gè)參數(shù)：handler居夹，事件處理函數(shù)
$(selector).on(events,[selector],[data],handler);
5.事件解綁
// 解綁匹配元素的所有事件
$(selector).off();
// 解綁匹配元素的所有click事件
$(selector).off("click");
6.觸發(fā)事件
$(selector).click(); //觸發(fā) click事件
$(selector).trigger("click");//事件觸發(fā)器trigger
7.jquery事件對(duì)象
jquery事件對(duì)象其實(shí)就是js事件對(duì)象的一個(gè)封裝,處理了兼容性
//screenX和screenY 對(duì)應(yīng)屏幕最左上角的值
//clientX和clientY 距離頁面左上角的位置（忽視滾動(dòng)條）
//pageX和pageY 距離頁面最頂部的左上角的位置（會(huì)計(jì)算滾動(dòng)條的距離）
//event.keyCode 按下的鍵盤代碼
//event.data 存儲(chǔ)綁定事件時(shí)傳遞的附加數(shù)據(jù)
//event.stopPropagation() 阻止事件冒泡行為
//event.preventDefault() 阻止瀏覽器默認(rèn)行為
//return false:既能阻止事件冒泡败潦，又能阻止瀏覽器默認(rèn)行為。
8.鏈?zhǔn)骄幊?/h5>
通常情況下,只有設(shè)置操作才能把鏈?zhǔn)骄幊萄永m(xù)下去,因?yàn)楂@取操作的時(shí)候,會(huì)返回獲取到的值,無法返回jquery對(duì)象
end()方法,篩選選擇器會(huì)改變jquery對(duì)象的DOM對(duì)象,想要回復(fù)到上一次的狀態(tài).并且返回匹配元素之前的狀態(tài)
9.each()方法
jquery的隱式迭代會(huì)對(duì)所有的DOM對(duì)象設(shè)置相同的值,但是如果我們需要給每一個(gè)對(duì)象設(shè)置不同的值的時(shí)候,就需要自己進(jìn)行迭代了
作用:遍歷jquery對(duì)象集合,為每一個(gè)匹配的元素執(zhí)行一個(gè)函數(shù)
// 參數(shù)一表示當(dāng)前元素在所有匹配元素中的索引號(hào)
// 參數(shù)二表示當(dāng)前元素（DOM對(duì)象）
$(selector).each(function(index,element){});
通常情況下,只有設(shè)置操作才能把鏈?zhǔn)骄幊萄永m(xù)下去,因?yàn)楂@取操作的時(shí)候,會(huì)返回獲取到的值,無法返回jquery對(duì)象
end()方法,篩選選擇器會(huì)改變jquery對(duì)象的DOM對(duì)象,想要回復(fù)到上一次的狀態(tài).并且返回匹配元素之前的狀態(tài)
jquery的隱式迭代會(huì)對(duì)所有的DOM對(duì)象設(shè)置相同的值,但是如果我們需要給每一個(gè)對(duì)象設(shè)置不同的值的時(shí)候,就需要自己進(jìn)行迭代了
作用:遍歷jquery對(duì)象集合,為每一個(gè)匹配的元素執(zhí)行一個(gè)函數(shù)
// 參數(shù)一表示當(dāng)前元素在所有匹配元素中的索引號(hào)
// 參數(shù)二表示當(dāng)前元素（DOM對(duì)象）
$(selector).each(function(index,element){});
