标签：jQuery index 函数 DOM 对象 使用 基础 each
目录
jQuery
jQuery的不同版本
1.x
- 兼容老版本IE
- 文件更大
2.x
- 部分IE8及以下不支持
- 文件小，执行效率更高
3.x
- 完全不在支持IE8及以下版本
- 提供了一些新的API
- 提供不不包含ajax/动画API的版本
jQuery本地引入
- 该方法需要提前下载好jQuery本地文件，jQuery的官网：https://jquery.com/
<script type="text/javascript" src="./jquery-3.6.0.js"></script>
jQuery远程服务引入
- 通过远程CDN 加速服务服务器进行加载jQuery文件
- 使用时，电脑必须要有网络
- 这里推荐一个免费的CDN 加速服务网站：https://www.bootcdn.cn/
- 使用方法如下：
<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()
$.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]
- 得到对应位置的DOM元素
<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()
- 该方法可以得到所在元素中的下标
标签：jQuery,index,函数,DOM,对象,使用,基础,each 来源： https://blog.csdn.net/weixin_45660621/article/details/122095490
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。