前端开发 - 知识点总结

Posted 2020-10-04

 

简介：涉及javascript、jQuery甚至Django模板语言

 

$.each()方法

定义：为每个匹配元素规定运行的函数

提示：返回false用于停止循环

语法：$(selector).each(function(index, element){......}), 

• index - 选择器的 index 位置
• element - 当前的元素(也可使用 "this" 选择器)

实例：输出每个li元素的文本

<script>
$("button").click(function(){
　　$("li").each(function(){
　　　　alert($(this).text());
　　})
})
</script>

变体用法：

$.each(可循环对象，function(index, element){

　　1.  可循环对象 如 JSON数组，<li></li>标签等，类似for in 后面的位置

　　2.  function 为匿名函数，直接执行，类似 for的执行体

　　3.  index, element 为元素标识，类似 enumerate

})

<script>
    var arr = [‘aaa‘, ‘bbb‘, ‘ccc‘];
    $(‘button‘).click(function(){
        $.each(arr, function (index, value) {
            alert(index);
            alert(value);
        })
    })
</script>

 

$.post()方法

定义：POST请求数据

提示：csrf

语法：$.post(url, [data], [callback], [type])

url(String)：必填，发送请求的URL地址

data(Map)：可选，要发送给服务器的数据，以key/value的键值对形式表示

callback(Function)：可选，载入成功时回调函数(只有当Response的返回状态是success才调用该方法)

type(String)：可选，客户端请求data的类型(JSON、XML等等)

实例：

<script>
var data = {
    ‘key1‘:‘value1‘,
    ‘key2‘:‘value2‘
};

$.post(
    "/api/post/",
    {‘data‘:JSON.stringify(data), ‘csrfmiddlewaretoken‘:"{{ csrf_token }}"},
    function (callback) {
        var data = JSON.parse(callback);
        console.log(data)
    }
)
</script>

 

$.getJSON()方法

定义：GET请求数据

语法：$.getJSON(url, [data], [callback])

url(String)：必填，发送请求的URL地址

data(Map)：可选，要发送给服务器的数据，以key/value的键值对形式表示

callback(Function)：可选，载入成功时回调函数(只有当Response的返回状态是success才调用该方法)

 

$.ajax()方法

说明：ajax()方法通过HTTP请求加载远程数据

用法：$.ajax({

　　type: "GET",

　　url: "/aip/get",

　　data: {"key1": "value1", "key2":"value2"},

　　success: function(callback){.......}

})

参考：http://www.w3school.com.cn/jquery/ajax_ajax.asp

 

setInterval()方法

定义：按照指定的周期(毫秒)来调用函数或计算表达式

说明：setInterval方法会不停地调用函数，直到clearInterval()被调用或窗口被关闭。setInterval() 返回的 ID 值作 clearInterval() 参数

语法：res = setInterval(function, millisec)    clearInterval(res)

实例：

<script>
var res = setInterval(function () {
    console.log(‘aaa‘)
},2000);

$(‘button‘).click(function(){
    clearInterval(res)
})
</script>