javascript
o0o0o0o0o0oo
这个作者很懒,什么都没留下…
展开
-
正则表达式
RegExp对象JS风格——new RegExp(“a”, “i”)perl风格——/a/i<script>var re=new RegExp('b', 'i');var str='abcdef';alert(str.search(re));</script><script>var re=/a/i;var str='abcdef';alert(str.search(re));</script>字符串操作search原创 2020-07-06 23:47:21 · 95 阅读 · 0 评论 -
COOKIE基础与应用
什么是cookie页面用来保存信息比如:自动登录、记住用户名cookie的特性同一个网站中所有页面共享一套cookie数量、大小有限过期时间JS中使用cookiedocument.cookieDate函数的使用<script>var oDate=new Date();oDate.setDate(oDate.getDate()+100);//计算当前日期+100天alert(oDate.getFullYear()+'-'+(oDate.getMon..原创 2020-07-04 11:57:50 · 125 阅读 · 0 评论 -
BOM
打开、关闭窗口write<body><input type="button" value="write" onclick="document.write('abc')" /></body>open:打开一个新窗口<input type="button" value="打开窗口" onclick="window.open('http://www.zhinengshe.com/');" />close:关闭浏览器打开的新窗口<原创 2020-07-03 23:10:47 · 101 阅读 · 0 评论 -
JS面向对象:json的对象、命名空间、call、继承、拖拽的继承
Json方式的面向对象把方法包在一个Json里有人管他叫——命名空间在公司里,把同一类方法,包在一起<script>var json={ name: 'blue', qq: '258248832', showName: function () { alert('我的名字叫:'+this.name); }, showQQ: function () { alert('我的QQ号是:'+this.qq); }};json.showName();json原创 2020-07-03 17:56:23 · 143 阅读 · 0 评论 -
面向对象实例:选项卡
面向对象的选项卡把面向过程的程序,改写成面向对象的形式原则:不能有函数套函数、但可以有全局变量过程onload → 构造函数全局变量 → 属性函数 → 方法改错this、事件、闭包、传参对象与闭包通过闭包传递this原始选项卡:<style>#div1 input {background:white;}#div1 input.active {background:yellow;}#div1 div {width:200px; height:20原创 2020-07-02 17:00:05 · 104 阅读 · 0 评论 -
面向对象、原型——prototype、用混合方式构造对象
什么是对象对象是一个整体,对外提供一些操作什么是面向对象使用对象时,只关注对象提供的功能,不关注其内部细节比如JQuery面向对象是一种通用思想,并非只有编程中能用,任何事情都可以用面向对象编程(OOP)的特点抽象:抓住核心问题封装:不考虑内部实现,只考虑功能使用继承:从已有对象上,继承出新的对象-多重继承-多态对象的组成方法——函数:过程、动态的属性——变量:状态、静态的原型——prototype什么是原型原型是class,修改他可以影响一类元..原创 2020-07-01 21:56:06 · 117 阅读 · 0 评论 -
编写Ajax
变量和属性用没有定义的变量——报错用没有定义的属性——undefinedalert(window.a);编写Ajax创建Ajax对象XMLHttpRequest()连接服务器open(方法, 文件名, 异步传输)同步和异步同步:事情一件一件来异步:多个事件一起做发送请求send()请求状态监控onreadystatechange事件readyState属性:请求状态0 (未初始化)还没有调用open()方法1 (载入)已调用send()方原创 2020-07-01 09:49:13 · 71 阅读 · 0 评论 -
Ajax基础
什么是Ajax无刷新数据读取用户注册、在线聊天室使用Ajax缓存、阻止缓存(new Date().getTime())<script>window.onload=function (){ var oBtn=document.getElementById('btn1'); oBtn.onclick=function () { ajax('arr2.txt?t='+new Date().getTime(), function (str){ var arr=原创 2020-06-30 22:33:52 · 64 阅读 · 0 评论 -
js高级事件:事件绑定、拖拽---带框、在div块内拖、事件捕获
事件绑定IE方式attachEvent(事件名称, 函数),绑定事件处理函数detachEvent(事件名称, 函数),解除绑定 //attachEvent(事件名, 函数) //IE object.attachEvent('onclick', function () { alert('a'); });DOM方式addEventListener(事件名称,函数, 捕获)removeEventListener(事件名称, 函数, 捕获) //FF //addEventL原创 2020-06-26 18:12:44 · 125 阅读 · 0 评论 -
默认行为:右键菜单、拖拽
默认行为oncontextmenu 右键菜单例子1:屏蔽右键菜单<script>document.oncontextmenu=function (){ return false; //阻止默认事件};</script>例子2:自建右键菜单<style>* {margin:0; padding:0; list-style:none;}#div1 {position:absolute; width:80px; background:#CCC;原创 2020-06-26 00:36:38 · 127 阅读 · 0 评论 -
js事件基础:event对象、事件冒泡、鼠标事件、键盘事件
document的本质window.onload=function (){ alert(document.childNodes[0].tagName);//undefined alert(document.childNodes[1].tagName);//HTML};点击获取坐标clientXclientYvar oEvent=ev||event;(兼容性写法)window.onload=function (){ document.onclick=function (ev)原创 2020-06-24 18:17:53 · 125 阅读 · 0 评论 -
完美运动框架(JS运动中级)
json<script>var json={a: 12, b: 5};for(var i in json){ alert(i+'='+json[i]);}</script>框架1(先后)bug:不能同时发生。move.jsfunction getStyle(obj, name){ if(obj.currentStyle) { return obj.currentStyle[name]; } else { return getCompute原创 2020-06-16 21:10:21 · 110 阅读 · 0 评论 -
多物体运动框架
Math.round(x) 将x四舍五入obj.style 获取的是内联样式(行间样式)obj.currentStyle 获取外部(使用)和内部样式表中的样式。注意:只有 IE 和 Opera 支持使用 currentStyle 获取 HTMLElement的计算后的样式,其他浏览器中不支持。标准浏览器中使用getComputedStyle,IE9也支持getComputedStyle。...原创 2020-06-15 20:42:20 · 66 阅读 · 0 评论 -
JS运动基础:分享到、侧边栏、淡入淡出、悬浮窗
运动框架在开始运动时,关闭已有定时器把运动和停止隔开(if/else)缓冲运动逐渐变慢,最后停止距离越远速度越大速度由距离决定速度=(目标值-当前值)/缩放系数运动框架实例例子1:“分享到”侧边栏—通过目标点,计算速度值例子2:淡入淡出的图片------用变量存储透明度运动终止条件匀速运动:距离足够近缓冲运动:两点重合分享到:匀速运动<!DOCTYPE HTML><html><head><meta charset=原创 2020-06-15 01:56:55 · 249 阅读 · 1 评论 -
定时器的应用:无缝滚动
<!DOCTYPE HTML><html><head><meta charset="utf-8"><title>无标题文档</title><style>* {margin:0; padding:0;}#div1 {width:712px; height:108px; margin:100px auto; position:relative; background:red; overflow:hidden;}#原创 2020-06-12 18:20:02 · 108 阅读 · 0 评论 -
DOM操作应用高级:表格、表单、split拆分字符串、search查找字符串中的位置
表单应用获取:tBodies、tHead、tFoot、rows、cells var oTab=document.getElementById('tab1'); //下面两个alert等价 //alert(oTab.getElementsByTagName('tbody')[0].getElementsByTagName('tr')[1].getElementsByTagName('td')[1].innerHTML); alert(oTab.tBodies[0].rows[1].cells[1原创 2020-06-12 18:16:20 · 125 阅读 · 0 评论 -
DOM操作:创建、插入、删除DOM元素,文档碎片
创建DOM元素createElement(标签名) 创建一个节点appendChild(节点) 追加一个节点eg:为ul插入li插入元素insertBefore(节点, 原有节点) 在已有元素前插入eg:倒序插入li删除DOM元素removeChild(节点) 删除一个节点eg:删除li文档碎片文档碎片可以提高DOM操作性能(理论上)文档碎片原理document.createDocumentFragment()<!DOCTYPE html><.原创 2020-06-12 11:38:24 · 168 阅读 · 0 评论 -
DOM基础
DOM (Document Object Model) 译为文档对象模型,是 HTML 和 XML 文档的编程接口。HTML DOM 定义了访问和操作 HTML 文档的标准方法。DOM节点childNodes nodeType获取子节点children parentNode- 例子:点击链接,隐藏整个lioffsetParent- 例子:获取元素在页面上的实际位置首尾子节点(有兼容性问题)- firstChild、firstElementChild- last原创 2020-06-10 00:32:50 · 70 阅读 · 0 评论 -
用className选择元素并封装成函数
步骤:选出所有元素通过className条件筛选eg:将 class=“box” 的元素的 background 改为 red<!DOCTYPE HTML><html><head><meta charset="utf-8"><title>无标题文档</title><script>window.onload=function (){ var oUl=document.getElementById('原创 2020-06-09 22:32:59 · 100 阅读 · 0 评论 -
JS基础:定时器
开启定时器setInterval 间隔型setTimeout 延时型停止定时器clearIntervalclearTimeout当点击开始时,每隔1000毫秒弹出提示框:a;当点击关闭时,弹窗消失。<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"><script> window.onload=function() {原创 2020-06-08 18:59:38 · 69 阅读 · 0 评论 -
JS基础:延时提示框
开启定时器setInterval 间隔型setTimeout 延时型停止定时器clearIntervalclearTimeout<!DOCTYPE html><html lang="en"><head> <title>Document</title><script>window.onload=function(){ var oDiv1 = document.getElementById('d原创 2020-06-08 18:56:43 · 87 阅读 · 0 评论 -
JS基础:数码时钟
数码时钟开启定时器:setInterval 间隔型效果思路获取系统时间Date对象getHours、getMinutes、getSeconds显示系统时间字符串连接空位补零设置图片路径charAt方法<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="w原创 2020-06-08 18:43:14 · 225 阅读 · 0 评论 -
js基本操作
全选反选不选<!DOCTYPE html><html lang="en"><head> <title>Document</title><script>window.onload=function(){ var obut1 = document.getElementById('but1'); var obut2 = document.getElementById('but2'); var obu原创 2020-06-04 20:53:39 · 96 阅读 · 0 评论 -
getElementsByTagName
getElementsByTagNamegetElementsByTagName() 方法可返回带有指定标签名的对象的集合。<!DOCTYPE HTML><html><head><meta charset="utf-8"><title>无标题文档</title><style>div {width:200px; height:200px; float:left; border:1px solid black;原创 2020-06-04 18:14:41 · 177 阅读 · 0 评论 -
JS入们操作1
弹出提示框 <input type="checkbox" onmouseover="alert('a')">鼠标提示框当鼠标放在勾选框里,有提示信息<!DOCTYPE html><html lang="en"><head> <title>Document</title> <style> #div1{ background-color: red;原创 2020-06-01 18:33:23 · 119 阅读 · 0 评论