前端技巧备忘

前端技巧集锦

最新推荐文章于 2025-09-12 14:39:04 发布

weixin_30732825

最新推荐文章于 2025-09-12 14:39:04 发布

阅读量71

点赞数

CC 4.0 BY-SA版权

文章标签：前端 json php ViewUI

原文链接：http://www.cnblogs.com/chenqionghe/p/10404679.html

本文涵盖前端开发中的多项实用技巧，包括使用Ajax传递数组、获取select框的选中元素、利用jQuery提取数据、JSON对象合并、解决跨域调用的JSONP使用、实现全选全不选功能、获取URL参数、长文本折叠换行、代码高亮及动态渲染代码等，为前端开发者提供丰富的实战经验。

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>
    陈琼和
</details>

9.代码高亮

<mark>chenqionghe</mark>

10.highlight.js动态渲染代码方法

<code id="codelang"></code>

 var highCode = hljs.highlightAuto(code   ).value;
$("#codelang").html(highCode);

转载于:https://www.cnblogs.com/chenqionghe/p/10404679.html