jQuery.js教程从哪开始学？

jQuery 核心语法：选择器与操作

这是 jQuery 的基石。

A. 选择器

jQuery 的选择器几乎和 CSS 选择器一模一样。

B. DOM 操作

选择到元素后,就可以对它们进行各种操作。

1. 获取和设置内容

   • .text() / .text('new text')：获取/设置元素的文本内容（会忽略 HTML 标签）。
   • .html() / .html('<strong>new html</strong>')：获取/设置元素的 HTML 内容。
   • .val() / .val('new value')：获取/设置表单元素的值。

2. 获取和设置属性

   • .attr('href')：获取元素的 href 属性。
   • .attr('href', 'https://new-url.com')：设置元素的 href 属性。
   • .removeAttr('href')：移除元素的 href 属性。

3. CSS 操作

   • .css('color')：获取元素的 color 样式。
   • .css('color', 'blue')：设置元素的 color 样式。
   • .addClass('my-class')：添加一个或多个类名。
   • .removeClass('my-class')：移除一个或多个类名。
   • .toggleClass('my-class')：如果存在则移除，不存在则添加。

4. 元素遍历和修改

   • .each(function(index, element) { ... })：遍历一个 jQuery 对象，为每个元素执行一个函数。
   • .append(content)：在被选元素的结尾插入内容。
   • .prepend(content)：在被选元素的开头插入内容。
   • .after(content)：在被选元素之后插入内容。
   • .before(content)：在被选元素之前插入内容。
   • .remove()：删除被选元素（及其子元素）。
   • .empty()：删除被选元素的子元素。

jQuery 事件处理

jQuery 提供了一系列简单的事件方法。

示例：

// 使用 .on() 绑定多个事件
$('#myBox').on({
    'click': function() {
        $(this).css('background-color', 'lightblue');
    },
    'mouseenter': function() {
        $(this).text('鼠标进来了');
    },
    'mouseleave': function() {
        $(this).text('鼠标离开了');
    }
});

jQuery 动画效果

让页面动起来,提升用户体验。

示例：

// 点击按钮时，执行一个自定义动画
$('#animateBtn').click(function() {
    $('#myBox').animate({
        width: '500px',    // 宽度变为 500px
        height: '300px',   // 高度变为 300px
        opacity: 0.5       // 透明度变为 0.5
    }, 1000, function() {
        // 动画完成后执行的回调函数
        alert('动画完成！');
    });
});

jQuery AJAX

jQuery 的 AJAX 功能让前后端数据交互变得非常简单。

最核心的方法是 $.ajax()，但更常用的是它的简化版本。

$.get() 和 $.post()

// $.get() 用于 GET 请求
$('#getDataBtn').click(function() {
    $.get('https://jsonplaceholder.typicode.com/posts/1', function(data) {
        // data 是服务器返回的 JSON 数据
        $('#result').html('<h3>' + data.title + '</h3><p>' + data.body + '</p>');
    });
});
// $.post() 用于 POST 请求
$('#postDataBtn').click(function() {
    $.post('https://jsonplaceholder.typicode.com/posts', {
        title: 'foo',
        body: 'bar',
        userId: 1
    }, function(data) {
        $('#result').text('数据已发送，服务器返回 ID: ' + data.id);
    });
});

$.ajax() - 强大的核心方法

$.ajax({
    url: 'https://jsonplaceholder.typicode.com/posts/1',
    method: 'GET', // 或 'POST'
    dataType: 'json', // 预期服务器返回的数据类型
    success: function(data) {
        console.log('请求成功:', data);
    },
    error: function(xhr, status, error) {
        console.error('请求失败:', error);
    },
    complete: function(xhr, status) {
        console.log('请求完成 (无论成功或失败)');
    }
});

jQuery 插件

jQuery 的生态系统非常强大，有海量的第三方插件，可以轻松实现复杂功能，如轮播图、日历、表单验证等。

使用插件的步骤：

1. 引入插件文件：在 jQuery 库之后引入插件的 JS 和 CSS 文件。
2. 调用插件方法：用 jQuery 选择器选中元素，然后调用插件提供的方法。

示例：一个简单的模态框插件

<!-- 引入 jQuery -->
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<!-- 引入一个假设的模态框插件 -->
<script src="path/to/simple-modal.js"></script>
<button id="openModal">打开模态框</button>
<div id="myModal" style="display:none;">
    <h2>这是一个模态框</h2>
    <p>内容...</p>
    <button id="closeModal">关闭</button>
</div>
<script>
    // 调用插件方法
    $('#myModal').simpleModal();
    $('#openModal').click(function() {
        $('#myModal').open();
    });
    $('#closeModal').click(function() {
        $('#myModal').close();
    });
</script>

最佳实践与注意事项

1. 始终使用 $(document).ready()：确保 DOM 加载完成后再执行脚本。
2. 使用语义化的选择器：尽量使用 id 和 class，避免使用通用的标签名选择器（如 $('div')），以提高性能。
3. 缓存 jQuery 对象：如果多次操作同一个元素，先把它存到一个变量里，避免重复查询 DOM。
   • 不推荐：$('#myDiv').css('color', 'red'); $('#myDiv').addClass('active');
   • 推荐：var $myDiv = $('#myDiv'); $myDiv.css('color', 'red'); $myDiv.addClass('active');
4. 使用事件委托：对于动态添加的元素，使用 .on() 的事件委托形式，可以避免重复绑定事件。
   • 场景：一个列表，里面的项目是动态加载的。
   • 不推荐：$('.item').click(...); （动态添加的 .item 不会响应）
   • 推荐：$('#list-container').on('click', '.item', function() { ... }); （在已存在的父容器上监听）
5. 版本选择：对于新项目，尽量使用最新稳定版，对于需要兼容旧浏览器（如 IE）的项目，选择支持 IE 的版本（如 1.x, 2.x）。
6. 不要滥用 jQuery：对于简单的操作，原生 JavaScript 可能更快、更轻量。

学习资源推荐

1. 官方文档：https://api.jquery.com/ - 最权威、最全面的参考资料。
2. jQuery 教程 - W3Schools：https://www.w3schools.com/jquery/ - 简单易懂，适合初学者。
3. jQuery 教程 - 菜鸟教程：https://www.runoob.com/jquery/jquery-tutorial.html - 提供大量实例和在线演示。
4. jQuery UI：https://jqueryui.com/ - 官方提供的 UI 组件库，包含丰富的交互组件和主题。
5. CodePen / JSFiddle：在这些平台上可以轻松创建和分享 jQuery 代码片段，是学习和实验的好地方。

这份教程涵盖了 jQuery 的核心知识，通过学习和实践这些内容，你将能够熟练地使用 jQuery 来构建动态、交互性强的网页，祝你学习愉快！