Try jQuery官方教学视频练习解答

最新推荐文章于 2023-10-07 01:47:52 发布

ibaicai2

最新推荐文章于 2023-10-07 01:47:52 发布

阅读量1.1k

点赞数

分类专栏： jQuery 文章标签： jQuery 练习解答

本文链接：https://blog.csdn.net/ibaicai2/article/details/10011353

版权

jQuery 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

早就在伯乐在线看到j3月底 jQuery 官方联合 code school 推出了一个学习资源 TryjQuery，其中包括14个视频、71个交互式挑战。

最近看完了14集的教程，完成了所有练习，现在把练习的一些参考解答贴出来，希望可以给有需要的同学一些参考。

由于一开始没有想到要发到博客，做完后才有这个想法，所以自己又重做了一遍，鉴于时间关系，Lever1、Lever2就没有回去做了。

PS：1.这个是我在练习中参考的一个博客。

2.当自己没有思路时，可以看看直接点下一题，会有惊喜哦

3.开始你的jQuery之旅吧

3.3
var message = $("<span>Call 1-555-jquery-air to book this tour</span>");

3.4
var message = $("<span>Call 1-555-jquery-air to book this tour</span>");
$("button").before(message);

3.5
var message = $("<span>Call 1-555-jquery-air to book this tour</span>");
$(".usa").append(message);

3.6
var message = $("<span>Call 1-555-jquery-air to book this tour</span>");
$(".usa").append(message);
$("button").remove();

3.8
$("button").on("click", function(){
var message = $("<span>Call 1-555-jquery-air to book this tour</span>");
$(".usa").append(message);
$("button").remove();
});

3.9
$(".tour").on("click", function(){
  var message = $("<span>Call 1-555-jquery-air to book this tour</span>");
  $(".usa").append(message);
  $("button").remove();
});

3.10
$(document).ready(function(){
$("button").on("click", function(){
  var message = $("<span>Call 1-555-jquery-air to book this tour</span>");
  $(".usa").append(message);
  $("button").remove();
});
});

3.12
$(document).ready(function(){
  $("button").on("click", function(){
    var message = $("<span>Call 1-555-jquery-air to book this tour</span>");
    $(this).parent().append(message);
    $(this).remove();
  });
});

3.13
$(document).ready(function(){
  $("button").on("click", function(){
    var message = $("<span>Call 1-555-jquery-air to book this tour</span>");
    $(this).after(message);
    $(this).remove();
  });
});

3.14
$(document).ready(function(){
  $('button').on('click', function(){
    var message = $("<span>Call 1-555-jquery-air to book this tour</span>");
    $(this).closest("li").append(message);
    $(this).remove();
  });
});


3.15
$(document).ready(function(){
    $("li.tour").on("click", function(){
        var message = $("<span>Call 1-555-jquery-air to book this tour</span>");
        $(this).closest(".tour").append(message);
        $(this).find("button").remove();
    });
});


3.17
$(document).ready(function(){
    $('button').on('click', function(){
        var discount = $(this).closest('.tour').data('discount');
        var message = $("<span>Call 1-555-jquery-air for a $" + discount + "</span>");
        $(this).closest('.tour').append(message);
        $(this).remove();
    });
});


3.18
$(document).ready(function(){
    $("button").on("click", function(){
        var tour = $(this).closest(".tour");
        var discount = tour.data("discount");
        var message = $("<span>Call 1-555-jquery-air for a $" +discount+ "</span>");
        $(this).closest(".tour").append(message);
        $(this).remove();
    });
});


3.19
$(document).ready(function(){
    $("button").on("click", function(){
        var tour = $(this).closest(".tour");
        var discount = tour.data("discount");
        var message = $("<span>Call 1-555-jquery-air for a $" + discount + "</span>");
        tour.append(message);
        $(this).remove();
    });
})


3.20
//如果是以下代码，会给出以下提示
//This may work for existing tour elements, but not if new tours are added.
//It's more reliable to use the selector argument of the on() handler, do that instead.
$(document).ready(function(){
    $(".tour button").on("click", function(){
        var tour = $(this).closest(".tour");
        var discount = tour.data("discount");
        var message = $("<span>Call 1-555-jquery-air for a $" + discount + "</span>");
        tour.append(message);
        $(this).remove();
    });
});

//采用事件委托是一个更好的办法
// here is the better and safer answer
$(document).ready(function(){
    $(".tour").on("click", "button" , function(){
        var tour = $(this).closest(".tour");
        var discount = tour.data("discount");
        var message = $("<span>Call 1-555-jquery-air for a $" + discount + "</span>");
        tour.append(message);
        $(this).remove();
    });
});


3.21
$(document).ready(function(){
    $("button.on-sale").on("click", function(){
    });
});
//如果采用上面的又会出现坑爹的"Sorry, Try Agagin":This may work for existing tour elements, but not if new tours are added.
//It's more reliable to use the selector argument of the on() handler, do that instead.
//从上面的提示我们可以看出，我们的代码不能只是满足于能运行，我们还应该尽可能发现代码可能存在的bug，按他的说法，代码应该"more reliable"，
//好吧，这道题我是看了3.22后直接copy上来的

//here is more reliable
$(document).ready(function(){
    //Create the click handler here
    $("#filters").on("click", ".on-sale", function(){

    });
});

3.22
//按照题意我们可以很容易的写出
$(document).ready(function(){
    $("#filters").on("click", ".on-sale", function(){
        $(".tour").filter(".on-sale").addClass("highlight");
    });
});

3.23
$(document).ready(function(){
    $('#filters').on('click', '.on-sale', function(){
        $('.highlight').removeClass('highlight');
        $('.tour').filter('.on-sale').addClass('highlight');
    });

    $('#filters').on('click', '.featured', function(){
        $('.highlight').removeClass('highlight');
        $('.tour').filter('.featured').addClass('highlight');
    });
});

4.3
$(document).ready(function(){
    alert($("img").length);
});

4.4
$(document).ready(function() {
  $("#tour").on("click", "button", function(){
  });
});

4.5
$(document).ready(function() { 
  $("#tour").on("click", "button", function() {
    $(".photos").slideDown("slow");
  });
});


4.6
$(document).ready(function() { 
  $("#tour").on("click", "button", function() { 
    $(".photos").slideToggle("slow");
  });
});

4.7
$(document).ready(function() {
  $("#tour").on("click", "button", function() { 
    $(".photos").slideToggle();
  });
});

4.8
$(document).ready(function() {
  $("#tour").on("click", "button", function() { 
    $(".photos").slideToggle();
  });
  $(".photos").on("mouseenter", "li", function(){
  });
});

4.9
$(document).ready(function() { 
  $("#tour").on("click", "button", function() { 
    $(".photos").slideToggle();
  });
  $(".photos").on("mouseenter", "li", function() {
    $(this).find("span").slideToggle("slow");
  });
});

4.10
$(document).ready(function() { 
  $("#tour").on("click", "button", function() { 
    $(".photos").slideToggle();
  });
  $(".photos").on("mouseenter", "li", function() {
    $(this).find("span").slideToggle();
  });
  $(".photos").on("mouseleave", "li", function() {
    $(this).find("span").slideToggle();
  });
});

4.11
$(document).ready(function() { 
  $("#tour").on("click", "button", function() { 
    $(".photos").slideToggle();
  });
  function showPhotos(){
    $(this).find("span").slideToggle();
  }
  $(".photos").on("mouseenter", "li", showPhotos)
  						.on("mouseleave", "li", showPhotos);
});


4.13
$(document).ready(function() {
  $("#nights").on("keyup", function(){
  });
});


4.14
$(document).ready(function() {
  $("#nights").on("keyup", function() {
    var value = $(this).val();
    $("#nights-count").text(value);
  });
});

4.15
//一开始不知道要用到data()函数，直接是$(this).closest(".tour").data-daily-price)，结果又是蛋疼的"try again"

$(document).ready(function() {
  $("#nights").on("keyup", function() {
    $("#total").text($(this).closest(".tour").data("daily-price") * $(this).val());
    $("#nights-count").text($(this).val());
  });
});

4.16
$(document).ready(function() {
  $("#nights").on("keyup", function() {
    var nights = +$(this).val();
    var dailyPrice = +$(this).closest(".tour").data("daily-price");
    $("#total").text(nights * dailyPrice);
    $("#nights-count").text($(this).val());
  });
  
  $("nights").on("focus", function(){
    $(this).val("7");
  });
});

4.18
$(document).ready(function() {
  $(".see-photos").on("click",function(){
  });
});

4.19
$(document).ready(function() {
  $(".see-photos").on("click", function() {
    $(this).closest(".tour").find(".photos").slideToggle();
  });
});

4.20
$(document).ready(function() {
  $(".see-photos").on("click", function(event) {
    $(this).closest(".tour").find(".photos").slideToggle();
    event.stopPropagation();
  });
  $(".tour").on("click", function() {
    alert("This should not be called");
  });
});

4.21
$(document).ready(function() {
  $(".see-photos").on("click", function(event) {
    event.stopPropagation();
    $(this).closest(".tour").find(".photos").slideToggle();
    event.preventDefault();
  });
  $(".tour").on("click", function() {
    alert("This should not be called");
  });
});

5.3
$(document).ready(function() {
  $(".tour").on("mouseenter", function() {
    $(this).css({"background-color": "#252b30"});
  });
});


5.4
$(document).ready(function() {
  $(".tour").on("mouseenter", function() {
    $(this).css({"background-color":"#252b30", "font-weight":"bold"});
  });
});

5.5
$(document).ready(function() {
  $(".tour").on("mouseenter", function() {
    $(this).css({"background-color": "#252b30", "font-weight": "bold"});
    $(".photos").show();
  });
});

5.6
$(document).ready(function() {
  $(".tour").on("mouseover", function() {
    $(this).addClass("highlight");
  });
  
  $(".tour").on("mouseleave", function() {
    $(this).removeClass("highlight");
  });
});


5.8
$(document).ready(function() {
  $('.tour').on('mouseenter', function() {
    $(this).addClass('highlight');
    $(this).find(".per-night").animate({opacity: 1});
  });
  $('.tour').on('mouseleave', function() {
    $(this).removeClass('highlight');
  });
});

5.9
$(document).ready(function() {
  $(".tour").on("mouseenter", function() {
    $(this).addClass("highlight");
    $(this).find(".per-night").animate({"opacity": "1" , "top": "-14px"});
  });
  $(".tour").on("mouseleave", function() {
    $(this).removeClass("highlight");
  });
});

5.10
$(document).ready(function() {
  $(".tour").on("mouseenter", function() {
    $(this).addClass("highlight");
    $(this).find(".per-night").animate({"top": "-14px","opacity": "1"}, "fast");
  });
  $(".tour").on("mouseleave", function() {
    $(this).removeClass("highlight");
  });
});

5.11
$(document).ready(function() {
  $(".tour").on("mouseenter", function() {
    $(this).addClass("highlight");
    $(this).find(".per-night").animate({"top": "-14px","opacity": "1"}, "fast");
  });
  $(".tour").on("mouseleave", function() {
    $(this).removeClass("highlight");
    $(this).find(".per-night").animate({"top": "0px","opacity": "0"}, "fast");
  });
});