jQuery内容详解

1、什么是jQuery

        jQuery​ 是一个快速、小巧、功能丰富的 JavaScript 库，它让 ​HTML 文档遍历和操作、事件处理、动画以及 Ajax​ 等操作变得更加 ​简单。

        简单理解 ：jQuery 让用 JavaScript 操作网页（DOM）、处理事件、做动画、发起网络请求等变得更简单、更兼容

2、 为什么要用 jQuery

        原生 JavaScript 在不同浏览器中的行为差异较大（比如 IE 和 Chrome 的 DOM 操作方法不同），开发者需要写很多兼容性代码才能让网页正常运行。

        而 ​jQuery 做了一层封装，让你用一套统一的 API，就能在所有主流浏览器中实现相同的操作，不用关心底层兼容性问题。

3、 jQuery 和 原生 JavaScript 的对比

        注意：现在前端开发中，开发者通常不再依赖 jQuery，而是使用框架自带的能力（比如使用 Vue、React、Angular）。但在老项目、简单页面、快速开发中，jQuery 仍然非常实用

4、jQuery 简单语法示例

        1、引入jQuery

                 CDN 在线引入：百度搜素CDN jQuery即可

<!-- 引入新版本的 jQuery -->
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>

                在某些无法使用 在线依赖时也可以将js文件下载下来，引入项目

<script src="js/jquery-3.7.1.js"></script>

补充：

         jQuery官方地址：jquery.com

        jQuery api中文在线手册： https://www.sunpop.cn/documentation/jq/index.html

        2、选择元素

               在 jQuery 使用 $() 函数来选择 DOM 元素，类似于 CSS 选择器；CSS中的选择器jQuery都适用

$('#myId')        // 选择 id="myId" 的元素
$('.myClass')     // 选择所有 class="myClass" 的元素
$('div')          // 选择所有 <div> 元素
$('ul li')        // 选择 <ul> 下的所有 <li>

               对比原生 JS写法：

        3、操作DOM---内容修改

$('#myDiv').html('<p>这是新的 HTML 内容</p>');  // 设置 HTML
$('#myDiv').text('这是纯文本内容');           // 设置文本内容


$('#myDiv').html();  // 获取HTML内容
$('#myDiv').text();  //获取文本内容

                原生JavaScript写法：

document.getElementById('myDiv').innerHTML = '<p>这是新的 HTML 内容</p>';
document.getElementById('myDiv').textContent = '这是纯文本内容';

        4、操作DOM---元素插入

                在某个元素之前插入新元素

<div id="container">
    <ul id="list">
        <li class="item">测试1</li>
        <li class="item">测试2</li>
    </ul>
</div>

<script>
    // 在 class="item" 的第一个元素之前插入一个新元素
    $('.item').first().before('<li class="item">新项目</li>');
</script>

                结果：

                原生JavaScript写法：

    // 获取元素
    const list = document.getElementById('list');
    const items = document.querySelectorAll('.item');    

    // 创建新元素
    const newItem = document.createElement('li');
    newItem.className = 'item';
    newItem.textContent = '新项目';


    // 插入元素到指定位置
    const referenceItem = items[0];  //第一个元素
    list.insertBefore(newItem, referenceItem); // 在referenceItem前插入

        5、操作DOM---元素隐藏 

                  本质：display:none

$('.item').hide();  //隐藏
$('.item').show();  //显示

$('.item').toggle();  //切换显示/隐藏

        6、绑定点击事件

                jQuery写法

$('#myButton').click(function() {
  alert('按钮被点击了！');
});

                原生JavaScript写法：

document.getElementById('myButton').addEventListener('click', function() {
  alert('按钮被点击了！');
});

        7、​Ajax 请求

$.get('http://localhost:8080/main', function(response) {
  console.log('服务器返回：', response);
});


$.post('http://localhost:8080/main', function(response) {
  console.log('服务器返回：', response);
});

                或者：

$.ajax({
  url: 'http://localhost:8080/main',
  method: 'GET',
  success: function(data) {
    console.log(data);
  }
});


$.ajax({
  url: 'http://localhost:8080/main',
  method: 'POST',
  success: function(data) {
    console.log(data);
  }
});