js 封装的函数 总结

1、一个获取ID 元素的

//  获取元素对象
    function g(id){return document.getElementById(id);}//用法  以oDiv 为例var oDiv=g(‘oDiv‘);

2、获取元素相对屏幕左边的距离

 //获取元素相对屏幕左边的距离 传的参为ID
    function getPosition(node) {
        var left = node.offsetLeft;
        var top = node.offsetTop;
        var parent = node.offsetParent;
        while (parent !== null) {
            left += parent.offsetLeft;
            top += parent.offsetTop;
            parent = parent.offsetParent;
        }
        return {"left": left, "top": top};
    }//像这样的 封装一个函数里面, 返回两个参, 调用的时候如下:leftUpDiv topDiv  可以封装函数1,把ID元素 获取出来, 就可以用下面的函数。var mainX = getPosition(leftUpDiv).left;//左上角横坐标var mainY=getPosition(topDiv).top;

注: 其中用的函数 offsetLeft  offsetParent;

时间: 2024-08-28 06:26:19

js 封装的函数 总结的相关文章

原生JS封装_new函数,实现new关键字的功能

一.前言 众所周知:没有对象怎么办?那就new一个! 那么在JS中,当我们new一个对象的时候,这个new关键字内部都干了什么呢?现在我们就来剖析一下原生JS中new关键字内部的工作原理. 二.原始的new 首先,我们先new一个对象看看: 1 //创建Person构造函数,参数为name,age 2 function Person(name,age){ 3 this.name = name; 4 this.age = age; 5 } 6 //实例化对象小明 7 xm = new Person

原生JS 封装运动函数

在学原生JS之前,一直用jQuery 写运动,各种方便,但是不知其所以然,今天得空看了一个javascript 视频教程(这里不说了,以防广告的嫌疑),只能用一个词语形容之后的感觉-------醍醐灌顶. /* - obj 指的是DOM对象 - json 指的是 CSS样式 - 例 startMove(oDiv,{width:100,height:100},function(){}) */ function startMove(obj,json,fnEnd){ clearInterval(obj

原生JS封装ajax函数

1 function ajax(params) { 2 params.data = params.data || ""; 3 params.type = params.type || "get"; 4 if(!params.url) { 5 throw new Error("未指定连接"); 6 } 7 params.async = params.async || true; 8 var xhr; 9 //兼容IE 10 if(window.VB

JS封装继承函数

1 function extend(child,parent){ 2 var F=function(){} 3 F.prototype=parent.prototype; 4 child.prototype=new F(); 5 child.prototype=child; 6 child.uber=parent.prototype; //uber指向父对象的原型.方便子对象调用父对象原型中的重写的方法. 7 } 8 function Shape(){} 9 Shape.prototype.na

JS封装cookie操作函数实例(设置、读取、删除)

本文实例讲述了JS封装cookie操作函数.分享给大家供大家参考,具体如下: ? 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 /*设置cookie*/ function setCookie(name, value, iDay) {   var oDate=new Date();   oDate.setDate(oDate.getDate()+iDay);   document.cook

原生JS封装创建多级菜单函数

手写一个使用原生JS封装的多级菜单的函数,满足以下几点需求. 子类层级不确定,可根据数据自动生成多级菜单. 操作便捷,只需传入一个HTML标签. 缺点: 需要满足特定的数据结构 废话不多说,展示代码.先展示数据代码,注意,使用此封装函数需要满足此数据结构. var data = [{ id: 1, address: "安徽", parent_id: 0 }, { id: 2, address: "江苏", parent_id: 0 }, { id: 3, addre

js中的函数

一.函数定义的方式 (1)普通方式 语法: function 函数名(参数){ 函数体 } Code: function method(){ alert("testMethod"); } method(); (2)匿名函数 语法:function(参数){ 函数体 } Code: var method = function(){ alert("yyy"); }; method(); (3)对象函数 语法:new Function(参数列表,函数体): 注意:参数名称

用jQuery基于原生js封装的轮播

我发现轮播在很多网站里面都用到过,一个绚丽的轮播可以为网页增色不少,最近闲来无事,也用原生js封装了一个轮播,可能不像网上的插件那么炫,但是也有用心去做.主要用了闭包的思想.需要传递的参数有:图片地址的数组,图片宽度,上一页,下一页的id,图片列表即ul的id(这儿使用无序列表排列的图片),自动轮播间隔的时间.功能:实现了轮播的自动轮播,可以点击上一页,下一页进行切换. 下面是html中的代码,只需要把存放的容器写好,引入jquery即可: <!DOCTYPE html><html>

原生JS封装Ajax插件(同域&amp;&amp;jsonp跨域)

抛出一个问题,其实所谓的熟悉原生JS,怎样的程度才是熟悉呢? 最近都在做原生JS熟悉的练习... 用原生Js封装了一个Ajax插件,引入一般的项目,传传数据,感觉还是可行的...简单说说思路,如有不正确的地方,还望指正^_^ 一.Ajax核心,创建XHR对象 Ajax技术的核心是XMLHttpRequest对象(简称XHR),IE5是第一款引入XHR对象的浏览器,而IE5中的XHR对象是通过MSXML库中的一个ActiveX对象实现的,因此在IE中可能有3个版本,即MSXML2.XMLHttp.