jQuery元素操作

1.1   元素操作

1.1.1    高度和宽度

$(“div”).height();            // 高度

$(“div”).width();             // 宽度

.height()方法和.css(“height”)的区别:

  1. 返回值不同,.height()方法返回的是 数字类型(20),.css(“height”)返回的是字符串类型(20px),因此.height()方法常用在参与数学计算的时候

1.1.2    坐标值

$(“div”).offset();             // 获取或设置坐标值 设置值后变成相对定位

$(“div”).position();         // 获取坐标值 子绝父相 只能读取不能设置

1.1.3    滚动条(滚动事件)

$(“div”).scrollTop();       // 相对于滚动条顶部的偏移

$(“div”).scrolllLeft();      // 相对于滚动条左部的偏移

案例:两次跟随的广告

案例:防腾讯固定导航栏

1.2   jQuery事件

1.2.1    绑定

click/mouseenter/blur/keyup

// 绑定事件

bind:$node.bind(“click”,function(){});

// 触发一次

one : $node.one(“click”,function(){});

delegate : $node.delegate(“p”,”click”,function(){});

on: $node.on(“click”,”p”,function(){});

1.2.2    解绑

unbind、undelegate 

off

1.2.3    触发

click  : $(“div”).click();

trigger:触发事件,并且触发浏览器默认行为

triggerHandler:不触发浏览器默认行为

 

1.3   jQuery事件对象介绍

event.stopPropagation()        //阻止事件冒泡

event.preventDefault();         //阻止默认行为

posted @ 2018-01-01 22:53  前端极客  阅读(144)  评论(0编辑  收藏  举报