JS第八天 jQuery

jQuery是一个快速、简洁的JavaScript库，方便了HTML文档 traversing, event handling, animation 和Ajax interactions等一系列的操作，使得JavaScript的编写更加简便。

以下是一些使用jQuery的基本示例：

1. 元素的显示与隐藏：

$(document).ready(function(){
  $("#hide").click(function(){
    $("p").hide();
  });
  $("#show").click(function(){
    $("p").show();
  });
});

2. 动画：

$(document).ready(function(){
  $("#flip").click(function(){
    $("#panel").slideToggle();
  });
});

3. 事件绑定：

$(document).ready(function(){
  $("p").click(function(){
    $(this).css("background-color", "yellow");
  });
});

4. AJAX请求：

$(document).ready(function(){
  $("#b01").click(function(){
    href = $("#test").attr("action");
    data = $("#test").serialize();
    $.ajax({
      type: "POST",
      url: href,
      data: data,
      success: function(data){
        $("#div1").html(data);
      }
    });
  });
});

5. 链式调用：

$(document).ready(function(){
  $("#btn1").click(function(){
    $("#p1").css("color", "red").slideUp(2000).slideDown(2000);
  });
});

6. 对所有匹配元素进行迭代：

$(document).ready(function(){
  $("button").click(function(){
    $("p").each(function(i){
      $(this).text("这是第 " + (i + 1) + " 个段落.");
    });
  });
});

7. 事件冒泡：

$(document).ready(function(){
  $("#div1").click(function(){
    alert("这个事件将在每个子元素的点击事件后触发。");
  });
});

8. 获取和设置HTML内容：

$(document).ready(function(){
  $("#btn1").click(function(){
    $("#test1").html();
  });
  $("#btn2").click(function(){
    $("#test2").html("Hello World!");
  });
});

9. 获取和设置文本内容：

$(document).ready(function(){
  $("#btn1").click(function(){
    $("#test1").text();
  });
  $("#btn2").click(function(){
    $("#test2").text("Hello World!");
  });
});

10. 获取和设置属性值：

$(document).ready(function(){
  $("#btn1").click(function(){
    $("#w3s").attr("href");
  });
  $("#btn2").click(function(){
    $("#w3s").attr("href", "http://www.w3school.com.cn/jquery");
  });