天富娱乐登录怎样使用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(); </script> </body> </html>

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

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

 var div = $("div"); div.hide(); 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元素的前面，则可以利用如下语法来实现。
  $(function() { }); $(document).ready(function() { });
 上述代码是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入门教程下载
 传智教育web前端高手班课程

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