admin管理员组文章数量:1587993
js中的一些问题 事件 css jquery的动画 jq中的tmpl每个定义的具体列子 flex布局（弹性盒模型小型） 移动端 boorstrap 适配自适应响应式 viewport rem vh vw
cookie和session js执行事件机制 websocket worker 并用性 可用性 SEO jq对象和dom的互相转换
*************************************************
图片上传（异步文件内容）
*************************************************
录音文件（device报修）
*************************************************
手机内置浏览器
/**
* [location] yes:显示bar,no:隐藏bar
* [hidenavigationbuttons] yes:显示导航按钮,no:隐藏导航按钮
* [navigationbuttoncolor] 导航按钮颜色(十六进制颜色,如:#ffffff)
* [hideurlbar] yes:显示导航栏地址栏,no:隐藏导航栏地址栏
* [closebuttoncolor] 关闭按钮颜色(十六进制颜色,如:#ffffff)
* [closebuttoncaption] 使用文字代替关闭按钮X
* [toolbarcolor] toolbar颜色(十六进制颜色,如:#ffffff)
* @type {[type]}
*/
var ref = cordova.InAppBrowser.open('http://nuoda.maozz.top/smp/nuoda/contants_com.html?userid=13007534537', '_blank', 'location=yes,hidenavigationbuttons=no,navigationbuttoncolor=#ffffff,hideurlbar=yes,closebuttoncolor=#ffffff,toolbarcolor=#11539b');
**********************************************
BFC(Block Formatting Contexts (块级格式化上下文)，它属于上述定位方案的普通流)
普通流 (normal flow)、浮动 (float)、绝对定位 (absolute positioning)
具有 BFC 特性的元素可以看作是隔离了的独立容器，容器里面的元素不会在布局上影响到外面的元素，并且 BFC 具有普通容器所没有的一些特性。
通俗一点来讲，可以把 BFC 理解为一个封闭的大箱子，箱子内部的元素无论如何翻江倒海，都不会影响到外部。
三、触发 BFC
只要元素满足下面任一条件即可触发 BFC 特性：
body 根元素
浮动元素：float 除 none 以外的值
绝对定位元素：position (absolute、fixed)
display 为 inline-block、table-cells、flex
overflow 除了 visible 以外的值 (hidden、auto、scroll)
**************************************************
异常监控
<script src="js/wocao.js" crossorigin></script>
window.onerror = function(msg, url, line, col, error) {
if(msg != "Script error." && !url) {
return true;
}
//采用异步的方式
//window.onunload进行ajax的堵塞上报
//由于客户端强制关闭webview导致这次堵塞上报有Network Error
// **************************
//window。onerror的执行流在关闭前是必然执行的（摘录猜测）
//二离开文章后的上报对于业务是可丢失的
//这里的执行流放到异步时间去执行
//脚本的异常数降低了10倍
console.log(msg);
console.log(url);
console.log(line);
console.log(col);
console.log(error);
setTimeout(function() {
var data = {};
//不一定所有浏览器都支持col参数
col = col || (window.event && window.event.errorCharacter) || 0;
data.url = url;
data.line=line;
data.col=col;
},1000)
}
*************************************************
退出安卓app
navigator.app.exitApp();
****************************************************
cordova整理
1.安装cordova:npm install -g cordova
2.创建项目：cordova create project
3.添加平台：cordova platform add android --save （删除平台add->remove）
检查平台状况：cordova platform ls
检查安装需求：cordova requirements
cordova8.0测试版本 、Android target:在android studio的androidSDK版本设置最大25 、Gradle：安装gradle
4.启动项目：cordova run android(真机：会显示找不到真机->打开虚拟机) (cordova emulate(仿真) android)(测试机)
5.打包apk ： cordova build
其他
移除平台
cordova platform rm android
cordova platform rm ios
项目升级
cordova platform update android@5.0.0
cordova platform update ios@4.0.0
创建android 5.0项目
cordova platform add android@5.0.0
cordova platform add ios@4.0.0
插件
自定义插件
cordova plugin add 本地路径
相机camera
cordova plugin add cordova-plugin-camera
二维码
cordova plugin add phonegap-plugin-barcodescanner
检测版本
cordova plugin add cordova-plugin-app-version
获取GPS坐标
cordova plugin add cordova-plugin-geolocation
多媒体
cordova plugin add cordova-plugin-media-capture
cordova plugin add cordova-plugin-media
sqlite
cordova plugin add cordova-sqlite-storage
file-transfer
cordova plugin add cordova-plugin-file-transfer
file
cordova plugin add cordova-plugin-file
zip
cordova plugin add cordova-plugin-zip
通讯录
cordova plugin add cordova-plugin-contacts
设备信息
cordova plugin add cordova-plugin-device
对话框
cordova plugin add cordova-plugin-dialogs
震动
cordova plugin add cordova-plugin-vibration
内置浏览器
cordova plugin add cordova-plugin-inappbrowser
网络
cordova plugin add cordova-plugin-network-information
调试信息
cordova plugin add cordova-plugin-console
加速度计
cordova plugin add cordova-plugin-device-motion
指南针
cordova plugin add cordova-plugin-device-orientation
蓝牙
cordova plugin add cordova-plugin-bluetooth-serial
闪屏
cordova plugin add cordova-plugin-splashscreen
状态栏
cordova plugin add cordova-plugin-statusbar
支付宝（本地插件）
ios隐藏顶部状态栏
Info.plist中增加 Status bar is initially hidden一行,选择为 YES,
增加 View controller-based status bar appearance 一行,选择为 NO。
ios上下拖动黑边
修改config.xml
<preference name="WebViewBounce" value="false" />
<preference name="DisallowOverscroll" value="true" />
改变ios状态栏颜色
info.plist中
View controller-based status bar appearance设为NO
AppDelegate.m中
在didFinishLaunchingWithOptions方法中添加
[[UIApplication sharedApplication] setStatusBarStyle:UIStatusBarStyleLightContent];
**************************************************
window.location方法获取URL
统一资源定位符 (Uniform Resource Locator, URL)
完整的URL由这几个部分构成：
scheme://host:port/path?query#fragment
scheme:通信协议
常用的http,ftp,maito等
host:主机(带端口号)
服务器(计算机)域名系统 (DNS) 主机名或 IP 地址。
port:端口号
整数，可选，省略时使用方案的默认端口，如http的默认端口为80。
path:路径
由零或多个"/"符号隔开的字符串，一般用来表示主机上的一个目录或文件地址。
query:查询
可选，用于给动态网页（如使用CGI、ISAPI、PHP/JSP/ASP/ASP.NET等技术制作的网页）传递参数，可有多个参数，用"&"符号隔开，每个参数的名和值用"="符号隔开。
fragment:信息片断
字符串，用于指定网络资源中的片断。例如一个网页中有多个名词解释，可使用fragment直接定位到某一名词解释。(也称为锚点.)
示例：
http://www.home:8080/windows/location/page.html?ver=1.0&id=timlq#love
1, window.location.href
整个URl字符串(在浏览器中就是完整的地址栏)
返回值：http://www.home:8080/windows/location/page.html?ver=1.0&id=timlq#love
2,window.location.protocol
URL 的协议部分
返回值：http:
3,window.location.host
URL 的主机部分(带端口号)，
返回值：www.home:8080
window.location.hostname
返回值：www.home
4,window.location.port
URL 的端口部分。如果采用默认的80端口(update:即使添加了:80)，那么返回值并不是默认的80而是空字符。
本例返回值:8080
5,window.location.pathname
URL 的路径部分(就是文件地址)
返回值：/windows/location/page.html
6,window.location.search
查询(参数)部分。除了给动态语言赋值以外，我们同样可以给静态页面,并使用javascript来获得相信应的参数值
返回值：?ver=1.0&id=timlq
7,window.location.hash
锚点
返回值：#love
**************************************************
判断移动端手机类型
var ua = navigator.userAgent.toLowerCase();
if (/iphone|ipad|ipod/.test(ua)) {
alert("ios")
} else if (/android/.test(ua)) {
alert("android");
}
区分区分Android，iphone，ipad和其它
var ua = navigator.userAgent.toLowerCase();
if(ua.match(/android/i)) == "android")
{
alert("android");
}
if(ua.match(/iPhone/i)) == "iPhone")
{
alert("iPhone");
}
if(ua.match(/iPad/i)) == "iPad")
{
alert("iPad");
}
区分版本
var u = navigator.userAgent;
//手机属性
Mozilla/5.0 (iPhone; U; CPU iPhone OS 5_1_1 like Mac OS X; en-us) AppleWebKit/533.17.9 (KHTML, like Gecko) Version/5.0.2 Mobile/8H7 Safari/6533.18.5
//微信版本号
var ua = navigator.userAgent.toLowerCase();
if(ua.match(/weibo/i) == "weibo"){
return 1;
}else if(ua.indexOf('qq/')!= -1){
return 2;
}else if(ua.match(/MicroMessenger/i)=="micromessenger"){
var v_weixin = ua.split('micromessenger')[1];
v_weixin = v_weixin.substring(1,6);
v_weixin = v_weixin.split(' ')[0];
if(v_weixin.split('.').length == 2){
v_weixin = v_weixin + '.0';
}
if(v_weixin < '6.0.2'){
return 3;
}else{
return 4;
}
}else{
return 0;
}
//IOS版本号
var str = navigator.userAgent.toLowerCase();
var ver = str.match(/cpu iphone os (.*?) like mac os/);
if(!ver) {
alert("请在Ios系统中打开");
} else {
alert("你当前的Ios系统版本为：" + ver[1].replace(/_/g, "."));
}
console.log(u)
//微信支付
// alert(JSON.stringify(resp.obj))
WeixinJSBridge.invoke(
'getBrandWCPayRequest',
/* {
"appId":"wx2421b1c4370ec43b", //公众号名称，由商户传入
"timeStamp":"1395712654", //时间戳，自1970年以来的秒数
"nonceStr":"e61463f8efa94090b1f366cccfbbb444", //随机串
"package":"prepay_id=u802345jgfjsdfgsdg888",
"signType":"MD5", //微信签名方式：
"paySign":"70EA570631E4BB79628FBCA90534C63FF7FADD89" //微信签名
} */
resp.obj,
function(res) {
if(res.err_msg == "get_brand_wcpay_request:ok") {
_this.showMsg("支付成功")
location.href = "index.html";
} else if(res.err_msg == "get_brand_wcpay_request:cancel") {
_this.showMsg("已取消付款")
location.href = "index.html";
} else {
_this.showMsg("支付失败")
location.href = "index.html";
}
// 使用以上方式判断前端返回,微信团队郑重提示：res.err_msg将在用户支付成功后返回 ok，但并不保证它绝对可靠。
}
);
//调起支付宝收银台
// AlipayJSBridge.call("tradePay", {
// tradeNO: resp.msg
// }, function(result) {
// _this.getResult(result.resultCode)
// });
**************************************************
屏幕自适应
(function(win, doc) {
function change() {
var a = $(window).height() - $(".realMoney").height();
$(".realMoney").css("bottom", a / 2 + "px");
}
change();
win.addEventListener('resize', change, false);
})(window, document);
*****************************************************
vue
1.直接引入vue.js
new Vue({
el: '#app',
data: {
whiteShow:true,
baseUrl: '',
userId: ''
}
})
2.node+vue开发
export default {
data: () => ({
paginations: {
currentPage: 1
}
})
}
******************************************
then()方法是异步执行
就是当.then()前的方法执行完后再执行then()内部的程序
这样就避免了，数据没获取到等的问题
**************************************************
箭头函数
1.多个参数
var sum = (num1, num2) => num1 + num2;(=>左边:多个参数需要加小括号;=>右边:return 后面的值)
// 等同于：
var sum = function(num1, num2) {
return num1 + num2;
};
2.若你想使用标准的函数体，或者函数体内可能有更多的语句要执行，则要用大括号将函数体括起来，并明确定义返回值。
var sum = (num1, num2) => { return num1 + num2; }
//等同于：
var sum = function(num1, num2) {
return num1 + num2;
};
大括号内的部分基本等同于传统函数
3.箭头函数若要返回自定义对象的话，就必须用小括号把该对象括起来先
var getTempItem = id = > ({
id: id,
name: "Temp"
});
// 等同于:
var getTempItem = function(id) {
return {
id: id,
name: "Temp"
};
};
用小括号包含大括号则是对象的定义，而非函数主体
**************************************************
javascript
javaScript：一种动态类型（变量使用之前不需要类型声明，变量的类型是赋值的类型）、
弱类型（类型不正确，可以通过隐式转换得到正确的类型）、
基于原型（将某个对象作为模板，将自身的属性共享给新对象，模板对象为原型）
的客户端脚本语言
javascript中的每个对象都有prototype属性，prototype属性的解释是：返回对象类型原型的引用
function baseClass()
{
this.showMsg = function()
{
alert("baseClass::showMsg");
}
}
function extendClass()
{
}
extendClass.prototype = new baseClass();
var instance = new extendClass();
instance.showMsg(); // 显示baseClass::showMsg
javascript分为3个部分：
1.ECMAScript：提供核心语言功能（规定语言的组成部分：语法、类型、语句、关键字、保留字、操作符、对象）
2.DOM(文本对象模型)：提供访问和操作网页内容的方法和接口(开发人员可以借助DOM提供的API增删改查节点)
3.BOM(浏览器对象模型)：提供与浏览器交互的方法和接口（开发人员可以控制浏览器页面以外的部分）
***********************************************
正则表达式
全局替换
function cancel(s) {
var reg1 = new RegExp(/\)/, "g");
var reg2 = new RegExp(/\(/, "g");
var test1 = s.replace(/[A-Z]/g, "").replace(reg2, "").replace(reg1, "");
return test1;
}
输入框清除空格：οnkeyup="this.value=this.value.replace(/^ +| +$/g,'')"
//匹配开头或者结尾的字符串
function GetQueryString(paramKey) {
var reg = new RegExp("(^|&)" + paramKey + "=([^&]*)(&|$)");
var r = window.location.search.substr(1).match(reg);
if(r != null)
return unescape(r[2]);
else
return null;
}
输入框中数字和小数点的限制
JS判断只能是数字和小数点
1.文本框只能输入数字代码(小数点也不能输入)
<input οnkeyup="this.value=this.value.replace(/\D/g,'')" onafterpaste="this.value=this.value.replace(/\D/g,'')">
2.只能输入数字,能输小数点.//document.execCommand()的用法小记-->http://wwwblogs/baifan/articles/1034680.html
<input οnkeyup="if(isNaN(value))execCommand('undo')" onafterpaste="if(isNaN(value))execCommand('undo')">
<input name=txt1 οnchange="if(/\D/.test(this.value)){alert('只能输入数字');this.value='';}">
3.数字和小数点方法二
<input type=text t_value="" o_value="" οnkeypress="if(!this.value.match(/^[\+\-]?\d*?\.?\d*?$/))this.value=this.t_value;else this.t_value=this.value;if(this.value.match(/^(?:[\+\-]?\d+(?:\.\d+)?)?$/))this.o_value=this.value" οnkeyup="if(!this.value.match(/^[\+\-]?\d*?\.?\d*?$/))this.value=this.t_value;else this.t_value=this.value;if(this.value.match(/^(?:[\+\-]?\d+(?:\.\d+)?)?$/))this.o_value=this.value" οnblur="if(!this.value.match(/^(?:[\+\-]?\d+(?:\.\d+)?|\.\d*?)?$/))this.value=this.o_value;else{if(this.value.match(/^\.\d+$/))this.value=0+this.value;if(this.value.match(/^\.$/))this.value=0;this.o_value=this.value}">
4.只能输入字母和汉字
<input οnkeyup="value=value.replace(/[\d]/g,'') "onbeforepaste="clipboardData.setData('text',clipboardData.getData('text').replace(/[\d]/g,''))" maxlength=10 name="Numbers">
5.只能输入英文字母和数字,不能输入中文
<input οnkeyup="value=value.replace(/[^\w\.\/]/ig,'')">
6.只能输入数字和英文<font color="Red">chun</font>
<input onKeyUp="value=value.replace(/[^\d|chun]/g,'')">
7.小数点后只能有最多两位(数字,中文都可输入),不能输入字母和运算符号:
<input onKeyPress="if((event.keyCode<48 || event.keyCode>57) && event.keyCode!=46 || /\.\d\d$/.test(value))event.returnValue=false">
8.小数点后只能有最多两位(数字,字母,中文都可输入),可以输入运算符号:
<input οnkeyup="this.value=this.value.replace(/^(\-)*(\d+)\.(\d\d).*$/,'$1$2.$3')">
只能是数字和小数点和加减乘際
金钱校验
$("#money").keyup(function() {
var valid = /^\d{0,8}(\.\d{0,2})?$/.test(this.value);
var _value = this.value;
if(!valid) {
this.value = _value.substring(0, _value.length - 1);
}
});
οnkeypress="return event.keyCode>=4&&event.keyCode<=57"
匹配emoji表情
返回true或者undefined
function isEmojiCharacter(substring) {
for(var i = 0; i < substring.length; i++) {
var hs = substring.charCodeAt(i);
if(0xd800 <= hs && hs <= 0xdbff) {
if(substring.length > 1) {
var ls = substring.charCodeAt(i + 1);
var uc = ((hs - 0xd800) * 0x400) + (ls - 0xdc00) + 0x10000;
if(0x1d000 <= uc && uc <= 0x1f77f) {
return true;
}
}
} else if(substring.length > 1) {
var ls = substring.charCodeAt(i + 1);
if(ls == 0x20e3) {
return true;
}
} else {
if(0x2100 <= hs && hs <= 0x27ff) {
return true;
} else if(0x2B05 <= hs && hs <= 0x2b07) {
return true;
} else if(0x2934 <= hs && hs <= 0x2935) {
return true;
} else if(0x3297 <= hs && hs <= 0x3299) {
return true;
} else if(hs == 0xa9 || hs == 0xae || hs == 0x303d || hs == 0x3030 ||
hs == 0x2b55 || hs == 0x2b1c || hs == 0x2b1b ||
hs == 0x2b50) {
return true;
}
}
}
}
//匹配特殊字符
(ngcommon.ngscope.videoData.contentName.search(/\(|\)|\*|\+|\&|\$|\||\^|\[|\]|<|>|'|"|:|&|#|=|;|`|-|_|%|,|\\|\//) != -1) {
ngcommon.ngscope.titleError = true;
ngcommon.ngscope.titleErrorMessage = "视频名称不能含有特殊字符";
//编码转义
htmlEncode: function(textValue) {
textValue = textValue ? textValue : "";
textValue = textValue.toString();
textValue = textValue.replace(/\&/g, '&');
// textValue = textValue.replace(/#/g, 'k');
// textValue = textValue.replace(/;/g, 'n');
textValue = textValue.replace(/</g, '<');
textValue = textValue.replace(/>/g, '>');
textValue = textValue.replace(/\"/g, '"');
textValue = textValue.replace(/\'/g, ''');
textValue = textValue.replace(/:/g, ':');
textValue = textValue.replace(/\[/g, '[');
textValue = textValue.replace(/\]/g, ']');
textValue = textValue.replace(/\$/g, '$');
// 特殊处理：字符串中含有括弧，自定义编码。
textValue = textValue.replace(/\(/g, '(');
textValue = textValue.replace(/\)/g, ')');
textValue = textValue.replace(/\+/g, 'd');
textValue = textValue.replace(/%/g, 'f');
textValue = textValue.replace(/-/g, 'e');
textValue = textValue.replace(/\*/g, 'g');
textValue = textValue.replace(/\\/g, 'h');
textValue = textValue.replace(/\//g, 'i');
textValue = textValue.replace(/`/g, 'j');
textValue = textValue.replace(/,/g, 'l');
textValue = textValue.replace(/_/g, 'm');
textValue = textValue.replace(/=/g, 'o');
textValue = textValue.replace(/\^/g, 'p');
textValue = textValue.replace(/\|/g, 'q');
return textValue;
},
/**
* @ngdoc function
* @name htmlDecode
* @description
* HTML特殊字符解码
* @methodOf Utils.util:auiHTML
* @param {string} textValue 解码文本
* @returns {string} 解码后的文本
*/
htmlDecode: function(textValue) {
textValue = textValue ? textValue : "";
textValue = textValue.toString();
textValue = textValue.replace(/n/g, ';');
textValue = textValue.replace(/k/g, '/#');
textValue = textValue.replace(/&/g, '&');
textValue = textValue.replace(/'/g, '\'');
textValue = textValue.replace(/'/g, '\'');
textValue = textValue.replace(/"/g, '"');
textValue = textValue.replace(/>/g, '>');
textValue = textValue.replace(/</g, '<');
// textValue = textValue.replace(/&/g, '&');
textValue = textValue.replace(/:/g, ':');
textValue = textValue.replace(/[/g, '[');
textValue = textValue.replace(/]/g, ']');
textValue = textValue.replace(/$/g, '$');
textValue = textValue.replace(/</g, '<');
textValue = textValue.replace(/>/g, '>');
textValue = textValue.replace(/"/g, '\"');
textValue = textValue.replace(/(/g, '\(');
textValue = textValue.replace(/)/g, '\)');
textValue = textValue.replace(/d/g, '+');
textValue = textValue.replace(/f/g, '%');
textValue = textValue.replace(/e/g, '-');
textValue = textValue.replace(/g/g, '\*');
textValue = textValue.replace(/h/g, '\\');
textValue = textValue.replace(/i/g, '\/');
textValue = textValue.replace(/j/g, '`');
textValue = textValue.replace(/l/g, ',');
textValue = textValue.replace(/m/g, '_');
textValue = textValue.replace(/o/g, '=');
textValue = textValue.replace(/p/g, '\^');
textValue = textValue.replace(/q/g, '\|');
return textValue;
}
//判断字符串字节长度（一个中文等于2个字节）
var GetLength = function(str) {
///<summary>获得字符串实际长度，中文2，英文1</summary>
///<param name="str">要获得长度的字符串</param>
var realLength = 0,
len = str.length,
charCode = -1;
for(var i = 0; i < len; i++) {
charCode = str.charCodeAt(i);
if(charCode >= 0 && charCode <= 128)
realLength += 1;
else
realLength += 2;
}
return realLength;
}
********************************************
<meta http-equiv="Content-Security-Policy" content="default-src *; style-src 'self' 'unsafe-inline'; script-src 'self' 'unsafe-inline' 'unsafe-eval'">
Content-Security-Policy 安全策略 导致ios10 与js 交互的代码不执行 自己的js代码正常
*****************************************
base64编码图片显示
img.attr('src',"data:image/jpeg;base64,"+imageData);
base64编码图片解析
function getBase64Image(img) {
var canvas = document.createElement("canvas");
var image = new Image();
//本地打开：图片跨域(1)(2)位置颠倒或者少(1)则Uncaught DOMException: Failed to execute 'toDataURL' on 'HTMLCanvasElement': Tainted canvases may not be exported.
//image.crossOrigin = "anonymous";(1)
image.src = img.src;(2)
var width;
var height;
// alert("宽："+image.width+"\n高："+image.height);
if(image.width>image.height){
width = 450;
height = image.height * 450 / image.width;
}else{
height = 450;
width = image.width * 450 / image.height;
}
canvas.width = width;
canvas.height = height;
var ctx = canvas.getContext("2d");
ctx.drawImage(image, 0, 0, width, height);
var dataURL = canvas.toDataURL("image/JPEG");
//data:image/jpeg;base64,
return dataURL.substring(23, dataURL.length)
// return dataURL.replace("data:image/png;base64,", "");
}
*****************************************
字体渐变
background-image: -webkit-linear-gradient(right, #e1e2dc,#d3d4cc 20%, #969791 70%, #20292e 90%,#192e38 100%);
-webkit-text-fill-color: transparent;
/* 将字体设置成透明色 */
-webkit-background-clip: text;
/* 裁剪背景图，使文字作为裁剪区域向外裁剪 */
/*-webkit-background-size: 200% 100%;*/
/*-webkit-animation: masked-animation linear infinite;*/
}
@keyframes masked-animation {
0% {
background-position: 0 0;
}
100% {
background-position: -100% 0;
}
}
********************************************
js实现字符串替换
var reg1 = new RegExp("；", "g");
var reg2 = new RegExp(";", "g");
instance_name = instance_name.replace(reg1, "；<br>").replace(reg2, ";<br>");
****************************************
屏幕缩放
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">(chrome=1使用谷歌的插件，如果没有则使用ie的文档模式)
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no,viewport-fit=cover">
<meta name="renderer" content="webkit">
<meta http-equiv="Cache-Control" content="no-siteapp" />
<meta name="format-detection" content="telephone=no">
移动端-->meta标签 设置宽高、初始比例、缩放比例、是否允许手动缩放
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no,viewport-fit=cover">
width – viewport的宽度
height – viewport的高度
initial-scale – 初始的缩放比例
minimum-scale – 允许用户缩放到的最小比例
maximum-scale – 允许用户缩放到的最大比例
user-scalable – 用户是否可以手动缩放
在iPhone 手机上默认值是（电话号码显示为拨号的超链接）：
<meta name="format-detection" content="telephone=yes"/>
可将telephone=no，则手机号码不被显示为拨号链接
<meta name="format-detection" content="telephone=no"/>
------------------------------------------------------------------------------------------------------------------
ios设备对meta定义的私有属性：（可以添加至主屏幕）
<meta name="apple-mobile-web-app-capable" content="yes" />
?网站开启对web app程序的支持。
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
?在web app应用下状态条（屏幕顶部条）的颜色；
?默认值为default（白色），可以定为black（黑色）和black-translucent（灰色半透明）。
?若值为“black-translucent”将会占据页面px位置，浮在页面上方（会覆盖页面20px高度–iphone4和itouch4的Retina屏幕为40px）。
*****************************************
多分辨率
@media screen and (max-width: 320px) {}
@media screen and (min-width:321px) and (max-width: 375px) {}
@media screen and (min-width:376px) and (max-width: 414px) {}
@media screen and (min-width:415px) {}
******************************************
支付宝
document.getElementById('pay').addEventListener('tap', function() {
var payNum = $('#money').val();
console.log(payNum);
//调试用的金额，正式环境需注释掉
if (payNum==""||payNum=="0"||payNum=="0.0"||payNum=="0.00") {
showMsg("请选择或填写充值金额");
return;
}
var payUrl = baseUrl + 'webServiceHandlerController.do?cardRecharge&staffNo=' + workNo + '&cardNo=' + cardNo + '&idNo=' + userIdCard + '&orderMoney=' + payNum + '&operateType=A';
cordova.exec(function(data) {
}, function(error) {
}, "AliPay", "H5Pay", [{
"payUrl": payUrl
}]);
payResult();
});
var timeID = null;
function payResult() {
clearTimeout(timeID);
cordova.exec(function(data) {
switch(data){
case "0":
timeID = setTimeout(payResult(), 1000);
break;
case "9000":
showMsg("订单支付成功，若金额未到账请稍后再查询余额");
setTimeout("location.reload()",3000);
break;
case "8000":
showMsg("订单正在处理中，请稍后自行查询余额");
break;
case "4000":
showMsg("订单支付失败");
break;
case "5000":
showMsg("重复请求");
break;
case "6001":
showMsg("用户中途取消");
break;
case "6002":
showMsg("网络连接出错");
break;
case "6004":
showMsg("支付结果未知");
break;
default:
showMsg("其它支付错误");
break;
}
}, function(error) {
}, "AliPay", "PayResult", []);
}
***************************************
cordova系统返回键
//系统返回监听
document.addEventListener("deviceready", onDeviceReady, false);
function onDeviceReady() {
/**
* 系统返回键监听
*/
document.addEventListener("backbutton", onBackKeyDown, false);
}
/**
* 系统返回键方法
* @return {[type]} [description]
*/
function onBackKeyDown() {
location.href = "../../menu.html";
}
******************************************
解析图片
1、直接获取图片的在线地址
2、dingcan
***************************************
循环遍历
循环数组：
for (var i=0,len=cars.length; i<len; i++)
{
document.write(cars[i] + "<br>");
}
循环对象：
var person={fname:"John",lname:"Doe",age:25}; (或者循环数组：var nums = [1, 3, 5];)
for (x in person)
{
txt=txt + person[x];
}
*****************************************
jq判断一个字符串是否在数组当中
var arr = [ "xml", "html", "css", "js" ];
$.inArray("js", arr); //返回 3,
如果不包含在数组中,则返回 -1;
--------------------------------
js判断一个字符串中是否包含字符
if(str.indexOf("a")>-1){
alert("str包含a");
****************************************
数组删除
var array = ["a","b","c","d","e"];
delete array[2]; // 把 c 删除了，但是数组长度不变，删除项位空
--------------------------------------
var array = ["a","b","c","d","e"]; // 同样先声明一组数组，并且给他设置初始值。
array.splice(2,1); // 这里注意，最重要的代码就在这里哪。
***********************************
mui搜索框的X，需要额外定义个 clearFunc();
(mui清除按钮事件(ps:自定义的，不加此方法页面会报错，如果不需要，方法体为空就行)
******************************************
复选框点击事件监听
<input type="checkbox" name="bobby">8
<input type="checkbox" name="bobby">9
<br/><br/>
<input type="button" value="全选" οnclick="check(true)">
<input type="button" value="全不选" οnclick="check(false)">
<h3>选中元素个数<span>0</span>个</h3>
<script>
var bobbyEleList = document.getElementsByName("bobby");
var viewEle = document.getElementsByTagName("span") ;
var bobbyEleArr = [];
//全选或者全不选
function check(status){
bobbyEleArr.map(function(j){
j.checked =status;
});
getCheckedLen();
};
//获取被选中的元素个数
var getCheckedLen=function(){
var checkEle = bobbyEleArr.filter(function(j,i){
if(j.checked==true) return true;
else return false;
});
console.log(checkEle.length);//获取到选中的元素个数
viewEle[0].innerHTML = checkEle.length;
};
//监听元素状态改变事件
bobbyEleList.forEach(function(j,i){
bobbyEleArr.push(j);
j.οnchange=function(){
getCheckedLen();
}
});
********************************************
地址传递参数（ decodeURIComponent() 对编码后的 URI 进行解码：）
var jsonback = {
"meetingDate": json.meetingDate,
"beginTime": json.beginTime,
"endTime": json.endTime
}
var jsonStrBack = JSON.stringify(jsonback);(将json数据转换为字符串而且保留json格式;toSting是将数据转换为字符串不保留json格式;JSON.parse(jsonBook)字符串转换为json)
location.href = "mainEdit.html?" + encodeURIComponent(jsonStrBack);
------------------------------------------------------------------
var url = location.search;
var jsonStrBack = url.substring(1, url.length);
var jsonBack = JSON.parse(decodeURIComponent(jsonStrBack));
********************************************
JQuery判断数组中是否包含某个元素$.inArray("元素字符串", 数组名称);
var arry = [ "C#", "html", "css", "JavaScript" ];
var result= $.inArray("C#", arry); //如果arry数组里面存在"C#" 这个字符串则返回该字符串的数组下标，否则返回(不包含在数组中) -1
********************************************
css伪类选择器
.mui-checkbox input[type=checkbox]:checked::before {
color: #29acd1;
}
********************************************
定时器
一般不用setInterval，而用setTimeout的延时递归来代替interval。
setInterval会产生回调堆积，特别是时间很短的时候。（就是调的太快来不及执行的函数堆积,导致页面卡死）
//定义一个定时变量
var timeID = null;
//直接执行的方法，在此方法中添加定时，将处理方法放在定时任务里，如果设定时间内再次执行相同操作，可以直接清除上次操作，执行最新一次
function directFunc(){
clearTimeout(timeID);
//这里设定1.5s后执行
timeID=setTimeout(“indirectFunc()",1500);
}
//真正的业务处理函数
function indirectFunc(){
}
//
var t = 30;
//执行showTime()
showTime();
function showTime() {
getSevenTask();
getTotal();
t -= 1;
if(t == 0) {
t = 30;
}
//每秒执行一次,showTime()
setTimeout("showTime()", 10000);
}
**********************************************
判断数组为空
var a=[];
a.length=0;
var a=Object{}
//检测空对象，不检测原型属性
function isOwnEmpty(obj){
for(var name in obj)
{
if(obj.hasOwnProperty(name))
{
return falese;
}
}
return ture;
}
//检测空对象，也检测原型属性
function isEmpty(object){
for (var name in obj)
{
return false;
}
return true;
}
*****************************************
mui绑定事件
绑定多个元素：mui("body"(父元素)).on('tap', ".dish-img-div"(子元素),function() { });
绑定单个元素：document.querySelector(".popupAll").addEventListener('tap', function() {});
******************************************
移动端的底层api
// 扩展API加载完毕后调用onPlusReady回调函数
document.addEventListener("plusready", onPlusReady, false);
function onPlusReady(){
//执行完成扩展API后再绑定其他的事件
document.addEventListener("pause", onAppPause, false);
}
function onAppPause(){
console.log("Application paused!");
}
*****************************************
返回历史记录
window.history.back():可加载历史列表中的前一个 URL（如果存在）==点击后退按钮或调用 window.history.go(-1)。(返回上一个历史记录)
********************************************
rem设置
<script>
(function(win,doc){
function change(){
doc.documentElement.style.fontSize=20*doc.documentElement.clientWidth/375+'px';
}
change();
win.addEventListener('resize',change,false);
})(window,document);
</script>
***************************
onclick传递变量参数
html += "<li class='list-group-item selected' οnclick=\'createListClick(\"" + a +"\")\'><span class='badge' style='background-color:#FFFFFF;color:#000000;'><span style='display:inline-block;width:37px;'>" + list[i].jgnum + "</span>/<span style='display:inline-block;width:37px;'>" + list[i].wgnum + "</span>/<span style='display:inline-block;width:37px;'>" + list[i].wwnum + "</span></span>" + list[i].NAME + "</li>";
\':单引号
\":双引号
如果传过来的是“”已经定义的字符串 需要单独进行编译，左右都需要加个\'
(原型：<button οnclick="myFunction('Bob','Builder')">点击这里</button>)
html += ' <button class="gaojing-button" οnclick=\"goRuerengaojing(\'' + id + '\',\'' + typeCode +'\',\''+ pointerName + '\',\'' + kindFullName + '\',\'' + deviceName + '\',\'' + lastTime + '\')\">确认告警</button>';
将onclick的方法的双引号或者单引号转义出来，再将参数的签好加个单引号或者双引号并为其转义
***********************************
jquery和DOM对象的相互转换
----------------------------
jquery对象转换为DOM对象
如：var $v =$("#v") ; //jQuery对象
获取对象数组在通过下标得到dom对象
var v=$v[0]; //DOM对象
或者
var v=$v.get(0); //DOM对象
--------------------------------
DOM对象转化为jquery对象
如：var v=document.getElementById("v"); //DOM对象
var $v=$(v); //jQuery对象
*******************************************
HTML5 WebSocket
WebSocket是HTML5开始提供的一种在单个 TCP 连接上进行全双工通讯的协议。
在WebSocket API中，浏览器和服务器只需要做一个握手的动作，然后，浏览器和服务器之间就形成了一条快速通道。两者之间就直接可以数据互相传送。
浏览器通过 JavaScript 向服务器发出建立 WebSocket 连接的请求，连接建立以后，客户端和服务器端就可以通过 TCP 连接直接交换数据。
当你获取 Web Socket 连接后，你可以通过 send() 方法来向服务器发送数据，并通过 onmessage 事件来接收服务器返回的数据。
WebSocket和Ajax的比较：WebSocket并不限于以Ajax（或XHR）方式通信，因为Ajax技术需要客户端发起请求，而WebSocket服务器和客户端可以相互推送信息。
运行参数:
var socket = null;
function LoadOther() {
var wsUrl = deviceBaseUrl.replace("http", "ws");
socket = new WebSocket(wsUrl + 'websocket.socket?processor=com.bonawise.interthings.websocket.RealDataProcessor');
console.log(wsUrl);
console.log(socket instanceof WebSocket);
socket.onopen = function(event) {
/**
* 连接状态( socket.readyState )
* 0: 表示该连接尚未建立
* 1: 表示连接建立和沟通是可能的
* 2: 表示连接正在关闭
* 3: 表示连接已关闭或无法打开
*/
console.log(socket.readyState);
// 发送一个初始化消息
sendMessage();
// 监听消息
socket.onmessage = function(event) {
console.log('Message received');
var data = eval('(' + event.data + ')');
var html = '';
later = [];
for(var i=0;i<pointerArr.length;i++){
pointerArr[i].currValue = data[pointerArr[i].pointerTag].value;
pointerArr[i].currWarningLevle = data[pointerArr[i].pointerTag].warningLevel;
if(pointerArr[i].currWarningLevle!=0){
later.push(pointerArr[i].pointerTag);
}
pointerDesc2 = pointerArr[i].pointerDesc2;
currWarningLevle = pointerArr[i].currWarningLevle;
currValue = pointerArr[i].currValue;
pointerDesc1 = pointerArr[i].pointerDesc1;
html += createHtml(pointerDesc2, currValue, pointerDesc1, currWarningLevle);
}
/**
* 这里判断前后报警的值是否相等
* 将两个数组先排序，然后转换成字符串，判断字符串是否相等
*/
var beforeString = before.sort().toString();
var laterString = later.sort().toString();
if(beforeString != laterString){
loadAllData();
before = later;
console.log("报警变更");
}
$(".canshuTbody").html(html);
};
// 监听Socket的关闭
socket.onclose = function(event) {
console.log(socket.readyState);
console.log('Client notified socket has closed');
if(operation=="quit"){
window.history.back(-1);
}else if(operation=="video"){
var paramsStr = JSON.stringify(videoJson);
location.href = "videojiankong.html?"+ encodeURIComponent(paramsStr);
}else{
mui.toast("WebSocket已关闭");
}
};
};
}
/**
* 消息发送（发送消息后通过监听获取消息方法获得数据）
* @return {[type]} [description]
*/
function sendMessage() {
if (socket.readyState == 1) {
socket.send(JSON.stringify(params));
setTimeout("sendMessage()",1000);
}else{
mui.toast("WebSocket连接异常或已关闭");
}
}
/**
* 关闭WebSocket
* 变量operation用来判断操作类型以在关闭后执行不同操作
* @return {[type]} [description]
*/
var operation = "";
function closeConnection() {
if (socket.readyState == 1)
socket.close();
else
window.history.back(-1);
}
---------------------------------------
视频播放:
var operation = "";
var socketUrl = videoJson[0].address + '\/';
var imageWidth = $('.video-div').width();
var imageHeight = 0;
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
var socket = new WebSocket(socketUrl);
console.log(socketUrl)
socket.onopen = function(event) {
/**
* 连接状态( socket.readyState )
* 0: 表示该连接尚未建立
* 1: 表示连接建立和沟通是可能的
* 2: 表示连接正在关闭
* 3: 表示连接已关闭或无法打开
*/
console.log(socket.readyState);
//发送登录信息
socket.send("login " + videoJson[0].user + " " + videoJson[0].password);
// socket.send("login user password");
//console.log("tongdao");
//console.log(videoJson[0].channel)
//链接视频来源
socket.send("addChannel "+videoJson[0].channel);
// 监听消息
socket.onmessage = function(event) {
// console.log(event.data);
if(event.data.charAt(0) == "\0" || event.data.length < 1000)
return;
var image = new Image();
image.src = "data:image/jpg;base64," + event.data;
image.addEventListener('load', function() {
imageHeight = image.height * imageWidth / image.width;
canvas.width = imageWidth;
canvas.height = imageHeight;
ctx.drawImage(this, 0, 0, imageWidth, imageHeight);
});
};
// 监听Socket的关闭
socket.onclose = function(event) {
console.log(socket.readyState);
console.log('Client notified socket has closed');
if(operation == "quit") {
window.history.back(-1);
} else {
mui.toast("WebSocket已关闭");
}
};
};
function closeConnection() {
if(socket.readyState == 1)
socket.close();
else
window.history.back(-1);
}
*******************************************
web workers
是运行在后台的js，不会影响页面的性能
主要是先创建web worker对象 w=new Worker("demo_workers.js");
**************************************
css隐藏元素 position opacity display visibility
{ display: none; /* 不占据空间，无法点击 */ }
{ visibility: hidden; /* 占据空间，无法点击 */ }
{ position: absolute; clip:rect(1px 1px 1px 1px); /* 不占据空间，无法点击 */ }
{ position: absolute; top: -999em; /* 不占据空间，无法点击 */ }
{ position: relative; top: -999em; /* 占据空间，无法点击 */ }
{ position: absolute; visibility: hidden; /* 不占据空间，无法点击 */ }
{ height: 0; overflow: hidden; /* 不占据空间，无法点击 */ }
{ opacity: 0; filter:Alpha(opacity=0); /* 占据空间，可以点击 */ }
{ position: absolute; opacity: 0; filter:Alpha(opacity=0); /* 不占据空间，可以点击 */ }
********************************************
兼容性
**********************************************
***************************************************
数据库的增删改查
增：INSERT INTO Websites (name, url, alexa, country) VALUES ('百度','https://www.baidu/','4','CN');
删：DELETE FROM table_name WHERE some_column=some_value;
改：UPDATE table_name SET column1=value1,column2=value2
查：SELECT column_name,column_name FROM table_name;
联合多表：SELECT Websites.id, Websites.name, access_log.count, access_log.date FROM Websites
INNER JOIN access_log ON Websites.id=access_log.site_id;
****************************************************
flex布局（弹性盒模型小型）
网格布局（大型）
* 超小设备（手机，小于 768px） */
/* Bootstrap 中默认情况下没有媒体查询 */
/* 小型设备（平板电脑，768px 起） */
@media (min-width: @screen-sm-min) { ... }
/* 中型设备（台式电脑，992px 起） */
@media (min-width: @screen-md-min) { ... }
/* 大型设备（大台式电脑，1200px 起） */
************************************************
tmpl
<script id="test" type="text/x-jquery-tmpl">
{{each name}}
<div >{{= $value.age}}</div>
{{/each}}
</script>
<script type="text/javascript">
var data = {
name : [ {
age : 'a'
} ]
};36
$('#test').tmpl(data).appendTo("#test1");
</script>
$("#tmpl1")（tmpl模板）.tmpl(users)（json数据）.appendTo('#tmpl')（view层的显示）;
************************************************
CSS动画
animation:myfirst 5s;
@keyframes myfirst
{
0% {background: red;}
25% {background: yellow;}
50% {background: blue;}
100% {background: green;}
}
@-webkit-keyframes fadeInLeft {
0% {
opacity: 0;
-webkit-transform: translateX(-120px);
}
100% {
opacity: 1;
-webkit-transform: translateX(0);
}
}
.sss {
width: 50px;
height: 50px;
background: black;
-webkit-animation-name: "fadeInLeft";
/*动画名称，需要跟@keyframes定义的名称一致*/
-webkit-animation-duration: 0.5s;
/*动画持续的时间长*/
-webkit-animation-iteration-count: 1;
/*动画循环播放的次数为1 infinite为无限次*/
}
<div class="sss"></div>
*************************************************
js模块化
1.require配置js文件路径和定义js文件的名字
2.普通的js封装（function a(){} // 定义全局变量 以json数据格式封装// 使用立即执行函数，返回函数值）
var myModule = (function(){
function fn1(){
console.log("1");
}
return {
fn2: fn1
};
})();
</script>
<script>
myModule.fn2();
</script>
**************************
事件类型：文档或浏览器窗口中发生的一些特定的交互瞬间
UI事件：当用户与页面上的元素交互时触发（页面大小变化、加载完成或者发生错误）
焦点事件：当元素获得或失去焦点时触发
鼠标事件：当用户通过鼠标在页面上执行操作时触发
滚轮事件：使用鼠标滚轮时触发
文本事件：当文档中输入文本时触发
键盘事件：用户通过键盘在页面上执行操作时触发
合成事件：将两种效果合并到一起， $("#panel h5.head").toggle(function(){
$(this).next().show();//第一次点击时触发
},function(){
$(this).next().hide();//第二次点击时触发，之后不停的切换
})
変动事件：在底层DOM结构发生变化时触发（在节点从其父节点中被移除时触发）
变动名称事件：当元素或属性名变动时触发（已废弃）
事件绑定：
js部分（默认冒泡）
element.addEventListener(event, function, useCapture);
事件传递有两种方式：冒泡与捕获。
事件传递定义了元素事件触发的顺序。 如果你将 <p> 元素插入到 <div> 元素中，用户点击 <p> 元素, 哪个元素的 "click" 事件先被触发呢？
在 冒泡 中，内部元素的事件会先被触发，然后再触发外部元素，即： <p> 元素的点击事件先触发，然后会触发 <div> 元素的点击事件。
在 捕获 中，外部元素的事件会先被触发，然后才会触发内部元素的事件，即： <div> 元素的点击事件先触发 ，然后再触发 <p> 元素的点击事件。
addEventListener() 方法可以指定 "useCapture" 参数来设置传递类型：
addEventListener(event, function, useCapture);
默认值为 false, 即冒泡传递，当值为 true 时, 事件使用捕获传递。
jquery部分
jquery live（） delegate（） on() 事件
**********************************************
应用程序缓存
设置属性:manifest=""
cookie和session
cookie数据信息保存在客户端
session数据信息保存在服务端
sessionStorage:针对session进行数据存储，当用户关闭浏览器窗口后，数据会被删除
localstorage：没有时间限制的数据缓存
location.search：获取网页中url地址？后面的东西（用split截取）
var url = location.search;
var taskNo = url.substring(1, url.length).split("@")[0];
location.href = "taskSupplies.html?"+taskNo+"@"+wgroupCode;
if(typeof(Storage)!=="undefined")
{
// 是的! 支持 localStorage sessionStorage 对象!
// 一些代码.....
} else {
// 抱歉! 不支持 web 存储。
}
保存数据：localStorage.setItem(key,value);
读取数据：localStorage.getItem(key);
删除单个数据：localStorage.removeItem(key);
删除所有数据：localStorage.clear();
得到某个索引的key：localStorage.key(index);
****************************************************
<c:forEach var="name" 字段名 items="$(后台的list)" varStatus="索引"记录循环了几次
begin="expression" end="expression"
<td>${字段名}</td>
</c:forEach>
el： id=“javaname” value=“${javaname}” name=“后台传值nameh和sql里面的字段名一样”（当前台需要向后台回传值需要name属性）
put("javaname",javavalue);
***********************
跨域：
scheme://host:port/path?query#fragment
通信协议：//域名:端口号
同源策略：同域名、同端口
URL由协议、域名、端口和路径组成，如果两个URL的协议、域名和端口相同，则表示他们同源。
Get是向服务器发索取数据的一种请求，而Post是向服务器提交数据的一种请求，
jsonp
在客户端声明回调函数之后，客户端通过script标签向服务器跨域请求数据，
然后服务端返回相应的数据并动态执行回调函数。
<script src="百度开放接口&callback=getEn"></script>
jq中的方法 $.getJSON $.get
$.ajax({
3 type : "get",
4 async : false,
5 url :xhrurl,
6 cache : false,//设置缓存
7 dataType : "jsonp",
8 jsonp: "callbackparam",
9 jsonpCallback:"jsonpCallback1",
10 success : function(json){
11 alert(json[0].name);
12 },
timeout:3000,//服务器响应超时，则进入error
13 error:function(e){
14 alert("error");
15 }
16 });
这两个参数最终会拼接在请求的url后面，
变成 http://www.xxx/ajax/xxx.ashx?callbackparam=jsonCallback1
**************************
1.url:
要求为String类型的参数，（默认为当前页地址）发送请求的地址。
@Controller
@RequestMapping("/demolition/anzhi")
public class DemolitionanzhiController extends BaseAction {}
@RequestMapping("index")
public String index(DemolitionanzhiRequest req, ModelMap map) {}
url:'/demolition/anzhi/index' (类名->方法)
2.type:
要求为String类型的参数，请求方式（post或get）默认为get。注意其他http请求方法，例如put和delete也可以使用，但仅部分浏览器支持。
3.timeout:
要求为Number类型的参数，设置请求超时时间（毫秒）。此设置将覆盖$.ajaxSetup()方法的全局设置。
4.async:
要求为Boolean类型的参数，默认设置为true，所有请求均为异步请求。如果需要发送同步请求，请将此选项设置为false。注意，同步请求将锁住浏览器，用户其他操作必须等待请求完成才可以执行。
5.cache:
要求为Boolean类型的参数，默认为true（当dataType为script时，默认为false），设置为false将不会从浏览器缓存中加载请求信息。
6.data:
要求为Object或String类型的参数，发送到服务器的数据。如果已经不是字符串，将自动转换为字符串格式。get请求中将附加在url后。防止这种自动转换，可以查看 processData选项。对象必须为key/value格式，例如{foo1:"bar1",foo2:"bar2"}转换为&foo1=bar1&foo2=bar2。如果是数组，JQuery将自动为不同值对应同一个名称。例如{foo:["bar1","bar2"]}转换为&foo=bar1&foo=bar2。
7.dataType: (默认字符串)
要求为String类型的参数，预期服务器返回的数据类型。如果不指定，JQuery将自动根据http包mime信息返回responseXML或responseText，并作为回调函数参数传递。可用的类型如下：
xml：返回XML文档，可用JQuery处理。
html：返回纯文本HTML信息；包含的script标签会在插入DOM时执行。
script：返回纯文本JavaScript代码。不会自动缓存结果。除非设置了cache参数。注意在远程请求时（不在同一个域下），所有post请求都将转为get请求。
json：返回JSON数据。
jsonp：JSONP格式。使用SONP形式调用函数时，例如myurl?callback=?，JQuery将自动替换后一个“?”为正确的函数名，以执行回调函数。
text：返回纯文本字符串。
8.beforeSend：
要求为Function类型的参数，发送请求前可以修改XMLHttpRequest对象的函数，例如添加自定义HTTP头。在beforeSend中如果返回false可以取消本次ajax请求。XMLHttpRequest对象是惟一的参数。
function(XMLHttpRequest){
this; //调用本次ajax请求时传递的options参数
}
9plete：
要求为Function类型的参数，请求完成后调用的回调函数（请求成功或失败时均调用）。参数：XMLHttpRequest对象和一个描述成功请求类型的字符串。
function(XMLHttpRequest, textStatus){
this; //调用本次ajax请求时传递的options参数
}
10.success：要求为Function类型的参数，请求成功后调用的回调函数，有两个参数。
(1)由服务器返回，并根据dataType参数进行处理后的数据。
(2)描述状态的字符串。
function(data, textStatus){
//data可能是xmlDoc、jsonObj、html、text等等
this; //调用本次ajax请求时传递的options参数
}
11.error:
要求为Function类型的参数，请求失败时被调用的函数。该函数有3个参数，即XMLHttpRequest对象、错误信息、捕获的错误对象(可选)。ajax事件函数如下：
function(XMLHttpRequest, textStatus, errorThrown){
//通常情况下textStatus和errorThrown只有其中一个包含信息
this; //调用本次ajax请求时传递的options参数
}
12.contentType：
要求为String类型的参数，当发送信息至服务器时，内容编码类型默认为"application/x-www-form-urlencoded"。该默认值适合大多数应用场合。
13.dataFilter：
要求为Function类型的参数，给Ajax返回的原始数据进行预处理的函数。提供data和type两个参数。data是Ajax返回的原始数据，type是调用jQuery.ajax时提供的dataType参数。函数返回的值将由jQuery进一步处理。
function(data, type){
//返回处理后的数据
return data;
}
14.dataFilter：
要求为Function类型的参数，给Ajax返回的原始数据进行预处理的函数。提供data和type两个参数。data是Ajax返回的原始数据，type是调用jQuery.ajax时提供的dataType参数。函数返回的值将由jQuery进一步处理。
function(data, type){
//返回处理后的数据
return data;
}
15.global：
要求为Boolean类型的参数，默认为true。表示是否触发全局ajax事件。设置为false将不会触发全局ajax事件，ajaxStart或ajaxStop可用于控制各种ajax事件。
16.ifModified：
要求为Boolean类型的参数，默认为false。仅在服务器数据改变时获取新数据。服务器数据改变判断的依据是Last-Modified头信息。默认值是false，即忽略头信息。
17.jsonp：
要求为String类型的参数，在一个jsonp请求中重写回调函数的名字。该值用来替代在"callback=?"这种GET或POST请求中URL参数里的"callback"部分，例如{jsonp:'onJsonPLoad'}会导致将"onJsonPLoad=?"传给服务器。
18.username：
要求为String类型的参数，用于响应HTTP访问认证请求的用户名。
19.password：
要求为String类型的参数，用于响应HTTP访问认证请求的密码。
20.processData：
要求为Boolean类型的参数，默认为true。默认情况下，发送的数据将被转换为对象（从技术角度来讲并非字符串）以配合默认内容类型"application/x-www-form-urlencoded"。如果要发送DOM树信息或者其他不希望转换的信息，请设置为false。
21.scriptCharset：
要求为String类型的参数，只有当请求时dataType为"jsonp"或者"script"，并且type是GET时才会用于强制修改字符集(charset)。通常在本地和远程的内容编码不同时使用。
案例代码：
复制代码
$(function(){
$('#send').click(function(){
$.ajax({
type: "GET",
url: "test.json",
data: {username:$("#username").val(), content:$("#content").val()},
dataType: "json",
success: function(data){
$('#resText').empty(); //清空resText里面的所有内容
var html = '';
$.each(data, function(commentIndex, comment){
html += '<div class="comment"><h6>' + comment['username']
+ ':</h6><p class="para"' + comment['content']
+ '</p></div>';
});
$('#resText').html(html);
}
});
});
});
2.顺便说一下$.each()函数:
$.each()函数不同于JQuery对象的each()方法，它是一个全局函数，不操作JQuery对象，
而是以一个数组或者对象作为第1个参数，以一个回调函数作为第2个参数。
回调函数拥有两个参数：第1个为对象的成员或数组的索引，第2个为对应变量或内容。
***************************************************************
json数据
-------------------------------------------------
json数据格式转换
var value = 1;
var jsonstr = '{"data1":"hello","data2":++value}';
var data1 = eval_r('('+jsonstr+')');
console.log(data1);//这时value值为2（此方法会识别执行代码危险）
var data2=JSON.parse(jsonstr);
console.log(data2);//报错（只是解析json代码本身会识别语法错误）
-------------------------------------------------------
var json1 = { ‘name‘ : ‘yy‘ , ‘age‘ : 11 , ‘fun‘ : ‘前端开发‘ };
for( var attr in json1 )
{
alert( attr + ‘ : ‘ + json1[attr] );
// 注意这里访问不能用.访问，也不能加引号，否则就代表访问的是json里面名称为attr的值了
}
*************************************************************
原型（prototype）（原型不是继承）（将某个对象作为模板，将自身的属性共享给新对象，模板对象为原型）
javascript中的每个对象都有prototype属性，prototype属性的解释是：返回对象类型原型的引用
function baseClass()
{
this.showMsg = function()
{
alert("baseClass::showMsg");
}
}
function extendClass()
{
}
extendClass.prototype = new baseClass();
var instance = new extendClass();
instance.showMsg(); // 显示baseClass::showMsg
extendClass是以baseClass的一个实例为原型克隆创建的
函数运行时会先去本体的函数中去找，如果找到则运行，找不到则去prototype中寻找函数。或者可以理解为prototype不会克隆同名函数。
**********************************************
作用域
1.作用域的概念
作用域就是变量与函数的可访问范围。在JavaScript中，变量的作用域有全局作用域和局部作用域两种。
*************************************************
闭包
function f1(){
var n=999;
function f2(){
alert(n);
}
return f2;
}
var result=f1();
result(); // 999
1.闭包的概念
闭包就是能够读取其他函数内部变量的函数。
在本质上，闭包就是将函数内部和函数外部连接起来的一座桥梁。
2.闭包的用途
闭包可以用在许多地方。它的最大用处有两个，一个是前面提到的可以读取函数内部的变量，
另一个就是让这些变量的值始终保持在内存中。
3.使用闭包的注意点
1）由于闭包会使得函数中的变量都被保存在内存中，内存消耗很大，所以不能滥用闭包，
否则会造成网页的性能问题，在IE中可能导致内存泄露。解决方法是，在退出函数之前，
将不使用的局部变量全部删除。
2）闭包会在父函数外部，改变父函数内部变量的值。所以，
如果你把父函数当作对象（object）使用，把闭包当作它的公用方法（Public Method），
把内部变量当作它的私有属性（private value），这时一定要小心，不要随便改变父函数内部变量的值。
***************************************************
css文件导入 行内式 嵌入式 链接式 导入式
事件的绑定
*******************************************************
构造函数(一般构造函数为了和普通函数区分方法名字大写)
//无参数
function Stu(){
//创建属性
this.name="111";
//这边的this是为了后面的创建对象
}
Stu.name="";
*****************************
this对象：在全局函数中，this相当于window，而当函数被作为某个对象的方法调用时，
this等于那个对象。匿名函数的执行环境具有全局性，因此其this对象通常指向window
***************************************
html5新增元素和废除元素
结构元素
header 定义文档或节的页眉
nav 定义导航链接的容器
section 定义文档中的节
article 定义独立的自包含文章
aside 定义内容之外的内容（比如侧栏）
footer 定义文档或节的页脚
details 定义额外的细节
summary 定义 details 元素的标题
section元素表示页面中的一个内容区块：比如章节、页眉、页脚或页面中的其他部分。它可以与h1 h2 h3 h4 h5 h6等元素结合起来
article 元素表示页面中的一块与上下文不相关的独立内容，譬如博客中的一篇文章或报纸中的一遍文章
aside 元素表示article元素的内容之外的、与article元素的内容相关的辅助信息。
header元素表示页面中一个内容区块或整个页面的标题
hgroup元素用于对整个页面或页面中一个内容区块的标题进行组合
footer 元素表示整个页面或者页面中一个内容区块的脚注
nav 元素表示页面中导航链接的部分。
figure 元素表示一段独立的流内容，一般表示文档主题流内容中的一个独立单元。
其他元素
video元素定义视频，比如电影片段或其他视频流 等同于html4的object元素
audio元素定义音频，比如音乐或其他音频流 等同于html4的object元素
embed元素用来插入各种多媒体，格式可以是Midi、Wav、AIFF、AU、MP3 等同于html4的object元素
mark元素主要用来在视觉上向用户那些需要突出显示或者高亮显示的文字 等同于html4的span元素
progress元素表示运行中的进程，可以使用progress来显示JavaScript中消耗时间的函数的进程 html4中无法实现
meter元素表示度量衡。仅用于已知最大值和最小值的度量。必须定义度量的范围，可以在元素的文本中。也可以在min/max属性中定义 html4无法实现
time元素 表示日期或者时间，也可以同时表示两者 等同于html4的span元素
ruby元素表示ruby注释 rt元素表示字符的解释或发音 rp元素在ruby注释中使用，以定义不支持ruby元素的浏览器所显示的内容
wbr元素表示软换行。他与br元素的区别：br元素表示此处必须换行，而wbr元素的意思是浏览器窗口或父级元素的宽度够宽时。不进行换行，而当宽度不够时，主动在此处进行换行
canvas元素表示图形，比如图表和其他图像。这个元素本身没有行为，进提供一块画布，但它把一个绘图API展现给客户端javascript，以使脚本能够把想绘制的东西绘制到这块画布上
command元素表示命令按钮，比如单选按钮，复选按钮或按钮
details元素表示用户要求得到并且可以得到的细节信息。它可以与summary元素配合使用。summary元素提供标题或图例。标题是可见的，用户点击标题时，会显示出细节信息，summary元素应该details元素的第一个元素
datalist元素表示可选数据的列表，与input元素配合使用，可以制作出输入值的下拉列表 html5新增功能。
datagrid元素表示可选数据的列表，他以树形列表的形式来显示。
keygen元素表示生成密匙。 output元素 表示不同类型的输出，比如脚本的输出 source元素为媒介元素定义媒介资源 对应html4的<param>
menu元素表示菜单列表。当希望列出表单空间时使用
*****************************************
HTML5时代看css3新增属性
写在前面的话：
由于CSS5标准还未完全订下来，所以各种内核的浏览器都有自己的标准，为了不使属性混淆，所以各家在各自标准前加了一个前缀，
如：-moz- 主要是firefox火狐
-webikt-主要是chrome谷歌,
-o-主要是用于苹果机上的浏览器
一. box-shadow(阴影效果)
使用:
box-shadow: 20px 10px 0 #000;
-moz-box-shadow: 20px 10px 0 #000;
-webkit-box-shadow: 20px 10px 0 #000;
支持:
FF3.5, Safari 4, Chrome 3
二. border-colors(为边框设置多种颜色)
使用:
border: 10px solid #000;
-moz-border-bottom-colors: #555 #666 #777 #888 #999 #aaa #bbb #ccc;
-moz-border-top-colors: #555 #666 #777 #888 #999 #aaa #bbb #ccc;
-moz-border-left-colors: #555 #666 #777 #888 #999 #aaa #bbb #ccc;
-moz-border-right-colors: #555 #666 #777 #888 #999 #aaa #bbb #ccc;
说明:
颜色值数量不固定, 且FF的私有写法不支持缩写: -moz-border-colors: #333 #444 #555;
支持:
FF3+
三. boder-image(图片边框)
使用:
-moz-border-image: url(exam.png) 20 20 20 20 repeat;
-webkit-border-image: url(exam.png) 20 20 20 20 repeat;
说明:
(1). 20 20 20 20 ---> 边框的宽度, 分别对应top, right, bottom, left边框, 改变宽度可以实现不同的效果;
(2). 边框图片效果(目前仅实现了两种):
repeat --- 边框图片会平铺, 类似于背景重复;
stretch --- 边框图片会以拉伸的方式来铺满整个边框;
(3). 必须将元素的边框厚度设置为非0非auto值.
支持:
FF 3.5, Safari 4, Chrome 3
四. text-shadow(文本阴影)
使用:
text-shadow: [<颜色><水平偏移><纵向偏移><模糊半径>] || [<水平偏移><纵向偏移><模糊半径><颜色>];
说明:
(1) <颜色>和<模糊半径>是可选的, 当<颜色>未指定时, 将使用文本颜色; 当<模糊半径>未指定时, 半径值为0;
(2) shadow可以是逗号分隔的列表, 如:
text-shadow: 2px 2px 2px #ccc, 3px 3px 3px #ddd;
(3) 阴影效果会按照shadow list中指定的顺序应用到元素上;
(4) 这些阴影效果有可能相互重叠, 但不会叠加文本本身;
(5) 阴影可能会跑到容器的边界之外, 但不会影响容器的大小.
支持:
FF 3.5, Opera 10, Safari 4, Chrome 3
五. text-overflow(文本截断)
使用:
text-overflow: inherit | ellipsis | clip ;
-o-text-overflow: inherit | ellipsis | clip;
说明:
(1) 还有一个属性ellipsis-word, 但各浏览器均不支持.
支持:
IE6+, Safari4, Chrome3, Opera10
六. word-wrap(自动换行)
使用:
word-wrap: normal | break-word;
支持:
IE6+, FF 3.5, Safari 4, Chrome 3
七. border-radius(圆角边框)
使用:
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
支持:
FF 3+, Safari 4, Chrome 3
八. opacity(不透明度)
使用:
opacity: 0.5;
filter: alpha(opacity=50); /* for IE6, 7 */
-ms-filter(opacity=50); /* for IE8 */
支持:
all
九. box-sizing(控制盒模型的组成模式)
使用:
box-sizing: content-box | border-box; // for opera
-moz-box-sizing: content-box | border-box;
-webkit-box-sizing: content-box | border-box;
说明:
1. content-box:
使用此值时, 盒模型的组成模式是, 元素宽度 = content + padding + border;
2. border-box:
使用此值时, 盒模型的组成模式是, 元素宽度 = content(即使设置了padding和border, 元素的宽度
也不会变).
支持:
FF3+, Opera 10, Safari 4, Chrome 3
*******************************************
天气接口
http://weather.mail.163/weather/xhr/weather/info.do?sid=&uid=&host=&ver=js6&fontface=yahei&style=1&skin=seablue&color=&city=101100410
版权声明：本文标题：jquery-question 内容由热心网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：https://www.elefans.com/xitong/1728026904a1142753.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。
发表评论