javascript第十八天jqueryDOMBOM和事件相关

jQuery的extend方法

作用：合并对象

用法1：$.extend(对象1，对象2，对象3) 将所有对象的内容合并到第一个对象中

用法2：$.extend({}，对象1，对象2，对象3) 利用返回值得到拼接好的对象即可

用法3：$.extend(true,对象1，对象2.....)深拷贝，可以断绝掉合并对象和先前对象的联系

jQuery的BOM DOM 事件相关

(1) 获取元素宽高

① width/height：获取元素自身宽度和高度不包含padding margin border

② innerWidth/Height：获取元素自身宽高+padding

③ outerWidth/Height：获取元素自身宽高 + padding + border

④ outerWidth(true)/Height(true)：获取元素自身宽高+padding+border+margin

(2) 获取元素的位置

① offset

1) 作用：获取元素到页面顶部和左侧的距离

2) 用法：元素.offset()

② Position

1) 作用：获取元素自身的定位值

2) 用法：元素.position()

③ 以上两个方法得到的结果都是一个对象对象中有两个属性 left 和 top

(3) 操作元素的滚动条

① scrollTop

1) 获取：元素.scrollTop()

2) 设置：元素.scrollTop(n) n是一个数字用来表示要设置的scrollTop值

② scrollLeft

1) 用法和scrollTop完全一样

2) 作用：用来获取元素内容被卷去的宽度

(4) 总结：我们在jQuery中使用方法获取的BOM相关数据都是数字可以直接参与运算

(1) jQuery获取子元素：children 父元素.children()

(2) Jquery创建元素对象：$(“html内容”)

①

② 相对比于获取的jQuery元素，少了很多属性 context selector，其实是没有问题的，因为context是上下文环境，由于创建的jQuery元素没有追加到页面中所以不具备上下文环境，selector是选择器，我们创建的元素没有选择器

(3) jQuery追加元素

① append

1) 父元素.append(要追加的子元素)

2) 作用：将子元素追加到父元素的末尾

② appendTo

1) 子元素.appendTo(父元素)

2) 作用：将子元素追加到父元素的末尾

③ prepend

1) 用法和append完全一样

2) 作用：追加到父元素的最前面

④ prependTo

1) 用法完全等同于appendTo

2) 作用：追加到父元素的最前面

⑤ before ：

1) $(参考元素).before（新子元素）

2) 作用：将新子元素插入到参考元素的前面

⑥ insertBefore：

1) $(新子元素).insertBefore(参考节点)

2) 作用：将新子元素插入到参考元素的前面

⑦ after：

1) $(参考元素).after（新子元素）

2) 作用：将新子元素插入到参考元素的后面

⑧ insertAfter：

1) $(新子元素).insertAfter(参考节点)

2) 作用：将新子元素插入到参考元素的后面

(4) jQuery删除元素

① remove

1) 用法：元素.remove()

② detach

1) 用法：元素.detach()

③ Remove和detach的区别

1) 前者移除掉的元素之后重新追加进页面中的时候原本具备的事件就被删除掉了， detach则可以单独删除元素而保留元素身上的事件

④ empty

1) 作用：清空元素内容

2) 用法：元素.empty()

(5) jQuery克隆节点

① Clone

1) 用法1：元素.clone(); 可以将元素及其内容一并克隆下来

2) 用法2：元素.clone(true); 可以将元素及其内容以及元素的事件一并克隆下来

(6) jQuery替换节点

① replaceWith

1) 用法：要被替换的元素.replaceWith(用来替换的元素)

② replaceAll

1) 用法：用来替换的元素.replaceAll(要被替换的元素)

(7) jQuery的包裹节点

① wrap

1) 用法：jQuery元素.wrap(用来包裹的元素)

2) 作用：在每一个满足条件的元素外面，包裹一个指定的元素

② wrapAll

1) 用法：jQuery元素.wrapAll(用来包裹的元素)

2) 作用：将所有的满足条件的元素都包裹到指定的元素中

③ wrapInner

1) 用法：jQuery元素.wrapInner(用来包裹的元素)

2) 作用：将所有满足条件的元素的内容包裹上指定的元素

④ unwrap

1) 用法：jQuery元素.unwrap();

2) 作用：删除直接父元素

3) 特点：如果父元素是body，就删不掉了

事件相关

(1) 添加事件的方式和事件对象

① jQuery元素.事件名(function(){})

② jQuery的事件对象就是通过处理函数的形参来接收

1) jQuery事件对象中的重要属性

originalEvent：原生事件对象
clientX/Y：事件触发时鼠标距离可视窗口左侧和顶部的距离
pageX/Y：事件触发时鼠标距离页面左侧和顶部的距离
offsetX/Y：事件触发时鼠标距离实际触发事件的元素的左侧和顶部的距离
screenX/Y：事件触发时鼠标距离屏幕左侧和顶部的距离
preventDefault：阻止事件默认行为
stopPropagation：阻止冒泡
delegateTarget：添加事件的元素完全等同于this 注意：是一个dom元素，如果想使用jQuery的方法需要转换

(2) jQuery的事件绑定

① On

1) jQuery对象.on(“事件名称”,function(){})

普通的添加事件的方式也可以给同一元素添加多个同类事件，

2) jQuery对象.on(“事件名称1 名称2 名称3”，function(){})

3) jQuery对象.on({事件名:function(){}, 事件名:function(){}})

4) jQuery对象.on(“自定义事件名”,function(){})

无法直接触发事件因为没有触发机制
如果想触发需要使用trigger方法

a) Jquery对象.trigger(“自定义事件名”)

(3) jQuery事件委托

① jQuery父级对象.on(“事件名称”,”子元素选择器”,function(){})

② jQuery的事件委托中处理函数的this 指向实际触发事件的子元素，而且this的值是dom元素如果要用jQuery方法需要转换为jQuery元素

③ 如果实在需要获取绑定事件的父元素，可以使用ev.delegateTarget

(4) Jquery取消事件绑定

① jQuery对象.off(“事件名称”)

② 作用：取消掉所有指定的这一类事件

(5) jQuery的命名空间

① 在绑定事件的时候，会给事件设置命名空间

1) 写法：jQuery对象.on(“事件名称.命名空间名”,funciton(){})

② 类似于我们css中的类名，在解绑事件的时候可以利用命名空间进行精确的解绑

1) 写法：jQuery对象.off(“事件名.命名空间名”)

2) 作用：可以解绑掉指定的命名空间的事件

(6) jQuery的触发一次事件

① One

1) 用法：jQuery元素.one(“事件名称”,function(){})

2) 作用：只触发一次事件

(7) jQuery的合成事件

① Hover

1) 用法：jQuery元素.hover(function(){},function(){})

2) 作用：hover是一个合成事件将mouseenter 和 mouseleave合并为一个事件，第一个函数是鼠标移入事件的函数第二个函数是鼠标移出事件的函数

posted @ 2020-10-09 19:14 默默的1 阅读(266) 评论(0) 收藏举报

刷新页面返回顶部

javascript第十八天jqueryDOMBOM和事件相关

公告