讲到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...