企业设计网站公司有哪些,工程建设部网站,廊坊网站建设-纵横网络 网站,校园网上超市网站建设战略规划目录
事件之绑定事件处理器
事件之鼠标事件
事件之表单事件
事件之键盘事件
事件之浏览器事件
事件对象
jQuery遍历 事件之绑定事件处理器 1、 .on() 在选定的元素上绑定一个或多个事件处理函数
$(#button).on(click, function(event){console…
目录
事件之绑定事件处理器
事件之鼠标事件
事件之表单事件
事件之键盘事件
事件之浏览器事件
事件对象
jQuery遍历 事件之绑定事件处理器 1、 .on() 在选定的元素上绑定一个或多个事件处理函数
$(#button).on(click, function(event){console.log(事件处理器)
}); 事件委托
$(#ul).on(click, li, function(event){console.log($(this).text());
});
2、.one() 为元素的事件添加处理函数。处理函数在每个元素上每种事件类型 最多执行一次
$(#btn).one(click, function() {console.log(这是一个只能触发一次的事件.);
});
3、.off() 移除一个事件处理函数移除on事件处理器
!DOCTYPE html
html langen
headmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/titlescript src./js/jquery-3.6.0.min.js
/script
/head
bodybutton idbtn1添加事件按钮/buttonbutton idbtn2删除事件按钮/buttonbutton idbtn3按钮/buttonscriptfunction aClick() {console.log(点击事件)}$(#btn1).on(click,function () {$(#btn3).on(click, aClick);});$(#btn2).on(click,function () {$(#btn3).off(click, aClick);});/script
/body
/html
事件之鼠标事件 1、 .click() 为 JavaScript 的click 事件绑定一个处理器或者触发元素上的 click 事件 $(#btn).click(function() {alert(点击事件);
});
2、.hover() 将二个事件函数绑定到匹配元素上分别当鼠标指针进入和离开元素时被执行
$(li).hover(// 滑入function () {console.log(滑入)},// 滑出function () {console.log(滑出)}
);3、.mouseenter() 鼠标进入事件
$(div).mouseenter(function(){console.log(鼠标进入事件);
})
4、.mouseleave() 鼠标离开事件
$(div).mouseleave(function(){console.log(鼠标进入事件);
})
5、.mousemove() 鼠标滑动事件
$(div).mousemove(function(){console.log(鼠标进入事件);
})
6、.mouseover() 鼠标进入事件注支持事件冒泡
!DOCTYPE html
html langen
head
meta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/titlescript src./js/jquery-3.6.0.min.js/scriptstyle.container{width: 200px;height: 200px;background-color: red;}.box{width: 100px;height: 100px;background-color: green;}/style
/head
bodydiv classcontainerdiv classbox/div/divscript$(.container).mouseover(function(){console.log(鼠标进入事件container);})$(.box).mouseover(function(){console.log(鼠标进入事件box);})/script
/body
/html
7、.mouseout() 鼠标离开事件注支持事件冒泡
!DOCTYPE html
html langen
headmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/titlescript src./js/jquery-3.6.0.min.js/scriptstyle.container{width: 200px;height: 200px;background-color: red;}.box{width: 100px;height: 100px;background-color: green;}/style
/head
bodydiv classcontainerdiv classbox/div/divscript$(.container).mouseout(function(){console.log(鼠标离开事件container);})$(.box).mouseout(function(){console.log(鼠标离开事件box);})/script
/body
/html
事件之表单事件 1、.focus() 为 JavaScript 的 focus 事件绑定一个获取焦点处理函数或者触发元素上的 focus 事件 $(#input).focus(function() {alert(获得焦点事件);
});
2、.blur() 为 blur 事件绑定一个失去焦点处理函数
$(#other).click(function() {$(#target).blur();
});
3、.change() 为JavaScript 的 change 事件绑定一个表单改变处理函数
$(.target).change(function() {alert(内容改变);
});
4、.submit() 当用户提交表单时就会在这个表单元素上触发submit事件。它只能绑定在 form 元素上
$(#target).submit(function() {alert(表单提交事件);
});事件之键盘事件 1、 .keydown() 添加键盘按下事件 !DOCTYPE html
html langen
headmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/titlescript src./js/jquery-3.6.0.min.js
/script
/head
bodyinput typetext classusernamescript$(.username).keydown(function(){console.log(键盘);})/script
/body
/html2、.keypress() 添加键盘事件
!DOCTYPE html
html langen
headmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/titlescript src./js/jquery-3.6.0.min.js/script
/head
bodyinput typetext classusernamescript$(.username).keypress(function(){console.log(键盘);})/script
/body
/html3、.keyup() 添加键盘抬起事件
!DOCTYPE html
html langen
headmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/titlescript src./js/jquery-3.6.0.min.js
/script
/head
bodyinput typetext classusernamescript$(.username).keyup(function(){console.log(键盘);})/script
/body
/html
事件之浏览器事件 1、.resize() 添加浏览器窗口发生变化触发事件
!DOCTYPE html
html langen
headmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/titlescript src./js/jquery-3.6.0.min.js/script
/head
bodyscript$(window).resize(function(){console.log(改变浏览器尺寸);})/script
/body
/html2、.scroll() 浏览器滚动事件
!DOCTYPE html
html langen
headmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/titlescript src./js/jquery-3.6.0.min.js/script
/head
bodyscript$(window).scroll(function(){console.log(滚动);})/script
/body
/html
事件对象 1、event.type 获取事件类型
$(#btn).click(click,function(e){console.log(e.type);
})
2、event.target 获取当前元素对象
$(#btn).click(click,function(e){console.log(e.target);
})
3、event.currentTarget 获取当前元素对象 温馨提示 target指向触发事件元素 currentTarget指向添加事件的元素 !DOCTYPE html
html langen
headmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/titlescript src./js/jquery-3.6.0.min.js/scriptstylediv{width: 100px;height: 100px;background-color: red;}/style
/head
bodydiv idcontainerbutton idbtn按钮/button/divscript$(#container).click(click,function(e){console.log(container,e.currentTarget);console.log(container,e.target);})$(#btn).click(click,function(e){console.log(btn,e.currentTarget);console.log(btn,e.target);})/script
/body
/html4、event.preventDefault() 如果调用这个方法默认事件行为将不再触发。
a hrefhttps://itxiaotong.comitxiaotong/a
script$(a).click(click,function(e){e.preventDefault();})
/script5、event.stopPropagation() 防止事件冒泡到DOM树上也就是不触发的任何前辈元素上的事件处理函数
!DOCTYPE html
html langen
headmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/titlescript src./js/jquery-3.6.0.min.js/scriptstylediv{width: 100px;height: 100px;background-color: red;}/style
/head
bodydivbutton按钮/button/divscript$(div).click(click,function(e){console.log(div);})$(button).click(click,function(e){e.stopPropagation();console.log(button);})/script
/body
/html
jQuery遍历 1、 .map() 通过一个函数匹配当前集合中的每个元素,产生一个包含新的jQuery对象
!DOCTYPE html
html langen
headmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/titlescript src./js/jquery-3.6.0.min.js
/script
/head
bodyulli列表1/lili列表2/lili列表3/lili列表4/li/ulscript$(li).map(function(index,ele){console.log(index,ele);})/script
/body
/html
2、.each() 遍历一个jQuery对象为每个匹配元素执行一个函数
$(li).each(function(index,ele){console.log(index,ele);
}) 温馨提示 each和map的返回值不同map返回一个新的数组each返回原始数组 3、 .get() 通过jQuery对象获取一个对应的DOM元素
!DOCTYPE html
html langen
headmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/titlescript src./js/jquery-3.6.0.min.js/script
/head
bodyulli列表1/lili列表2/lili列表3/lili列表4/li/ulscriptvar li $(li).get(0);li.innerHTML 新的列表/script
/body
/html
