js 面向对象 定时器 046
获取DOM对象补充
document.getElementsByTagName('div'); //获取的多个DOM对象 这种对象叫伪数组 如果想遍历此对象 通过for(var i=0; i <xx ;i++){},而不要使用数组的forEach()方法
document.getElementsByClassName('box');
DOM 操作(创建,追加,删除)
parentNode 获取父级标签
nextElementSibling 获取下一个兄弟节点
children 获取所有的子标签
创建 createElement()
//既可以创建已有的标签,还可以创建自定义的标签
var oDiv = document.createElement('div')
追加 appendChild() 父子标签操作
父.appendChild(oDiv);
插入 insert BeFore()
父.insertBefore(新的子节点,要参考的节点)
删除 removeChild()
父.removeChild(子节点);
自己.parentNode.removeChild(自己)
js中创建对象: 使用 Object 或 对象字面量创建对象 工厂模式创建对象 构造函数模式创建对象 原型模式创建对象
1 .js中最基本的创建对象的方式: 使用Object方式
var student = new Object();
student.name = 'easy';
student.age = '20';
这样一个student对象就创建完毕 拥有两个属性name以及age
使用对象字面量方式创建对象
var student = {
name : 'easy',
age : 20
};
貌似很完美 但是如果要创建同类的student时 不得不将以上代码重复n次......
2 .工厂模式创建对象 (将对象创建过程进行封装起来)
function createstudent(name, age) {
var obj = new Object();
obj.name = name;
obj.age = age;
return obj;
} var student1 = createstudent('easy1', 20);
var student2 = createstudent('easy2' ,20);
...
var studentn = createstudent('easyn',20)
这样一来就可以源源不断的生产对象了 但是还希望知道生产的产品是属于哪一类的
比如说 同时又定义了'生产'水果对象createFruit() 函数;
function createFruit(name, color) {
var obj = new Object();
obj.name = name;
obj.color = color;
return obj;
} var v1 = createapple('a1',10);
var v2 = createpeach('p1',5);
3 .通过构造函数模式创建对象
var obj = new Object();
在创建原生数组array类型对象时也使用过其构造函数
var arr = new Array(10); //构造一个初始长度为10的数组对象
构造函数
和普通函数
的区别。
1、实际上并不存在创建构造函数的特殊语法,其与普通函数唯一的区别在于调用方法。对于任意函数,使用new操作符调用,那么它就是构造函数;不使用new操作符调用,那么它就是普通函数。
2、按照惯例,约定构造函数名以大写字母开头,普通函数以小写字母开头,这样有利于显性区分二者。例如上面的new Array(),new Object()。
3、使用new操作符调用构造函数时,会经历(1)创建一个新对象;(2)将构造函数作用域赋给新对象(使this指向该新对象);(3)执行构造函数代码;(4)返回新对象;4个阶段。
es6的用法:
es6的用法:
1 .模板字符串 `` 变量名使用${}
2 .class类的概念
3 .箭头函数 () = >3 等价于function(){return 3}
定时器
setTimeOut()一次性定时器 3秒之后做一件事情
var a =2;
var b = 3;
console.log(a,b);
//异步操作
setTimeout(function () {
console.log('我出来了');
},3000); var app = function(){
console.log('app');
}
app();
setInterval() 周期循环 可以用它来做js动画,注意要清除定时器
clearTimeOut()
clearInterval()
js 面向对象 定时器 046的更多相关文章
- 原生JS面向对象思想封装轮播图组件
原生JS面向对象思想封装轮播图组件 在前端页面开发过程中,页面中的轮播图特效很常见,因此我就想封装一个自己的原生JS的轮播图组件.有了这个需求就开始着手准备了,代码当然是以简洁为目标,轮播图的各个功能 ...
- js面向对象+一般方法的选项卡
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- 拖拽系列二、利用JS面向对象OOP思想实现拖拽封装
接着上一篇拖拽系列一.JavaScript实现简单的拖拽效果这一篇博客将接着对上一节实现代码利用JS面向对象(OOP)思维对上一节代码进行封装; 使其模块化.避免全局函数污染.方便后期维护和调用:写到 ...
- js面向对象、创建对象的工厂模式、构造函数模式、原型链模式
JS面向对象编程(转载) 什么是面向对象编程(OOP)?用对象的思想去写代码,就是面向对象编程. 面向对象编程的特点 抽象:抓住核心问题 封装:只能通过对象来访问方法 继承:从已有对象上继承出新的对象 ...
- js面向对象学习 - 对象概念及创建对象
原文地址:js面向对象学习笔记 一.对象概念 对象是什么?对象是“无序属性的集合,其属性可以包括基本值,对象或者函数”.也就是一组名值对的无序集合. 对象的特性(不可直接访问),也就是属性包含两种,数 ...
- 带你一分钟理解闭包--js面向对象编程
上一篇<简单粗暴地理解js原型链--js面向对象编程>没想到能攒到这么多赞,实属意外.分享是个好事情,尤其是分享自己的学习感悟.所以网上关于原型链.闭包.作用域等文章多如牛毛,很多文章写得 ...
- JS面向对象(3) -- Object类,静态属性,闭包,私有属性, call和apply的使用,继承的三种实现方法
相关链接: JS面向对象(1) -- 简介,入门,系统常用类,自定义类,constructor,typeof,instanceof,对象在内存中的表现形式 JS面向对象(2) -- this的使用,对 ...
- JS面向对象(2) -- this的使用,对象之间的赋值,for...in语句,delete使用,成员方法,json对象的使用,prototype的使用,原型继承与原型链
相关链接: JS面向对象(1) -- 简介,入门,系统常用类,自定义类,constructor,typeof,instanceof,对象在内存中的表现形式 JS面向对象(2) -- this的使用,对 ...
- JS面向对象(1) -- 简介,入门,系统常用类,自定义类,constructor,typeof,instanceof,对象在内存中的表现形式
相关链接: JS面向对象(1) -- 简介,入门,系统常用类,自定义类,constructor,typeof,instanceof,对象在内存中的表现形式 JS面向对象(2) -- this的使用,对 ...
随机推荐
- Perl 学习笔记-正则表达式处理文本
1.使用正则表达式替换文本 s/// s/<pattern>;/<replacement>;/ 如果匹配失败, 则什么也不会发生, 变量也不受影响. 返回布尔值, 替换成功 ...
- 使用Selenium&PhantomJS的方式爬取代理
前面已经爬取了代理,今天我们使用Selenium&PhantomJS的方式爬取快代理 :快代理 - 高速http代理ip每天更新. 首先分析一下快代理,如下 使用谷歌浏览器,检查,发现每个代理 ...
- Spring框架总结(七)
Spring代理模式:名词解释: 代理是一种开发的设计模式,用途:提供了对目标对象另外的访问方式,及通过对代理访问目标对象. 优势: 可以在目标对象实现的基础上,增强额外的功能操作,(扩展目标对象的功 ...
- smarty中用truncate来截取中英文字符串及避免中文乱码问题
smarty中用truncate来截取含有中英文的字符串,可能会出现中文乱码问题.字符串截取长度不一问题,下面是新建个扩展函数,或修改原Truncate函数方法也可以的.扩展smarty/plugin ...
- javascript的事件冒泡【转】
出处:http://www.cnblogs.com/sanshi/archive/2009/02/18/1393165.html (感谢三生石上) 这是一个基础性的文章,使用Javascript观察D ...
- java中Integer常量池
我们先看一个关于Integer的例子 public static void main(String[] args) { // TeODO Auto-generated method stu Integ ...
- 如何使用office2016发布CSDN博客
目前大部分的博客作者在用Word写博客这件事情上都会遇到以下3个痛点: 1.所有博客平台关闭了文档发布接口,用户无法使用Word,Windows Live Writer等工具来发布博客.使用Word写 ...
- 从命令行运行 MyBatis Generator
? ? 一.准备 1. 获取最新jar包 2. 获取xml dtd <?xml version="1.0" encoding="UTF-8"?> & ...
- Thrift辅助类,用于简化Thrift编程
CThriftServerHelper用于服务端,CThriftClientHelper用于客户端. IDL定义: service PackageManagerService { } 服务端使用示例: ...
- [LeetCode 题解]: palindromes
Determine whether an integer is a palindrome. Do this without extra space. Some hints: Could negativ ...