当前位置: 首页 > 编程笔记 >

jQuery 入门

慕容博涛
2023-03-14
本文向大家介绍jQuery 入门,包括了jQuery 入门的使用技巧和注意事项,需要的朋友参考一下

示例

创建一个hello.html具有以下内容的文件:

<!DOCTYPE html>
<html>
<head>
    <title>Hello, World!</title>
</head>
<body>
    <div>
        <p id="hello">Some random text</p>
    </div>
    <script xx_src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
    <script>
        $(document).ready(function() {
            $('#hello').text('Hello, World!');
        });
    </script>
</body>
</html>

JSBin现场演示

在网络浏览器中打开此文件。结果,您将看到一个包含以下文本的页面:Hello, World!

代码说明

  1. 从jQuery CDN加载jQuery库:

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

    这引入了$全局变量,即jQuery函数和名称空间的别名。

    请注意,在包含jQuery时犯的最常见错误之一是无法加载可能依赖或利用它的任何其他脚本或库之前的库。

  1. 延迟当jQuery检测到DOM(文档对象模型)为“就绪”时要执行的功能:

    // 当文档准备就绪时,执行此功能...。
    $(document).ready(function() { ... });

    // 常用的速记版本(与上述行为相同)
    $(function() { ... });
  1. DOM准备就绪后,jQuery将执行上面显示的回调函数。在我们的函数内部,只有一个调用可以完成2个主要任务:

    1. 获取id属性等于hello(我们的选择器#hello)的元素。使用选择器作为传递的参数是jQuery功能和命名的核心。整个库实际上是从扩展document.querySelectorAll MDN演变而来的。

    2. 将text()选定元素的内部设置为Hello, World!。

      #    ↓ - Pass a `selector` to `$` jQuery, returns our element
      $('#hello').text('Hello, World!');
      #             ↑ - Set the Text on the element

有关更多信息,请参考jQuery-文档页面。

 类似资料:
  • 本文向大家介绍jQuery 插件-入门,包括了jQuery 插件-入门的使用技巧和注意事项,需要的朋友参考一下 示例 jQuery API可以通过添加其原型来扩展。例如,现有的API已经有许多可用的功能,例如,,等。.hide().fadeIn().hasClass() jQuery原型通过公开$.fn,源代码包含以下行 将函数添加到该原型将允许从任何构造的jQuery对象中调用这些函数(对jQu

  • jQuery 是由 John Resig 在2006年创建的一个快速而简洁的 JavaScript库,jQuery 简化了快速 Web 开发的 HTML 文档遍历,事件处理,动画和 Ajax 交互。

  • 主要内容:实例,jQuery Fading 方法,jQuery fadeIn() 方法,实例,jQuery fadeOut() 方法,实例,jQuery fadeToggle() 方法,实例,jQuery fadeTo() 方法,实例通过 jQuery,您可以实现元素的淡入淡出效果。 因为时间是宝贵的,我们提供快捷方便的学习方法。 在小牛知识库,你可以学习需要的知识。 实例 jQuery fadeIn() 演示 jQuery fadeIn() 方法。 jQuery fadeOut() 演示 jQ

  • 如何通过import $ from jquery导入jquery? 我想可能是因为jquery不支持import,export语法的,需要先进行转换,在npm上的jquery介绍里上也提到了webpack,browser, babel

  • 主要内容:jQuery Mobile 文本输入框,实例,文本域,实例,搜索输入框,实例,单选按钮,实例,复选框,实例,更多实例,实例,实例,实例,实例jQuery Mobile 文本输入框 输入字段是通过标准的 HTML 元素编码的,jQuery Mobile 将为它们添加样式使其看起来更具吸引力,在移动设备上更易使用。您也能使用新的 HTML5 的 <input> 类型: 实例 <form method="post" action="demo_form.php"> <div class="ui

  • jQuery Mobile 文本输入框 输入字段是通过标准的 HTML 元素编码的,jQuery Mobile 将为它们添加样式使其看起来更具吸引力,在移动设备上更易使用。您也能使用新的 HTML5 的 <input> 类型: <form method="post" action="demo_form.php"> <div> <label for="fullname">全名:</label>