jQuery -- 入门

2018-03-29 本文已影响0人 liaozb1996

jQuery 是一个 JavaScript 库。
CDN：

Firefox 控制台

要操作的 Dome

<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title>Demo</title>
    <style>
        .highlight{
            color: red;
            background-color: yellow;
            font-style: italic;
        }
</head>
<body>
    <p>Hello <span>Jquery</span></p>
    <a href="http://jquery.com/">jQuery</a>
    <script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.3.1.js"></script>

    <script>
 
    // Your code goes here.
 
    </script>
</body>
</html>

Firefox Console

调用 jQuery

jQuery Object

jQuery 的方法和属性在 window.jQuery 或 window.$ （别名）下

<script>
    $("h1").addClass("highlight");
</script>

<script>
    jQuery("h1").addClass("highlight");
</script>

Document Ready

$(document).ready() 会等到 DOM 加载完毕再执行 JavaScript 代码

    <script>
    // 弹出消息，并跳转页面
    $(document).ready(function(){
        $("a").click(function(event){
            alert("You clicked the link.");
        });
    });
    </script>

而 window.onload 会等在页面完全加载完毕（包括图片、广告、iframe）再执行 JavaScript 代码

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

$( window ).on( "load", function() { ... })

javaScript 代码都应包含在 $(document).ready() 内，避免 javaScript 代码执行时，被操作的元素还未加载完毕

event.preventDefault()

event.preventDefault() 用来阻止事件的默认动作；

<a> 标签的跳转动作
<form> 的提交动作（用JavaScript 来获取 <input> 数据并在本地处理）

    <script>
    //  弹出消息，但不会跳转到其他页面
    $(document).ready(function(){
        $("a").click(function(event){
            alert("You clicked the link.");
            event.preventDefault();
        });
    });
    </script>

操纵样式 CSS

$("span").addClass("highlight");
$("span").removeClass("highlight");
$("span").toggleClass("highlight");
$("span").hasClass("highlight");

特效

$("a").click(function(event){
    $(this).hide("slow")
    event.preventDefault();
});

callbacks & functions

callback 是将一个函数（func_a）的定义传给另一个函数（func_b），当 func_b 执行完毕时，执行 func_a（callback）

# 这不是 callback (而是函数)，因为这样会先执行 myCallBack()，并将其返回值传给 get()
$.get( "myhtmlpage.html", myCallBack());

callback

# callback: 用 get 获取 html 文件，在执行 myCallBack 
$.get( "myhtmlpage.html", myCallBack );

# 带参数的 callback
$.get( "myhtmlpage.html", function() {
 
    myCallBack( param1, param2 );
 
});

$.get()