jQuery事件(笔记)

单个事件注册

事件基本和原生一致

<div style=\"width: 100px; height: 100px; background-color: aqua;\"></div><script>$(\"div\").click(function() {$(this).css(\"background\", \"pink\");})</script>

事件处理on()绑定事件

element.on(events,selector,fn)
events一个或者多个用空格分隔的事件类型
selector元素的子元素选择器
fn回调函数

优势：可以事件委派，把原来加给子元素上的事件绑定在父元素身上，把事件委派给父元素
它也可以把事件绑定在新创建的元素上

<ul><li>1</li><li>2</li><li>3</li></ul><script>$(\"ul\").on(\"click\", \"li\", function() {$(this).css(\"background\", \"pink\");})</script>

事件处理off()解绑事件

$(“ul”).off(“click”, “li”);只解绑了li上的事件
$(“ul”).off(“click”);解绑了点击事件
$(“ul”).off();解绑了所有事件

<ul><li>1</li><li>2</li><li>3</li></ul><script>$(\"ul\").on(\"click\", \"li\", function() {$(this).css(\"background\", \"pink\");})$(\"ul\").off(\"click\", \"li\");</script>

用one只触发一次事件<ul><li>1</li><li>2</li><li>3</li></ul><script>$(\"ul\").one(\"click\", \"li\", function() {$(this).css(\"background\", \"pink\");})</script>

自动触发事件

三种触发方式

<div style=\"width: 100px; height: 100px; background-color: aqua;\"></div><script>$(\"div\").on(\"click\", function() {$(this).css(\"background\", \"pink\");})$(\"div\").click();$(\"div\").trigger(\"click\");$(\"div\").triggerHandler(\"click\");</script>

阻止冒泡

stopPropagation()

<div style=\"width: 100px; height: 100px; background-color: aqua;\"></div><script>$(function() {$(\"document\").on(\"click\", function() {console.log(\"document\");})$(\"div\").on(\"click\", function(e) {console.log(\"div\");e.stopPropagation();})})</script>

拷贝

$.extend(deep,target,obj1,objn)
deep如果为true则为深拷贝，默认false浅拷贝
target拷贝的目标
obj1待拷贝的第一个对象

浅拷贝

<script>var Obj1 = {id: 0};var Obj2 = {id: 1,name: \"yy\"};$.extend(Obj1, Obj2);console.log(Obj1); //会覆盖原来的数据</script>

深拷贝

<script>var Obj1 = {id: 0,name: \"yu\",age: 19};var Obj2 = {id: 1,name: \"yy\"};$.extend(true, Obj1, Obj2);console.log(Obj1); //不会覆盖原来的数据，如果里面有不冲突的属性，会合并到一起</script>

多库共存

jQuery使用$作为标识符，但其他的库也会使用￥作为标识符，一起使用会引起冲突

解决方案：把$统一改为jQuery

尺寸

<script>// 获取高度/宽度console.log($(\"div\").width());// 获取宽度+paddingconsole.log($(\"div\").innerWidth());// 获取宽度+padding+borderconsole.log($(\"div\").outerWidth());// 获取宽度+padding+border+marginconsole.log($(\"div\").outerWidth(true));// 如果参数为空，就是获取值，返回的是字符型// 如果参数为数字，则是修改值// 参数可以不写单位</script>

位置

offset、position、scollTop/ScollLeft

<div style=\"width: 100px; height: 100px; background-color: aqua;\"></div><script>$(function() {// 获取位置console.log($(\"div\").offset());// 获取上偏移位置console.log($(\"div\").offset().top);// 设置位置$(\"div\").offset({top: 200,left: 200})})</script>

<script>$(function() {// 获取有定位的距父盒子位置// 不能设置偏移console.log($(\"div\").position());})