讲到ajax这个东西，我们要知道两个对象XMLHTTPRequest和ActiveXObject ，提供了对 HTTP 协议的完全的访问，包括做出 POST 和 HEAD 请求以及普通的 GET 请求的能力。可以同步或异步返回 Web 服务器的响应，并且能以文本或者一个 DOM 文档形式返回内容。XMLHTTPRequest基本上算是标准化了，兼容大部分浏览器ActiveXObject这玩儿意儿是微软的东西，所以是为了兼容IE版本，我们用的只是它的xmlHTTP功能。 为了功能的明确和清晰，我们把...
js对数组的操作在平常的项目中也会遇到，除去一些增加，或者减少的操作外，还有一个比较重要的操作就是数组的除重，通过数组的除重，我们可以将一个数组中存在的多个重复的数组进行清理，只留下不重复的。另外下面我介绍一种原生就s的数组除重方法。Array.prototype.check= function(){ for(var i=0;i<this.length;i++){ for(var j=i+1;j<this.length;j++){ if(this[i]==this[j]){ this.splice(i,1); i=i-1; } } } } var temp=[1,...
本文实例为大家分享了原生js和jquery横向导航菜单的制作方法，供大家参考，具体内容如下 原生javascript实现： 这一次要实现的是鼠标放上去以后，菜单栏被选中的那一栏水平拉伸，鼠标离开后水平收缩。并带有一定的时间性，使肉眼能够看出其拉伸收缩的动画效果。 开始用javascript进行编写： 首先在之前水平方向的导航栏上进行操作，将第一栏和选中栏的样式只改变为背景变黑色，文字变白色 .on,a:hover{background:#000000;color:#F...
就来总结一下简单的东西 备注：一下的方法都是包裹在一个EventUtil对象里面的，直接采用对象字面量定义方法了。。。 ①添加事件方法 addHandler：function(element,type,handler){if(element.addEventListener){//检测是否为DOM2级方法element.addEventListener(type, handler, false);}else if (element.attachEvent){//检测是否为IE级方法element.attachEvent("on" + type, handler);} else {//检测是否为DOM0级方法element["on"...
本文分为两部分进行讲解，具体内容如下 第一部分：原生js实现addClass,removeClass,hasClass方法 function hasClass(elem, cls) {cls = cls || ;if (cls.replace(/\s/g, ).length == 0) return false; //当cls没有参数时，返回falsereturn new RegExp( + cls + ).test( + elem.className + ); }function addClass(ele, cls) {if (!hasClass(elem, cls)) {ele.className = ele.className == ? cls : ele.className + + cls;}...
本人自己写过三个图片轮播，一个是简单的原生JS实现的，没有什么动画效果的，一个是结合JQuery实现的，淡入淡出切换的。现在想做一个酷一点的放在博客或者个人网站，到时候可以展示自己的作品。逛了一下慕课网，发现有个旋转木马的jquery插件课程，有点酷酷的，于是就想着用原生JS封装出来。做起来才发现，没有自己想象中的那么容易。。。不啰嗦了，讲解一下实现过程吧。 二、效果 由于自己的服务器还没弄好。在线演示不了（ORZ......
本文实例分享了原生JS版和jQuery 版实现文件上传功能的例子，供大家参考，具体内容如下<!doctype html> <html lang="zh"> <head> <meta charset="utf-8"> <title>HTML5 Ajax Uploader</title> <script src="jquery-2.1.1.min.js"></script> </head><body> <p><input type="file" id="upfile"></p> <p><input type="button" id="upJS" value="用原生JS上传"></p> <p><input type="button" id="upJQuery" value="用jQuery上传"></p> ...
在实际的项目中，能用别人写好的插件实现相关功能是最好不过，为了节约时间成本，因为有的项目比较紧急，没充分时间让你自己来写，即便写了，你还要花大量时间调试兼容性。但是出于学习的目的，你可以利用闲暇时间，自己动手写写，看一些原生js的东西，根据自己的思路做插件，这样能提高水平。 说到autotemplete，好多人都用过，引用autotemplete.js,然后就可以实现在输入框输入值的时候提示下拉选项，类似于百度搜索框那种提示功能...
百叶窗大家都见过吧！如图:原理: 如图所示，空心格子就好比是每个li，给它设定相对定位属性，设置overflow:hidden；黑块为li子元素，高度为li的2倍，设置absolute属性，我们正是要改变它的top值从而获得变化！(右上角多余块与本图无关)布局分析： 注意top值得变化！默认top=0时候，显示的“一楼上铺”，当top=-40px时候，li的子元素 上移40px，这时候显示的内容就为“一楼下铺”注意p元素的包裹层divJS分析： 1、要开多个定时器来达...
最近有提关于下拉选项过多的时候，希望输入关键词，可以搜索内容的需求，但是之前项目太赶，所以也就没有来得及做，因为希望用原生js写一些内容，所以插件是采用了原生js写的思路如下 第一步：fnInit实现初始化一些字段 第二步：加载搜索框的div 第三步：实现search功能，删除原节点并加载新节点 第四步：点击或者回车的时候设置value 代码： autoComplete.js/** * @summary AutoComplete * @description 输入框自动检索下拉选项...
React 起源于 Facebook 的内部项目，因为该公司对市场上所有 JavaScript MVC 框架，都不满意，就决定自己写一套，用来架设 Instagram 的网站。做出来以后，发现这套东西很好用，就在2013年5月开源了。由于 React 的设计思想极其独特，属于革命性创新，性能出众，代码逻辑却非常简单。所以，越来越多的人开始关注和使用，认为它可能是将来 Web 开发的主流工具。 前几天写的那个拖拽，自己留下的疑问。。。这次在热心博友的提示下又修...
一、起因&思路 一直想写一个原生js拖拽效果，又加上近来学react学得比较嗨。所以就用react来实现这个拖拽效果。 首先，其实拖拽效果的思路是很简单的。主要就是三个步骤： 1.onmousedown的时候，启动可拖拽事件，记录被拖拽元素的原始坐标参数。 2.onmousemove的时候，实时记录鼠标移动的距离，结合被拖拽元素第一阶段的坐标参数，计算并设置新的坐标值。 3.onmouseup的时候，关闭可拖拽事件，记录新的坐标值。 注意：这里主要是通...
返回顶部组件是一种极其常见的网页功能，需求简单：页面滚动一定距离后，显示返回顶部的按钮，点击该按钮可以将滚动条滚回至页面开始的位置。 实现思路也很容易，只要改变document.documentElement.scrollTop或document.body.scrollTop的值即可。 本文抛弃所有加速减速的酷炫效果，回归软件的本质，提供一个最简洁的实现，只追求实用性，不追求所谓的用户体验，效果如下由于思路跟代码都很简单，所以就直接贴出实现细节了：var Bac...
相信很多人都见过瀑布流图片布局，那些图片是动态加载出来的，效果很好，对服务器的压力相对来说也小了很多，用鼠标操作的时候相信都见过这样的效果：进入qq空间，向下拉动空间，到底部时，会动态加载剩余的说说或者是日志 ，今天我们就来看看他们的实现思路和js控制动态加载的代码。 下面的代码主要是控制滚动条下拉时的加载事件的，无论是加载图片还是加载记录数据 都可以。 加载jQuery库后我们可以这样使用： $(window).scro...
本文实例介绍了js焦点图片层叠轮播切换滚动效果，分享给大家供大家参考，具体内容如下 效果图： 功能描述：自定义图片尺寸； 每隔一段时间自动滚动图片； 每次动画执行的时候改变图片的位置，宽高以及其它属性也要跟随着变化； 鼠标移上图片，显示当前图片的详细信息； 点击按钮向前向后滚动；详细代码:html代码:<!DOCTYPE html> <!-- saved from url=(0062)http://x1.xiuimg.com/style/xiu/woxiu/v1/tpl/topic/xiux...