【前端】jQuery常用基礎知識點總結
目錄
jQuery概念：
JQuery: JavaScript Query; 這是js的一個函式庫。(完全由js封裝寫成的一個js檔案)
優點: 簡單易用，鏈式程式設計隱式迭代。
缺點: 方法冗餘。
鏈式程式設計：實際就是執行完某一個函式後，返回它本身，然後繼續呼叫
隱式迭代：在方法的內部會為匹配到的所有元素進行迴圈遍歷，執行相應的方法，而不用我們再進行迴圈，簡化我們的操作，方便我們呼叫
入口函式：
原生js：
window.onload = function(){
}jQuery中：
1.
$(function(){
alert('有了這個方法，就可以獲取下面的標籤了，寫法dollar符+括號+在括號中寫function')
})2.
$(document).ready(function(){
})3.
$(window).ready(function(){
})JQuery物件就是通過$()獲取到頁面標籤。
$()獲取的物件，裡面有JQuery自己封裝好的方法，原生js沒有。
JQuery想要操作標籤，底層還是要呼叫原生js自己的方法。
jQuery選擇器：
1.普通獲取方法：
標籤：標籤直接寫$('標籤名')
id:id值前面加#，$('#id值')
類：類前加點,$('.類名')
層級：空格，$('#box1 li p')
2.比較特殊的選擇器
name:如果一個li標籤的name屬性=demo，$('li[name=demo]')
has:如果一個li標籤中有一個p標籤，$(li).has('p')
eq:通過索引獲取，$('li').eq(標籤對應的索引值，從0開始)
($('#li3').prev());//選擇id是li3的元素 前面 緊挨的同輩元素
($('#li3').prevAll());
($('#li3').next());//選擇id是li3的元素 後面 緊挨的同輩元素
($('#li3').nextAll());
($('#li3').siblings());//選擇id是li3的元素的同級元素（兄弟們，不包括自己）
($('#li3').parent());//選擇id是li3的元素的父元素
($('#li3').children());
($('#ul1').find('.li4'));//選擇id是ul1的元素內的class等於.li4的元素（後代標籤，子子孫孫）
($('#li3').index());// 元素在父盒子中，所有子元素排列對應的索引值
樣式操作：
①style-->css()
一個引數: 獲取屬性
$('div').css('width')
兩個引數：設定屬性
$('div').css('width', '350px')
通過一個字典形式的引數：進行設定
var set = {'width':666, 'height':600, 'background':'gold'}
$('div').css(set)
②通過操作class類名，來達到操作樣式的目的，如下：
<div class="box div bbb"></div>$('div').addClass('aaa') // 新增類(類及類的樣式，這裡的aaa可以在style中通過類名，設定屬性)
$('div').removeClass('box') // 刪除類
$('div').toggleClass('lili') // 事件觸發，無變有有變無（迴圈變化）
可以聯絡選項卡案例，點選誰就給誰新增xx類，siblings其它去掉xx類。
屬性操作：
1.普通屬性：attr(); id/title/src/href/name...
將input的name屬性設定為‘setset’
$('input').attr('name', 'setset')
2.表單屬性：prop(); selcted/checked/disabled
$('option').eq(1).prop('selected', true) //將索引為1的option設定為選中，false為不選中
3.特殊屬性innerHTML/className/style/value...
| 原生js | jQuery語法 |
| innerHTML | html() |
| className | addClass() removeClass() toggleClass() |
| style | css() |
| value | val() |
animate引數：
引數一：要改變的樣式屬性值，寫成字典的形式
引數二：動畫持續的時間，單位為毫秒，一般不寫單位
引數三：動畫曲線，預設為‘swing’，緩衝運動，還可以設定為‘linear’，勻速運動
引數四：動畫回撥函式，動畫完成後執行的匿名函式
$('.class1').animate(obj, 2000, 'swing', function(){
// 回掉函式才是真正的執行完畢自定義函式後，在執行的邏輯。
alert('程式執行完畢才執行的我')
})
特殊動畫：
1.show()/hide()/toggle()顯示隱藏，引數為（毫秒值，回撥函式）
$('div').hide(1000,)
$('div').show(1000,function(){
alert('show ok')
})
切換
$('div').toggle(1000,)
2.滑入滑出
$('div').slideUp(1000)
$('div').slideDown(1000)
$('div').slideToggle(1000)
3.淡入淡出
$('div').fadeOut(1000)
$('div').fadeIn(1000)
$('div').fadeToggle(1000)
半透明程度：必須傳遞時間
// $('div').fadeTo(2000,0.3)
事件：
click() 滑鼠單擊
mouseover() 滑鼠進入（進入子元素也觸發）
mouseout() 滑鼠離開（離開子元素也觸發）
mouseenter() 滑鼠進入（進入子元素不觸發）
mouseleave() 滑鼠離開（離開子元素不觸發）
hover() 同時為mouseenter和mouseleave事件指定處理函式
ready() DOM載入完成
submit() 使用者遞交表單
*取消瀏覽器預設行為：
return false;
event.preventDefault()
表單校驗中的控制器思想：設定幾個全域性變數，預設是false，如果通過正則改為true，在校驗時設定一個變數：為幾個控制器的與條件，判斷是否提交
var bool1 = false;
var bool2 = false;
var bool3 = false;
var bool4 = false;
var bool5 = false;
var flag = bool1 && bool2 && bool5;
if (flag == false){
// 沒有通過，取消提交
// return false;
event.preventDefault();
}
事件冒泡：
事件是可以傳播的，子元素的事件被觸發，父系元素的同類事件也會被觸發。
阻止冒泡：return false;或event.stopPropagation();
事件委託：
事件委託是利用事件冒泡，只指定一個事件處理程式來管理某一型別的所有事件。
如：讓ul中新創建出來的li全都具有click屬性
方法一：delegate
$('ul').delegate('li', 'click', function(){
alert(555)
})方法二：on
$('ul').on('click', 'li',function(){
alert(666)
})
jQuery中的DOM操作：
1.建立
方法一：
var $newLi = $('<li>')
$newLi.html('i am new li')
console.log($newLi)方法二：
// 使用多屬性和標籤巢狀
var $newLi = $('<li class="aaa bbb" name="ccc" title="ddd">i am new li...</li>')2.新增
$('ul').append($newLi)或：
$newLi.appendTo($("ul"))
子元素新增：向父標籤最前面新增元素，prepend() / prependTo(
$('ul').prepend($newLi)
兄弟元素新增：before()/insertBefore()：互換位置,新增到之前
$('#box').before($newLi)
兄弟元素新增，after() /insertAfter():新增到兄弟元素之後
$('#box').after($newLi)
刪除：remove()
$('#box').remove()
拓展：clone()，舉例：
<body>
<p>This is a paragraph.</p>
</body>
// 複製每個 p 元素，然後追加到 body 元素
$("body").append($("p").clone());
replaceWith()
用指定的 HTML 內容或元素替換被選元素。