jQuery超详细总结

jQuery是一个快速、简洁的JavaScript框架，它使得HTML文档的遍历和操作、事件处理、动画和Ajax交互等变得更加简单，并且它对不同浏览器的兼容性好，使用广泛。

1. 选择元素

jQuery中用于选择HTML元素的基本语法是：$(selector)。

$("p") //选取所有的p元素
$("p.intro") //选取所有class为intro的p元素
$("p#demo") //选取id为demo的p元素

2. 事件

jQuery中提供了许多事件处理方法，例如：click()，hover()，focus()等。

$("p").click(function(){
  // 动作
});
 
$("p").hover(function(){
  // 鼠标进入
}, function(){
  // 鼠标离开
});

3. 效果

jQuery提供了许多内置的动画方法，例如：hide()，show()，fadeIn()，fadeOut()，slideDown()，slideUp()等。

$("p").hide(); //隐藏p元素
$("p").show(); //显示p元素
$("p").fadeIn(); //淡入p元素
$("p").fadeOut(); //淡出p元素
$("p").slideDown(); //下滑p元素
$("p").slideUp(); //上滑p元素

4. AJAX

jQuery中的$.ajax()，$.get()，$.post()方法可以用于AJAX请求。

$.ajax({
  url: "test.html",
  context: document.body
}).done(function() {
  $(this).addClass("done");
});
 
$.get("test.html", function(data){
  // 当请求成功后要执行的代码
  alert("Data Loaded: " + data);
});
 
$.post("test.php", { name: "John", time: "2pm" })
  .done(function(data){
    alert("Data Loaded: " + data);
});

5. 链式调用

jQuery允许我们将多个函数连接在一起，每个函数都是对前一个返回的jQuery对象进行操作。

$("p").hide().slideUp(300); // 先隐藏，然后上滑

6. 事件委托

jQuery中的.on()方法可以用于事件委托，即将事件绑定到未来的元素上。

$("body").on("click", "p", function(){
  // 动作
});

7. 使用jQuery插件

jQuery有大量的插件，例如，jQuery UI，jQuery Mobile，DataTables等，可以用于增强网页功能。

$("#myDiv").draggable(); // 使div可拖动
$("#myTable").dataTable(); // 为表格添加排序和搜索功能

8. 使用jQuery创建动态内容

jQuery可以用于动态创建HTML元素。

$("<p></p>").text("Hello, world!").appendTo("body"); // 创建并添加到body

9. 处理表单

jQuery提供了一些方法来处理表单，例如：.val()，.serialize()等。

$("input").val(); // 获取input的值
$("form").serialize(); // 序列化表单

10. 更多

jQuery还有很多其他的功能，例如：attr()，css()，each()等，这里只列出了一部分常用的功能。