JavaScript基础
可芭乐
这个作者很懒,什么都没留下…
展开
-
JavaScript的属性操作
JavaScript的属性操作<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title></head><script type="text/javascript"> window.onload = function (){ var oBtn =原创 2016-10-22 13:10:59 · 216 阅读 · 0 评论 -
JavaScript——面向对象实例
面向对象的选项卡把面向过程的程序,改写成面向对象的形式 原则 不能有函数套函数,但可以有全局变量 过程 onload —— 构造函数 全局变量 —— 属性 函数 —— 方法 改错 this、事件、闭包、传参 对象与闭包 通过闭包传递this 原函数程序:<!DOCTYPE html><h原创 2017-02-10 15:35:00 · 826 阅读 · 1 评论 -
JavaScript定时器基础
定时器的作用、数码时钟、延迟提示框开启定时器function show(){ alert('a') } setInterval(show,1000);setInterval是一种间隔型的定时器。1000指的是1000毫秒,也就是每隔一秒show函数就会执行一次(每隔一秒就会弹出a) setTimeout是一种延迟型的定时器。可以将setInterval改成set原创 2017-01-20 16:53:26 · 322 阅读 · 0 评论 -
JavaScript定时器基础二
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title><style type="text/css"> #div1 { width: 200px; height: 200px; background: red;原创 2017-01-20 22:56:56 · 339 阅读 · 0 评论 -
JavaScript——DOM基础
DOM基础 DOM就是JavaScript中的document兼容性: 高版IE能部分大部分DOM,IE8及以下只能兼容一点点 Chrome基本能兼容一半左右 FireFox大部分都能兼容 DOM节点<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title><原创 2017-01-21 21:04:16 · 213 阅读 · 0 评论 -
JavaScript面向对象高级
json方式的面向对象把方法包在一个json里 有人管他叫——命名空间 在公司里,把同一类方法,包在一起<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title><script type="text/javascript"> var json = {原创 2017-02-11 15:57:01 · 260 阅读 · 0 评论 -
JavaScript——DOM操作应用
创建DOM元素 appendChild添加到父级的末尾 父级.appendChild(子节点) var oLi = document.createElement(‘li’);创建节点<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title><script type原创 2017-01-21 22:25:50 · 163 阅读 · 0 评论 -
JavaScript——BOM应用
BOM基础打开、关闭窗口 open 蓝色理想运行代码功能 close 关闭时提示问题<input type="button" value="打开窗口" onclick="window.open('http://www.baidu.com/');" />_self在本窗口覆盖 _blank新开一个窗口覆盖 window.close();在IE下回出现弹窗,在搜狗浏览器下不会出现,火狐只能关原创 2017-02-11 22:32:20 · 267 阅读 · 0 评论 -
JavaScript的cookie基础与应用
cookie基础什么是cookie 页面用来保存信息 比如:自动登录、记住用户名 cookie的特性 同一个网站中所有页面共享一套cookie 数量、大小有限 过期时间 JS中使用cookie document.cookie使用cookie——1cookie的使用 设置cookie 格式:名字=值 不会覆盖 过期时间:erpires = 时间 日期对象的使用var原创 2017-02-12 01:05:06 · 291 阅读 · 0 评论 -
JavaScript——正则表达式
正则表达式基础——1复习字符串操作 search 查找 显示字符的位置,若不存在该字符,则返回-1 substring 获取子字符串var str = 'asdfghjk' alert(str.substring(2,5));返回结果为:dfg 也可以取剩余所有字符charAt原创 2017-02-12 17:39:21 · 277 阅读 · 0 评论 -
JavaScript——DOM的高级应用一
表格应用、表单应用表格应用 获取<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title><script type="text/javascript"> window.onload = function(){ var oTab = docume原创 2017-01-22 17:11:28 · 363 阅读 · 0 评论 -
JavaScript物体运动一
物体运动、匀速运动物体运动:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title><style type="text/css"> #div1 { width: 200px; height: 200px; bac原创 2017-01-22 22:03:35 · 246 阅读 · 0 评论 -
JavaScript物体运动二
缓冲运动、缓冲菜单、匀速运动停止条件缓冲运动 1、逐渐变慢,最后停止 2、距离越大速度越大 速度由距离决定 速度 = (目标值 - 当前值)/缩放系数 Math.ceil(数字) -> 向上取整() Math.floor(数字) -> 向下取整() clientHeight可视区的高度 缓冲菜单 Bug:速度取整 跟随页面滚原创 2017-01-23 19:15:23 · 235 阅读 · 0 评论 -
JavaScript物体运动三
多物体运动框架、任意值运动框架、仿Flash图片展示多物体运动框架 多个物体同时运动 例子:多个Div,鼠标移入变宽 单定时器,存在问题 每个Div一个定时器<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title><style type="te原创 2017-01-25 23:38:07 · 282 阅读 · 0 评论 -
JavaScript运动中级
链式运动框架回调函数 运动停止时,执行函数 运动停止时,开始下一次运动 例子:土豆网菜单<!DOCTYPE html><html xmlns="http://www.w3.org/1999/xhtml"><head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title></原创 2017-02-02 17:49:54 · 371 阅读 · 0 评论 -
JavaScript基础汇总
document.write("JS进阶篇");在文档中写内容变量命名必须以字母、下划线或美元符号开头,后面可以跟字母、下划线、美元符号和数字 以下关键字也不能用于命名: 声明变量语法: var 变量名;操作符之间的优先级(高到低): 算术操作符 → 比较操作符 → 逻辑操作符 → “=”赋值符号二维数组的定义var myarr=new Array(); //先声明一维 for(var i原创 2017-03-08 21:01:43 · 199 阅读 · 0 评论 -
DOM事件
理解事件流 事件流——描述的是从页面中接受事件的顺序 IE浏览器——事件冒泡流 natescript浏览器——事件捕获流 事件冒泡:就是事件最开始由最具体的元素(文档中嵌套层次最深的节点)接收,然后逐级向上传播至最不具体的节点(文档) 事件捕获:不太具体的节点应该更早接收到事件,而最具体的节点最后接收到事件 使用事件处理程序 - html事件处理程序 将javascript程序写在原创 2017-03-26 19:19:16 · 343 阅读 · 0 评论 -
JavaScript面向对象基础
什么是面向对象什么是对象 什么是收音机 不了解内部的结构,知道表面的各种操作(按钮) 对象是一个整体,对外提供一些操作 什么是面向对象 使用对象时,只关注对象提供的功能,不关注其内部细节 比如JQuery 面向对象是一种通用思想,并非只有编程中能用,任何事情都可以用js中的面向对象面向对象编程(OOP)的特点 抽象:抓住核心问题 封装:不考虑内部实现,只考虑功能使用 继承:从已有原创 2017-02-10 13:32:22 · 196 阅读 · 0 评论 -
JavaScript基础
函数返回值、函数传参、数组基础函数返回值 function show(){ return 'asdf'; } var a = show(); alert(a);alert(a)与alert(show())的结果相同 将字符串asdf返回到show()函数中,同数字 function show(a,b){ return a+b;原创 2017-01-19 17:02:06 · 209 阅读 · 0 评论 -
JavaScript——Ajax基础二
编写Ajax——1创建Ajax对象 ActiveXObject(“Microsoft.XMLHTTP”) XMLHttpRequest() 在IE6下不兼容<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title><script type="text/javasc原创 2017-02-08 23:12:44 · 269 阅读 · 0 评论 -
javaScript之鼠标操作(onmouseover)
javaScript之鼠标操作(onmouseover)<input type="checkbox" onmouseover="alert('a')" />onmouseover:当鼠标移动到checkbox这个元素上时,会发生““里面的指令 alert(‘a’):弹出提示窗,内容为a<input type="checkbox" onmouseover="document.getElementBy原创 2016-10-10 19:19:16 · 2230 阅读 · 0 评论 -
JavaScript之元素查找
JavaScript之元素查找<script type="text/javascript"> #list {} document.getElementById('list'); li {} document.getElementsByTagName('li');</script><body> <ul id="list"> <li></li>原创 2016-10-28 23:40:16 · 256 阅读 · 0 评论 -
JavaScript之自定义属性
JavaScript之自定义属性<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title><script type="text/javascript"> window.onload = function(){ var aBtn = documen转载 2016-11-02 21:21:32 · 367 阅读 · 0 评论 -
JavaScript数据类型一——数据类型及相关操作
数据类型及相关操作JavaScript中的数据类型主要包括有:数字、字符串、布尔、函数、对象(obj、[]、{}、null)、未定义 通常用typeof来判断数据类型数字类型var i = 100;alert(typeof i);输出结果:number字符串类型var s = ' lff ';alert(typeof s);//弹出s的类型alert(s.length);//弹出s的原创 2016-12-22 20:43:33 · 260 阅读 · 1 评论 -
JavaScript数据类型二——数据类型转换
数据类型转换第一种var a = '100';alert(a + 100);字符串的连接,输出结果为100100第二种var a = '100';alert(Number(a)+100);将a转换成数字,输出结果为200第三种var a1 = ' ';alert(Number(a1));输出结果为0;无论其中有多少空格,结果都为0第四种var a2 = true;aler原创 2016-12-26 20:13:24 · 339 阅读 · 0 评论 -
JavaScript数据转换三——parseInt与parseFloat的区别及判别方式
parseInt与parseFloat的区别及判别方式var b = '100px1234';alert(Number(b));输出结果为:NaN number只能转换数字var b = '100px1234';alert(parseInt(b)); //对于+- 也能转换出来alert(parseInt(b[, 10]));输出结果:100,表示十进制var c = '12.34元'原创 2016-12-27 20:42:06 · 1636 阅读 · 0 评论 -
JavaScript数据转换四——隐式类型转换
**显式类型转换(强制类型转换) Number() parseInt() parseFloat()隐式类型转换: -*/% 变成数字 + 变成字符串 ++ – 变成数字 < 数字的比较、字符串的比较 !取反 把右边的数据类型转成布尔值 == 可以转换成数字**alert('200' - 3原创 2016-12-27 21:16:23 · 232 阅读 · 0 评论 -
JavaScript数据类型五——isNaN的判断作用
isNaN的判断作用判断text中是不是数字<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title><script type="text/javascript"> window.onload = function(){ var alnp = d原创 2016-12-30 18:39:00 · 1014 阅读 · 0 评论 -
JavaScript初探二
函数参数传递- 函数类似,只有单个变量 固定不变的部分代码:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title><style type="text/css"> #div1 { width: 200px; height: 2原创 2017-01-13 22:00:10 · 258 阅读 · 0 评论 -
JavaScript事件基础
event对象和事件冒泡什么是event对象 用来获取事件的详细信息:鼠标位置、键盘按键 例子:获取鼠标位置:clientX document的本质:document.childNodes[0].tagName document包含整个网页、页面(body可能撑不开): document.childNodes[0].tagName的标签名为!; document.childNodes[1原创 2017-02-04 21:51:04 · 252 阅读 · 0 评论 -
JavaScript事件中级
默认行为默认行为 什么是默认行为 当空网页的时候点击右键会出现菜单,这就是默认行为阻止默认行为 普通写法:return falsedocument.oncontextmenu = function (){ return false; }例子:屏蔽右键菜单 弹出自定义右键菜单<!DOCTYPE html><html lang="en"><head>原创 2017-02-04 23:59:19 · 390 阅读 · 0 评论 -
JavaScript初探三
提取行间事件<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title><style type="text/css"> #div1 { width: 200px; height: 200px; border: 1px原创 2017-01-14 21:59:38 · 205 阅读 · 0 评论 -
初探JavaScript一
鼠标、函数、隐藏显示、换肤、提示框鼠标操作 onmouseover鼠标移入显示 onmouseout鼠标移出显示<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title><style type="text/css"> #div1 { widt原创 2017-01-10 21:06:53 · 346 阅读 · 1 评论 -
JavaScript事件高级应用
事件绑定事件绑定 IE方式 attachEvent(事件名称,函数),绑定事件处理函数: IE下使用attachEvent(事件名,函数) 在FF下使用addEventListener(事件名,函数,false) 通用的函数:function myAddEvent (obj, ev, fn){ if (obj.attachEvent) {原创 2017-02-06 23:43:18 · 230 阅读 · 0 评论 -
JavaScript——AJAX基础
Ajax基础——1什么是服务器 网页浏览过程分析 如何配置自己的服务器程序(AMP) 什么是Ajax 无刷新数据读取 用户注册、在线聊天室 异步、同步Ajax基础——2使用Ajax 基础:请求并显示静态TXT文件 字符集编码 缓存、阻止缓存<!DOCTYPE html><html lang="en"><head> <meta charset="U原创 2017-02-07 23:28:35 · 459 阅读 · 0 评论 -
JavaScript基础
ECMAScript:翻译 核心 解释器 几乎没有兼容性问题 DOM:document Object Model 专门处理HTML文档 有一些操作不兼容 BOM:browser Object Model 专门处理浏览器 没有兼容问题(完全不兼容) 对于弹出结果为NaN的检验方法使用isNaN来检验<!DOCTYPE html><html lang="en"><head> <meta原创 2017-01-17 16:34:10 · 303 阅读 · 0 评论 -
封装函数
var eventUtil = { //添加句柄 addHandler : function(element, type, handler){ if (element.addEventListener) { element.addEventListener(type, handler, false) } else if原创 2017-03-26 19:23:58 · 197 阅读 · 0 评论