jQuery页面交互

//1.效果:点击按钮时候会显示价格
$(document).ready(function() {
$("button").on('click', function() {
var price=$("<p>$99.99</p>");
$(".vacation").append(price);
$("button").remove();
});
});

//2.只对一个按钮对象起作用可用this
$(document).ready(function() {
$("button").on('click', function(event) {
var price=$("<p>$99.99</p>");
$(this).after(price);
$(this).remove();
});
});

//3.closest()为某类查找父节点时只会查找0或1，而parents()会查找某类的所有父节点
$(this).parent().parent().append();
$(this).closest('.vacation').append(price);

$(document).ready(function() {
$("button").on('click', function(event) {
var price=$("<p>$99.99</p>");
$(this).closest('.vacation').append(price); //这样写的好处是，即使DOM结果改变，输出结果不变
$(this).remove();
});
});

$(document).ready(function() {
$("button").on('click', function(event) {
var vacation=$(this).closest('price');
var amount=vacation.data('price');
var price=$('<p>$'+amount+'</p>');//可以直接传参数进入
vacation.append(price);
$(this).remove();
});
});

$('.vacation').on('click', 'button', function() {});//事件委托，只对vacation里面的button按钮起作用
$('.vacation button').on('click', function() {});//两者效果一样，但是前者效果更好

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

function showTicket () {
$(this).closest('.confirmation').find('.ticket').slideDown();
}

$(document).ready(function() {
$('.confirmation').on('click', 'button',showTicket);//可以直接写方法名
$('.confirmation').on('click', 'h3',showTicket);
});

$(document).ready(function() {
$('.vacation').on('keyup', '.quantity', function() {
var price=+$(this).closest('.vacation').data('price'); //jquery将字符串转化为数字在前面加‘+’
var quantity=+$(this).val();
$('#total').text(price*quantity);
});
});