jQuery是一个Javascript库,是对于ECMAScript、dom、bom的一个浅封装,让用户更方便操作。
♡ ‧₊˚ jQUery的安装 ‧₊˚ ♡
在 https://www.bootcdn.cn/jquery/ 中:
- 从网页引入
找到需要的版本并复制相应的script标签,放到自己的html文件中即可。
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
- 从本地引入
复制链接到搜索框打开一个新的网页,将页面中出现的代码全选复制到自己的jquery.js文件中,并用script标签引入到html中
<script src="./jquery.js"></script>
♡ ‧₊˚ jQUery函数 ‧₊˚ ♡
通过"jQuery"和"$"来调用jQuery函数
jQuery核心函数:
简称:jQuery函数($/jQuery)
引入jQuery库以后,直接使用$/jQuery即可
当函数用:$(params)
当对象用的时候:$.each()
jQuery核心对象:
简称:jQuery对象 $()
得到jQuery对象:执行jQuery函数返回的就是jQuery对象
使用jQuery对象:$obj.xxx()
console.log($,'jQuery函数', typeof $); // 'jQuery函数' 'function'
console.log($(),'jQuery对象', typeof $()); // 'jQuery对象' 'object'
console.log($() instanceof Object); // true
入口函数
JS的入口函数:
// 原生JS入口函数
window.onload = function(){
alert('我是入口函数')
}
jQuery的入口函数有四种不同的写法:
// JQ入口函数的四种写法
$(document).ready(function(){
alert('我是入口函数1')
})
jQuery(document).ready(function(){
alert('我是入口函数2')
})
// 推荐写法
$(function(){
alert('我是入口函数3')
})
jQuery(function(){
alert('我是入口函数4')
})
♡ ‧₊˚ jQUery对象 ‧₊˚ ♡
jQuery对象是类数组对象,jQuery的方法都是对类数组中的元素的批量操作
注意:jQuery对象可以调用jQuery.prototype中声明的方法,普通的Element元素则不能调用。在使用jquery的时候,拿到一个对象务必要搞明白该对象是Element元素还是jQuery实例
如下代码,this是Element元素,如果想调用jQuery方法,需要使用$()将其转换为jQuery实例
-
<head> <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/