javascript每日一练(三)——DOM一】的更多相关文章

一.Dom基础 childNodes(有兼容问题),children nodeType getAttribute() firstChild,lastChild,previousSilbing,nextSilbing(有兼容问题) offsetParent,parentNode <!doctype html> <html> <head> <meta charset="utf-8"> <title>无标题文档</title&…
一.DOM的创建,插入,删除 createElement(标签名) appendChild(节点) insertBefore(节点,原有节点) removeChild(节点) <!doctype html> <html> <head> <meta charset="utf-8"> <title>创建,删除,插入元素</title> <script> window.onload = function(){…
一.阻止默认行为 return false; 自定义右键菜单 <!doctype html> <html> <head> <meta charset="utf-8"> <title>无标题文档</title> <style> *{ margin:0; padding:0;} #ul1{ list-style:none; display:none; width:100px; padding:5px; ba…
一.javascript的组成 ECMAScript DOM BOM 二.变量类型 常见类型有:number, string, boolean, undefined, object, function typeof 运算符,用来检测对象的类型,如:alert(typeof 'aaa'); //string 三.数据类型转换 显示类型转换(强制类型转换):parseInt(), parseFloat(); 隐示类型转换:==.===.-.*./ isNaN(),检测一个对象是一个非数字 四.作用域…
一.图片放大缩小 <!doctype html> <html> <head> <meta charset="utf-8"> <title>图片放大缩小</title> <style> *{ margin:0; padding:0; list-style:none;} #ulList{ margin:50px;} #ulList li{ margin:10px; width:100px; height:1…
一.BOM打开,关闭窗口 window.open(); window.close(); <!doctype html> <html> <head> <meta charset="utf-8"> <title>无标题文档</title> <script> window.onload = function() { var oBtn = document.getElementById('btn1'); var…
1.弹性运动 运动原理:加速运动+减速运动+摩擦运动: <!doctype html> <html> <head> <meta charset="utf-8"> <title>无标题文档</title> <style> #div1{ width:100px; height:100px; background:red; position:absolute; left:0; top:50px;} </…
一.弹性运动 运动原理:加速运动+减速运动+摩擦运动: <!doctype html> <html> <head> <meta charset="utf-8"> <title>无标题文档</title> <style> #div1{ width:100px; height:100px; background:red; position:absolute; left:0; top:50px;} </…
运动框架 可以实现多物体任意值运动 例子: <!doctype html> <html> <head> <meta charset="utf-8"> <title>运动框架</title> <style> #div1{ width:100px; height:100px; background:red; position:absolute; left:0; top:50px; opacity:0.3;…
一.多物体运动 需要注意:每个运动物体的定时器作为物体的属性独立出来互不影响,属性与运动对象绑定,不能公用: 例子1: <!doctype html> <html> <head> <meta charset="utf-8"> <title>多物体运动</title> <style> div{ width:100px; height:100px; background:red; float:left; m…
一.缓冲运动 实现原理:(目标距离-当前距离) / 基数 = 速度(运动距离越大速度越小,运动距离和速度成反比) (500 - oDiv.offsetLeft) / 7 = iSpeed; 需要注意:当计算出来的速度有小数时需要取整: (500 - oDiv.offsetLeft) / 7 = iSpeed;  iSpeed = iSpeed>0?Math.ceil(iSpeed):Math.floor(iSpeed); 例子1: <!doctype html> <html>…
一.js的运动 匀速运动 清除定时器 开启定时器 运动是否完成:a.运动完成,清除定时器:b.运动未完成继续 匀速运动停止条件:距离足够近  Math.abs(当然距离-目标距离) < 最小运动距离 div的匀速运动(简单运动) <!doctype html> <html> <head> <meta charset="utf-8"> <title>无标题文档</title> <style> #di…
一.键盘事件 onkeydown触发, keyCode键盘编码 ctrlKey altKey shiftKey 键盘控制div移动 <!doctype html> <html> <head> <meta charset="utf-8"> <title>无标题文档</title> <style> #div1{ width:100px; height:100px; background:red; posit…
一.event对象 var oEvent = ev || event;//获取事件对象 oEvent.clientX oEvent.clientY//获取鼠标坐标 oEvent.cancelBubble = true;//阻止冒泡 <!doctype html> <html> <head> <meta charset="utf-8"> <title>无标题文档</title> <style> #div1…
一.函数 什么是函数 function show(){}//不带参数 function show(){return 123;}//不带参数,有返回值 function show(arg1, arg2,...){}//可带一个或多个参数 function show(a, b){//带参数,并有返回值 return a+b; } 函数实例:获取元素样式 <!doctype html> <html> <head> <meta charset="utf-8&qu…
<高性能javascript> 领悟随笔之-------DOM编程篇二 序:在javaSctipt中,ECMASCRIPT规定了它的语法,BOM实现了页面与浏览器的交互,而DOM则承载着整个页面文档.DOM编程性能一直以来都是非常受开发者关注的话题,如何编写高性能的DOM是前端开发必不可少的技能. 1.重绘与重排 当浏览器加载完页面所有的元素.js.css.图片之后会自动生成两个数据结构: 1.dom树 (图片为转载) 如图所示,dom树表示了整个页面文档的结构,通过访问dom树我们可以得到某…
Javascript模块化编程(三):require.js的用法 原文地址:http://www.ruanyifeng.com/blog/2012/11/require_js.html 作者: 阮一峰 这个系列的第一部分和第二部分,介绍了Javascript模块原型和理论概念,今天介绍如何将它们用于实战. 我采用的是一个非常流行的库require.js. 一.为什么要用require.js? 最早的时候,所有Javascript代码都写在一个文件里面,只要加载这一个文件就够了.后来,代码越来越多…
本来是要继续由浅入深表达式系列最后一篇的,但是最近团队突然就忙起来了,从来没有过的忙!不过喜欢表达式的朋友请放心,已经在写了:) 在工作当中发现大家对Javascript的一些基本原理普遍存在这里或者那里的一知半解,所以决定先花一些时间整理一下这些基础知识和大家分享. 后面会附上培训用的PPT.刚开始是打算写一篇的,但是后来写着写着就发现越来越多,所以决定还是写一个系列吧.本系列所有内容都是涉及Javascript基础的,没有时髦的玩意儿,但是我相信这些基础的东西会有助于你理解那些有趣的东西的.…
× 目录 [1]属性 [2]方法 前面的话 函数是javascript中的特殊的对象,可以拥有属性和方法,就像普通的对象拥有属性和方法一样.甚至可以用Function()构造函数来创建新的函数对象.本文是深入理解javascript函数系列第三篇——属性和方法 属性 [length属性] 函数系列第二篇中介绍过,arguments对象的length属性表示实参个数,而函数的length属性则表示形参个数 function add(x,y){ console.log(arguments.lengt…
出处:http://www.w3cfuns.com/thread-5592229-1-17.html 1.大标题一   1.子标题   2.子标题   3.子标题2.大标题二   1.子标题   2.子标题3.大标题三   1.子标题   2.子标题   3.子标题 这种问题,你可能会觉得直接定义两个计数器,分别编号不就行了,于是就写出了如下代码: <!DOCTYPE HTML> <html> <head> <meta charset="gb2312&q…
转:JavaScript函数式编程(三) 作者: Stark伟 这是完结篇了. 在第二篇文章里,我们介绍了 Maybe.Either.IO 等几种常见的 Functor,或许很多看完第二篇文章的人都会有疑惑: 『这些东西有什么卵用?』 事实上,如果只是为了学习编写函数式.副作用小的代码的话,看完第一篇文章就足够了 kk:很贴近实际.第二篇文章和这里的第三篇着重于的是一些函数式理论的实践,是的,这些很难(但并非不可能)应用到实际的生产中,因为很多轮子都已经造好了并且很好用了.比如现在在前端大规模使…
JavaScript文档对象,DOM进阶 学习要点: 1.DOM类型 2.DOM扩展 3.DOM操作内容 DOM自身存在很多类型,在DOM基础课程中大部分都有所接触,比如Element类型:表示的是元素节点,再比如Text类型:表示的是文本节点.DOM也提供了一些扩展功能. 一.DOM类型 DOM基础课程中,我们了解了DOM的节点并且了解怎样查询和操作节点,而本身这些不同的节点,又有着不同的类型. DOM类型 类型名 说明 Node 表示所有类型值的统一接口,IE不支持 Document 表示文…
JavaScript文档对象,DOM基础 学习要点: 1.DOM介绍 2.查找元素 3.DOM节点 4.节点操作 DOM(Document Object Model)即文档对象模型,针对HTML和XML文档的API(应用程序接口).DOM描绘了一个层次化的节点树,运行开发人员添加.移除和修改页面的某一部分.DOM脱胎于Netscape及微软公司创始的DHTML(动态HTML),但现在它已经成为表现和操作页面标记的真正跨平台.语言中立的方式. 一.DOM介绍 DOM中的三个字母,D(文档)可以理解…
WindowsAPI每日一练系列 :https://www.cnblogs.com/LexMoon/category/1246238.html WindowsAPI每日一练() WinMain WindowsAPI每日一练(2) 使用应用程序句柄 从上面这段程序就可以看到,_tWinMain是应用程序的入口函数,这里是使用它的宏,定义在tchar.h头文件里,为什么要这样作宏定义的呢?由于Windows的应用程序要适应UNICODE和以前单字符的应用程序,由于Windows这两个API的定义是不…
WindowsAPI每日一练系列 :https://www.cnblogs.com/LexMoon/category/1246238.html WindowsAPI每日一练(1) WinMain 要跟计算机进行交互,就需要计算机显示信息给人看到,或者发出声音给人听到,然后人看到或听到相应的信息后,再输入其它信息给计算机,这样就可以让计算机进行数据处理,把结果显示给我们.现在就来编写一个最简单的Windows应用程序,让它提示一行文字给我们看到,这就是简单的目标. #include <window…
转自 ruanyifeng 系列目录: Javascript模块化编程(一):模块的写法 Javascript模块化编程(二):AMD规范 Javascript模块化编程(三):Require.js的用法 介绍了Javascript模块原型和理论概念,今天介绍如何将它们用于实战. 我采用的是一个非常流行的库require.js. 一.为什么要用require.js? 最早的时候,所有Javascript代码都写在一个文件里面,只要加载这一个文件就够了.后来,代码越来越多,一个文件不够了,必须分成…
前面的话 函数是javascript中特殊的对象,可以拥有属性和方法,就像普通的对象拥有属性和方法一样.甚至可以用Function()构造函数来创建新的函数对象.本文是深入理解javascript函数系列第三篇——属性和方法 属性 [length属性] 函数系列第二篇中介绍过,arguments对象的length属性表示实参个数,而函数的length属性则表示形参个数 function add(x,y){ console.log(arguments.length)//3 console.log(…
上得厅堂.下得厨房,写得代码,翻得围墙,欢迎来到睿不可挡的每日一小练! 题目:Armstrong数 内容: 在三位的正整数中,比如abc.有一些能够满足a^3+b^3+c^3=abc的条件,也就是说各个位数的立方和正好是该数本身,这些数称为Armstrong数.是编写一个程序求出全部的三位Armstrong数. 我的解法:上来没多想,打开vs2013就敲了起来.问题果然非常easy.分分钟就超神..奥,不正确就攻克了!Armstrong数在国内好像就叫做水仙花数,非常多程序设计的课本后面都有这样…
从驱动全球商业.贸易及管理领域不计其数的复杂应用程序的角度来看,说 JavaScript 已经成为当今世界上最流行的编程语言一点儿都不为过. JavaScript 是一种非常松散的面向对象语言,也是 Web 开发中极受欢迎的一门语言. JavaScript,尽管它的语法和编程风格与 Java 都很相似,但它却不是 Java 的“轻量级”版本,甚至与 Java 没有任何关系. JavaScript 是一种全新的动态语言,它植根于全球数亿网民都在使用的 Web 浏览器之中,致力于增强网站和 Web…
引言 Python每日一练又开始啦,今天的专题和Excel有关,主要是实现将txt文本中数据写入到Excel中,说来也巧,今天刚好学校要更新各团支部的人员信息,就借此直接把事情做了 主要对于三种数据类型处理,字典型,字符串,列表 使用的库有xlwt,json,主要做的操作有文件读取,数据读取以及生成xls文件(保存xlsx,会打不开) 字典型数据 实现分析:将文本文件读取,然后用json读取为标准形式数据,即易于人阅读和编写的数据,最后实例化一个xls,对其写入数据,生成文件 代码实现: # -…