zoukankan      html  css  js  c++  java
  • 前端技巧备忘

    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);
    

      

  • 相关阅读:
    ASP.NET Core MVC Razor小记
    ASP.NET Core引入第三方日志框架及简单实现日志策略配置
    test
    记录一个Windows explorer进程卡死的处理,有关于“MicrosoftWindows.Client.CBS_cw5n1h2txyewy”的,已解决!
    Windows版本sed工具
    相同xml批量创建替换脚本.sh
    springboot1.x apollo 更改属性值不起作用。 ConfigurationProperties
    jmeter固定定时器
    jmeter函数助手参数化
    jmeter循环控制器
  • 原文地址:https://www.cnblogs.com/chenqionghe/p/10404679.html
Copyright © 2011-2022 走看看