jQuery 简介

Posted 2021-09-05 impact_factor

jQuery

• • jQuery简介
  • jQuery特点
  • jQuery的使用方式
  • jQuery与JavaScript的区别
  • jQuery中的加载事件
  • jQuery对象

jQuery简介

jQuery是一个快速、简洁的javascript库，其设计宗旨是
“write less，do more”，倡导用更少的代码，做更多的事情。

jQuery特点

• jQuery是一个轻量级的脚本，其代码非常小巧。
• 语法简洁易懂，学习速度快，文档丰富。
• 支持CSS1~CSS3定义的属性和选择器。
• 跨浏览器，支持的浏览器包括IE6~IE11和FireFox、Chrome等。
• 实现了JavaScript脚本和html代码的分离，便于后期编辑和维护。
• 插件丰富，可以通过插件扩展更多功能。

jQuery的使用方式

1. 在 https://jquery.com/ 官网下载jQuery的库文件，点击Download进行下载。
   
   jQuery所有版本下载链接地址：
   

2. 引入jQuery库：

   <script src="jquery-3.3.1.min.js"></script>
   //src中是下载的jquery文档的地址
   <script>
     $("div").hide();	// 隐藏div元素
   </script>
   
   

3. 编写jQuery的入口函数：

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

jQuery与JavaScript的区别

// jQuery代码（为了方便对比，将代码分成两行书写）
var div = $("div");	// 获取元素
div.hide(); // 对元素进行操作
// JavaScript原生代码
var div = document.querySelector('div'); // 获取元素
div.style.display = 'none';  // 对元素进行操作

jQuery中的加载事件

jQuery对象

'$'是一个全局对象，代表jQuery

	// 使用“jQuery”
	jQuery(function () {
	  jQuery("div").hide();
	});

	// 使用“$”
	$(function () {
	  $("div").hide();
	});

jQuery对象的静态方法：

// 创建jQuery对象，语法为“$(参数)”
console.log($("div")); // 创建div元素的jQuery对象
// 调用静态方法，语法为“$.方法名()”
console.log($.trim(" a ")); // 利用trim()方法去掉字符串两端的空白字符
DOM对象不能使用jQuery方法hide()：
// DOM对象
var myDiv = document.querySelector('div');
myDiv.hide(); // 错误写法
// jQuery对象
var div = $("div");
div.style.display = "none";	// 错误写法

DOM对象与jQuery对象相互转换：

// 从jQuery对象中取出DOM对象
$("div")[0]; // 方式1
$("div").get(0); // 方式2
// 取出DOM对象后就可以用DOM方式操作元素
$("div")[0].style.display = "none";
var myDiv = document.querySelector('div'); // 获取DOM对象
var div = $(myDiv);	  // 转换成jQuery对象
div.hide();  // 调用jQuery对象的方法