一、给未来的元素绑事件（官方推荐的方式）-on
- 像bind那样使用，但是不能给未来的元素绑定
$(元素).bind("click",function(){}); //on $(元素).on("click",function(){}); //比如 $("div").on("click",function(){});
- 事件委托（用on来实现）
//含义：即将原本发生在元素身上的事件委托给父级来监听。适用于给未来的元素绑定 //即不给元素绑定，而是给祖先绑 <ul> <li>123</li> <li>123</li> </ul> //原本要给li标签绑定事件，但是现在不给他绑，而是代理给它父级来绑定 <script> //不用事件委托： $("li").on("click",function(){}); //用了事件委托： $('祖先').on("原本要绑定事件的元素","click",function(){}); //比如： $('ul').on("click","li",function(){}); </script>
二、事件对象
和JS一样。都记录事件发生时的那些细节。行车记录仪。比如你点击了哪个按钮，哪个键盘，当前坐标，是否冒泡等都被记录了。
只需要在事件处理程序（事件函数）写一个参数即可。
1. $("div").click(function(e){ console.log(e); //打印，得到该对象的宝库，所有的方法和属性 }); 2. $("div").bind("click",function(e){ console.log(e); }); 3. $('ul').on("click","li",function(e){});
- 重要的属性
e.clientX 鼠标点击的x坐标（相对的）（浏览器的可视范围内）
e.clientY 鼠标点击的y坐标
e.pageX 鼠标点击的x方向的绝对坐标（包括浏览器被卷去的宽度度）
e.pageY 鼠标点击的y方向的绝对坐标（包括浏览器被卷去的高度）
e.keyCode 键码
e.which 鼠标按键，1 表示左键，2中，3右键 - 重要的方法
e.stopPropagation(); //阻止事件冒泡
e.preventDefault(); //阻止默认事件
三、滚动条事件
- 事件
//任何元素都有滚动条事件，只要该元素有滚动条，就可以给其绑定滚动条事件，从而在滚动滚动条时，触发它 $("body").on("scroll",function(){ });
- 被卷去的高度和宽度
1. 高度 //JS 元素.scrollTop; //JQ: $(元素).scrollTop(); 2. 宽度 元素.scrollLeft; //JQ: $(元素).scrollLeft();
- 页面的总宽和总高
1. 总高 元素.scrollHeight; //JQ没有，用JS的来代替 2. 总宽 元素.scrollWidth; //JQ没有，用JS的来代替
四、JQ的盒模型
- 定位父级
//一个元素有2个父级，直接父级，一个是定位父级 JS： 元素.parentNode;//亲爹 元素.offsetParent;//干爹，会改，跟着css的postion JQ: $(元素).parent();//亲爹 $(元素).offsetParent();//干爹
- 元素的绝对水平距离
一般我们只需要该元素到浏览器最左侧和最顶部的绝对距离 //JS ，自己写了一个方法：getPos() 元素.getPos().left; //JQ不需要自己造轮子，直接调用它给我们封装好的方法，直接用即可 $("元素").offset().left;
- 元素的绝对垂直距离
$("元素").offset().top;
相关单词
- on 在什么的上面
- in 在。。。的里面
资料、作业、笔记下载链接： https://www.imqd.cn/jquery-dom.html
