qq_39155611的博客

详细解析JavaScript中的全局属性和方法今天来补充JavaScript中的最后一部分内容，JavaScript中的全局属性和方法(函数)。1.全局属性 // 属性 // Infinity 代表正的无穷大的数值。 // 在Javascript中，超出 1.7976931348623157E+103088 的数值即为Infinity，小于 -1.7976931348623157E+103088 的数值为无穷小。 var num1 = 1.79769313486231

简单解析Ajax中的onreadystatechange 事件onreadystatechange 事件当请求被发送到服务器时，我们需要执行一些基于响应的任务。每当 readyState 改变时，就会触发 onreadystatechange 事件。readyState属性 存有 XMLHttpRequest 的状态信息。下面是 XMLHttpRequest对象的三个重要的属性：属性描述onreadystatechange存储函数（或函数名），每当 readyState 属性改

详细解析Ajax的使用之向服务器发送GET请求上篇文章讲的如何使用Ajax发送get请求，这篇文章说如何使用Ajax发送post请求。HTML代码： <h1>ajax的post请求</h1> <button id="btn">发送请求</button>JavaScript代码： var oBtn = document.getElementById("btn"); // 1.初始化请求对象 var xhr;

详细解析Ajax的使用之向服务器发送GET请求前面一篇博客我们讲到了如何使用form表单像服务器发送请求，但是请求方式是同步的，效率太低，现在我们讲一下如何使用Ajax的技术向服务器发送异步请求。HTML代码： <h1>ajax的get请求</h1> <button id="btn">获取数据</button> <p>姓名：<span id="user"></span></p>

浏览器同步发送请求之form表单提交数据上篇就文章我们讲到了同步和异步的区别，这次主要说一下在网页中如何提交同步的请求，答案就是通过form表单提交请求。1.GET请求HTML代码： <form action="get.php" method="get"> 账号：<input type="text" name="user"> <br> 密码：<input type="text" name="psw"><br&

详细解析JavaScript的Ajax之同步异步的区别博客整理到这里基本上JavaScript的初级知识就整理完了，现在我们来说一下看JavaScript的最后一个知识点——Ajax。（Asynchronous Javascript And XML） 即异步 JavaScript 和 XML，一种创建交互式、快速动态网页应用的网页开发技术，无需重新加载整个网页的情况下，能够更新部分网页的技术。1.同步和异步首先我们先来分析一下JavaScript的中的同步和异步的区别。同步就是调用某个内容时，调用

详细解析cookie，sessionStroage和localStroage的区别前面我们说到了JavaScript中的缓存对象，主要是cookie,sessionStroage和localStroage，今天我们来讲一下这三者之间的区别。共同点都是保存在浏览器端，且同源的。(所谓同源就是协议，域名，端口号相同)。都是字符串类型的键值对。区别1.cookieHTTP Cookie简称cookie,在HTTP请求发送Set-Cookie HTTP头作为响应的一部分。通过name=valu

简单解析JavaScript中的cookie对象前面说大了BOM的存储对象，现在简单了解一下cookie对象。Cookie 用于存储 web 页面的用户信息。大小限制为 4k。安全性差。1.创建cookie var aBtns = document.getElementsByTagName("button"); // 创建cookie document.cookie="name=value,name1=value1;expires= ;path=/"

详解BOM的存储对象今天来讲一下BOM中的最后一部分内容，BOM的存储对象。在JavaScript中以前有cookie对象可以对一部分数据进行存储，但是安全性低，并且容量有限。所有就有了现在的BOM中的存储对象 sessionStroage 和 localstroage 对象。HTML代码： <h1>02BOM的储存对象</h1> <h3>sessionStorage</h3> <button>setItem()<

JavaScript模拟列表跳转详情页面效果上一篇文章我们讲到如何利用JavaScript中location对象的hash值的改变来实现商品列表跳转到详情页面的效果。然后有同学问我，说淘宝的是利用的"?id=****"效果实现的，现在我们来讲一下如何利用location的 search实现效果。如图：1.列表页面HTML代码： <a href="01模拟详情页面.html?id=0" target="_blank"><img src="../0603/img/1.jpg" al

JavaScript通过改变location对象的hash属性的应用前面我们学到了BOM的Location对象，现在来讲一下实际的应用。通过改变hash属性获取不同的数据。1.列表页面代码： <a href="10模拟详情页面.html#0" target="_blank">张三</a> <a href="10模拟详情页面.html#1" target="_blank">李四</a> <a href="10模拟详情页面.htm

详细解析BOM中Location对象Location对象包含有关当前URL的信息。 // href 返回完整的URL console.log(location.href); // host 返回一个URL的主机名和端口 console.log(location.host); // hostname 返回URL的主机名 console.log(location.hostname); // port 返回一个URL服务器使用的端口号 conso

简单解析BOM中History对象History 对象包含用户（在浏览器窗口中）访问过的 URL。 <button>back()</button> <button>forward()</button> <button>go()</button> console.log(history); var aBtns=document.getElementsByTagName("button");

简单解析BOM中Screen对象Screen 对象包含有关客户端显示屏幕的信息。 console.log(screen); // 属性 // availHeight 返回屏幕的高度（不包括Windows任务栏） // availWidth 返回屏幕的宽度（不包括Windows任务栏） console.log(screen.availHeight,screen.availWidth); // height 返回屏幕的总高度 // width 返回

简单解析BOM中Navigator对象navigator对象包含了有关浏览器的信息。 console.log(navigator); // 属性 // appCodeName 返回浏览器的代码名 console.log(navigator.appCodeName); // appName 返回浏览器的名称 console.log(navigator.appName); // appVersion 返回浏览器的平台和版本信息 console.l

BOM中window对象的其他方法前两篇博客一直在讲window对象的方法，现在将剩下的其他方法以此进行讲解。HTML代码： <button>open()</button> <button>close()</button> <button>focus()</button> <button>print()</button> <br> <butto

BOM中window对象的方法之计时器前面讲到了window对象的弹窗方法，现在来讲一下计时器方法。 // setInterval(function(){},time,参数,参数) 按照指定的周期（以毫秒计）来调用函数或计算表达式。 var i=0; var timer=setInterval(function(){ i++; console.log(i); }, 1000); // clearInterval(定时器的名称) 取消

BOM中window对象的方法之弹窗之前介绍了window对象的属性，接下来说一说window对象的方法。当然方法有好些，这里主要讲一下window对象的弹窗方法。 // alert() 显示带有一段消息和一个确认按钮的警告框。 window.alert("这是是一个警告框"); // confirm() 显示带有一段消息以及确认按钮和取消按钮的对话框。 返回值 true false var sure=window.confirm("确认要离开吗？");

BOM中window对象的属性这篇博客主要介绍一下BOM中的window对象的属性。HTML代码： <a href="http://www.baidu.com">百度一下</a> <iframe src="" frameborder="1" id="frame1" name="frame_1"></iframe> <iframe src="" frameborder="1" name="frame_2"></ifr

简单认识JavaScript的BOM对象前面JavaScript中DOM的学习基本已经结束了。今天开始我们学习一下JavaScript中的BOM。BOM(浏览器对象模型) Browser Object Model所有有的浏览器都支持window对象， 浏览器的窗口window对象是js的最高级 / 顶级对象。所有js的全局对象, 变量, 函数 自动变成window对象的成员全局变量相当于window对象的属性。全局函数相当于window对象的方法。 a = 10; cons

JS最快速度制作滑动效果的轮播图前面几篇博客一直在讲轮播图的制作，这篇博客是最终版，实现轮播图的滑动效果。如图：HTML代码： <div class="box" id="box"> <ul class="min_box" id="banner"> <li class="banner"></li> <li class="banner"></li>

利用JavaScript的控制图片的CSS位置实现轮播图功能上篇博客我们说到了如何给轮播图添加定时器效果，当然前面的两个轮播图功能实现都是通过改变图片的路径(图片名称取巧)实现的，有一定的局限性。今天说一说怎样通过改变位置实现轮播功能。效果如图：HTML代码： <div class="box" id="box"> <ul class="min_box" id="banner"> <li class="banner">&

如何用最简单的代码制作带定时器的轮播图前几天写了一篇有关轮播图制作的博客，但当时没有添加定时的效果，说白了就是没有自动轮播的效果，今天来说一下怎样添加自动轮播效果。如图：HTML代码： <div class="box" id="box"> <img src="img/1.jpg" alt=""> <!-- <img src="img/1.jpg" alt=""> <img src="img/2.jp

简单解析JavaScript的默认事件及如何阻止默认事件上篇文章就提到，在JavaScript中提到事件冒泡两个必不可少也要提的就是事件捕获和默认事件，现在来聊一聊什么是默认事件，及如何阻止默认事件。1.什么是默认事件顾名思义，默认事件就是默认执行的事件，比如 a标签，点击a标签，页面会自动跳转。如图：HTML代码： <form action=""> <input type="submit" id="submit"> <inpu

简单解析事件捕捉上篇博客说到了事件冒泡，其实在JavaScript中，说到事件冒泡还有两个个不得不提的事件捕获和默认事件，我们先来说一下事件捕获。效果如下图：HTML代码： <div class="box1"> <div class="box2"> <div class="box3"> <div class="box4"></div> &l

简单解析js的事件冒泡1.什么是事件冒泡？以click点击事件为例。假如我们有一个多层结构标签。如下图，是4个div嵌套。每个div都有点击的监听事件，分别alert(“box4”),alert(“box3”),alert(“box2”),alert(“box1”)。当我们点击最里面的div时，点击事件开始传递。出现的效果是alert(“box4”)-alert(“box3”)-alert(“box2”)-alert(“box1”)。这就是事件冒泡阶段。效果如下：HTML代码： <di

JavaScript实现鼠标拖拽效果前几篇博客一直在讲鼠标的移动事件相关的效果，今天再来讲一讲如何利用鼠标事件实现拖拽div块移动的效果。效果如图：HTML代码： <div id="box"></div>CSS代码： * { margin: 0; padding: 0; } #box { width: 200px; height:

JavaScript实现心形div块跟随鼠标移动(幻影效果)上篇博客讲解了怎样利用JavaScript实现一串div块跟随鼠标指针移动，然后有轩辕问我，想给女朋友做一个好看的可不可以。现在我们来实现一串心形的div实现跟随鼠标的效果。如图：HTML代码: <div class="box"></div> <div class="box"></div> <div class="box"></div> &

JavaScript实现一串div跟随鼠标移动效果上一篇博文我们说到了利用JavaScript实现div块跟随鼠标移动的效果。现在来讲一个进阶版，实现一串div跟随鼠标移动效果，鼠标幻影效果。如图：HTML代码： <div class="box"></div> <div class="box"></div> <div class="box"></div> <div class="box"&gt

JavaScript实现div块跟随鼠标移动效果前面讲了这么多DOM事件有关的属性等，现在我们进行一些相关的练习，实现div块跟随鼠标移动效果，如图：HTML代码： <div id="box"></div>CSS代码： *{ margin: 0; padding: 0; } body{ width: 2000px; height: 2000px; } #box{

详细区分DOM事件中鼠标指针的坐标问题前面博客中我们讲解到了DOM事件的event对象，里边包含了鼠标事件的指针坐标属性。比如event.offsetX,event.clientX,event.pageX,event.screenX等等。现在我们来解析一下这些坐标属性的区别。HTML代码： <div class="box"></div> <div class="box2"></div>CSS代码： .box{ w

详细解析DOM事件的event事件对象（二）上篇博客说到了DOM的键盘事件和鼠标事件的event对象，这次我们再来聊一聊event对象剩下的属性。HTML代码： <div class="box">1</div> <div class="box">2</div> <div class="box">3</div> <div class="box">4</div> <d

详细解析DOM事件的event事件对象（一）近期我们一直在学习DOM，马上到了尾期了，今天来说一下DOM事件的event事件对象。这里我们先解析一下键盘和鼠标事件的event对象属性。HTML代码： <form> <input type="text" id="text"> <!-- <input type="submit"> --> <button>登录</button>

JavaScript实现省市区三级联动之前的文章中我们说到过如何利用JavaScript实现二级联动，这次我们来说说如何利用JavaScript实现三级联动。效果如图：HTML代码： 请选择省份：<select name="" id="province"> <option value="">请选择省份......</option> </select> 请选择城市：<select name="" id="cit

最简单的利用原生js模拟电视机屏保效果小的时候记得家里刚用彩色电视机时，看电视还要用天线，当天线信号不好时，电视屏幕就会进入到屏保状态，有一串文字在屏幕内“撞来撞去”。下面我们来讲一下如何实现下图这个效果：HTML代码： 调速：<input type="number" name="" id="num"> <div id="box"></div>CSS代码： * { margin: 0; padding: 0

利用JavaScript实现键盘控制小方块移动HTML代码： <div class="box"></div>CSS代码： *{ margin: 0; padding: 0; } .box{ width: 200px; height: 200px; background: red; }JS代码：

史上最详细的DOM事件之框架事件上篇博客讲了DOM的拖动事件，这篇博客我们来讲一讲DOM的媒体事件。HTML代码： <img src="../../CSS/0421/car.gif" alt="">JS代码： var oImg=document.getElementsByTagName("img")[0]; // 属性 描述 DOM // onload 一张页面或一幅图像完成加载。 // window.onloda=function(){

史上最详细的DOM事件之媒体事件上篇博客讲了DOM的拖动事件，这篇博客我们来讲一讲DOM的媒体事件。HTML代码： <audio src="念旧-阿悠悠.mp3" controls></audio>JS代码： var oAudio=document.getElementsByTagName("audio")[0]; // 事件 描述 DOM // onabort 事件在视频/音频（audio/video）终止加载时触发。 //

史上最详细的DOM事件之拖动事件上篇博客讲了DOM的剪贴板事件，这篇博客我们来讲一讲DOM的拖动(DragEvent)事件。HTMl代码： <img src="../../CSS/0421/car.jpg" draggable="false">JS代码： var oImg=document.getElementsByTagName("img")[0]; // DragEvent 拖动事件 // ondrag 该事件在元素正在拖动时触发 oI

史上最详细的DOM事件之剪贴板事件上篇博客讲了DOM的表单事件，这篇博客我们来讲一讲DOM的剪贴板（ClipboardEvent）事件。HTML代码： <div id="box">hello world</div> <p>这是一个段落标签</p> <input type="text" id="text">1.oncopy(赋值)事件 var oBox = document.getElementById("bo