Jquery到纯javascript -简单的函数(点击并切换)

JQuery是一个流行的JavaScript库，它简化了JavaScript编程的复杂性，并提供了许多方便的功能和方法。纯JavaScript是指使用原生JavaScript语言进行编程，不依赖于任何外部库或框架。

JQuery相对于纯JavaScript的优势在于：

简化DOM操作：JQuery提供了简洁的语法和方法，使得对HTML元素的选择、操作和遍历更加方便和高效。
事件处理：JQuery提供了简单易用的事件处理机制，可以轻松地绑定和触发各种事件，如点击、鼠标移动等。
动画效果：JQuery内置了丰富的动画效果，可以通过简单的方法调用实现元素的淡入淡出、滑动、渐变等动画效果。
AJAX支持：JQuery提供了强大的AJAX功能，可以通过简单的方法实现异步数据交互，如发送HTTP请求、处理响应等。
跨浏览器兼容性：JQuery封装了许多浏览器兼容性的细节，使得开发者可以更加轻松地编写跨浏览器兼容的代码。

纯JavaScript相对于JQuery的优势在于：

性能：纯JavaScript代码执行效率更高，不需要加载额外的库文件，可以减少页面加载时间。
学习曲线：纯JavaScript是基础的编程语言，学习和理解JavaScript语法和特性对于开发者来说是必要的。
自定义功能：纯JavaScript可以根据具体需求自由编写代码，实现更加个性化和复杂的功能。

对于这个简单的函数（点击并切换），可以使用JQuery或纯JavaScript来实现。

使用JQuery实现：

$(document).ready(function(){
  $("#toggleButton").click(function(){
    $("#content").toggle();
  });
});

使用纯JavaScript实现：

document.addEventListener("DOMContentLoaded", function(){
  var toggleButton = document.getElementById("toggleButton");
  var content = document.getElementById("content");
  
  toggleButton.addEventListener("click", function(){
    if(content.style.display === "none"){
      content.style.display = "block";
    } else {
      content.style.display = "none";
    }
  });
});

在上述代码中，我们假设有一个按钮元素id为"toggleButton"，和一个内容元素id为"content"。点击按钮时，使用JQuery的toggle()方法或纯JavaScript的style.display属性来切换内容元素的显示和隐藏。

腾讯云相关产品和产品介绍链接地址：