jquery学习(一）

1、文档加载完成之后，修改span的内容


$(document).ready(
  function()
    {
        $("span").text("$100");
                  
    }
);


2、id及类选择器


$("#vacati­ons .amer­ica")


3、子选择器和直属子选择器


$("#vacati­ons li")   $("#vacati­ons > li")


4、同时选择id及类选择器


$("#vacati­ons,.amer­ica")


5、选择第一个,最后一个，奇数,偶素 位置的 li（伪选择器）


$("#vacati­ons li:first,#vacati­ons li:last",#vacati­ons li:odd,#vacati­ons li:even)


6、tours直属且是偶数位的li
$("#tours > li:ev­en")


7、$("#destinations").find("li") 类似于 $("#destinations li")。
$("#destinations").children() 但是children只找直属部分


8、回朔
$("li").last()  
$("li").first()
$("li").first().next().prev();
$("li").first().parent();


9、切换成另外一个节点(append 在最后追加，prepend在前面追加，before在同级前面添加，after在同级后面添加。appendto,prependto,insertafter,insertbefore 这4个和前面4个类似，只是操作类型不一致,例如price.appendto($('.vacation')))
$(document).ready(function(){
    var price=$('<p>From $399.99</p>');
    $('.vacation').append(price);
    $('button').remove();
}
);


10、只响应当前点击按钮事件


$(document).ready(function(){
    $('button').on('click',function(){
        var price=$('<p>From $399.99</p>');
        $(this).after(price);
        $(this).remove();
    });
}
);


但是当按钮本身在div里面，after会将价格也放在div里面。如果希望点击后的价格和div同级（即div外面，可以用$(this).parent('.vacation'),但是parent会找所有父亲为vacation的，所以改成用 closest


$(document).ready(function(){
    $('button').on('click',function(){
        var price=$('<p>From $399.99</p>');
        $(this).closest('.vacation').append(price);
        $(this).remove();
    });
}
);


11、获取价格属性


$(document).ready(function(){
    $('button').on('click',function(){
        var vacation = $(this).closest('.vacation');
        var amount = vacation.data('price');
        var price=$('<p>From '+amount+'</p>');
        vacation.append(price);
        $(this).remove();
    });
}
);


12、对vacation内部的按钮点击生效.


$('.vacation button').on('click',function(){}) 等价于 $('.vacation').on('click',button,function(){})


$(document).ready(function(){
    $('.vacation button').on('click',function(){
        var vacation = $(this).closest('.vacation');
        var amount = vacation.data('price');
        var price=$('<p>From '+amount+'</p>');
        vacation.append(price);
        $(this).remove();
    });
}
);


13、点击之后，高亮显示(addclass,removeclass,toggleclass)


$('#filters').on('click','.onsale-filter',function(){
    $('.highlighted').removeclass('highlighted');
    $('.vacation').filter('.onsale').addclass('highlighted');
});




14、点击之后，展开ul中的信息。做法是 ul默认是hidden，点击之后，显示即可(slidedown 展开，slideup 收起，toggle（）展开收起)


$(document).ready(function(){
    $('.confirmmation').on('click','button',function(){
        $(this).closest('.confirmation').find('.ticket').slidedown();
    })
}
);


15、鼠标划过事件(click,focusin,mousedown,mouseover,mousemove,mouseenter,dbclick,focusout,mouseup,mouseout,mouseleave)


function showTicket(){
    $(this).closest('.confirmation').find('.ticket').slidedown();
}
$(document).ready(function(){
    $('.confirmmation').on('click','button',showTicket);
    $('.confirmmation').on('mouseover','h3',showTicket);
}
);


16、键盘事件(keypress,keydown,keyup) 表单事件(blur,focus,select,submit,change)


$(document).ready(function(){
    $('.vacation').on('keyup','.quantity',function(){
        var price = +$(this).closest('.vacation').data('price');
        var quantity = +$(this).val();
        $('#total').text(price*quantity);
    })
}
);
{
17、冒泡行为


$(document).ready(function(){
    $('.vacation').on('click','.expand',function(event){
        event.preventdefault();
        $(this).closest('.vacation').find('.comments').fadetoggle();
    })
}
);


18、动画




$(document).ready(function(){
    $('#vacations').on('click','.vacation',function(){
        $(this).toggleclass('hightlighted');
        if($(this).hasclass('hightlighted')){
            $(this).animate({'top':'-10px'},'fast');
        }
        else{
            $(this).animate({'top':'0px'},'fast');
        }
    });
}
);