day2

JQuery

查找

$('p').css('color','red');
//id名查找
$('#p').css('color','pink');
//class名查找
$('.p').css('color','blue');
//元素间的关系查找
$('body p').css('font-size','30px');
//选择#p紧挨着的第一个p标签
$('.p+p').css('color','yellow');
//选择#p后面紧挨着的所有p标签
$('#p~p').css('color','green');
//选择第一个p元素
$('p:first').css('font-size','20px');

显示隐藏及切换

//hide 隐藏    （ 时间  函数回调 ）
// show 显示   （ 时间  函数回调 ）   
$('p').hide(3000,a);
function a(){
    $('p').show(3000,b);
// toggle 切换隐藏和显示效果 隐藏变显示，显示变隐藏
$('.box').toggle();
}

滑动及切换

//slideDown() 向下滑(时间  函数回调)
//slideUP() 向上滑(时间  函数回调)
//slideToggle() 切换上滑和下滑的效果
// stop() 停止所在运行的动画
// :eq(下标)
$('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() 淡出(时间  函数回调)
$('button:eq(0)').click(function(){
    $('div').stop().fadeOut();
})
//fadeIn() 淡入(时间  函数回调)
$('button:eq(1)').click(function(){
    $('div').stop().fadeIn();
})
//fadeToggle() 切换 切换淡入和淡出的效果
$('button:eq(2)').click(function(){
    $('div').stop().fadeToggle();
})

案例

轮播

var num = 0;
var xh = null;
//简化代码
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');
}
//设置计时器
function a() {
    xh = setInterval(function () {
        play();
    }, 3000)
}
a();
//点击按钮切换图片
$('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();
})
//鼠标移入停止定时器
$('div').mouseover(function () {
    clearInterval(xh);
})
//鼠标移出引用函数
$('div').mouseout(function () {
    a();
})