1、JQuery快速入门
1.1. 1.1、JQuery介绍
- jQuery 是一个 JavaScript 库。
- 所谓的库，就是一个 JS 文件，里面封装了很多预定义的函数，比如获取元素，执行隐藏、移动等，目的就 是在使用时直接调用，不需要再重复定义，这样就可以极大地简化了 JavaScript 编程。
- jQuery 官网：https://www.jquery.com
1.2. 1.2、JQuery快速入门
开发思路
编写 HTML 文档。
- 引入 jQuery 文件。
- 使用 jQuery 获取元素。
使用浏览器测试。
代码实现
<!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>
<!—引入 jQuery 文件—>
<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>
1.3. 1.3、小结
- jQuery 是一个 JavaScript 库。
- 说白了就是定义好的一个 JS 文件，内部封装了很多功能，可以大大简化我们的 JS 操作步骤。
- jQuery 官网：https://www.jquery.com。
- 要想使用，必须要引入该文件。
- jQuery 的核心语法 $();
2. 2、JQuery基本语法
2.1. 2.1、JS对象和JQuery对象转换
jQuery 本质上虽然也是 JS，但如果想使用 jQuery 的属性和方法那么必须保证对象是 jQuery 对象，而不是 JS 方式获得的 DOM 对象，二者的 API 方法不能混合使用，若想使用对方的 API，需要进行对象的转换。
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());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);
2.2. 2.2、事件的基本使用
常用的事件
在 jQuery 中将事件封装成了对应的方法。去掉了 JS 中的 .on 语法。
代码实现
<!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>
2.3. 2.3、时间的绑定和解绑
绑定事件
//jQuery 对象.on(事件名称,执行的功能);
//给btn1按钮绑定单击事件 $(“#btn1”).on(“click”,function(){ alert(“点我干嘛?”); });解绑事件
如果不指定事件名称，则会把该对象绑定的所有事件都解绑
//jQuery 对象.off(事件名称);
//通过btn2解绑btn1的单击事件 $(“#btn2”).on(“click”,function(){ $(“#btn1”).off(“click”); });
2.4. 2.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”); });
2.5. 2.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(function(index,ele){ 执行功能; });//方式二：对象.each()方法 $(“#btn”).click(function(){ let lis = $(“li”); lis.each(function(index,ele){ alert(index + “:” + ele.innerHTML); }); });方式三：$.each()方法
$.each(容器对象,function(index,ele){ 执行功能; });//方式三：$.each()方法 $(“#btn”).click(function(){ let lis = $(“li”); $.each(lis,function(index,ele){ alert(index + “:” + ele.innerHTML); }); });方式四：for of语句
for(ele of 容器对象){ 执行功能; }//方式四：for of 语句遍历 $(“#btn”).click(function(){ let lis = $(“li”); for(ele of lis){ alert(ele.innerHTML); } });
2.6. 2.6、小结
- JS 对象和 jQuery 对象相互转换
- $(JS 的 DOM 对象)：将 JS 对象转为 jQuery 对象。
- jQuery 对象[索引] jQuery
- 对象.get(索引)：将 jQuery 对象转为 JS 对象。
- 事件
- 在 jQuery 中将事件封装成了对应的方法。去掉了 JS 中的 .on 语法。
- on(事件名称,执行的功能)：绑定事件。
- off(事件名称)：解绑事件。
- 遍历
- 传统方式。
- 对象.each() 方法。
- $.each() 方法。
- for of 语句。
3. 3、JQuery选择器
3.1. 3.1、基本选择器
选择器：类似于 CSS 的选择器，可以帮助我们获取元素。
例如：id 选择器、类选择器、元素选择器、属性选择器等等。
jQuery 中选择器的语法：$();
代码实现
<!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=“div1”>div1</div>
<div class=“cls”>div2</div>
<div class=“cls”>div3</div>
</body>
<script src=“js/jquery-3.3.1.min.js”></script>
<script>
//1.元素选择器 $(“元素的名称”)
let divs = $(“div”);
//alert(divs.length);
//2.id选择器 $(“#id的属性值”)
let div1 = $(“#div1”);
//alert(div1);
//3.类选择器 $(“.class的属性值”)
let cls = $(“.cls”);
alert(cls.length);
</script>
</html>
3.2. 3.2、层级选择器
代码实现
<!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> <span>s1 <span>s1-1</span> <span>s1-2</span> </span> <span>s2</span> </div> <div></div> <p>p1</p> <p>p2</p> </body> <script src=“js/jquery-3.3.1.min.js”></script> <script> // 1. 后代选择器 $(“A B”); A下的所有B(包括B的子级) let spans1 = $(“div span”); //alert(spans1.length); // 2. 子选择器 $(“A > B”); A下的所有B(不包括B的子级) let spans2 = $(“div > span”); //alert(spans2.length); // 3. 兄弟选择器 $(“A + B”); A相邻的下一个B let ps1 = $(“div + p”); //alert(ps1.length); // 4. 兄弟选择器 $(“A ~ B”); A相邻的所有B let ps2 = $(“div ~ p”); alert(ps2.length); </script> </html>
3.3. 3.3、属性选择器
代码实现
```html <!DOCTYPE html>
<meta charset=“UTF-8”> <meta name=“viewport” content=“width=device-width, initial-scale=1.0”> <title>属性选择器</title></head>
<input type=“text”> <input type=“password”> <input type=“password”></body>