关于 this 指向的理解
函数内 this 的指向
这些 this 的指向,是当我们调用函数的时候确定的。
调用方式的不同决定了this 的指向不同一般指向我们的调用者.
1. 普通函数 this 指向window
1234function fn() { console.log('普通函数的this' + this);}window.fn();
2. 对象的方法 this指向的是对象
o
123456var o = { sayHi: function() { console.log('对象方法的this:' + this); }}o.sayHi();
3.
构造函数 this 指向 ldh 这个实例对象 原型对象里面的this 指向的也是
ldh这个实例对象
1234function Star() {};Star.prototype.sing = function() {}var ldh = new...
关于 AJAX 的理解
原生AJAX
1.1 AJAX 简介
AJAX 全称为Asynchronous JavaScript And XML,就是异步的 JS 和 XML。
通过AJAX
可以在浏览器中向服务器发送异步请求,最大的优势:无刷新获取数据。 AJAX
不是新的编程语言,而是一种将现有的标准组合在一起使用的新方式。
1.2 XML 简介
XML 可扩展标记语言。 XML 被设计用来传输和存储数据。 XML 和 HTML
类似,不同的是 HTML 中都是预定义标签,而 XML 中没有预定义标签,
全都是自定义标签,用来表示一些数据。 比如说我有一个学生数据:
name = "孙悟空" ; age = 18 ; gender = "男" ;
用 XML 表示:
12345<student><name>孙悟空</name><age>18</age><gender>男</gender></student>
用 JSON...
jQuery 入门
jQuery 入门
jQuery 概述
JavaScript 库
JavaScript库:即
library,是一个封装好的特定的集合(方法和函数)。从封装一大堆函数的角度理解库,就是在这个库中,封装了很多预先定义好的函数在里面,比如动画animate、hide、show,比如获取元素等。
简单理解∶就是一个JS文件,里面对我们原生js代码进行了封装,存放到里面。这样我们可以快速高效的使用这些封装好的功能了。
比如jQuery,就是为了快速方便的操作DOM,里面基本都是函数(方法)。
常见的 JavaScript 库
jQuery
Prototype
YUI
Ext JS
移动端的 zepto
jQuery 的概念
jQuery 是一个快速、简洁的JavaScript库,其设计的宗旨是“write Less, Do
More”,即倡导写更少的代码,做更多的事情。
j 就是 JavaScript;Query查询;意思就是查询 js,把 js 中的DOM
操作做了封装,我们可以快速的查询使用里面的功能。
jQuery...
PC&移动端网页特效
PC 端网页特效
元素偏移量 offset 系列
offset 概述
offset 翻译过来就是偏移量,我们使用 offset
系列相关属性可以动态的得到该元素的位置(偏移)、大小等
获得元素距离带有定位父元素得到位置
获得元素自身的大小(宽度高度)
注意:返回的数值都不带单位
常用属性
offsetTop
offsetLeft
以带有定位的父亲为准
offsetParent
返回带有定位的父亲,否则返回 body
offsetWidth
offsetHeight
元素可视区 client 系列
概述
client 翻译过来就是客户端,我们使用 client
系列的相关属性来获取元素可视区的相关信息。通过client系列的相关属性可以动态的得到该元素的边框大小、元素大小等。
元素滚动 scroll 系列
概述
scroll 翻译过来就是滚动的,我们使用...
关于高级事件和 BOM 浏览器对象类型
高级事件
注册事件
给元素添加事件成为注册事件或者绑定事件
传统方式和方法监听注册方式
传统注册
利用 on 开头的事件 onclick
1<button onclick = alert("hi~")></button>
1btn.onclick = function(){}
特点:注册事件的唯一性
同一元素同一事件只能设置一个处理函数,最后注册的处理函数将会覆盖前面注册的处理函数
方法监听注册方式
w3c 标准 推荐方式
addEventListener() 是一个方法
1addEventListener(type, listener[, useCapture])
type 事件类型字符串,比如click mouseover
注意这里不要带on
listener 事件处理函数,事件发生时,会调用该监听函数
可选参数,是一个布尔值,默认是false
attachEvent 事件监听方式
ie9...
关于 API 与 DOM 的理解
关于 API
API
Application Programming Interface,
应用程序编程接口,是一些预先定于的函数,目的是提供应用程序与开发人员基于某硬件或软件得以访问一组例程的能力,而又无需访问源码,或理解内部工作机制的细节。
API是给程序员提供的某种工具,以便能更轻松的实现想要完成的功能
WEB API
是浏览器提供的一套操作浏览器功能和页面元素的API(BOM和DOM),MDN API:
https://developer.mozilla.org/zh-CN/docs/Web/API
DOM
DOM 简介
什么是 DOM
文档对象模型(Document Object Model,简称
DOM),是W3C组织推荐的处理可拓展标记语言(HTML 或者
XML)的标准编程接口
DOM树
W3C已经定义了一系列的DOM接口,通过这些 DOM
可以改变网页的结构和样式
文档:一个页面就是一个文档,DOM中使用 document 表示
元素:页面中的所有标签都是元素,DOM中使用 element...
我的星座分析
...
前端代码规范(1)
代码规范
1. 概述
欢迎使用品优购代码规范,
这个是我借鉴京东前端代码规范,组织的品优购内部规范。旨在增强团队开发协作、提高代码质量和打造开发基石的编码规范,
以下规范是团队基本约定的内容,必须严格遵循。
HTML规范
基于 W3C、苹果开发者
等官方文档,并结合团队业务和开发过程中总结的规范约定,让页面HTML代码更具语义性。
图片规范
了解各种图片格式特性,根据特性制定图片规范,包括但不限于图片的质量约定、图片引入方式、图片合并处理等,旨在从图片层面优化页面性能。
CSS规范
统一规范团队 CSS 代码书写风格和使用 CSS
预编译语言语法风格,提供常用媒体查询语句和浏览器私有属性引用,并从业务层面统一规范常用模块的引用。
命名规范
从
目录、图片、HTML/CSS文件、ClassName
的命名等层面约定规范团队的命名习惯,增强团队代码的可读性。
2. HTML 规范
DOCTYPE 声明
HTML文件必须加上 DOCTYPE 声明,并统一使用 HTML5 的文档声明:
1<!DOCTYPE...
不要死,也不要孤独的生活
...
杂聊4
...