目录
jQuery
jQuery的不同版本
1.x
2.x
3.x
- 完全不在支持IE8及以下版本
- 提供了一些新的API
- 提供不不包含ajax/动画API的版本
jQuery本地引入
<script type="text/javascript" src="./jquery-3.6.0.js"></script>
jQuery远程服务引入
<script type="text/javascript" src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>
jQuery的核心
jQuery核心函数
- 简称jQuery函数(
$/jQuery)
- jQuery库向外暴露的就是
$/jQuery
- 引入jQuery库后， 直接使用
$或者jQuery
jQuery === $//true
jQuery核心对象
- 简称：jQuery对象
-
得到jQuery对象： 执行jQuery函数返回的就是jQuery对象
-
使用jQuery对象： 语法：
$obj.xxx()
- jQuery对象是一个包含所有dom元素对象的伪元素（可能只有一个元素）对象
jQuery的两种使用
作为一般函数使用：$(param)
-
param参数为函数：当DOM加载完成后，执行此回调函数
-
param参数为选择器字符串：查找所有匹配的标签，并将它们封装成jQuery对象
-
param参数为DOM对象：将DOM对象封装成jQuery对象
-
param参数为html标签字符串：创建标签对象并封装成jQuery对象
下面是四种不同参数的使用：
<!DOCTYPE html>
<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 type="text/javascript" src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>
<script type="text/javascript">
// 1).参数为函数：当DOM加载完成后，执行此回调函数
$(function () {//相当于window.onlaod = function(){}
// 2).参数为选择器字符串：查找所有匹配的标签，并将它们封装成jQuery对象
$('#btn').click(function () {// 绑定点击事件监听
// 此时的this仍然是发生事件的DOM元素(<button>)
// 3). 参数为DOM对象：将DOM对象封装成jQuery对象
// 4). 参数为html标签字符串:创建标签对象并封装成jQuery对象
$("<div>西安加油！</div>").appendTo("div");
})
})
</script>
<title>测试</title>
</head>
<body>
<div>
<button id="btn">测试</button>
</div>
</body>
作为对象使用：$.xxx()
$.each()
-
$.each()该方法可以用于遍历任何对象(对象、数组)
- 语法：
$.each(object, [callback])
- 回调函数拥有两个参数：
- 第一个参数：(index)为对象的成员或数组的索引
- 第二个参数：(value)为对应变量或内容。
- 如果需要退出each循环可使回调函数返回false，其他返回值将被忽略
let arr = ["江流","心猿","木龙","刀圭", "意马"]
$.each(arr, function(index, value){
console.log(index + ":" + value);
})
$.trim()
let str = " Hello world ! ";
console.log("---"+$.trim(str)+"---");
jQuery基本行为
length
- 该属性可以获取jQuery对象中包含的DOM元素的个数
<body>
<div>
<button id="btn">测试</button>
<button id="btn">测试</button>
<button id="btn">测试</button>
<button id="btn">测试</button>
</div>
<script>
let $buttons = $("button");
console.log($buttons.length);//4
</script>
</body>
[index]
<script>
let $buttons = $("button");
console.log($buttons[2]);
</script>
each()
- 遍历包含的所有DOM元素
- 语法：`each(function
<script>
let $buttons = $("button");
$buttons.each(function(index, domEle){
// this === domEle
console.log(index, domEle);
})
</script>
index()