js常用代码整理

引用js

Ajax请求

例子1：$.ajax({

type:"post",

url:"loggingIos_findUserLoggingYears.action",

data:{},

dataType:"json",

success:function(data){

error:function(){

}

});

例子2：$.ajax({

type:"post",

url:"loggingIos_prePhoto.action",

data:{"PrevPhotosParams":JSON.stringify(PrevPhotosParams)},

dataType:"html",

//contentType: "application/html",

success:function(html){

$("#disWin").html(html);

$("#disWin").show(200,function() {

scrollTop = $("body").scrollTop(); // body设置为fixed之后会飘到顶部，所以要动态计算当前用户所在高度

scrollTop = scrollTop * (-1);

$("body").css({"top": scrollTop, "overflow": "hidden", "position": "fixed"});

});

error:function(){}

});

$("#back").click(function() {

$("#disWin").hide(200);

$("body").css({"top": "auto", "overflow": "auto", "position": "static"});

scrollTop = scrollTop * (-1);

window.scrollTo(0, scrollTop);

setTimeout(function() {

$("#disWin").empty();

}, 200);

});

例子3：$.ajax({

type: "POST",

url: "loggingIos!readSearLogging.action",

data: {

dataType: "json",

cache: false,

async: false,

traditional: true,

success: function(resultData) {

error:function(){

}

});

添加事件/删除事件

//添加上传按钮事件

$(".add-btn").attr("onclick","uploadStar()");

//移除上传按钮事件

$(".add-btn").removeAttr("onclick");

//添加上传按钮事件

if(typeof($(".add-btn").attr("onclick")) == "undefined"){

$(".add-btn").attr("onclick","uploadStar()");

}

事件on/bind/unbind的使用与传参

$(function(){

function fun(){

alert("test");

}

//bind 和 on 都可以

//$(".test").on("click",fun);

$(".test").bind("click",fun);

$(".del").bind("click",function(){

$(".test").unbind("click",fun);

alert("删除成功");

});

$(".add").bind("click",function(){

$(".test").bind("click",fun);

alert("添加成功");

});

</script>

$(".loadingFlower").on("click",'',{name:"123",id:"234",tel:"345"},callback)

function callback(event){
   console.log(event.data.name);    //参数1 =>123
   console.log(event.data.id);      //参数2 =>234
   console.log(event.data.tel);     //参数3 =>345
}

On和off的高级应用

jquery：$.on(event,[selector],[data],fn)

2014-04-15 18:10 435人阅读评论(1) 收藏举报

分类：

jQuery（7）

1、$.on()

在选择元素上绑定一个或多个事件的事件处理函数。

（1）on()方法绑定事件处理程序到当前jQuery对象中的元素。不再推荐使用.bind(),.delegate(),.live()

（2）删除.on()事件：.off()

（3）要附加一个事件，只运行一次，然后删除自己：.one()

2、$.on(events,[selector],[data],fn)

events：一个或多个用空格风格的事件类型和可选的命名空间。如：click 或keydown.myPlugin

selector：一个选择器字符串，用于过滤选定的元素。该选择器的后裔元素将调用处理程序。如果为空或被忽略，事件总是触发。

data：事件触发时要传递event.data给事件处理函数

fn：该事件触发时执行的函数。false值一个可以做一个函数的简写，返回false。

如：

(1)

$.on("click",function(){});

(2)

function handle(){}

$.on("click",handle)

(3)取消默认操作

$.on("submit",false)

$.on("submit",function(event){event.preventDefault();});

$.on("submit",function(event){event.stopPropagation();});

例子：ajax分页请求数据刷新

Id = bodyInfo是页面ajax请求数据的框div

.starlog-single .single-btn .close 为ajax请求后在js端重新绘制的html。

$('.g-wrap #bodyInfo').on('click', '.starlog-single .single-btn .close', function() {

var parli = $(this).parents('li');

$(this).toggleClass('hover');

parli.find('.starlog-bd').slideToggle();

return false;

});

jquery的closest方法和parents方法的区别

今天第一次看到closest方法，以前也从来没用过。

该方法从元素本身开始往上查找，返回最近的匹配的祖先元素。

1、closest查找开始于自身，parents开始于元素父级

2、closest向上查找，知道找到一个匹配就停止查找，parents一直查找到根元素，并将匹配的元素加入集合

3、closest返回的是包含零个或一个元素的jquery对象，parents返回的是包含零个或一个或多个元素的jquery对象

点击非筛选区域，隐藏筛选条件

/**

* @description 日志列表页面，点击非筛选区域，隐藏筛选条件

* @page 使用页面（loggNewSear.jsp）

* @path 使用页面绝对路径（/logging/loggNewSear.jsp）

* @author maohuidong

* @date 2017-04-07

$(document).on("click",function(e){

if($(e.target).closest('.screen').length == 0){

$(".screen .sereenyh").removeClass("open");

$(".screen .screen-bd").slideUp();

}

});

预运行函数

$(document).ready(function() {

}

//var var1 = $("#content").height();

var var3 = $("#content").innerHeight();//元素内部区域高度，忽略padding、border

// var var3 = $("#content").outerHeight();//忽略边框

// alert(var3);

// document .getElementById("show").display = "block";

$(".energy-txtshow .txt").css('height','100');

$("#show .btn").css('concent','查看全文');

$("#show").show();

$("#hide").hide();

$("#collect").toggleClass('hover',true);

$(".energy-txtshow .txt").animate({height:var3});

//$(".energy-txtshow .txt").slideToggle();

//$(".energy-txtshow .txt").fadeToggle();

// $(".energy-txtshow .txt").fadeToggle("slow");

//$(".energy-txtshow .txt").slideToggle() ;

var themeId = $("#theme").find("span.hover").find('input').val();

$("#disWin").html(resultData);

$("#disWin").show(2000);

setTimeout(function() {

$("body").attr("style", "overflow: hidden;");

$("div#bodyptb").attr("style", "overflow: auto;");

}, 2000);

setTimeout(function() {

$("body").attr("style", "overflow: hidden;");

$("div#bodyptb").attr("style", "overflow: auto;");

}, 2000);

var isSafari= u.indexOf("Safari") > 0 && u.indexOf("Chrome") < 0 ? true : false;

var titleLineHeight = parseFloat($title.eq(0).css('line-height'));

var isIOS = u.match(/iPhone|iPad|iPod/i) ? true : false;

var $span = $("span", $(this)).eq(1);

var txt = $span.text();

// alert("txt="+txt);

var spanHeight = $span.css({'display':'block'}).height();

articalContent = $.trim(articalContent);

var result = $.isEmptyObject(data);

if (result) {

$li = $('#searchTesult').find('div[data-is-complete="false"]');

} else {

$li = $('#searchTesult').append(data).find('div[data-is-complete="false"]');

}

$('.screen-bd .module .nlscreen').eq(0).addClass('active').siblings('.nlscreen').removeClass('active');

$('.scroll-load').remove();

parli.find('.starlog-bd').slideToggle();

$('.user-screen .screen-bd').slideUp();

$(this).parents('li').remove();

$(this).addClass('hover').siblings().removeClass('hover');

var data = '<li href="video-look.html"><a><img src="uploads/small-img.jpg" width="220" height="220" alt=""><span class="bg"></span><span class="speed bgicon">20%</span></a><span class="del bgicon"></span></li>';

$('.three-plate-form .edit-list .add-btn').before(data);

$(".page-num").html(str);

var text = $(this).text();

$('html,body,#bodyptb').animate({scrollTop:$('#newComment').offset().top - 0.5},'slow');

$(this).parents('li').remove();

</a>

JavaScript数组Array对象增加和删除元素方法总结

pop 方法

移除数组中的最后一个元素并返回该元素。
arrayObj.pop( )
必选的 arrayObj 引用是一个 Array 对象。
说明
如果该数组为空，那么将返回 undefined。

shift 方法

移除数组中的第一个元素并返回该元素。
arrayObj.shift( )
必选的 arrayObj 引用是一个 Array 对象。
说明
shift 方法可移除数组中的第一个元素并返回该元素。

复制代码代码如下:

var arr = new Array(0,1,2,3,4);
var remove = arr.pop();
alert(remove);
alert(arr.length);

移除并返回最后一个元素，先弹出 4 ，然后提示目前数组长度弹出 4 ！

push 方法

将新元素添加到一个数组中，并返回数组的新长度值。
arrayObj.push([item1 [item2 [. . . [itemN ]]]])
参数
arrayObj
必选项。一个 Array 对象。
item, item2,. . . itemN
可选项。该 Array 的新元素。
说明
push 方法将以新元素出现的顺序添加这些元素。如果参数之一为数组，那么该数组将作为单个元素添加到数组中。如果要合并两个或多个数组中的元素，请使用 concat 方法。

复制代码代码如下:

var arr = new Array(0,1,2,3,4);
// 参数是一个或多个
var len = arr.push(5,6);
//len = arr.push(7);
for(var i=0;i<arr.length;i++){
    alert(arr[i]);
}

可以一次性增加多个进去，也可以增加一个，返回数组目前长度。变了打印数组内容观察变化！

splice 方法

从一个数组中移除一个或多个元素，如果必要，在所移除元素的位置上插入新元素，返回所移除的元素。
arrayObj.splice(start, deleteCount, [item1[, item2[, . . . [,itemN]]]])
参数
arrayObj
必选项。一个 Array 对象。
start
必选项。指定从数组中移除元素的开始位置，这个位置是从 0 开始计算的。
deleteCount
必选项。要移除的元素的个数。
item1, item2,. . .,itemN
必选项。要在所移除元素的位置上插入的新元素。
说明
splice 方法可以移除从 start 位置开始的指定个数的元素并插入新元素，从而修改 arrayObj。返回值是一个由所移除的元素组成的新 Array 对象。

复制代码代码如下:

var arr = new Array(0,1,2,3,4);
// 删除从2开始的两个元素，位置从0开始
// 返回移除元素的数组
var reArr = arr.splice(2,2);
// 可以在移除元素的位置替换新的元素进去
//只是从移除开始位置进行增加新元素，如果你移除两个元素，你完全可以增加10个新元素进去
//var reArr = arr.splice(2,2,6,7,8,9);
for(var i=0;i<arr.length;i++){
    alert(arr[i]);
}

如果你不想增加新的元素进去，那么不要传递第三个参数即可！

concat 方法 (Array)

返回一个新数组，这个新数组是由两个或更多数组组合而成的。
array1.concat([item1[, item2[, . . . [, itemN]]]])
参数
array1
必选项。其他所有数组要进行连接的 Array 对象。
item1,. . ., itemN
可选项。要连接到 array1 末尾的其他项目。
说明
concat 方法返回一个 Array 对象，其中包含了 array1 和提供的任意其他项目的连接。
要加的项目（item1 … itemN）会按照从左到右的顺序添加到数组。如果某一项为数组，那么添加其内容到 array1 的末尾。如果该项目不是数组，就将其作为单个的数组元素添加到数组的末尾。

以下为从源数组复制元素到结果数组：

对于从正被连接到新数组的数组中复制的对象参数，复制后仍然指向相同的对象。不论新数组和源数组中哪一个有改变，都将引起另一个的改变。
对于连接到新数组的数值或字符串，只复制其值。一个数组中值有改变并不影响另一个数组中的值。

复制代码代码如下:

var arr = new Array(0,1);
var arr2 = new Array(3,4);
var arr = arr.concat(arr2);
for(var i=0;i<arr.length;i++){
    alert(arr[i]);
}

方法的作用是将arr2中的元素复制到了arr中！

5个数组Array方法: indexOf、filter、forEach、map、reduce使用实例

ECMAScript5标准发布于2009年12月3日，它带来了一些新的，改善现有的Array数组操作的方法。然而，这些新奇的数组方法并没有真正流行起来的，因为当时市场上缺乏支持ES5的浏览器。

Array "Extras"

没有人怀疑这些方法的实用性，但写polyfill（PS:兼容旧版浏览器的插件）对他们来说是不值得的。它把“必须实现”变成了“最好实现”。有人居然将这些数组方法称之为Array "Extras"。哎！

但是，时代在变化。如果你看看Github上流行的开源JS项目，你会发现趋势正在转变。大家都想削减大量（第三方库）的依赖，仅用本地代码来实现。

好了，让我们开始吧。

我的5个数组

在ES5中，一共有9个Array方法 http://kangax.github.io/compat-table/es5/

注* 九个方法

Array.prototype.indexOf
Array.prototype.lastIndexOf
Array.prototype.every
Array.prototype.some
Array.prototype.forEach
Array.prototype.map
Array.prototype.filter
Array.prototype.reduce
Array.prototype.reduceRight

我将挑选5种方法，我个人认为是最有用的，很多开发者都会碰到。

1) indexOf

indexOf()方法返回在该数组中第一个找到的元素位置，如果它不存在则返回-1。

不使用indexOf时

var arr = ['apple','orange','pear'],

found = false;

for(var i= 0, l = arr.length; i< l; i++){

if(arr[i] === 'orange'){

found = true;

}

console.log("found:",found);

使用后

var arr = ['apple','orange','pear'];

console.log("found:", arr.indexOf("orange") != -1);

2) filter

该filter()方法创建一个新的匹配过滤条件的数组。

不用 filter() 时

var arr = [

{"name":"apple", "count": 2},

{"name":"orange", "count": 5},

{"name":"pear", "count": 3},

{"name":"orange", "count": 16},

];

var newArr = [];

for(var i= 0, l = arr.length; i< l; i++){

if(arr[i].name === "orange" ){

newArr.push(arr[i]);

}

console.log("Filter results:",newArr);

用了 filter():

var arr = [

{"name":"apple", "count": 2},

{"name":"orange", "count": 5},

{"name":"pear", "count": 3},

{"name":"orange", "count": 16},

];

var newArr = arr.filter(function(item){

return item.name === "orange";

});

console.log("Filter results:",newArr);

3) forEach()

forEach为每个元素执行对应的方法

var arr = [1,2,3,4,5,6,7,8];

// Uses the usual "for" loop to iterate

for(var i= 0, l = arr.length; i< l; i++){

console.log(arr[i]);

}

console.log("========================");

//Uses forEach to iterate

arr.forEach(function(item,index){

console.log(item);

});

forEach是用来替换for循环的

4) map()

map()对数组的每个元素进行一定操作（映射）后，会返回一个新的数组，

不使用map

var oldArr = [{first_name:"Colin",last_name:"Toh"},{first_name:"Addy",last_name:"Osmani"},{first_name:"Yehuda",last_name:"Katz"}];

function getNewArr(){

var newArr = [];

for(var i= 0, l = oldArr.length; i< l; i++){

var item = oldArr[i];

item.full_name = [item.first_name,item.last_name].join(" ");

newArr[i] = item;

}

return newArr;

}

console.log(getNewArr());

使用map后

var oldArr = [{first_name:"Colin",last_name:"Toh"},{first_name:"Addy",last_name:"Osmani"},{first_name:"Yehuda",last_name:"Katz"}];

function getNewArr(){

return oldArr.map(function(item,index){

item.full_name = [item.first_name,item.last_name].join(" ");

return item;

});

}

console.log(getNewArr());

map()是处理服务器返回数据时是一个非常实用的函数。

5) reduce()

reduce()可以实现一个累加器的功能，将数组的每个值（从左到右）将其降低到一个值。

说实话刚开始理解这句话有点难度，它太抽象了。

场景：统计一个数组中有多少个不重复的单词

不使用reduce时

var arr = ["apple","orange","apple","orange","pear","orange"];

function getWordCnt(){

var obj = {};

for(var i= 0, l = arr.length; i< l; i++){

var item = arr[i];

obj[item] = (obj[item] +1 ) || 1;

}

return obj;

}

console.log(getWordCnt());

使用reduce()后

var arr = ["apple","orange","apple","orange","pear","orange"];

function getWordCnt(){

return arr.reduce(function(prev,next){

prev[next] = (prev[next] + 1) || 1;

return prev;

},{});

}

console.log(getWordCnt());

让我先解释一下我自己对reduce的理解。reduce(callback, initialValue)会传入两个变量。回调函数(callback)和初始值(initialValue)。假设函数它有个传入参数，prev和next,index和array。prev和next你是必须要了解的。

一般来讲prev是从数组中第一个元素开始的，next是第二个元素。但是当你传入初始值(initialValue)后，第一个prev将是initivalValue，next将是数组中的第一个元素。

比如：

* 二者的区别，在console中运行一下即可知晓

var arr = ["apple","orange"];

function noPassValue(){

return arr.reduce(function(prev,next){

console.log("prev:",prev);

console.log("next:",next);

return prev + " " +next;

});

}

function passValue(){

return arr.reduce(function(prev,next){

console.log("prev:",prev);

console.log("next:",next);

prev[next] = 1;

return prev;

},{});

}

console.log("No Additional parameter:",noPassValue());

console.log("----------------");

console.log("With {} as an additional parameter:",passValue());

最后一种方式：删除数组的某一个元素

Array.prototype.del = function(filter){

var idx = filter;

if(typeof filter == 'function'){

for(var i=0;i<this.length;i++){

if(filter(this[i],i)) idx = i;

}

this.splice(idx,1)

}

var ary=[{id:1,name:"b"},{id:2,name:"b"}];

var delid = 2;

ary.del(function(obj){

return obj.id == delid;

})

获取对象成员数量

Object.getOwnPropertyNames(obj).length

数组转字符串

需要将数组元素用某个字符连接成字符串，示例代码如下：

var a, b;

a = new Array(0,1,2,3,4);

b = a.join("-");

字符串转数组

实现方法为将字符串按某个字符切割成若干个字符串，并以数组形式返回，示例代码如下：

1 2	var s = "abc,abcd,aaa"; ss = s.split(",");// 在每个逗号(,)处进行分解。

JSON字符串，JSON数组，JSON对象的相互转换

json字符串转化成json对象

// jquery的方法

var jsonObj = $.parseJSON(jsonStr)

//js 的方法

var jsonObj = JSON.parse(jsonStr)

json对象转化成json字符串

//js方法

var jsonStr1 = JSON.stringify(jsonObj)

例如

例如：

var jsonStr = '[{"id":"01","open":false,"pId":"0","name":"A部门"},{"id":"01","open":false,"pId":"0","name":"A部门"},{"id":"011","open":false,"pId":"01","name":"A部门"},{"id":"03","open":false,"pId":"0","name":"A部门"},{"id":"04","open":false,"pId":"0","name":"A部门"}, {"id":"05","open":false,"pId":"0","name":"A部门"}, {"id":"06","open":false,"pId":"0","name":"A部门"}]';

// var jsonObj = $.parseJSON(jsonStr);

var jsonObj = JSON.parse(jsonStr)

console.log(jsonObj)

var jsonStr1 = JSON.stringify(jsonObj)

console.log(jsonStr1+"jsonStr1")

</script>

json对象转化成数组

// var jsonObj = $.parseJSON(jsonStr);

var jsonObj = JSON.parse(jsonStr)

console.log(jsonObj)

var jsonStr1 = JSON.stringify(jsonObj)

console.log(jsonStr1+"jsonStr1")

var jsonArr = [];

for(var i =0 ;i < jsonObj.length;i++){

jsonArr[i] = jsonObj[i];

}

console.log(typeof(jsonArr))

</script>

改变窗口大小事件

$(window).resize(function() {

imglook();

})

时间事件

clearTimeout(signtime);

signtime = setTimeout(function(){

$('.dialog-mask').hide();

$('.czs').hide("slow");

},3000)

改变事件

//视频添加

$('#btnFileVideo').change(function(){

$('.three-plate-form .edit-list .add-btn').before(data);

videonum();

var url = $('.edit-list').attr('data-url');

setTimeout(function(){

$('.edvideo a').attr('href',url);

$('.edvideo .bg').remove();

$('.edvideo .speed').remove();

$('.edvideo a').append('<span class="vi bgicon"></span>');

},5000)

})

Tab切换

//tab切换

function tabSwitch(tabHd,tabBd){

tabHd.each(function(index){

$this=$(this);

$this.click(function(){

$(this).addClass('hover').siblings().removeClass('hover');

tabBd.eq(index).addClass('active').siblings().removeClass('active');

});

}

tabSwitch($('.energy-tab span'),$('.energy-comment .comment'));

tabSwitch($('.news-tab a'),$('.news-list'));

tabSwitch($('.user-tabcart a'),$('.user-moneylibox'));

注册事件

$('.login .eye.close').on('click',function(){

if($(this).hasClass('close')){

$(this).removeClass('close');

$('.item input').attr("type","text");

}

else{

$(this).addClass('close');

$('.item input').attr("type","password")

}

});

Each循环

tabHd.each(function(index){

$this=$(this);

$this.click(function(){

$(this).addClass('hover').siblings().removeClass('hover');

tabBd.eq(index).addClass('active').siblings().removeClass('active');

});

秒转换为正常时间

function secondsToTime(secs) { // we will use this function to convert seconds in normal time format

//alert("secondsToTime");

var hr = Math.floor(secs / 3600);

var min = Math.floor((secs - (hr * 3600))/60);

var sec = Math.floor(secs - (hr * 3600) - (min * 60));

if (hr < 10) {hr = "0" + hr; }

if (min < 10) {min = "0" + min;}

if (sec < 10) {sec = "0" + sec;}

if (hr) {hr = "00";}

return hr + ':' + min + ':' + sec;

};

往下滑动加载数据

/**

* @description 往下滑动加载数据

* @page 使用页面（logging.jsp）

* @path 使用页面绝对路径（/logging/logging.jsp）

* @author senfy

* @date 2016-09-20

$(window).scroll(function() {

var str = '<div class="scroll-load"><em></em>数据加载中...</div>';

var scrollTop = $(this).scrollTop();

// alert("scrollTop="+scrollTop);

var scrollHeight = $(document).height();

// alert("scrollHeight="+scrollHeight);

var windowHeight = $(this).height();

// alert("windowHeight="+windowHeight);

if ((scrollTop + windowHeight) == scrollHeight) {

// alert("===="+$('.scroll-load').length);

pageSize = 10;

if ($('.scroll-load').length == 0 && $('.comment-item').length >= pageSize) {

if(flage != 3){//热门评论，只显示前20条

pageSize = 10;

currentPage += 1;

$('body').append(str);

setTimeout(function() {

$('.scroll-load').remove();

readComment(pageSize, currentPage,null); // 调用获取日志记录数据方法

}, 2000);

}else{

if(currentPage < 2){

currentPage += 1;

$('body').append(str);

setTimeout(function() {

$('.scroll-load').remove();

readComment(pageSize, currentPage,null); // 调用获取日志记录数据方法

}, 2000);

}

});

/**

* @description 分页获取日志记录数据

* @page 使用页面（logging.jsp）

* @path 使用页面绝对路径（/logging/logging.jsp）

* @author senfy

* @date 2016-08-17

function readComment(pageSize, currentPage,cle) {

var commentEnergyId = $("#commentEnergyId").val();

//alert("flage="+flage);

// alert("commentEnergyId="+commentEnergyId);

$.ajax({

type: "POST",

url: "energy_readEnergy.action",

data: {

"energy.id" : commentEnergyId,

"pageSize" : pageSize,

"currentPage" : currentPage,

"flage" : flage

// "commentType" : commentType

dataType: "json",

cache: false,

async: false,

success: function(resultData) {

//alert("resultData="+resultData);

if (resultData.dateJson.length <= 0) {

//alert("if");

if(cle != null && cle != ''){

$("#bodyInfo").empty();

html = "";

if(cle == 1){

html += "<div class='comment-title'>全部评论</div>";

}else if(cle == 2){

html += "<div class='comment-title'>精品评论</div>";

}else if(cle == 3){

html += "<div class='comment-title'>热门评论</div>";

}else if(cle == 4){

html += "<div class='comment-title'>最新评论</div>";

}

$("#bodyInfo").append(html);

}

if(currentPage != 1){

var str = '<div class="scroll-load">无更多数据</div>';

$('body').append(str);

setTimeout(function() {

$('.scroll-load').remove();

}, 2000);

}else{

appendTip(cle);

}

} else {

//alert("else");

//analDate(resultData); // 调用解析日期数据方法

analComment(resultData,cle); // 调用解析日志记录数据方法

}

});

}

Swiper使用

if($('.hbanner').length > 0){

var hbanner = new Swiper('.hbanner .swiper-container', {

loop:true,

autoplay:5000,

pagination: '.hbanner .swiper-pagination',

paginationClickable: true

});

}

//广播

var sup = $('.h-notice-list'),

items = sup.children(),

first = items.eq(0);

H5文件上传代码

function bytesToSize(bytes) {

//alert("bytesToSize");

var sizes = ['Bytes', 'KB', 'MB'];

if (bytes == 0) return 'n/a';

var i = parseInt(Math.floor(Math.log(bytes) / Math.log(1024)));

return (bytes / Math.pow(1024, i)).toFixed(1) + ' ' + sizes[i];

};

function fnameSelected() {

//alert("fnameSelected");

// get selected file element

var oFile = document.getElementById('image_file').files[0];

document.getElementById('Filename').value = oFile.name;

};

function fileSelected() {

//alert("fileSelected");

//alert(url);

// hide different warnings

document.getElementById('upload_response').style.display = 'none';

document.getElementById('error').style.display = 'none';

document.getElementById('error2').style.display = 'none';

document.getElementById('abort').style.display = 'none';

document.getElementById('warnsize').style.display = 'none';

// get selected file element

var oFile = document.getElementById('Filedata').files[0];

// filter for image files

/*var rFilter = /^(image\/bmp|image\/gif|image\/jpeg|image\/png|image\/tiff)$/i;

if (! rFilter.test(oFile.type)) {

document.getElementById('error').style.display = 'block';

return;

}*/

// little test for filesize

/*if (oFile.size > iMaxFilesize) {

document.getElementById('warnsize').style.display = 'block';

return;

}*/

// get preview element

var oImage = document.getElementById('preview');

// prepare HTML5 FileReader

var oReader = new FileReader();

oReader.onload = function(e){

// e.target.result contains the DataURL which we will use as a source of the image

oImage.src = e.target.result;

oImage.onload = function () { // binding onload event

// we are going to display some custom image information here

sResultFileSize = bytesToSize(oFile.size);

document.getElementById('fileinfo').style.display = 'block';

document.getElementById('filename').innerHTML = 'Name: ' + oFile.name;

document.getElementById('filesize').innerHTML = 'Size: ' + sResultFileSize;

document.getElementById('filetype').innerHTML = 'Type: ' + oFile.type;

document.getElementById('filedim').innerHTML = 'Dimension: ' + oImage.naturalWidth + ' x ' + oImage.naturalHeight;

};

document.getElementById('Filename').value = oFile.name;

document.getElementById('Filesize').value = oFile.size;

// read selected file as DataURL

oReader.readAsDataURL(oFile);

}

function startUploading() {

//alert("startUploading");

// cleanup all temp states

iPreviousBytesLoaded = 0;

document.getElementById('upload_response').style.display = 'none';

document.getElementById('error').style.display = 'none';

document.getElementById('error2').style.display = 'none';

document.getElementById('abort').style.display = 'none';

document.getElementById('warnsize').style.display = 'none';

document.getElementById('progress_percent').innerHTML = '';

var oProgress = document.getElementById('progress');

oProgress.style.display = 'block';

oProgress.style.width = '0px';

// get form data for POSTing

//var vFD = document.getElementById('upload_form').getFormData(); // for FF3

var vFD = new FormData(document.getElementById('upload_form'));

// create XMLHttpRequest object, adding few event listeners, and POSTing our data

var oXHR = new XMLHttpRequest();

oXHR.upload.addEventListener('progress', uploadProgress, false);

oXHR.addEventListener('load', uploadFinish, false);

oXHR.addEventListener('error', uploadError, false);

oXHR.addEventListener('abort', uploadAbort, false);

//oXHR.open('POST', 'http://192.168.1.193/h5upload/Demo11/upload.php');

oXHR.open('POST', uploadUrl);

//oXHR.overrideMimeType("application/octet-stream");

//oXHR.setRequestHeader('Content-Type','application/octet-stream');

oXHR.send(vFD);

//oXHR.sendAsBinary(vFD);

// set inner timer

oTimer = setInterval(doInnerUpdates, 300);

}

function doInnerUpdates() { // we will use this function to display upload speed

//alert("doInnerUpdates");

var iCB = iBytesUploaded;

var iDiff = iCB - iPreviousBytesLoaded;

// if nothing new loaded - exit

if (iDiff == 0)

return;

iPreviousBytesLoaded = iCB;

iDiff = iDiff * 2;

var iBytesRem = iBytesTotal - iPreviousBytesLoaded;

var secondsRemaining = iBytesRem / iDiff;

// update speed info

var iSpeed = iDiff.toString() + 'B/s';

if (iDiff > 1024 * 1024) {

iSpeed = (Math.round(iDiff * 100/(1024*1024))/100).toString() + 'MB/s';

} else if (iDiff > 1024) {

iSpeed = (Math.round(iDiff * 100/1024)/100).toString() + 'KB/s';

}

document.getElementById('speed').innerHTML = iSpeed;

document.getElementById('remaining').innerHTML = '| ' + secondsToTime(secondsRemaining);

}

function uploadProgress(e) { // upload process in progress

//alert("uploadProgress");

if (e.lengthComputable) {

iBytesUploaded = e.loaded;

iBytesTotal = e.total;

var iPercentComplete = Math.round(e.loaded * 100 / e.total);

var iBytesTransfered = bytesToSize(iBytesUploaded);

document.getElementById('progress_percent').innerHTML = iPercentComplete.toString() + '%';

document.getElementById('progress').style.width = (iPercentComplete * 4).toString() + 'px';

document.getElementById('b_transfered').innerHTML = iBytesTransfered;

if (iPercentComplete == 100) {

var oUploadResponse = document.getElementById('upload_response');

oUploadResponse.innerHTML = '正在上传....';

oUploadResponse.style.display = 'block';

}

} else {

document.getElementById('progress').innerHTML = 'unable to compute';

}

function uploadFinish(e) { // upload successfully finished

//alert("uploadFinish");

var oUploadResponse = document.getElementById('upload_response');

oUploadResponse.innerHTML = e.target.responseText;

oUploadResponse.style.display = 'block';

document.getElementById('progress_percent').innerHTML = '100%';

document.getElementById('progress').style.width = '400px';

document.getElementById('filesize').innerHTML = sResultFileSize;

document.getElementById('remaining').innerHTML = '| 00:00:00';

clearInterval(oTimer);

}

function uploadError(e) { // upload error

//alert("uploadError");

document.getElementById('error2').style.display = 'block';

clearInterval(oTimer);

}

function uploadAbort(e) { // upload abort

// alert("uploadAbort");

document.getElementById('abort').style.display = 'block';

clearInterval(oTimer);

}

关键字高亮

keyLight:function(content,key){

//关键字高亮

var regExp = new RegExp(key,"gi");

var start = content.toLowerCase().indexOf(key.toLowerCase());

var end = start + key.length;

var origenKey = content.substring(start,end);

return content.replace(regExp,"<strong style='color:blue;'>"+origenKey+"</strong>");

判断一个变量是否定义

If(typeof fn == “function”){ fn(count)}

if(typeof pushMsg != "undefined" && pushMsg != null){

pushMsg.setNotPushMsgCount(function(count){

//展示有推送消息的标记

pushMsgFlag({},count);

});

}

是否为空对象

$.isEmptyObject(collectData.videoInfo)

等同于

function isEmptyObject(e) {

var t;

for (t in e)

return !1;

return !0

}

秒客网

js常用代码整理

引用js

Ajax请求

添加事件/删除事件

事件on/bind/unbind的使用与传参

On和off的高级应用

jquery：$.on(event,[selector],[data],fn)

jquery的closest方法和parents方法的区别

点击非筛选区域，隐藏筛选条件

预运行函数

JavaScript数组Array对象增加和删除元素方法总结

5个数组Array方法: indexOf、filter、forEach、map、reduce使用实例

获取对象成员数量

数组转字符串

字符串转数组

JSON字符串，JSON数组，JSON对象的相互转换

json字符串转化成json对象

json对象转化成json字符串

例如

json对象转化成数组

改变窗口大小事件

时间事件

改变事件

Tab切换

注册事件

Each循环

秒转换为正常时间

往下滑动加载数据

Swiper使用

H5文件上传代码

关键字高亮

判断一个变量是否定义

是否为空对象

相关文章