jQuery概述

2022-03-03 本文已影响0人马佳乐

jQuery简介

jQuery就是一个封装了很多方法的javaScript库。
我们学习jQuery，其实就是学习jQuery中封装的一大堆方法。

jQuery的优点

jQuery设计的宗旨是'Write Less , Do More'，即倡导写更少的代码，做更多的事情。
它封装的方法优化了HTML文档操作、事件处理、动画设计和Ajax交互，极大地简化了JavaScript编程。
jQuery的核心特性可以总结为︰
- 具有独特的链式语法和短小清晰的多功能接口;
- 具有高效灵活的CSS选择器，并且可对CSS选择器进行扩展;
- 拥有便捷的插件扩展机制和丰富的插件。
- jQuery兼容各种主流浏览器。

jQuery的版本

jQuery版本有很多，分为1.x ，2.x ，3.x

1.x版本∶能够兼容IE678浏览器（不更新了）
2.x版本∶不兼容IE678浏览器（不更新了）
3.x版本:不兼容IE678浏览器（更新中）
3.x版本更加的精简（在国内不流行，因为国内使用jQuery的主要目的就是兼容IE678 )国内多数网站还在使用1.x的版本

每一个版本jQuery又有压缩版和未压缩版。
compressed压缩版也叫精简版，去掉了格式，体积小，用于发布
uncompressed未压缩版也叫原版，有统一的格式，体积较大，方便阅读，用于测试、学习和开发

jQuery官网：可自行下载需要的版本

如何使用jQuery

1.引入jQuery文件

<script src="./jquery.js"></script>

2.写一个入口函数（防止页面（标签）未加载完全就执行js代码）
入口函数写法有两种

$(document).ready (function () {
});

$(function () {
});

jQuery入口函数和window.onload入口函数的区别

window.onload入口函数不能写多个,但是jQuery的入口函数是可以写多个的。
执行时机不同:jQuery入口函数要快于window.onload：

jQuery入口函数要等待页面上DOM树（标签）加载完后执行.
window.onload要等待页面上所有的资源(DOM树（标签）/外部CSS/js连接,图片)都加载完毕后执行
3.找到要操作的元素(jQuery选择器),去操作他(给他添加属性,样式,文本....)

$是什么？

如果报了这个错误：$ is not defind,说明没有引入jQuery文件
jQuery文件结构：
它其实是一个自执行函数

(function(){
    window,jQuery = window.$ = jQuery;
}());

这个自执行文件就是给window对象添加一个jQuery属性和 $属性$ 其实和jQuery是等价的，是一个函数。参数传递不同，效果也不一样

①如果参数传递的是一个匿名函数，则是入口函数

$(function () {
});

②如果参数传递的是一个字符串，则是选择器/创建一个标签

$('one');
$('<div>哈哈哈</div>');

③如果参数是一个DOM对象，则会把DOM对象转为jQuery对象

$(DOM对象);

DOM对象

原生js选择器获取到的对象
只能调用DOM属性或方法，不能调用jQuery的属性或方法

<body>
    <div id="divOne" style="height: 100px;"></div>
    <div></div>
</body>

var divOne=document.getElementById("divOne");
divOne.style.backgroundColor='red';
//divOne.css('backgroundColor','green');//报错：css is not a function

jQuery对象

利用jQuery选择器获取到的对象
只能调用jQuery的属性或方法，不能调用原生jsDOM属性或方法

    $(function(){
        var $divOne=$('#divOne');
        $divOne.css('backgroundColor','green');
        //$divOne.style.backgroundColor='red';//报错：Cannot set properties of undefined (setting 'backgroundColor')
    });

jQuery对象是一个伪数组，是DOM对象的一个包装集。

console.log($divOne.__proto__ === Array.prototype);//false  
console.log($divOne);//n.fn.init [div#divOne, context: document, selector:

var $divs=$('div');//获取所有div
console.log($divs);//n.fn.init(2) [div#divOne, div, prevObject: n.fn.init(1), context: document, selector: 'div']0: div#divOne1: divcontext: documentlength: 2prevObject: n.fn.init [document, context: document]selector: "div"[[Prototype]]: Object(0)

DOM对象转换为jQuery对象

var div1 = document.getElementById("divOne");
var $div1 = $(div1);
console.log($div1);

jQuery对象转换为DOM对象

方法一：使用下标取出来

var $divs =$('div');
console. log($divs);
var div1 = $divs[O];
console.log(div1);

方法二：使用jQuery的 get() 方法

var $div2=$divs-get(1);
console.log($div2);