jQuery入门（一）

一、JQuery介绍

- jQuery 是一个 JavaScript 库。
- 所谓的库，就是一个 JS 文件，里面封装了很多预定义的函数，比如获取元素，执行隐藏、移动等，目的就是在使用时直接调用，不
需要再重复定义，这样就可以极大地简化了 JavaScript 编程。
- jQuery 官网：https://www.jquery.com

二、JQuery入门

开发步骤:
1. 编写 HTML 文档。
2. 引入 jQuery 文件。
3. 使用 jQuery 获取元素。
4. 使用浏览器测试。

示例通过JavaScript原生和jQuery两种方式获取元素和元素html代码。

代码如下：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>快速入门</title>
</head>
<body><div id="div">我是div</div>
</body>
<script src="js/jquery-3.3.1.min.js"></script>
<script>// JS方式，通过id属性值来获取div元素let jsDiv = document.getElementById("div");//alert(jsDiv);//alert(jsDiv.innerHTML);// jQuery方式，通过id属性值来获取div元素let jqDiv = $("#div");alert(jqDiv);alert(jqDiv.html());
</script>
</html>

三、JQuery的操作

3.1 JS对象和JQuery对象转换

jQuery 本质上虽然也是 JS，但如果想使用 jQuery 的属性和方法那么必须保证对象是 jQuery 对象，而不是 JS 方式获得的 DOM 对象，二者的 API 方法不能混合使用，若想使用对方的 API，需要进行对象的转换。

1）JS 的 DOM 对象转换成 jQuery 对象

语法：

//$(JS 的 DOM 对象);// JS方式，通过id属性值获取div元素
let jsDiv = document.getElementById("div");
alert(jsDiv.innerHTML);
//alert(jsDiv.html());  JS对象无法使用jQuery里面的功能// 将 JS 对象转换为jQuery对象
let jq = $(jsDiv);
alert(jq.html());

2）jQuery 对象转换成 JS 对象

语法：

/*jQuery 对象[索引];
jQuery 对象.get(索引);*/// jQuery方式，通过id属性值获取div元素
let jqDiv = $("#div");
alert(jqDiv.html());
// alert(jqDiv.innerHTML);   jQuery对象无法使用JS里面的功能// 将 jQuery对象转换为JS对象
let js = jqDiv[0];
alert(js.innerHTML);

代码示例如下：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>对象转换</title>
</head>
<body><div id="div">我是div</div>
</body>
<script src="js/jquery-3.3.1.min.js"></script>
<script>// JS方式，通过id属性值获取div元素let jsDiv = document.getElementById("div");alert(jsDiv.innerHTML);//alert(jsDiv.html());  JS对象无法使用jQuery里面的功能// 将 JS 对象转换为jQuery对象let jq = $(jsDiv);alert(jq.html());// jQuery方式，通过id属性值获取div元素let jqDiv = $("#div");alert(jqDiv.html());// alert(jqDiv.innerHTML);   jQuery对象无法使用JS里面的功能// 将 jQuery对象转换为JS对象let js = jqDiv[0];alert(js.innerHTML);
</script>
</html>

3.2 事件的基本使用

常用的事件：

在 jQuery 中将事件封装成了对应的方法。去掉了 JS 中的 .on 语法。
代码示例：（以click，focus，blur事件为例）：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>事件的使用</title>
</head>
<body><input type="button" id="btn" value="点我"><br><input type="text" id="input">
</body>
<script src="js/jquery-3.3.1.min.js"></script>
<script>//单击事件$("#btn").click(function(){alert("点我干嘛?");});//获取焦点事件
//     $("#input").focus(function(){
//         alert("你要输入数据啦...");
//     });//失去焦点事件$("#input").blur(function(){alert("你输入完成啦...");});
</script>
</html>

3.3 事件的绑定和解绑

3.3.1）绑定事件

语法：//jQuery 对象.on(事件名称,执行的功能);

示例代码：

//给btn1按钮绑定单击事件
$("#btn1").on("click",function(){alert("点我干嘛?");
});

3.3.2）解绑事件

语法：//jQuery 对象.off(事件名称);

注意：如果不指定事件名称，则会把该对象绑定的所有事件都解绑

示例代码：

//通过btn2解绑btn1的单击事件
$("#btn2").on("click",function(){$("#btn1").off("click");
});

3.4 事件的切换

方式一：单独定义

$(元素).事件方法名1(要执行的功能);

$(元素).事件方法名2(要执行的功能);

单独定义示例代码：

  //方式一 单独定义$("#div").mouseover(function(){//背景色：红色//$("#div").css("background","red");$(this).css("background","red");});$("#div").mouseout(function(){//背景色：蓝色//$("#div").css("background","blue");$(this).css("background","blue");});

方式二：链式定义

$(元素).事件方法名1(要执行的功能)

.事件方法名2(要执行的功能);

链式定义示例代码：

 //方式二 链式定义$("#div").mouseover(function(){$(this).css("background","red");}).mouseout(function(){$(this).css("background","blue");});

3.5 遍历操作

方式一：传统方式

传统方式语法和示例代码:

//方式一：传统方式
for(let i = 0; i < 容器对象长度; i++){执行功能;
}
//方式一：传统方式
$("#btn").click(function(){let lis = $("li");for(let i = 0 ; i < lis.length; i++) {alert(i + ":" + lis[i].innerHTML);}
});

方式二：对象.each()方法

对象.each()方法语法和示例代码:

//方式二：对象.each()方法
容器对象.each(function(index,ele){执行功能;
});//方式二：对象.each()方法
$("#btn").click(function(){let lis = $("li");lis.each(function(index,ele){alert(index + ":" + ele.innerHTML);});
});

方式三：$.each()方法

$.each()方法语法和示例代码:

//方式三：$.each()方法
$.each(容器对象,function(index,ele){执行功能;
});//方式三：$.each()方法
$("#btn").click(function(){let lis = $("li");$.each(lis,function(index,ele){alert(index + ":" + ele.innerHTML);});
});

方式四：for of语句

for of 语句遍历语法和示例代码:

//方式四：for of 语句遍历
for(ele of 容器对象){执行功能;
}//方式四：for of 语句遍历
$("#btn").click(function(){let lis = $("li");for(ele of lis){alert(ele.innerHTML);}
});

四、总结

- JS 对象和 jQuery 对象相互转换
- $(JS 的 DOM 对象)：将 JS 对象转为 jQuery 对象。
- jQuery 对象[索引] jQuery
- 对象.get(索引)：将 jQuery 对象转为 JS 对象。

- 事件
- 在 jQuery 中将事件封装成了对应的方法。去掉了 JS 中的 .on 语法。
- on(事件名称,执行的功能)：绑定事件。
- off(事件名称)：解绑事件。

- 遍历
- 传统方式。
- 对象.each() 方法。
- $.each() 方法。
- for of 语句。