jQuery 函數(shù)整理
- show(參數(shù))
//顯示嘴脾,添加參數(shù)表示動(dòng)畫時(shí)間,動(dòng)畫同時(shí)控制寬高
$("div").show(1000).html('哈哈哈')
- hide(參數(shù))
//隱藏粱侣,添加參數(shù)表示動(dòng)畫時(shí)間驮配,動(dòng)畫同時(shí)控制寬高
$('div').hide(1000)
- html('參數(shù)')
沒(méi)有參數(shù)為獲取值
//html 添加文本每窖,括號(hào)內(nèi)是字符串酝蜒,無(wú)法輸入標(biāo)簽
$("div").show(1000).html('哈哈哈')
text('參數(shù)') 與 html('類似')
當(dāng)該方法用于返回一個(gè)值時(shí),它會(huì)返回所有匹配元素的組合的文本內(nèi)容(會(huì)刪除 HTML 標(biāo)記)向胡。
沒(méi)有參數(shù)為獲取值恼蓬,有參數(shù)為設(shè)置值,此時(shí)會(huì)覆蓋原有內(nèi)容ready()
$(document).ready(function(){})
//功能類似
window.onload = function(){}
//前者可以多次執(zhí)行捷枯,function(){}是作為參數(shù)傳遞進(jìn)去滚秩,所以并不會(huì)覆蓋;后者只能執(zhí)行一次淮捆,function(){} 作為值郁油,是賦值操作
//前者加載不包括外部資源圖片,只是 DOM 樹加載完成之后就執(zhí)行攀痊,比后者執(zhí)行快
- noConflict()
解除綁定 $ 符號(hào)
$.noConflict();
//解除之后要使用 jQuery 對(duì)象就使用jQuery前綴
jquery.('div').hide(1000)
- addClass()
添加類名
$('div').addClass('current');
- removeClass()
刪除類名
$('div').removeClass('current');
- taggleClass()
切換類名桐腌,如果存在類名那么刪除,如果不存在類名那么添加
$('div').taggleClass('current');
- css()
所有關(guān)于樣式 .style 的操作都在此方法內(nèi)進(jìn)行
//鍵值對(duì)的形式
$div.css({
'width': '500px',
'height': '500px',
'background': 'red'
})
$div.css('width','500px');
- val()
主要用于 input標(biāo)簽自帶屬性如:src\href\value 等屬性控制苟径,帶參數(shù)代表設(shè)置案站,不帶參數(shù)代表獲取
$('input').val('1233');
$('input').val();
- 尺寸函數(shù)
var w = $("#small").width()
var h = $("#small").height()
var iw = $("#small").innerWidth()
var ih = $("#small").innerHeight()
var ow = $("#small").outerWidth()
var oh = $("#small").outerHeight()
var owm = $("#small").outerWidth(true)
var ohm = $("#small").outerHeight(true)
- attr()
獲取或設(shè)置屬性值
//帶參數(shù)為設(shè)置
$(selector).attr(attribute,value)
$('a').attr('target','_self')
//獲取規(guī)定參數(shù)的屬性的值
$(selector).attr(attribute)
//使用函數(shù)來(lái)設(shè)置屬性和值
$(selector).attr(attribute,function(index,oldvalue))
//鍵值對(duì)的方式設(shè)置多個(gè)屬性和值
$(selector).attr({attribute:value, attribute:value ...})
$('a').attr({
'href': 'http://www.baidu.com',
'target': '_blank'
})
- parent()
獲得父元素
$("#filter").parent().css("background-color", "blue")
- parents()
獲得父元素及所有祖先元素
$("#filter").parents().css("background-color", "blue")
- child()
獲得子元素標(biāo)簽
$('div').child()
- children()
獲得所有子元素標(biāo)簽
$('div').children()
- siblings()
獲得兄弟元素標(biāo)簽
$(this).css('background', 'red').siblings().css('background', 'green');
- next()
next() 獲得匹配元素集合中每個(gè)元素緊鄰的同胞元素。如果提供選擇器棘街,則取回匹配該選擇器的下一個(gè)同胞元素蟆盐。
//.next(selector)
$("#ul1").next("div").css("background-color", "red")
- eq()
eq() 選擇器選取帶有指定 index 值的元素。返回的是一個(gè) jQuery 對(duì)象可以直接使用 jQuery 方法
$(":eq(index)")
$(".class").eq(0).css("background-color", "green")
mouseenter()
鼠標(biāo)進(jìn)入事件遭殉,從子元素進(jìn)入不會(huì)再次觸發(fā)事件mouseover()
鼠標(biāo)滑過(guò)事件石挂,從子元素進(jìn)入會(huì)再次觸發(fā)事件mouseleave()
鼠標(biāo)離開事件,進(jìn)入子元素不會(huì)再次觸發(fā)事件mouseout()
鼠標(biāo)劃出事件险污,進(jìn)入子元素會(huì)再次觸發(fā)事件hover(fn,fn)
監(jiān)控鼠標(biāo)移入移出痹愚,功能等于 mouseenter() 和 mouserleave,帶兩個(gè)參數(shù)前一個(gè)表示移入法梯,后一個(gè)表示移出振惰;如果只有一個(gè)參數(shù)則表示移入移出做相同方法
$('li').hover(function () {
$(this).children('.filmContent').addClass('current').parent().siblings().children('.filmContent').removeClass('current');
})
- index()
返回指定元素相對(duì)于其他指定元素的 index 位置裁着。返回的是相對(duì)其父元素的位置
$('li').hover(function () {
console.log($(this).index());
})
event.stopPropagation()
阻止冒泡贺待,因?yàn)槭鞘录?duì)象,所以要穿如 event 做參數(shù)toggle()
切換動(dòng)畫狀態(tài)榛鼎,如果可見(jiàn)那么切換成不可見(jiàn)咳榜,如果不可見(jiàn)那么切換成可見(jiàn)
$(selector).toggle(speed,callback,switch);
$('.ad').toggle(1000);
- slideToggle();
通過(guò)使用滑動(dòng)效果(高度變化)來(lái)切換元素的可見(jiàn)狀態(tài)酥诽。
如果被選元素是可見(jiàn)的淮逻,則隱藏這些元素狼电,如果被選元素是隱藏的蜒灰,則顯示這些元素弦蹂。
$(selector).slideToggle(speed,callback);
$(this).children('.secondMenue').stop().slideToggle(200);
- slideUp()
隱藏動(dòng)畫肩碟,向上滑動(dòng)卷起
$(this).siblings().children('.secondMenue').stop().slideUp(200);
- slideDown(參數(shù)1,fn)
展示動(dòng)畫,向下滑動(dòng)凸椿;參數(shù)1是執(zhí)行動(dòng)畫時(shí)間削祈,fn 是回調(diào)
$(this).siblings().children('.secondMenue').stop().slideDown(200);
- stop();
結(jié)束動(dòng)畫,兩個(gè)參數(shù),前面是是否結(jié)束全部動(dòng)畫脑漫,后面是否直接跳到動(dòng)畫結(jié)尾(沒(méi)有動(dòng)畫)髓抑,是布爾類型
$(selector).stop(stopAll,goToEnd)
- addBack();
當(dāng)前jQuery對(duì)象可能是通過(guò)調(diào)用其它jQuery對(duì)象的特定方法創(chuàng)建的,使用該函數(shù)將返回一個(gè)新的jQuery對(duì)象优幸,該對(duì)象包含了當(dāng)前jQuery對(duì)象和之前創(chuàng)建它的jQuery對(duì)象的所有匹配元素吨拍。
$('.box2').parent().addBack().css('background', 'cyan');
- fadeIn(參數(shù)1,參數(shù)2); fadeOut()
淡入淡出動(dòng)畫,參數(shù)1是動(dòng)畫時(shí)間單位毫秒网杆,參數(shù)2是透明度范圍0~
$('.ad').delay(1000).fadeIn(1000).delay(5000).fadeOut(1000);
- delay();
延遲動(dòng)畫,參數(shù)是時(shí)間單位毫秒
$('.ad').delay(1000).fadeIn(1000).delay(5000).fadeOut(1000);
- fadeToggle();
切換羹饰,原來(lái)是淡入切換成淡出,原來(lái)是淡出切換成淡入
$('.ad').fadeToggle(1000);
- animate(prop,speed,easing,callback);
自定義動(dòng)畫,prop 是屬性碳却, speed 是速度(可以填時(shí)間)队秩,easing 是動(dòng)畫方式(漸快、漸慢昼浦、先慢后快等等馍资,一些特殊的動(dòng)畫方式需要引入插件使用);動(dòng)畫是隊(duì)列形式執(zhí)行关噪,先進(jìn)先出
$('div').animate({
'width': '1000px'
}, 1000, function () {
console.log('動(dòng)畫結(jié)束');
});
- each();
each() 方法規(guī)定為每個(gè)匹配元素規(guī)定運(yùn)行的函數(shù)
$(selector).each(function(index,element));
$('li').each(function () {
// this == DOM對(duì)象
$(this).slideUp(2000);
// console.log(index + value);
})
- jQuery 動(dòng)態(tài)創(chuàng)建標(biāo)簽節(jié)點(diǎn)
var $newTag = $('<li>新增的節(jié)點(diǎn)</li>');
- a.append(b);
把 b 添加到 a里鸟蟹, a 是 b 的父標(biāo)簽節(jié)點(diǎn) - b.appendTo(a);
這對(duì)方法是將節(jié)點(diǎn)添加到父節(jié)點(diǎn)中的最后位置
$('.red').append($newTag);
$newTag.appendTo($('.red'))
- a.prepend(b);
- b.prependTo(a);
這對(duì)標(biāo)簽是將 b 添加到 a 標(biāo)簽的第一個(gè)位置
$newTag.prependTo($('.red'));
$('.red').prepend($newTag);
- a.before(b);
- b.innerBefore(a);
兄弟關(guān)系添加,將 b 添加到 a 前面
$('.red').before($newTag);
$newTag.innerBefore($('.red'));
- a.after(b);
- b.innerAfter(a);
兄弟關(guān)系添加節(jié)點(diǎn)使兔,將 b 添加到 a 節(jié)點(diǎn)后面
$('.red').after($newTag);
$newTag.innerAfter($('.red'));
- remove();
刪除節(jié)點(diǎn)建钥,參數(shù)是指向節(jié)點(diǎn)的 className id tag 等等
$('.red>li:first').remove();
- empty();
清空節(jié)點(diǎn)中的內(nèi)容,也可以用 html('');
$('.red>li:first').empty();
$('.red>li:first').html('');
注意要清空自帶屬性要使用 val('')
- trim()
去除空格火诸、tab
$.trim(content).length <= 0
- focus();
獲得焦點(diǎn)
$('.content').focus();
- blur();
失去焦點(diǎn)
$('.content').blur();
- clone(參數(shù))锦针;
復(fù)制節(jié)點(diǎn),參數(shù)是布爾類型置蜀,默認(rèn)是 false 淺賦值奈搜,僅僅賦值這個(gè)節(jié)點(diǎn),不賦值事件盯荤;clone(true);
時(shí)為深賦值,會(huì)賦值這個(gè)事件
var $cloneTag = $pTag.clone(true);
- a.replaceWith(b)
用 b 節(jié)點(diǎn)來(lái)替換 a 節(jié)點(diǎn)
var $pTag = $('p');
var $newTag = $('<h1>0000</h1>');
$pTag.replaceWith($newTag)
- 事件對(duì)象的一些屬性方法
- event.target
獲得調(diào)用此方法的具體對(duì)象
function test(event){
console.log(event.target);
}
- event.type
獲得調(diào)用此方法的事件行為(onclick\mouseover)
function test(event){
console.log(event.type)
}
- event.data
獲得調(diào)用此方法同時(shí)傳入的參數(shù)
function 事件data() {
$('ul').click({'name': 'sz'}, exec);
function exec(event) {
console.log(event.data);
}
}
- event.result
獲得項(xiàng)鏈函數(shù)的返回值
var num = 0;
function test(){
$('p').click(function(event){
return num++;
})
$('p').click(function(event){
alert(event.result);
})
}
- on()
- 事件綁定
//綁定單個(gè)事件
$('p').on('click',function(){
console.log('xxxx');
})
//綁定多個(gè)事件馋吗,同一個(gè)回調(diào)函數(shù),中間用空格隔開
$('p').on('click mouseenter',function(event){
console.log('xxx' + event.type)
})
//綁定多個(gè)事件,多個(gè)回調(diào)函數(shù)秋秤,用鍵值對(duì)的方式
$('p').on({
'click':cE,
'mouseenter':function(){
console.log('鼠標(biāo)移入');
}
})
function cE(){
console.log('單擊事件')
}
- 事件委托
on(type,selector,data,fn)
//body被點(diǎn)擊宏粤,小king執(zhí)行 function
$('body').on('click','.king', function () {
console.log('我是小king, 處理事件');
})
- off();
解除事件綁定
$('p').off('click', cE);
- one();
一次性事件脚翘,只執(zhí)行一次
$('p').one({
'click':function(){
console.log('xxxx');
}
})
//內(nèi)部實(shí)現(xiàn)原理就是結(jié)尾解除綁定
$('p').click(function(){
console.log('xxxx');
})
- 阻止事件默認(rèn)行為
一些事件會(huì)有默認(rèn)行為,比如a 標(biāo)簽點(diǎn)擊會(huì)跳轉(zhuǎn)绍哎、form中 Input 標(biāo)簽會(huì)提交
event.preventDefault
$(':submit').click(function (event) {
console.log('xxxx');
event.preventDefault();
})
- trigger();
手動(dòng)觸發(fā)事件来农,會(huì)觸發(fā)默認(rèn)事件,會(huì)觸發(fā)冒泡事件(a標(biāo)簽存疑崇堰,老師示例時(shí)候出現(xiàn)問(wèn)題)
$(':submit').trigger('click');
- triggerHandle();
手動(dòng)觸發(fā)事件沃于,不會(huì)觸發(fā)默認(rèn)事件,不會(huì)觸發(fā)冒泡事件
$('.box3').triggerHandler('click');
- 命名空間
$('.box').on('click.xx', function () {
console.log('click.xx');
})
$('.box').on('mouseenter.xx', function () {
console.log('mouseenter.xx');
})
$('.box').on('click.lisi', function () {
console.log('click.lisi');
})
function haha() {
console.log('1');
}
$('.box').click(haha)
$('.box').click(function () {
console.log('2');
})
$('.box').on('click.one', function () {
console.log('1');
})
$('.box').on('click.two', function () {
console.log('2');
})
$('.box').off('.one');
$('.box').trigger('click.lisi');