jquery怎么在外置js脚本运行

要在外置JS脚本中运行jQuery，可以按照以下步骤进行：确保jQuery库已经被正确引入、在外置JS文件中使用$(document).ready()函数来保证文档加载完成、使用jQuery选择器和方法进行操作。确保正确引入jQuery库是关键，接下来将详细说明。

一、确保正确引入jQuery库

引入jQuery库的方式

要在外置JS脚本中运行jQuery，首先必须确保在HTML文件中正确引入了jQuery库。可以通过以下两种方式引入jQuery库：

1. 使用CDN链接引入jQuery

<!DOCTYPE html>

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
    <!-- 页面内容 -->
    <script src="path/to/your/script.js"></script>
</body>
</html>

2. 下载并本地引入jQuery

首先，从jQuery官网（https://jquery.com/）下载jQuery库文件，然后在HTML文件中引入：

<!DOCTYPE html>

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="path/to/jquery.min.js"></script>
</head>
<body>
    <!-- 页面内容 -->
    <script src="path/to/your/script.js"></script>
</body>
</html>

确保加载顺序正确

无论使用哪种方式引入jQuery库，都要确保jQuery库在外置JS文件之前被加载，否则会导致jQuery未定义错误。正确的加载顺序如下：

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

<script src="path/to/your/script.js"></script>

二、在外置JS文件中使用jQuery

使用$(document).ready()函数

在外置JS文件中，使用$(document).ready()函数来确保jQuery代码在文档加载完成后再运行。这是避免操作未加载完成的DOM元素的最佳实践。

$(document).ready(function() {

    // jQuery代码写在这里
    $('p').text('Hello, jQuery!');
});

例子：改变段落文本

假设有一个外置JS文件script.js，其内容如下：

$(document).ready(function() {

    $('p').text('Hello, jQuery!');
});

在HTML文件中引入这个外置JS文件：

<!DOCTYPE html>

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script src="path/to/your/script.js"></script>
</head>
<body>
    <p>Original Text</p>
</body>
</html>

当页面加载完成后，段落的文本会被改变为“Hello, jQuery!”。

三、使用jQuery选择器和方法

常用选择器

jQuery提供了多种选择器，可以方便地选择DOM元素：

1. ID选择器

$('#elementID')

2. 类选择器

$('.elementClass')

3. 标签选择器

$('div')

4. 属性选择器

$('input[name="username"]')

常用方法

1. text() 和 html() 方法

• text(): 获取或设置元素的文本内容。
• html(): 获取或设置元素的HTML内容。

$(document).ready(function() {

    // 设置文本内容
    $('#example').text('New Text');
    // 设置HTML内容
    $('#example').html('<strong>New HTML Content</strong>');
});

2. css() 方法

• css(): 获取或设置元素的样式属性。

$(document).ready(function() {

    // 设置单个样式属性
    $('#example').css('color', 'blue');
    // 设置多个样式属性
    $('#example').css({
        'font-size': '20px',
        'background-color': 'yellow'
    });
});

3. addClass() 和 removeClass() 方法

• addClass(): 向元素添加一个或多个类。
• removeClass(): 从元素中删除一个或多个类。

$(document).ready(function() {

    // 添加类
    $('#example').addClass('newClass');
    // 删除类
    $('#example').removeClass('oldClass');
});

4. append() 和 prepend() 方法

• append(): 向元素内部的末尾插入内容。
• prepend(): 向元素内部的开头插入内容。

$(document).ready(function() {

    // 在元素内部的末尾插入内容
    $('#example').append('<span>Appended Text</span>');
    // 在元素内部的开头插入内容
    $('#example').prepend('<span>Prepended Text</span>');
});

四、处理事件

常用事件方法

jQuery简化了事件处理，常用的方法包括：

1. click() 事件

$(document).ready(function() {

    $('#example').click(function() {
        alert('Element clicked!');
    });
});

2. hover() 事件

$(document).ready(function() {

    $('#example').hover(function() {
        $(this).css('color', 'red');
    }, function() {
        $(this).css('color', 'black');
    });
});

3. focus() 和 blur() 事件

$(document).ready(function() {

    $('input').focus(function() {
        $(this).css('background-color', 'yellow');
    }).blur(function() {
        $(this).css('background-color', '');
    });
});

事件委托

事件委托是指将事件绑定到父元素上，通过父元素来处理子元素的事件。这样可以提高性能，特别是在动态生成的元素上。

$(document).ready(function() {

    $('#parent').on('click', '.child', function() {
        alert('Child element clicked!');
    });
});

五、AJAX请求

jQuery的AJAX方法可以简化与服务器的通信。常用的方法包括：

$.ajax() 方法

这是一个通用的AJAX请求方法，可以处理各种类型的请求。

$(document).ready(function() {

    $.ajax({
        url: 'https://api.example.com/data',
        type: 'GET',
        dataType: 'json',
        success: function(response) {
            console.log(response);
        },
        error: function(error) {
            console.error(error);
        }
    });
});

$.get() 和 $.post() 方法

• $.get(): 发送GET请求。
• $.post(): 发送POST请求。

$(document).ready(function() {

    // 发送GET请求
    $.get('https://api.example.com/data', function(response) {
        console.log(response);
    });
    // 发送POST请求
    $.post('https://api.example.com/data', { key: 'value' }, function(response) {
        console.log(response);
    });
});

六、DOM操作

动态添加和删除元素

1. append() 和 prepend()

$(document).ready(function() {

    // 动态添加元素到容器的末尾
    $('#container').append('<div class="new-element">Appended Element</div>');
    // 动态添加元素到容器的开头
    $('#container').prepend('<div class="new-element">Prepended Element</div>');
});

2. remove() 和 empty()

• remove(): 从DOM中移除元素。
• empty(): 清空元素的内容。

$(document).ready(function() {

    // 移除元素
    $('.remove-me').remove();
    // 清空元素内容
    $('#container').empty();
});

修改属性

1. attr() 方法

• attr(): 获取或设置元素的属性。

$(document).ready(function() {

    // 设置属性
    $('img').attr('src', 'new-image.jpg');
    // 获取属性
    var imgSrc = $('img').attr('src');
    console.log(imgSrc);
});

2. prop() 方法

• prop(): 获取或设置元素的属性，更适用于处理原生属性。

$(document).ready(function() {

    // 设置属性
    $('input').prop('checked', true);
    // 获取属性
    var isChecked = $('input').prop('checked');
    console.log(isChecked);
});

七、动画效果

jQuery提供了多种动画效果，可以轻松实现元素的显示、隐藏、淡入淡出等效果。

show() 和 hide() 方法

• show(): 显示元素。
• hide(): 隐藏元素。

$(document).ready(function() {

    $('#showButton').click(function() {
        $('#element').show();
    });
    $('#hideButton').click(function() {
        $('#element').hide();
    });
});

fadeIn() 和 fadeOut() 方法

• fadeIn(): 淡入显示元素。
• fadeOut(): 淡出隐藏元素。

$(document).ready(function() {

    $('#fadeInButton').click(function() {
        $('#element').fadeIn();
    });
    $('#fadeOutButton').click(function() {
        $('#element').fadeOut();
    });
});

slideDown() 和 slideUp() 方法

• slideDown(): 向下滑动显示元素。
• slideUp(): 向上滑动隐藏元素。

$(document).ready(function() {

    $('#slideDownButton').click(function() {
        $('#element').slideDown();
    });
    $('#slideUpButton').click(function() {
        $('#element').slideUp();
    });
});

八、插件和扩展

jQuery有丰富的插件生态系统，可以通过插件扩展其功能。常用的插件包括jQuery UI、jQuery Validation等。

jQuery UI

jQuery UI是一个官方插件，提供了丰富的用户界面组件，如对话框、日期选择器、拖放等。

<!DOCTYPE html>

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
</head>
<body>
    <input type="text" id="datepicker">
    <script>
        $(document).ready(function() {
            $('#datepicker').datepicker();
        });
    </script>
</body>
</html>

jQuery Validation

jQuery Validation是一个表单验证插件，可以轻松实现表单验证。

<!DOCTYPE html>

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script src="https://cdn.jsdelivr.net/jquery.validation/1.19.3/jquery.validate.min.js"></script>
</head>
<body>
    <form id="myForm">
        <label for="email">Email:</label>
        <input type="email" name="email" id="email" required>
        <button type="submit">Submit</button>
    </form>
    <script>
        $(document).ready(function() {
            $('#myForm').validate({
                rules: {
                    email: {
                        required: true,
                        email: true
                    }
                },
                messages: {
                    email: {
                        required: "Please enter your email address",
                        email: "Please enter a valid email address"
                    }
                }
            });
        });
    </script>
</body>
</html>

九、调试和最佳实践

调试技巧

1. 使用浏览器开发者工具

现代浏览器都提供了强大的开发者工具，可以用来调试jQuery代码。按F12键打开开发者工具，使用控制台（Console）来输出调试信息。

console.log('Debug message');

2. 使用断点调试

在开发者工具中，可以设置断点，在代码执行到断点时暂停，便于检查变量值和执行流程。

最佳实践

1. 避免全局变量

尽量避免使用全局变量，以防止命名冲突。可以使用IIFE（Immediately Invoked Function Expression）来创建局部作用域。

(function($) {

    $(document).ready(function() {
        // jQuery代码写在这里
    });
})(jQuery);

2. 使用链式操作

jQuery支持链式操作，可以减少代码量并提高可读性。

$(document).ready(function() {

    $('#element').css('color', 'blue').slideUp().slideDown();
});

3. 性能优化

• 尽量减少DOM操作，因为DOM操作是比较耗时的。
• 使用事件委托来提高性能，特别是在处理动态生成的元素时。

$(document).ready(function() {

    $('#parent').on('click', '.child', function() {
        // 事件处理代码
    });
});

通过本文的详细说明，相信你已经能够在外置JS脚本中成功运行jQuery，并掌握了jQuery的基本用法和高级技巧。确保正确引入jQuery库是关键，此外，使用$(document).ready()函数来保证文档加载完成后再运行jQuery代码也是非常重要的。希望这些知识能帮助你在实际项目中更好地使用jQuery。

相关问答FAQs：

1. 如何在外置的js脚本中使用jQuery？
在外置的js脚本中使用jQuery，首先需要在html文件中引入jQuery库。可以通过在标签中添加