each()和offset()函数使用, e.target使用

each()

作用: 遍历对象和数组

var arr = ["a", "b", "c", "d", "e"]; 
var obj = { a: 'one', b: 'two', c: 'three', d: 'four', e: 'five' };
$.each(obj,function(key,value){
    console.log("Obj :" + key + '-' + value);
})
$.each(arr,function(key,value){
    console.log("arr :" + key + '-' + value);
})

结果: Obj :a-one Obj :b-two Obj :c-three Obj :d-four Obj :e-five arr :0-a arr :1-b arr :2-c arr :3-d arr :4-e

 

offset()

$('#box').offset()

作用: 获取或设置匹配元素在当前document的相对位置偏移(left和top)。 返回一个对象,包含两个整型属性:top和left。 此方法只对可见元素有效。 console.log("元素的偏移量坐标是："+left+','+top)

1. 获取元素相对于document的位置: left = $('box').offset().left top = $('box').offset().top

2. 设置元素相对于document的位置: $("#box").offset({left:123,top:99});

3. offset不仅可以设置单个元素，也可以设置多个元素不同的坐标值:

​

注意:

offset的设置值，必须成对出现，否则会报错!

offset() 方法 返回的top , left. 跟 margin-top,margin-left 也有关系。

如果元素有margin-top,margin-left. 它获取当前的margin, 没有则是默认值.

如果父元素也有margin,broder 的话。它也会受到影响,取值要更大,因为offset取的是当前与文档的坐标.

与js中offsetLeft/offsetTop区别

获取的都是数值,不带单位px

1. offsetLeft/offsetTop

   在页面任一元素的offsetLeft总是找到离其最近的已经定位的父元素或祖先元素定位，如果没有，就根据根节点body定位，然后获取其left值。

offset在原生js中仅仅可读，不可以设置.

2. offset().left/offset().top

返回或设置匹配元素相对于文档的偏移（位置）。 无论元素的父元素或祖先元素的position属性是什么，总是计算相对于文档的位置。

在jquery中 offset( ) 不写参数可以获取top left 两个数字类型的值,写了参数代表可以设置top left

offsetX/offsetLeft比较

1. offsetX 是鼠标点击位置相对于当前元素的内边框的距离

2. offsetLeft 是元素视图属性，偏移值, 这里是相对于祖先有定位的内边框 到 本身的外边框之间的距离

(offsetY和offsetTop同理)

offsetWidth/width区别

1. offsetWidth属性返回对象的padding+border+width属性值之和，style.width返回值就是定义的width属性值(即内容宽度).

2. offsetWidth属性仅是可读属性，而style.width是可读写的。

   但style.width读取时,只能读取内联样式,样式表里的样式无法读取(其他css样式也一样)

3. offsetWidth属性返回值是整数，而style.width的返回值是字符串，并且带有单位px。

4. style.width仅能返回以style方式定义的内部样式表的width属性值

width()

jQ中width(),height()函数能直接获取宽高度.结果为数值类型

 

e.target

作用: 获取触发当前事件的对象

可以是事件绑定对象,也可是该对象的子对象 (貌似具体到子对象)

e.target 和 e.currentTarget区别

e.currentTarget 指的仅是注册(绑定)了事件监听器的对象，而 e.target 还可以指该对象里的子对象，也是触发这个事件的对象.

 

JSON.parse(jsonobj)

作用: js中用来将json字符串数据解析为js对象,即{key:value}形式