首先，我们要知道执行环境和作用域是两个完全不同的概念。函数的每次调用都有与之紧密相关的作用域和执行环境。从根本上来说，作用域是基于函数的，而执行环境是基于对象的(例如：全局执行环境即window对象)。换句话说，作用域涉及到所被调用函数中的变量访问，并且不同的调用场景是不一样的。执行环境始终是this关键字的值，它是拥有当前所执行代码的对象的引用。每个执行环境都有一个与之关联的变量对象，环境中定义的所有变量和...
今天写了一个很简单、很粗暴的通过JS根据类来查找DOM元素。为了降低它的粗暴等级（耗费性能）我给了三个等级。首先性能最好的，适合FF,CH,IE8,通过querySelectorAll这个API。其次是指定ID最后只能全页面进行匹配class,不过比较节省的性能的是，在指定class名称的时候，同时传入HTML标签的类型，用于节省遍历的范围！因为水平有限，目前也只能写成这种，真的好好奇JQ的选择器是怎么去匹配DOM的，如果有大神看到这篇文章，请不要吝啬...
代码：function drag(t,p){var point = p || null,target = t || null,resultX = 0,resultY = 0;(!point)? point = target : ; //如果没有拖动点，则拖动点默认为整个别拖动元素function getPos(t){var offsetLeft = 0,offsetTop = 0,offsetParent = t;while(offsetParent){offsetLeft+=offsetParent.offsetLeft;offsetTop+=offsetParent.offsetTop;offsetParent = offsetParent.offsetParent;}return {top:offsetTop,left:offsetL...
jQuery操作class的方式非常强大，但是目前还有一些人不知道如何使用或者由于项目统一性的原因无法使用jquery.在此写了一个利用原生js来实现对dom元素class的操作方法1.addClass:为指定的dom元素添加样式2.removeClass:删除指定dom元素的样式3.toggleClass:如果存在(不存在)，就删除(添加)一个样式4.hasClass:判断样式是否存在下面为一toggleClass的测试例子<style type="text/css">div.testClass{background-color:gray;} </style>...
本文实例讲述了原生JS简单实现ajax的方法。分享给大家供大家参考，具体如下：HTML部分：<body> <input type="button" value="Ajax提交" onclick="Ajax();" /> <div id="resText" ></div> </body> 这里有个input按钮，点击会触发click事件，click事件调用Ajax()方法。JS部分：<script language="javascript" type="text/javascript"> //通过这个函数来异步获取信息 function Ajax(){var xmlHttpReq = null; //声明一个空对象用来...
主要思路 通过改变url的hash值，跳到相应模块。先把默认模块显示出来，其他模块隐藏，分别给三个模块定义三个hash值，点击默认模块的选项的时候，改变hash值，同时在window上监听hashchange事件，并作相应模块跳转逻辑处理。这样即可模拟浏览器的前进后退，而且用户体验也比较好。下面详细来看看，现在有一个场景，选择顺序是：车牌子->车型->车系。首先HTML部分。默认显示车牌子选择列表，其他两个模块隐藏。<div class="wrap"...
FastClick现在有现成的插件fastclick可以解决这个问题，但是也有弊端：GitHub上最新版本的插件大小为25.4kb，轻量为趋势，能省则省。它的核心思想是取消默认的click时间，判断当前dom节点的类型进行相应的操作，这个判断过程较为繁琐。MyTapEvent本人最近在做微信项目，由于fastclick插件存在一定弊端，因此开发了一个简单的tap事件，主要思想有以下几点：Thinking一次tap事件包含touchstart和touchmove(轻微移动)以及touchend三种...
这是我用原生js写的放大镜效果，与各种各样的框架技术相比，我喜欢使用原生的js，在这里，想和大家一起谈谈原生和框架技术的理解与个人喜好。js放大镜效果*{ margin:0px; padding:0px; border:none; list-style:none; } #box{ margin:80px auto; width: 352px; } #box p { width: 350px; height: 350px; border: 1px solid #ddd; margin-bottom: 5px; } #box p img { width:350px; height:350px; } #box h1 { width: 352px; heigh...
1、createElement() 创建元素节点 var element=document.createElement(‘元素名’);2、crateTextNode() 创建文本节点 var txt=document.crateTextNode(‘文本内容’);3、createAttribute() 创建属性节点 var attr=document.createAttribute(‘属性名’); attr.value=’属性值’;4、appendChild() 方法向节点添加最后一个子节点 如下：<p id="box" class="classa"><p id="p1">这是一个段落</p></p><script>var box=document.getEle...
本文实例为大家讲解了JS实现拖拽图片效果的详细代码，分享给大家供大家参考，具体内容如下 javascript event 对象的clientX,offsetX,screenX,pageX的区别：用html5的drag来实现拖拽有兼容性问题，使用拖拽插件代码又很多，而这个拖拽demo代码少，并且兼容所有浏览器，很值得在项目中使用， css样式如下：#div1{ width: 100px; height: 100px; background-color: #4D4D4D; position: absolute; cursor: pointer; -webkit-box-shadow...
本文实例介绍了js焦点图片层叠轮播切换滚动效果，分享给大家供大家参考，具体内容如下 效果图：功能描述：自定义图片尺寸； 每隔一段时间自动滚动图片； 每次动画执行的时候改变图片的位置，宽高以及其它属性也要跟随着变化； 鼠标移上图片，显示当前图片的详细信息； 点击按钮向前向后滚动；详细代码:html代码:*{margin:0px; padding:0px;font-family:"Microsoft YaHei"}ol,ul{list-style:none;}cite,em,i{font-style...
相信很多人都见过瀑布流图片布局，那些图片是动态加载出来的，效果很好，对服务器的压力相对来说也小了很多，用鼠标操作的时候相信都见过这样的效果：进入qq空间，向下拉动空间，到底部时，会动态加载剩余的说说或者是日志 ，今天我们就来看看他们的实现思路和js控制动态加载的代码。 下面的代码主要是控制滚动条下拉时的加载事件的，无论是加载图片还是加载记录数据 都可以。 加载jQuery库后我们可以这样使用： $(window).scrol...
返回顶部组件是一种极其常见的网页功能，需求简单：页面滚动一定距离后，显示返回顶部的按钮，点击该按钮可以将滚动条滚回至页面开始的位置。 实现思路也很容易，只要改变document.documentElement.scrollTop或document.body.scrollTop的值即可。 本文抛弃所有加速减速的酷炫效果，回归软件的本质，提供一个最简洁的实现，只追求实用性，不追求所谓的用户体验，效果如下由于思路跟代码都很简单，所以就直接贴出实现细节了：var Bac...
一、起因&思路 一直想写一个原生js拖拽效果，又加上近来学react学得比较嗨。所以就用react来实现这个拖拽效果。 首先，其实拖拽效果的思路是很简单的。主要就是三个步骤： 1.onmousedown的时候，启动可拖拽事件，记录被拖拽元素的原始坐标参数。 2.onmousemove的时候，实时记录鼠标移动的距离，结合被拖拽元素第一阶段的坐标参数，计算并设置新的坐标值。 3.onmouseup的时候，关闭可拖拽事件，记录新的坐标值。 注意：这里主要是通...
React 起源于 Facebook 的内部项目，因为该公司对市场上所有 JavaScript MVC 框架，都不满意，就决定自己写一套，用来架设 Instagram 的网站。做出来以后，发现这套东西很好用，就在2013年5月开源了。由于 React 的设计思想极其独特，属于革命性创新，性能出众，代码逻辑却非常简单。所以，越来越多的人开始关注和使用，认为它可能是将来 Web 开发的主流工具。 前几天写的那个拖拽，自己留下的疑问。。。这次在热心博友的提示下又修...