JavaScript Scroll家族以及封装

【JavaScript Scroll家族以及封装】的更多相关文章

JavaScript Scroll家族以及封装

JavaScript Scroll家族以及封装 scrollTop & scrollLeft 别卷去的值,就是当滑动滚轮浏览网页的时候,网页隐藏在屏幕上方或左侧的距离获得scrollTop 或者 scrollLeft的值有三种方式支持谷歌浏览器和没有声明<!DOCTYPE html>:document.body.scrollTop 支持火狐和其它浏览器: document.documentElement.scrollTop 支持ie9+ 和最新浏览器 : window.pageX…

JavaScript offset、client、scroll家族

offsetParent <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> </head> <body> <!-- offset demension 偏移量定位父级 offsetParent 如果没有定位找body offsetLeft offsetTop offsetHeight offset…

scroll家族属性

上一篇主要分析了一下offset家族属性,本篇文章则主要是来分析一下scroll家族属性. 首先,scroll家族包括4个属性: 网页正文宽度:document.body.scrollWidth; 网页正文高度:document.body.scrollHeight; 网页被卷去的高:document.body.scrollTop; 网页被卷去的左:document.body.scrollLeft; 接下来,我们先简单看一下相关属性. 例1: <!DOCTYPE html> <html l…

js中对象的一些特性，JSON，scroll家族

一.js中对象的一些特性对象的动态特性 1.当对象有这个属性时,会对属性的值重写 2.当对象没有这个属性时,会为对象创建一个新属性,并赋值获得对象的属性的方式为元素设置DOM0级事件二.JSON Javascript Object Notation 即一种轻量级的数据交换格式,我们称之为js对象表示法;使用JSON进行数据传输的优势之一就是轻量,表示法就是流行的键值对,Key:value. JSON的结构: JSON值的获取: 点语法和中括号,推荐用点语法,可以不用在意属性的是否有引…

javascript继承(八)－封装

这个系列主要探讨的是javascript面向对象的编程,前面已经着重介绍了一下js的继承,下面想简单的说一下js如何实现封装的特性. 我们知道面向对象的语言实现封装是把成员变量和方法用一个类包围起来,对类中变量的访问只能通过已定义的接口.封装可以算是一种信息隐藏技术,java通过private修饰符将成员变量私有化,并提供对外修改的接口,以控制类中的成员变量的访问和修改.当然在这些方法中可以对数据进行一些加工. 在前面文章已经介绍了js的属性问题,那么在js中如何实现对类的属性隐藏呢?这里封装有…

（一）Javascript 面向对象编程：封装

Javascript 面向对象编程:封装作者:阮一峰 Javascript是一种基于对象(object-based)的语言,你遇到的所有东西几乎都是对象.但是,它又不是一种真正的面向对象编程(OOP)语言,因为它的语法中没有class(类). 那么,如果我们要把"属性"(property)和"方法"(method),封装成一个对象,甚至要从原型对象生成一个实例对象,我们应该怎么做呢? 一. 生成实例对象的原始模式假定我们把猫看成一个对象,它有"名字&q…

javascript设计模式系列二-封装

JavaScript封装: var Book = function (id, name, price) { this.id = id, this.name = name, this.price = price } Book.prototype.display = function () { //展示书本 } var book = new Book(10, 'js', 30); book.display(); console.log(book.name); 问题:通过this和prototype添…

第52天：offset家族、scroll家族和client家族的区别

一.offset家族 1.offsetWidth offsetHeight offsetLeft offsetTop offsetParent共同组成了offset家族,用来获取元素尺寸. offsetWidth = width + padding + border offsetHeight = height + padding + border 2.offsetLeft 和 offsetTop: 返回距离上级带有定位的盒子左边的位置,如果父级元素没有定位,则以body为准 offsetLeft…

javaScript动画2 scroll家族

offsetWidth和offsetHight (检测盒子自身宽高+padding+border) 这两个属性,他们绑定在了所有的节点元素上.获取之后,只要调用这两个属性,我们就能够获取元素节点的宽和高. offset宽/高 = 盒子自身的宽/高+ padding +border: offsetWidth = width+padding+border: offsetHeight = Height+padding+border: offsetLeft和offsetTop (检测距离父盒子有定…

Javascript面向对象特性实现封装、继承、接口详细案例——进级高手篇

Javascript面向对象特性实现(封装.继承.接口) Javascript作为弱类型语言,和Java.php等服务端脚本语言相比,拥有极强的灵活性.对于小型的web需求,在编写javascript时,可以选择面向过程的方式编程,显得高效:但在实际工作中,遇到的项目需求和框架较大的情况下,选择面向对象的方式编程显得尤其重要,Javascript原生语法中没有提供表述面向对象语言特性的关键字和语法(如extends.implement).为了实现这些面向对象的特性,需要额外编写一些代码,如下.…

javascript面向对象(一)：封装

本文来自阮一峰学习Javascript,最难的地方是什么? 我觉得,Object(对象)最难.因为Javascript的Object模型很独特,和其他语言都不一样,初学者不容易掌握. 下面就是我的学习笔记,希望对大家学习这个部分有所帮助.我主要参考了以下两本书籍: <面向对象的Javascript>(Object-Oriented JavaScript) <Javascript高级程序设计(第二版)>(Professional JavaScript for Web Develop…

javascript笔记——jqGrid再次封装

xingrunzhao js插件再次封装 demo 'use strict'; /** * commerce grid框架 * 依赖jqgrid */ (function ($_self, jQuery) { //jQuery.ajaxSetup({cache: false}); var _this = $_self; /** * 底层核心列表 * @param grid_selector gird选择器 * @param pager_selector 分页器选择器 * @param loadU…

读书笔记之 - javascript 设计模式 - 接口、封装和链式调用

javascript 采用设计模式主要有下面的三方面原因: 可维护性:设计模式有助于降低模块之间的耦合程度.这使代码进行重构和换用不同的模块变得容易,也使程序员在大型项目中合作变得容易. 沟通:设计模式为处理不同类型的对象提供了一套通用的术语.程序员可以简洁的描述自己系统的工作方式. 性能:采用一些优化性能的模式,可以大幅度提高程序的执行效率,如享元模式和代理模式等同时,滥用设计模式也会带来一些后果: 复杂性:代码变得复杂,新手难以理解性能:多数设计模式会或多或少的降低代码的性能实现容易,…

JavaScript设计模式 Item 3 --封装

在JavaScript 中,并没有对抽象类和接口的支持.JavaScript 本身也是一门弱类型语言.在封装类型方面,JavaScript 没有能力,也没有必要做得更多.对于JavaScript 的设计模式实现来说,不区分类型是一种失色,也可以说是一种解脱. 从设计模式的角度出发,封装在更重要的层面体现为封装变化. 通过封装变化的方式,把系统中稳定不变的部分和容易变化的部分隔离开来,在系统的演变过程中,我们只需要替换那些容易变化的部分,如果这些部分是已经封装好的,替换起来也相对容易.这可以最大程…

Javascript面向对象特性实现封装、继承、接口详细案例

Javascript面向对象特性实现(封装.继承.接口) Javascript作为弱类型语言,和Java.php等服务端脚本语言相比,拥有极强的灵活性.对于小型的web需求,在编写javascript时,可以选择面向过程的方式编程,显得高效:但在实际工作中,遇到的项目需求和框架较大的情况下,选择面向对象的方式编程显得尤其重要,Javascript原生语法中没有提供表述面向对象语言特性的关键字和语法(如extends.implement).为了实现这些面向对象的特性,需要额外编写一些代码,如下.…

JavaScript常用工具方法封装

因为工作中经常用到这些方法,所有便把这些方法进行了总结. JavaScript 1. type 类型判断 isString (o) { //是否字符串 return Object.prototype.toString.call(o).slice(8, -1) === 'String' } isNumber (o) { //是否数字 return Object.prototype.toString.call(o).slice(8, -1) === 'Number' } isBoolean (o)…

JavaScript中DOM查询封装函数

在JavaScript中可以通过BOM查询html文档中的元素,也就是所谓的在html中获取对象然后对它添加一个函数. 常用的方法有以下几种: ①document.getElementById() 通过元素ID在全局查找元素 ②document.getElementsByTagName() 通过元素标签名字在全局查找元素 element.getElementsByTagName() 通过元素标签在指定元素内部查找元素 ③document.getElementsByClassName() 通过元素…

Javascript:来一个AJAX封装函数

前不久换工作了,最近一直在出差,忙得跟狗一样,所以博客都荒废许久了. 最近的工作中涉及到大量的ajax操作,本来该后台做的事也要我来做了.而现在使用的ajax函数是一个后台人员封装的—-但他又是基于 jquery的ajax,所以离开了jquery这个函数就毫无作用了.而且我觉得,jquery的ajax方法是很完善的了,可以直接用,如果都有 jquery了,那么他的ajax就不用白不用了.我缺少的是一个能在没有jquery的情况下使用的ajax方法. 所以我也花一天时间写了一个,参数与调用方法类似…

JavaScript设计模式——前奏（封装和信息隐藏）

前面一篇讲了js设计模式的前奏,包括接口的讲解.. 三:封装和信息隐藏: 信息隐藏用来进行解耦,定义一些私有的数据和方法. 封装是用来实现信息隐藏的技术,通过闭包实现私有数据的定义和使用. 接口在这其中扮演的角色是:提供一份记载着可公众访问的方法的契约,它定义了两个对象间可以具有的关系. 接下来介绍一下创建对象的基本模式: 基本模式有3种:门户大开型.用下划线表示方法和属性的私用性.闭包创建私用成员举个例子,你要创建一个Book类,别人会创建实例并使用. //Book(isbn,title,a…

Javascript：常用函数封装

//cookie function setCookie(name, value, iDay) { if(iDay!==false) { var oDate=new Date(); oDate.setDate(oDate.getDate()+iDay); document.cookie=name+'='+value+';expires='+oDate+';path=/'; } else { document.cookie=name+'='+value; } } function getCookie…

javascript scroll事件

http://developer.51cto.com/art/201107/277994.htm onscroll事件 window.onscroll|| document.onscroll var scroll = document.documentElement.scrollTop || document.body.scrollTop; http://bigspotteddog.github.io/ScrollToFixed/…

JavaScript 函数(方法)的封装技巧要领及其重要性

作为一枚程序猿,想必没有人不知道函数封装吧.在一个完整的项目开发中,我们会在JS代码中对一些常用(多个地方调用)的操作进行一个函数的封装,这样便于我们调试和重复调用,以致于能够在一定程度上减少代码的冗余,从而降低浏览器对JS代码的读取时间,增加我们项目程序的工作效率.因此,可以说,函数方法封装是一个程序猿的必备技能.那么,封装时应该注意什么呢?--我的答案是:灵活性. 这样,我们先来进行一个简单的测试: 1.在浏览器中console一句Hello World!,代码如下: console.log…

深入浅出javascript（三）封装和继承

一.私有变量和公有变量通过var修饰的是私有变量. 二.私有变量的访问方法三.特权.公有和私有方法一个例子: function f(name) { var name=name; //私有变量 this.show1=function() //①特权方法,通过this修饰 { alert(name); //可以访问私有变量: } var show2=function() //②私有方法,通过var修饰 { alert(name); //可以访问私有变量 } show2(); //调用私有方法…

【前端学习笔记04】JavaScript数据通信Ajax方法封装

//Ajax 方法封装 //设置数据格式 function setData(data){ if(!data){ return ''; } else{ var arr = []; for(k in data){ if(!data.hasOwnProperty(k)) continue; if(typeof data[k] == 'function') continue; var value = data[k].toString(); var key = encodeURIComponent(k);…

JavaScript——XMLHttpRequest 家族

https://www.zhangxinxu.com/wordpress/2013/10/understand-domstring-document-formdata-blob-file-arraybuffer/ DOMString 在JavaScript中,DOMString就是String(responseText).规范解释说DOMString指的是UTF-16字符串,而JavaScript正是使用了这种编码的字符串,因此,在Ajax中,DOMString就等同于JS中的普通字符串. Do…

原生javascript 基础动画函数封装(二)

<!DOCTYPE html> <html> <head> <title></title> <style type="text/css"> *{ margin:0;padding: 0;} div{position: absolute; width: 100px; height: 100px; background: red; left: 0;top: 100px;} </style> </hea…

原生javascript 基础动画函数封装(一)

<!DOCTYPE html> <html> <head> <title></title> <style type="text/css"> *{ margin:0;padding: 0;} div{position: absolute; width: 100px; height: 100px; background: red; left: 0;top: 100px;} </style> </hea…

javascript开发中的封装模式（转）

var bgAuido={ audio : pingfan.$$('audio'), audioBtn : pingfan.$$('audioBtn'), init : function(){ var _this=this; window.addEventListener(touchStart,function(){ _this.audio.play(); window.removeEventListener(touchStart,arguments.callee) 9 },false); th…

关于javascript的cookie的封装

/******************cookie*********************/ /* cookie的组成部分: 名称:唯一值,不区分大小写,必须经过URL编码值:必须经过URL编码域:只是改cookie在哪个域中是有效的. 路径:如果cookie的路径在www.guo.com中能访问,那么在www.yan.com页面就不会发送cookie.即使cookie来自同一个域中的失效时间:在什么时间点被删除安全标志:指定后,cookie只有在使用ssl链接的时候才发送到服务器.…

【前端学习笔记03】JavaScript对象相关方法及封装

//Object.create()创建对象 var obj = Object.create({aa:1,bb:2,cc:'c'}); obj.dd = 4; console.log(obj.cc); // c console.log(obj.hasOwnProperty("cc")); //false console.log(obj.hasOwnProperty("dd")); // true //仿Object.create()方法创建CreateObject函数…