JQuery学习——Javascript之后的重生

好消息好消息！！

JQuery的使用方法简直Javascript的简易版！

至于有多好用？

今天就来给大家展示展示~

目录

🍩概念

🍩基本使用

JQuery的入口函数

jQuery中的顶级对象$

jQuery对象和 DOM对象

🍩JQuery选择器

基础选择器

层级选择器

筛选选择器

tab栏的切换效果案例分析

---

🍩概念

j 就是 JavaScript； Query 查询； 意思就是查询js，把js中的DOM操作做了封装，我们可以快速的查询使用里面的功能。

• jQuery 封装了 JavaScript 常用的功能代码，优化了 DOM 操作、事件处理、动画设计和 Ajax 交互。

• 学习jQuery本质： 就是学习调用这些函数（方法）。

• jQuery 出现的目的是加快前端人员的开发速度，我们可以非常方便的调用和使用它，从而提高开发效率。

🍩基本使用

jQuery的官网地址： https://jquery.com/，官网即可下载最新版本。

然后把代码放在我们自己的js文件中，每次使用JQuery时就需要引用这串代码。

JQuery的入口函数

// 第一种: 简单易用。
$(function () {   
    ...  // 此处是页面 DOM 加载完成的入口
}) ; 

// 第二种: 繁琐，但是也可以实现
$(document).ready(function(){
   ...  //  此处是页面DOM加载完成的入口
});

jQuery中的顶级对象$

• $是 jQuery 的别称，在代码中可以使用 jQuery 代替，但一般为了方便，通常都直接使用 $ 。

• $是jQuery的顶级对象，相当于原生JavaScript中的 window。把元素利用$包装成jQuery对象，就可以调用jQuery 的方法。

jQuery对象 和 DOM对象

回忆一下，我们在引用DOM对象时如何获取元素的：

 var myDiv = document.querySelector('div');

JQuery对象获取元素：

$('div');

由于为了改变元素的样式，我们有时候需要进行JQuery和DOM之间的转换：

// 1.DOM对象转换成jQuery对象，方法只有一种
var box = document.getElementById('box');  // 获取DOM对象
var jQueryObject = $(box);  // 把DOM对象转换为 jQ