这些笔记算是我前端开发一直会用到的,虽然看着比较简单,但是对我的成长和解决问题却是非常重要的。花时间整理总结一下算是留个笔记日后万一用到。东西比较多,公众号一次放不了这么多,只能分开去放。
只是个人的笔记,大神路过,不喜勿碰。
Ajax(自前后端分离之后,Ajax这门技术可以说是浏览器获取数据的必选)
比较常规的
$.ajax({ async: false, type : "POST", url : "xxx", success : function(data) { var list = data.data.list; var row = ""; $(selector).empty(); $.each(data.data.list, function(index, item){ row += '内容' }); $(selector).append(row); }, });
可以跨域的
第一种
$.ajax({ type : "GET", url:"http://xxx.com/xx?xx=xx&callback=getcallback", dataType : "jsonp", cache:false, jsonp: "callback",//传递给请求处理程序或页面的,用以获得jsonp回调函数名的参数名(默认为:callback) jsonpCallback:"getcallback",//自定义的jsonp回调函数名称,默认为jQuery自动生成的随机函数名 success : function(data){ } }); function getcallback(data){ //留空 }
第二种
window.url_prefix = "http://xxx.com/index.php?r=";
$.getJSON( window.url_prefix + 'xxxx&jsoncallback=?', {}, function(data){
alert(data.error);
})
其实原理一样
第三种
就是服务器开启cors跨域,但是一般为了安全起见不会这么做。
jquery插件封装
(function($) {
$.extend($.fn, {
myplugin: function() {
// your plugin logic
}
});
})(jQuery);
// 方法二
(function($) {
$.extend($.fn, {
myplugin: function() {
// your plugin logic
}
});
})(jQuery);
数组排序
kdata.sort( function(a, b){
return parseInt(a["value" ]) < parseInt(b["value" ]) ? 1 : parseInt(a[ "value"]) == parseInt(b[ "value" ]) ? 0 : -1;
});
闭包
function create(){
var arr = new Array();
for (var i=0; i<10; i++){
arr[i] = function(num){
return function(){
return num;
};
}(i);
}
return arr;
}
var c_arr = create();
for(var i=0; i<c_arr.length;i++){
document.write("c_arr["+i+"] = "+c_arr[i]()+"<br />");
}
浏览器语言判断
var type=navigator.appName;
if (type=="Netscape"){
var lang = navigator.language;
}
else{
var lang = navigator.userLanguage;
}
var lang = lang.substr(0,2);
if (lang == "zh"){
}else{
}
判断是否在微信内打开(微信端开发H5必定用到)
var is_weixn=function(){
var ua = navigator.userAgent.toLowerCase();
if(ua.match(/MicroMessenger/i)=="micromessenger") {
return true;
} else {
return false;
}
}
判断图片是否加载完成
function loadImage(url, callback) {
var img = new Image(); //创建一个Image对象,实现图片的预下载
img.src = url;
if(img.complete) { // 如果图片已经存在于浏览器缓存,直接调用回调函数
callback.call(img);
return; // 直接返回,不用再处理onload事件
}
img.onload = function () { //图片下载完毕时异步调用callback函数。
callback.call(img);//将回调函数的this替换为Image对象
};
};
获取url中参数
var queryUrl = function(url, key) {
url = url.replace(/^[^?=]*?/ig, '').split('#')[0]; // 去除网址与hash信息
var json = {};
url.replace(/(^|&)([^&=]+)=([^&]*)/g, function (a, b, key, value){
try {
key = decodeURIComponent(key);
} catch(e) {}
try {
value = decodeURIComponent(value);
} catch(e) {}
if (!(key in json)) {
json[key] = /[]$/.test(key) ? [value] : value;
}
else if (json[key] instanceof Array) {
json[key].push(value);
}
else {
json[key] = [json[key], value];
}
});
return key ? json[key] : json;
}
用zepto中滑动事件
我的移动端项目一般都是引入zepto,如果做轮播等滑动操作,可以很方便使用这几个自带的方法,而不需要引入别的插件。
swipeLeft
, swipeRight
, swipeUp
, swipeDown
—
当元素被划过时触发。(可选择给定的方向)
$('#items li').swipeRight(function(){ //左滑动
//xxx 操作
})
$('#items li').swipeLeft(function(){ //右滑动
//xxx操作
})
$('#items li').swipeUp(function(){ //上滑动
//xxx 操作
})
$('#items li').swipeDown(function(){ //下滑动
//xxx操作
})
先到这儿,后面的笔记后续再上。
欢迎订阅微信公众号:强哥带你学前端,您的关注是我的动力@!
原文:http://mp.weixin.qq.com/s/gjF-jsLMPHfzk_aVhXKwnA?ref=myread
如有侵权,请联系立马删除