前端技巧备忘
1.ajax传递数组
//构造Array数组
var domains = new Array();
domains. push("a");//push
//通过选择器直接获取
var domains = $("input[name='domains[]']").map(function() {
var val = $(this).val();
if (!val) {
return
}
return val;
}).get();
//传递
$.ajax({
url: "/xxx",
data: {"domains[]":domains},
dataType: 'json',
type: 'post',
success: function (data) {
//
}
})
2. jquery获取selects框的选中的元素
$(this).find("option:selected")
3.jquery用map()和get()提取数据
var domains = $("input[name='domains[]']").map(function() {
var val = $(this).val();
if (!val) {
return
}
return val;
}).get();
4.json对象合并
var a ={"a":"1","b":"2"}
var b ={"c":"3","d":"4","e":"5"}
var c = $.extend({}, a,b);
console.log(c);
5.jsonp使用
客户端
$(function(){
$.ajax({
type: "get",
async: false,
url: "http://test.com/json_data.php",
dataType: "jsonp",
jsonp: "callback",//传递给请求处理程序或页面的，用以获得jsonp回调函数名的参数名(一般默认为:callback)
jsonpCallback:"mycall",//自定义的jsonp回调函数名称，默认为jQuery自动生成的随机函数名
success: function(data){
console.log(data);
},
error: function(){
alert('fail');
}
});
});
json_data.php返回中的内容如下
$callbak = $_REQUEST["callback"];//接收jquery带来的回调函数名称
$jsonArr = array('key1'=>'val1','key2'=>'val2','key3'=>'val3');//要输出的数据数组
$str = $callbak . "(" .json_encode($jsonArr).")";
echo $str;
这样即完成了解决跨域的调用，需要注意的是，服务器端需要在返回的json内容的基础上加上回调函数的调用
回调函数名. "(" .json内容.")";
6.js实现全选全不选
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="jquery-1.8.3.min.js"></script>
<script type="text/javascript">
$(function(){
//全不选
/*
$('#checkAll').click(function() {
var chk = $(this).prop('checked');
$('input[name=choose]').prop('checked',chk);
});
*/
$('#checkAll').click(function() {
$('input[name=choose]').prop('checked',this.checked);
});
//反选
$('#checkRev').click(function(){
$('input[name=choose]').each(function(){
this.checked = !this.checked;
});
});
});
</script>
</head>
<body>
<input type="checkbox" id="checkAll">全选/全不选<br>
<input type="checkbox" id="checkRev">反选<br>
<input type="checkbox" name="choose">1<br>
<input type="checkbox" name="choose">2<br>
<input type="checkbox" name="choose">3<br>
<input type="checkbox" name="choose">4<br>
<input type="checkbox" name="choose">5<br>
<input type="checkbox" name="choose">6<br>
<input type="checkbox" name="choose">7<br>
<input type="checkbox" name="choose">8<br>
<input type="checkbox" name="choose">9<br>
<input type="checkbox" name="choose">10<br>
</body>
</html>
7.获取url传递参数
<script>
/* 方法一 */
function request(paras)
{
var url = location.href;
var paraString = url.substring(url.indexOf("?") + 1, url.length).split("&");
var paraObj = {}
for (i = 0; j = paraString[i]; i++) {
paraObj[j.substring(0, j.indexOf("=")).toLowerCase()] = j.substring(j.indexOf("=") + 1, j.length);
}
var returnValue = paraObj[paras.toLowerCase()];
if (typeof (returnValue) == "undefined") {
return "";
} else {
return returnValue;
}
}
/* 方法2 */
function getQueryString(name)
{
var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i");
var r = window.location.search.substr(1).match(reg);
if (r != null) return unescape(r[2]); return null;
}
/* 使用 */
alert(request('action'));
alert(getQueryString('model'));
</script>
8.长文本折叠换行
<details>
<summary>cqh</summary>
chenqionghe
</details>
9.代码高亮
<mark>chenqionghe</mark>
10.highlight.js动态渲染代码方法
<code id="codelang"></code>
var highCode = hljs.highlightAuto(code ).value;
$("#codelang").html(highCode);
