JQuery
查找
$('p').css('color','red');
//id名查找
$('#p').css('color','pink');
//class名查找
$('.p').css('color','blue');
//元素間的關(guān)系查找
$('body p').css('font-size','30px');
//選擇#p緊挨著的第一個(gè)p標(biāo)簽
$('.p+p').css('color','yellow');
//選擇#p后面緊挨著的所有p標(biāo)簽
$('#p~p').css('color','green');
//選擇第一個(gè)p元素
$('p:first').css('font-size','20px');
顯示隱藏及切換
//hide 隱藏 （ 時(shí)間 函數(shù)回調(diào) ）
// show 顯示 （ 時(shí)間 函數(shù)回調(diào) ）
$('p').hide(3000,a);
function a(){
$('p').show(3000,b);
// toggle 切換隱藏和顯示效果 隱藏變顯示幔托，顯示變隱藏
$('.box').toggle();
}
滑動(dòng)及切換
//slideDown() 向下滑(時(shí)間 函數(shù)回調(diào))
//slideUP() 向上滑(時(shí)間 函數(shù)回調(diào))
//slideToggle() 切換上滑和下滑的效果
// stop() 停止所在運(yùn)行的動(dòng)畫
// :eq(下標(biāo))
$('button:eq(0)').click(function(){
$('div').stop().slideDown();
})
$('button:eq(1)').click(function(){
$('div').stop().slideUp();
})
$('button:eq(2)').click(function(){
$('div').stop().slideToggle();
})
淡入、淡出及切換
//fadeOut() 淡出(時(shí)間 函數(shù)回調(diào))
$('button:eq(0)').click(function(){
$('div').stop().fadeOut();
})
//fadeIn() 淡入(時(shí)間 函數(shù)回調(diào))
$('button:eq(1)').click(function(){
$('div').stop().fadeIn();
})
//fadeToggle() 切換 切換淡入和淡出的效果
$('button:eq(2)').click(function(){
$('div').stop().fadeToggle();
})
案例
輪播
var num = 0;
var xh = null;
//簡(jiǎn)化代碼
function play(){
num++;
if (num == 2) {
num = 0;
}
$('div .list li').fadeOut();
$('div .list li').eq(num).fadeIn();
$('.liso li').css('background','#000');
$('.liso li').eq(num).css('background','#f00');
}
//設(shè)置計(jì)時(shí)器
function a() {
xh = setInterval(function () {
play();
}, 3000)
}
a();
//點(diǎn)擊按鈕切換圖片
$('div button:eq(0)').click(function () {
num--;
if (num < 0) {
num = 1;
}
$('div .list li').fadeOut();
$('div .list li').eq(num).fadeIn();
$('.liso li').css('background','#000');
$('.liso li').eq(num).css('background','#f00');
})
$('div button:eq(1)').click(function () {
play();
})
//鼠標(biāo)移入停止定時(shí)器
$('div').mouseover(function () {
clearInterval(xh);
})
//鼠標(biāo)移出引用函數(shù)
$('div').mouseout(function () {
a();
})
