jQuery的概述和基本使用

jQuery概述

jQuery是一个轻量级的 javascript 库,核心文件只有几十kb,里面的方法函数基本兼容了现在主流的浏览器。其不但对事件、样式、动画支持,大大简化DOM操作,可以链式编程和存在隐式迭代;还支持插件扩展开发,可以使用第三方插件进行快速开发。

JavaScript 库的概念

javascript 库 (library) 是指一个封装(预先定义)了很多特定的函数和方法的JS文件。开发者根据功能需求,比如动画animate、hide、show、获取元素等对我们原生js代码进行了封装,存放到这个文件中。这样我们就可以根据需要快速高效的使用这些封装好的功能了。 常见的 javascript 库有 jQuery prototype YUI Dojo zepto等,他们都是对原生 javascript 的封装,内部都是使用 javascript 实现的。

jQuery的概念

jQuery是一个快速、简洁的 javascript 库,j 代表的是 javascript;而 Query的意思是查询。其主要对js中的DOM操作做了封装,我们可以快速地查询使用里面地功能。此外 jQuery 封装的 javascript 常用的功能代码还有事件处理、动画设计和 Ajax交互等。我们学习 jQuery 本质就是要了解里面封装的函数和方法的调用语法规则。

jQuery 基本使用

下载和引入

下载我们可以去jquery官网下载自己想要的版本,我们也可以在这里进行学习如何去使用它。下载到压缩版的javascript文件后,将其引入到我们要使用的页面中即可使用 jQuery 进行开发。

官网可能会进不去我是在这里下载的 jQuery 文件(下载)

jQuery 的入口函数

// 方式一:
$(function () {
    
    
	...   // 页面的DOM加载完成的入口
});
// 方式二:
$(document).ready(function () {
    
    
	...   // 页面的DOM加载完成的入口
});
  1. 这两种方式都是等着DOM结构渲染完毕即可执行内部代码(相当于原生 js 中的 DOMContentLoaded 事件),不必等到所有的外部资源都加载完成,jQuery 帮我们完成了封装。
  2. 不同于原生 js 中的 load 事件是要等页面文档、外部的 js 文件、css 文件、图片加载完毕后才执行内部代码。

jQuery 的顶级对象

$ 符是 jQuery 的别称,在代码中也可以使用 jQuery 代替 $ 符。$ 是 jQuery 的顶级对象,相当于我们原生 javascript 中的 window 对象。使用 $ 将元素包装成 jQuery 对象后就可以调涌 jQuery 里面的方法。

jQuery对象和DOM对象

  1. 使用原生 js 中提供的 api 获取得到的元素对象就是 DOM 对象。
  2. 使用 jQuery 方法获取得到的元素对象就是 jQuery 对象。
  3. jQuery 对象本质上是利用 $ 对DOM对象包装后产生的对象,他们以伪数组的形式存储。

特别注意:只有 jQuery 对象才能使用 jQuery 提供的方法,DOM对象则使用原生 javascript 的方法

jQuery 对象和 DOM 对象的相互转换

原生 js 比 jQuery 更大( jQuery 内部是使用 js 实现的),原生的一些属性和方法 jQuery 并没有给我们封装。所以如果我们使用 jQuery 方法获得的某些 jQuery 对象希望用到原生 js 的属性和方法则需要将 jQuery 对象转换为DOM 对象才能使用。

// 1、DOM对象转换成为jQuery对象:$(DOM元素对象);
var search = $(".search"); // 类名为search的jQuery对象
var div = document.querySelector('div');
div = $(div); // 将div这个DOM对象转换为jQuery对象

// 2、jQuery对象转换为DOM对象的两种方式
// 因为是以伪数组的形式进行存储所以有
search = $(".search")[0] // 0(index)是索引号
// get 方法
search = $(".search").get(0) // 0(index)是索引号

猜你喜欢

转载自blog.csdn.net/TKOP_/article/details/112757161