jQuery基础教程(三)

1.jQuery基本语法

jQuery语法非常简单，基本语法格式如下： $(selector).action()

美元符号定义 jQuery
选择符（selector）"查询"和"查找" HTML 元素
jQuery 的 action() 执行对元素的操作

实例：

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>jQuery基本语法</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>
<div id="box1">

</div>

<script>
    $(function(){
        $("#box1").text('hello,jQuery!');
        //效果等同于
        //document.getElementById("box1").innerText='hello,jQuery!';
    });
</script>
</body>
</html>

2.jQuery入口函数与onload的区别

jQuery的入口函数如下:

$(function(){
    // 执行代码
});

对比	window.onload	$(document).ready()
执行时机	必须等网页全部加载完毕(包括图片等静态资源) 然后再执行包裹代码	只需等待网页的DOM结构加载完毕即可执行
执行次数	只能执行一次，如果定义多个window.onload事件仅仅执行最后一个，前面的执行结果均被覆盖	可以执行多次，不会覆盖上次的执行结果
简写方案	无	$(function(){})

通过以下案例可以观察window.onload与jQuery入口函数的区别：

<script>

    window.onload=function(){
        alert('我是window onload1');
    }
    window.onload=function(){
        alert('我是window onload2');
    }

    $(function(){
        alert("我是窗口1");
    })

    $(function(){
        alert("我是窗口2");
    })

</script>

window.onload仅仅执行第二个函数而jQuery会弹出两次窗口。