关于jQuery

2019-08-23 本文已影响0人 Reiko士兵

1. $ 是 jQuery 的缩写

2. 关于网页加载

window.onload = function() {
    alert( "welcome" );
};

window.onload 在网页加载好所有元素后执行，如果页面中有大量图片，会等所有图片都下载好后再执行。

$( document ).ready(function() {
alert( "welcome" );
});

$( document ).ready 在网页结构加载好后就执行，对于含有大量图片的网页，并不需要等待所有图片都下载好。

$(function() {
alert( "welcome" );
});

$( document ).ready 方法的简写。

3. 阻止网页默认行为

$( document ).ready(function() {
    $( "a" ).click(function( event ) {
        alert( "As you can see, the link no longer took you to jquery.com" );
        event.preventDefault(); 
    });
});

event.preventDefault 用于阻止网页的默认行为，此例中点击 a 标签网页不会跳转。

4. 关于回调函数

$.get( "myhtmlpage.html", myCallBack( param1, param2 ) );

回调函数的错误写法，myCallBack 会立马执行并将其结果作为 get 请求的第二个参数，并不会在 get 请求结束后再执行。

$.get( "myhtmlpage.html", function() {
    myCallBack( param1, param2 );
});

回调函数的正确写法，匿名函数执行后返回 myCallBack。

$.get( "myhtmlpage.html", ()=>myCallBack( param1, param2 ));

()=> 是 js 函数的简单写法，当函数体只有一行时，可以省去 {} 。

参考测试网页

<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title>Demo</title>
</head>
<body>
    <a href="http://jquery.com/">jQuery</a>
    <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
    <script>
 
    // Your code goes here.
 
    </script>
</body>
</html>