js代码的jquery等价写法

在当今的前端开发领域，JavaScript（JS）和jQuery都是非常重要的工具，虽然现在原生JS的使用越来越广泛，但jQuery依然以其简洁的语法和丰富的功能在某些场景下占据一席之地，对于那些熟悉原生JS的开发者来说，了解如何将JS代码转换为jQuery等价写法是非常有价值的，下面，我将详细介绍一些常见的JS代码及其对应的jQuery等价写法，帮助你在需要的时候能够快速转换。

选择元素

在原生JS中，我们通常使用document.getElementById,document.getElementsByTagName,document.getElementsByClassName,document.querySelector和document.querySelectorAll来选择DOM元素，而在jQuery中，我们使用$符号来选择元素，这个符号是jQuery的别名。

原生JS:

  var elementById = document.getElementById('myId');
  var elementsByTagName = document.getElementsByTagName('p');
  var elementsByClassName = document.getElementsByClassName('myClass');
  var elementByQuery = document.querySelector('.myClass');
  var elementsByQuery = document.querySelectorAll('.myClass');

jQuery:

  var elementById = $('#myId');
  var elementsByTagName = $('p');
  var elementsByClassName = $('.myClass');
  var elementByQuery = $('.myClass');
  var elementsByQuery = $('.myClass');

事件绑定

在原生JS中，我们使用addEventListener来绑定事件，而在jQuery中，我们使用.on()方法。

原生JS:

  elementById.addEventListener('click', function() {
    console.log('Clicked!');
  });

jQuery:

  $('#myId').on('click', function() {
    console.log('Clicked!');
  });

在原生JS中，我们使用textContent或innerHTML来修改元素的内容，在jQuery中，我们使用.text()和.html()方法。

原生JS:

  elementById.textContent = 'New text';
  elementById.innerHTML = '<strong>New HTML</strong>';

jQuery:

  $('#myId').text('New text');
  $('#myId').html('<strong>New HTML</strong>');

属性操作

在原生JS中，我们使用getAttribute和setAttribute来获取和设置属性，在jQuery中，我们使用.attr()方法。

原生JS:

  var attributeValue = elementById.getAttribute('data-id');
  elementById.setAttribute('data-id', '123');

jQuery:

  var attributeValue = $('#myId').attr('data-id');
  $('#myId').attr('data-id', '123');

CSS操作

在原生JS中，我们使用style属性来操作元素的CSS，在jQuery中，我们使用.css()方法。

原生JS:

  elementById.style.color = 'red';

jQuery:

  $('#myId').css('color', 'red');

AJAX请求

在原生JS中，我们使用XMLHttpRequest或fetch API来发送AJAX请求，在jQuery中，我们使用$.ajax(),$.get(),$.post()等方法。

原生JS (使用 fetch):

  fetch('https://api.example.com/data')
    .then(response => response.json())
    .then(data => console.log(data));

jQuery:

  $.get('https://api.example.com/data', function(data) {
    console.log(data);
  });

动画效果

在原生JS中，我们可能需要手动操作元素的属性来创建动画效果，在jQuery中，我们使用.animate()方法。

原生JS:

  elementById.style.transition = 'all 1s';
  elementById.style.left = '100px';

jQuery:

  $('#myId').animate({ left: '100px' }, 1000);

通过这些示例，我们可以看到jQuery提供了一种更为简洁和直观的方式来处理DOM操作、事件处理、AJAX请求等常见任务，虽然jQuery在现代开发中可能不如以前那么流行，但它的这些便捷方法仍然在某些情况下非常有用，了解这些等价写法可以帮助你在需要的时候快速切换使用jQuery，或者在维护旧代码时更加得心应手。