引用js
<script type="text/javascript" src="js/jquery-1.11.2.min.js"></script>
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(){
}
});
添加事件/删除事件
<div class=”add-btn” οnclick=”uploadStar()” >测试</div>
//添加上传按钮事件
$(".add-btn").attr("onclick","uploadStar()");
//移除上传按钮事件
$(".add-btn").removeAttr("onclick");
//添加上传按钮事件
if(typeof($(".add-btn").attr("onclick")) == "undefined"){
$(".add-btn").attr("onclick","uploadStar()");
}
事件on/bind/unbind的使用与传参
<div class="test">test</div>
<div class="del">删除事件</div>
<div class="add">添加事件</div>
<script type="text/javascript">
$(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 href="javascript:void(0)" οnclick="document.forms[0].submit()">
<img src="${pageContext.request.contextPath}/images/button/save.gif" />
</a>
<!-- 执行js,进行返回 -->
<a href="javascript:void(0)" οnclick="window.history.go(-1)"><img src="${pageContext.request.contextPath}/images/button/tuihui.gif" /></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时
1 2 3 4 5 6 7 8 9 10 | 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); |
使用后
1 2 3 | var arr = ['apple','orange','pear'];
console.log("found:", arr.indexOf("orange") != -1); |
2) filter
该filter()方法创建一个新的匹配过滤条件的数组。
不用 filter() 时
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 | 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():
1 2 3 4 5 6 7 8 9 10 11 12 13 | 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为每个元素执行对应的方法
1 2 3 4 5 6 7 8 9 10 11 12 13 | 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
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 | 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后
1 2 3 4 5 6 7 8 9 10 11 12 | 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时
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | 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()后
1 2 3 4 5 6 7 8 9 10 | 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将是数组中的第一个元素。
比如:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 | /* * 二者的区别,在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
数组转字符串
需要将数组元素用某个字符连接成字符串,示例代码如下:
1 2 3 | 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)
例如
例如:
<script type="text/javascript">
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对象转化成数组
<script type="text/javascript">
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")
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(){
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);
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
}