目录
on(events,[selector],[data],fn)
jQuery.extend([deep], target, object1, [objectN])
jQuery中全部都是静态获取 只有获取到的是HTMLCollection是动态获取
jQuery中全部都是DOM2级事件绑定，没有DOM0
事件绑定
jQuery对象.事件类型(callBack);
一个事件可以对应多个事件处理函数
$("ul li").click(function(){
console.log("哈哈");
});
$("ul li").click(function(){
console.log("呵呵");
});
$("ul li").click(function(){
console.log("111");
});
on(events,[selector],[data],fn)
- events:事件类型 可以是一个也可以是多个
- [selector]:选择器
- [data]：数据
- fn:函数
一个事件对应一个事件处理函数
$("ul li").on("click",function(){
console.log("哈哈");
});多个事件对应同一个事件处理函数 多个事件之间用空格隔开
$("ul li").on("click mousedown mouseup", function () {
console.log("哈哈");
}); 
多个事件对应多个事件处理函数
// 多个事件对应多个事件处理函数
$("ul li").on({
click: function () {
console.log("click");
},
mousedown: function () {
console.log("mousedown");
},
mouseup: function () {
console.log("mouseup");
}
});点击触发
移除事件
- off([event]);
- 不传递参数移除全部事件类型 传递了参数 可以进行过滤
$("ul li").off();
$("ul li").off("click");事件委托
- events:事件类型 可以是一个也可以是多个
- [selector]:选择器 事件委托的时候 谁委托制定委托的元素 传递选择器
- [data]：数据 传递给事件对象中的数据
- fn:函数
$("ul").on("click", "p,li", {name:"哈哈"},function (ev) {
console.log(ev);
if (ev.target.nodeName.toLowerCase() == "li") {
$(ev.target).css("backgroundColor", "blue");
}
if (ev.target.nodeName.toLowerCase() == "p") {
$(ev.target).css("backgroundColor", "green");
}
});事件对象
鼠标键盘事件对象
// 鼠标事件对象
$("ul li").on("mousedown", function (ev) {
// 事件对象 ev
console.log(ev); //jQuery.Event{...}
// 事件源
// ev.target
console.log(ev.target);
// 事件对象 属性
// ev.type 事件类型
console.log(ev.type); //mousedown
// ev.ctrlKey ev.altKey ev.shiftKey 默认值都是false 按下了对应的键值是true
console.log(ev.altKey, ev.ctrlKey, ev.shiftKey);
// 位置属性
// clientX /clientY 距离可视区域
console.log(ev.clientX, ev.clientY);
// pageX / pageY 距离文档的距离
console.log(ev.pageX, ev.pageY);
// screenX / screenY 距离屏幕
console.log(ev.screenX, ev.screenY);
// 原生JS中也有，IE8及以下不兼容
// offsetX / offsetY 鼠标距离当前元素的距离
console.log(ev.offsetX, ev.offsetY);
// ev.which; 标识鼠标左(1) 中(2) 右(3)
console.log(ev.which);
// originalEvent：原生js对象
console.log(ev.originalEvent);
});
$(document).keypress(function (ev) {
// 事件对象 ev
console.log(ev); //jQuery.Event{...}
// 事件源
// ev.target
console.log(ev.target);
// 事件对象 属性
// ev.type 事件类型
console.log(ev.type); //keydown
// ev.ctrlKey ev.altKey ev.shiftKey 默认值都是false 按下了对应的键值是true
console.log(ev.altKey, ev.ctrlKey, ev.shiftKey);
// ev.keCode;
// keydown / keyup 不区分大小写都是大写的ASCII值
// keypress:区分大小写
console.log(ev.keyCode);
// originalEvent：原生js对象
console.log(ev.originalEvent);
});表格添加删除全选案例
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
#form {
width: 480px;
margin: 30px auto;
border: 1px solid #eee;
border-radius: 5px;
padding: 10px;
line-height: 30px;
position: relative;
}
button {
position: absolute;
right: 10px;
bottom: 10px;
}
#tab {
width: 500px;
margin: 30px auto;
border-collapse: collapse;
}
th,
td {
border: 1px solid #000;
padding: 5px;
}
tbody tr td:first-child {
text-align: center;
}
/*input[type] 属性选择器 选择input标签，并且有type属性input标签*/
/*input[type = "checkbox"] 选择有type属性并且值为checkbox的input标签*/
input[type="checkbox"] {
width: 15px;
height: 15px;
}
#div1 {
position: relative;
width: 480px;
padding: 10px;
margin: 0 auto;
}
</style>
</head>
<body>
<div id="form">
请输入姓名: <input type="text" id="name"> <br>
请输入性别: <input type="radio" id="sex" name="sex" value="男">男 <input type="radio" name="sex" value="女"
checked>女<br>
请输入年龄: <input type="text" id="age">
<button>添加到表格</button>
</div>
<table id="tab">
<thead>
<tr>
<th width="20%"><input type="checkbox" id="all">全选</th>
<th>姓名</th>
<th>性别</th>
<th>年龄</th>
</tr>
</thead>
<tbody>
<tr>
<td><input type="checkbox"></td>
<td>张三</td>
<td>女</td>
<td>88</td>
</tr>
<tr>
<td><input type="checkbox"></td>
<td>李四</td>
<td>男</td>
<td>18</td>
</tr>
<tr>
<td><input type="checkbox"></td>
<td>王五</td>
<td>女</td>
<td>1</td>
</tr>
</tbody>
</table>
<div id="div1">
<button>删除所选行</button>
</div>
<script src="./js/jquery.1.12.4.js"></script>
<script>
// 绑定事件
// 添加
$("button").eq(0).click(function () {
$("#tab tbody").append($(`<tr>
<td><input type="checkbox"></td>
<td>${$("#name").val()}</td>
<td>${$("#sex").prop("checked")?`男`:`女`}</td>
<td>${$("#age").val()}</td>
</tr>`));
});
// 全选
$("#all").click(function () {
$("#tab tbody input[type=checkbox]").prop("checked", $(this).prop("checked"));
});
// 事件委托
$("#tab tbody").on("click", "input[type=checkbox]", function () {
// 小的checkbox个数等于选中的checkbox个数
if ($("#tab tbody input[type=checkbox]").length == $("#tab tbody input[type=checkbox]:checked")
.length) {
$("#all").prop("checked", true);
} else {
$("#all").prop("checked", false);
}
});
// 删除
$("button").eq(1).click(function () {
$("tbody input[type=checkbox]:checked").parents("tr").remove();
//全选状态下全删除后全选按钮变回false
if ($("#tab tbody tr").length == 0) {
$('#all').prop('checked',false);
}
});
</script>
</body>
</html>
合成事件（one, hove）
// 合成事件
// one(eventType,callBack);//当前事件只触发一次
$("div").one("click", function () {
console.log('哈哈');
});
// hove(callBack,callBack); 鼠标移入及鼠标移出
$("div").hover(function () {
$(this).css("backgroundColor", "red");
}, function () {
$(this).css("backgroundColor", "blue");
});工具方法 数据拷贝
jQuery.extend([deep], target, object1, [objectN])
- [deep]：默认值是false 浅拷贝 true:深拷贝
- target：目标对象
- object1, [objectN]:拷贝对象 传递一个对象拷贝一份,传递多个进行合并成为一个对象
var obj1 = {
name: "哈哈",
age: 100,
info: {
height: "200cm",
weight: "200kg"
}
};
// var obj2 = {name:"呵呵",age:200,hobby:"篮球",sex:"男"};
// 将obj1拷贝一份一模一样的
var resObj1 = $.extend(true, {}, obj1);
console.log(resObj1);
//重新定义对象值
resObj1.name = "11m";//原对象不改变
resObj1.info.height = "180cm";
resObj1.info.weight = "180kg";
// 改变后输出
console.log(resObj1);
//原对象的内嵌也改变
console.log(obj1); 
将多个多个对象合并成一个对象 键是唯一的，后边的键值覆盖前边的
var obj1 = {
name: "哈哈",
age: 100,
info: {
height: "200cm",
weight: "200kg"
}
};
var obj2 = {name:"呵呵",age:200,hobby:"篮球",sex:"男"};
var resObj2 = $.extend(false,{},obj1,obj2);
console.log(resObj2);
浅拷贝
- 引用：对应用一块堆内存地址
- 浅拷贝：数据之间有堆内存的引用
- 直接赋值 两个对象指向同一块堆内存空间
var testObj1 = {name:"haha",age:100};
var copyObj1 = testObj1;
copyObj1.name = "呵呵";
console.log(testObj1,copyObj1);
console.log(testObj1.name,copyObj1.name);
// 创建一个新对象
var testObj2 = {
name: "haha",
age: 100,
info: {
height: "200cm",
weight: "200kg"
}
};
var copyObj2 = {};
for(var key in testObj2){
// console.log(key);
// console.log(testObj2[key]);
copyObj2[key] = testObj2[key];
}
copyObj2.name = '222';//只改变直接设置的对象
copyObj2.info.height = "180cm";//原来的对象也改变
copyObj2.info.weight = "180kg";
console.log(testObj2);
console.log(copyObj2);
深拷贝
数据之间是完全独立的，没有堆内存引用 不会改变原数据
var testObj2 = {
name: "haha",
age: 100,
info: {
height: "200cm",
weight: "200kg"
}
};
var jsonStr = JSON.stringify(testObj2);
var deepCopyObj = JSON.parse(jsonStr);
deepCopyObj.info.height = "2000cm";
deepCopyObj.info.weight = "100000kg";
console.log(deepCopyObj);
console.log(testObj2);
递归实现深拷贝（函数封装）
// 递归实现深拷贝
var testObj3 = {
name: "haha",
age: 100,
info: {
height: "200cm",
weight: "200kg"
},
test: [10, 20, 30]
};
var a = 10;
var res = deepCopy(testObj3);
res.info.height = "测试";
res.info.weight = "测试1";
console.log(res);
console.log(testObj3);
//封装函数
// souceData :原数据
function deepCopy(souceData) {
if (typeof souceData == "object" && souceData != null) { // 判断数据类型 复杂数据类型 进行操作
// 创建容器 用来保存对应的属性和值
var tarData = souceData instanceof Array ? [] : {};
// 进行迭代
for (var key in souceData) {
// 给当前对象增加属性和值
// 判断 数据类型 复杂数据类型 进行操作
if (typeof souceData[key] == "object" && souceData[key] != null) {
// 将深拷贝完成的返回值赋值给当前属性
tarData[key] = deepCopy(souceData[key]);
} else { //基本数据类型直接增加属性和值
tarData[key] = souceData[key];
}
}
// 将赋值完成的数据返回
return tarData;
} else { //基本数据类型直接返回
return souceData;
}
}