前端主流框架-JQuery

JQuery是一种快速、简洁的JavaScript库，它简化了HTML文档与JavaScript代码之间的操作和事件处理。它也包含了一些有用的工具，比如AJAX和动画。

以下是一些使用JQuery的常见示例：

1. 选择元素：

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

在上面的例子中，当用户点击段落（<p>元素）时，JQuery的$(this).hide()方法会隐藏被点击的元素。

2. 创建动画：

$(document).ready(function(){
  $("button").click(function(){
    $("p").animate({height: '100px', width: '200px'});
  });
});

在这个例子中，当用户点击按钮时，JQuery的$("p").animate()方法会使段落的高度和宽度变为100px和200px。

3. AJAX请求：

$(document).ready(function(){
  $("button").click(function(){
    $.ajax({url: "demo_test.txt", success: function(result){
      $("div").html(result);
    }});
  });
});

在这个例子中，当用户点击按钮时，JQuery的$.ajax()方法会向服务器请求文本文件，并在请求成功后将返回的内容放入<div>元素中。

4. 事件监听：

$(document).ready(function(){
  $("#myId").on("click", function(){
    alert("Element clicked!");
  });
});

在这个例子中，当id为"myId"的元素被点击时，JQuery的.on()方法会触发一个警告框。

5. 属性操作：

$(document).ready(function(){
  $("#myId").attr("href", "http://www.google.com");
});

在这个例子中，JQuery的.attr()方法会将id为"myId"的元素的href属性设置为"http://www.google.com"。

6. CSS操作：

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

在这个例子中，JQuery的.css()方法会将所有<p>元素的背景颜色设置为黄色。

注意：虽然JQuery仍然是一种广泛使用的工具，但它并没有被包含在所有现代浏览器中。因此，在使用JQuery之前，你可能需要先引入一个JQuery库。此外，随着JavaScript和前端框架（如React, Vue, Angular）的发展，JQuery的使用已经逐渐减少。