jQuery事件2-第6次课-给未来的元素绑事件-事件对象-JS盒模型-附案例、任务

简介: jQuery事件2-第6次课-给未来的元素绑事件-事件对象-JS盒模型-附案例、任务
一、给未来的元素绑事件(官方推荐的方式)-on
  1. 像bind那样使用,但是不能给未来的元素绑定
$(元素).bind("click",function(){});
//on
$(元素).on("click",function(){});
//比如
$("div").on("click",function(){});
  1. 事件委托(用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){});
  1. 重要的属性
    e.clientX 鼠标点击的x坐标(相对的)(浏览器的可视范围内)
    e.clientY 鼠标点击的y坐标
    e.pageX 鼠标点击的x方向的绝对坐标(包括浏览器被卷去的宽度度)
    e.pageY 鼠标点击的y方向的绝对坐标(包括浏览器被卷去的高度)
    e.keyCode 键码
    e.which 鼠标按键,1 表示左键,2中,3右键
  2. 重要的方法
    e.stopPropagation(); //阻止事件冒泡
    e.preventDefault(); //阻止默认事件
三、滚动条事件
  1. 事件
//任何元素都有滚动条事件,只要该元素有滚动条,就可以给其绑定滚动条事件,从而在滚动滚动条时,触发它
$("body").on("scroll",function(){
});
  1. 被卷去的高度和宽度
1. 高度
//JS
元素.scrollTop;
//JQ:
$(元素).scrollTop();
2. 宽度
元素.scrollLeft;
//JQ:
$(元素).scrollLeft();
  1. 页面的总宽和总高
1. 总高
元素.scrollHeight;
//JQ没有,用JS的来代替
2. 总宽
元素.scrollWidth;
//JQ没有,用JS的来代替
四、JQ的盒模型
  1. 定位父级
//一个元素有2个父级,直接父级,一个是定位父级
JS:
元素.parentNode;//亲爹
元素.offsetParent;//干爹,会改,跟着css的postion
JQ:
$(元素).parent();//亲爹
$(元素).offsetParent();//干爹
  1. 元素的绝对水平距离
一般我们只需要该元素到浏览器最左侧和最顶部的绝对距离
//JS ,自己写了一个方法:getPos()
元素.getPos().left;
//JQ不需要自己造轮子,直接调用它给我们封装好的方法,直接用即可
$("元素").offset().left;
  1. 元素的绝对垂直距离
$("元素").offset().top;
相关单词
  1. on 在什么的上面
  2. in 在。。。的里面

资料、作业、笔记下载链接: https://www.imqd.cn/jquery-dom.html

相关文章
|
1月前
|
JavaScript 前端开发
使用jQuery操作DOM元素
使用jQuery操作DOM元素
16 1
|
1月前
|
JavaScript
jquery动画与事件案例
jquery动画与事件案例
12 0
|
20天前
|
JavaScript
事件触发、事件捕获与事件冒泡(js的问题)
事件触发、事件捕获与事件冒泡(js的问题)
10 0
|
8天前
|
开发框架 前端开发 JavaScript
采用C#.Net +JavaScript 开发的云LIS系统源码 二级医院应用案例有演示
技术架构:Asp.NET CORE 3.1 MVC + SQLserver + Redis等 开发语言:C# 6.0、JavaScript 前端框架:JQuery、EasyUI、Bootstrap 后端框架:MVC、SQLSugar等 数 据 库:SQLserver 2012
|
11天前
|
JavaScript 前端开发
JQuery和JS的区别有哪些?
JQuery和JS的区别有哪些?
12 0
|
22天前
|
JavaScript 前端开发 流计算
JS:oninput和onchange事件的区别
JS:oninput和onchange事件的区别
19 1
|
1月前
|
JavaScript 前端开发
js开发:请解释事件冒泡和事件捕获。
JavaScript中的事件处理有冒泡和捕获两种方式。事件冒泡是从子元素向上级元素依次触发事件,而事件捕获则从最外层元素向内层元素传递。`addEventListener`的第三个参数可设定事件模式,`false`或不设为冒泡,`true`为捕获。例如: ```javascript element.addEventListener(&#39;click&#39;, console.log, false); // 冒泡 element.addEventListener(&#39;click&#39;, console.log, true); // 捕获 ```
15 0
|
1月前
|
JavaScript
jQuery选择器案例之——index.js
jQuery选择器案例之——index.js
8 0
|
1月前
|
JavaScript
jQuery选择器案例之——index.html
jQuery选择器案例之——index.html
9 1
|
1月前
|
JavaScript 前端开发
JavaScript操作BOM简单案例
JavaScript操作BOM简单案例
9 1