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);
    });
});