【前端】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 內容或元素替換被選元素。