简介
jQuery名字的来自JavaScript和查询(Query),它就是辅助JavaScript开发的js类型。其核心思想是写的更少,做的更多(write less ,do more),所以实现了很多浏览器的兼容问题。
其拥有的优点: 其是免费,开源,其语法涉及可以使开发更加便捷,比如操作文件对象,制作动画效果,事件处理,使用Ajax以及其它功能
而说是聊jQuery其实就是将其一些常用的方法进行演示。
安装
说是安装其更像是简单配置其运行的环境,首先去其官网:https://jquery.com/download/
然后看到如下两个:
点击的话,不会下载js文件的,而是显示js文件的内容:
然后放在自己项目所在的地址的后,然后再页面如此配置:
<script src='路径/jquery-xxx.js'></script>
演示
jQuery的入口函数
在实例中的所有 jQuery 函数位于一个 document ready 函数中:
$(document).ready(function(){
//此处是页面DOM加载完成的入口
}
);
// 当然一般会简写为
$(function(){
//此处是页面DOM加载完成的入口
})
是为了防止文档在完全加载(就绪)之前运行 jQuery 代码,即在 DOM 加载完成后才可以对 DOM 进行操作。
如果在文档没有完全加载之前就运行函数,操作可能失败。下面是两个具体的例子:
- 试图隐藏一个不存在的元素
- 获得未完全加载的图像的大小
所以等着DOM结构选用完毕即可执行内部的代码,不必等到所有的外部资源加载完毕,jQuery将其进行封装,相当于js中的DOMContentLoaded,而不是js中的load事件(等待外部的js文件,css文件图片加载完毕才会执行)。
初体验
结构如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="jquery-3.6.0.min.js"></script>
<title>test</title>
</head>
<body>
<script>
$(function(){
alert(22)
})
</script>
</body>
</html>
然后看效果:
顶级对象 $
是否好玩这个 $ 符号是什么东西。
因为$ 是jquery的别名,在代码中开发中可以使用jQuery代替 , 但是一般开发为了方便都直接使用 ,但是一般开发为了方便都直接使用 ,但是一般开发为了方便都直接使用.
为什么说是顶级对象呢?因为$对jQuery相当于JavaScript中的window。而元素可以通过$包装的jQuery对象可以调用jQuery的方法。
jQuery对象
- 原生的JavaScript获取的对象是DOM对象。
- jQuery方法回去的是元素的jQuery对象。
两者是不同的对象,当然也可以进行相互转换的,下面测试。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="jquery-3.6.0.min.js"></script>
<title>test</title>
</head>
<body>
<div >测试</div>
<script>
var dom=document.querySelector('div');
console.log(dom)
console.log(typeof dom)
var jq= $("div")
console.log(jq)
console.log(typeof jq)
</script>
</body>
</html>
可以看出两个都是对象,但是又是不同的对象。所以各自的方法调用也会有所不同,dom调用方法就是自己的方法,而jQuery对象自然调用自己的方法,不能彼此调用对方的方法。
同时展开jQuery对象后发现,jQuery对象是一个为数组形式存储的。
jQuery对象和dom对象转换
当然两个对象也是可以相互转换的,为什么要转换呢?
- 原生的js比jQuery更大,原生的一些属性和方法jQuery没有完全封装,想要使用这些方法,自然需要把jQuery对象转换为DOM对象才能使用。
- 而DOM对象转换jQuery对象的原因是,因为jQuery封装js然后直接通过简单的方法或属性就可以调用。也就是方法用户使用一些常用的方法。
两者如此转换呢?
DOM对象转换jQuery对象:
$(DOM对象)
演示
jQuery对象转换为DOM对象:
jQuery对象[index] // index 是索引号
// 或则如下写
jQuery对象.get(index) // index 是索引号
现在了解了一下jQuery,后面开始聊一些常用发方法。