基本语法
Zookeeper基础04-基本语法-对象转换
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;
alert(js.innerHTML);
05-基本语法-事件的基本使用
[*]常用的事件
[*]在 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>
06-基本语法-事件的绑定和解绑
[*]绑定事件
//jQuery 对象.on(事件名称,执行的功能);
//给btn1按钮绑定单击事件
$("#btn1").on("click",function(){
alert("点我干嘛?");
});
[*]解绑事件
如果不指定事件名称，则会把该对象绑定的所有事件都解绑
//jQuery 对象.off(事件名称);
//通过btn2解绑btn1的单击事件
$("#btn2").on("click",function(){
$("#btn1").off("click");
});
07-基本语法-事件的切换
事件的切换：需要给同一个对象绑定多个事件，而且多个事件还有先后顺序关系。
[*]方式一：单独定义
$(元素).事件方法名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");
});
08-基本语法-遍历操作01
[*]方式一：传统方式
for(let i = 0; i < 容器对象长度; i++){
执行功能;
}
//方式一：传统方式
$("#btn").click(function(){
let lis = $("li");
for(let i = 0 ; i < lis.length; i++) {
alert(i + ":" + lis.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);
}
});
09-基本语法-遍历操作02
10-基本语法-基本语法的小结
[*]JS 对象和 jQuery 对象相互转换
[*]$(JS 的 DOM 对象)：将 JS 对象转为 jQuery 对象。
[*]jQuery 对象[索引] jQuery
[*]对象.get(索引)：将 jQuery 对象转为 JS 对象。
[*]事件
[*]在 jQuery 中将事件封装成了对应的方法。去掉了 JS 中的 .on 语法。
[*]on(事件名称,执行的功能)：绑定事件。
[*]off(事件名称)：解绑事件。
[*]遍历
[*]传统方式。
[*]对象.each() 方法。
[*]$.each() 方法。
[*]for of 语句。
文档来源：51CTO技术博客https://blog.51cto.com/u_15088375/3249318
页:
[1]