教育行业A股IPO第一股(股票代码 003032)

全国咨询/投诉热线:400-618-4000

怎样使用jQuery?jQuery常见操作问题和解决方法

更新时间:2021年04月20日11时48分 来源:传智教育 浏览次数:

传智教育-一样的教育,不一样的品质


在引入jQuery后,就可以使用jQuery提供的功能了。下面通过代码演示jQuery的简单使用,具体代码如下。

   <!DOCTYPE html>
   <html>
    <head>
     <meta charset="UTF-8">
     <title>使用jQuery</title>
     <style>
      div { width: 200px; height: 200px; background-color: pink; }
     </style>
     <script src="jquery-3.1.1.min.js">
   </head>
   <body>
    <div></div>
    <script>
     $("div").hide(); // 隐藏div元素
    </script>
   </body>
  </html>

在上述代码中,第9行用于引入jQurey,第14行用于通过jQuery来实现隐藏div元素的效果。通过浏览器访问测试,可以看到div被隐藏起来了。如果将第14行代码注释,则div就会显示出来。

由此可见,在使用jQuery时,有两个基本步骤,第一步是获取要操作的元素,也就是在$()函数中传入字符串div,表示div元素;第二步是调用操作方法,如hide()方法用来将元素隐藏。这个步骤和原生JavaScript的DOM操作其实是很类似的,但代码简洁了许多。下面通过代码对比jQuery和JavaScript原生代码的区别。

// jQuery代码(为了方便对比,将代码分成两行书写)
var div = $("div");      // 获取元素
div.hide();                   // 对元素进行操作// JavaScript原生代码
var div = document.querySelector('div');  // 获取元素
div.style.display = 'none';                         // 对元素进行操作
在使用jQuery时需要注意代码的书写位置, jQuery代码需要写在要操作的DOM元素的后面,确保DOM元素已经加载后,才可以用jQuery进行操作。如果将jQuery代码写在DOM元素前面,则代码不会生效,示例代码如下。
   <body>
    <script>
     $("div").hide();
    </script>
    <div></div>
   </body>

上述代码将要操作的div元素写在了第5行,通过浏览器访问,会发现div没有被隐藏起来,说明jQuery没有找到div元素。

如果一定要将jQuery代码写在DOM元素的前面,则可以利用如下语法来实现。

// 语法1(简写形式)
$(function() {
 // 页面DOM加载后执行的代码
});
// 语法2(完整形式)
$(document).ready(function() {
 // 页面DOM加载完成后执行的代码
});

上述代码是jQuery提供的加载事件,将页面DOM加载完成后要执行的代码提前写到函数中,传给jQuery,由jQuery在合适的时机去执行。上述两种语法任选其一,由于第1种语法比较简洁,在开发中推荐使用第1种。

下面通过代码演示jQuery加载事件的使用,具体代码如下。

   <body>
    <script>
     $(function() {
      $("div").hide();
     });
    </script>
    <div></div>
   </body>

通过浏览器访问,会发现div成功被隐藏起来了。


需要注意的是,虽然jQuery的加载事件和DOM中的window.onload类似,但也有不同之处,具体对比如表1所示。

表1 页面加载事件对比

对比项 window.onload $(document).ready()                     
执行时机 必须等待网页中的所有内容加载完成后(包括外    部元素,如图片)才能执行 网页中的所有DOM绘制完成后就执行(可能  关联内容并未加载完成)
编写个数 不能编写多个 能够编写多个,依次执行
简化写法 $()

从表1可以看出,jQuery中的ready与JavaScript中的onload相比,不仅可以在页面加载后立即执行,还允许注册多个事件处理程序。





猜你喜欢:

jQuery框架有什么特点?如何安装jQuery?

什么是jQuery? jQuer能做什么?

如何获取jQuery?通过代码演示jQuery的使用

自学jquery教程:传智播客jquery入门教程下载

传智教育web前端高手班课程

亚洲性人人天天夜夜摸,六月婷婷,男女之事,大胆人gogo体艺术高清 茂名匦投电子技术有限公司