JavaScript学习——jQuery（不需要写很多JavaScript代码啦）

jQuery 是一个 JavaScript 库。jQuery 极大地简化了 JavaScript 编程。

(文档工具jQuery API 中文文档 | jQuery API 中文在线手册 | jquery api 下载 | jquery api chm)

有两个版本的 jQuery 可供下载：

• Production version - 用于实际的网站中，已被精简和压缩。
• Development version - 用于测试和开发（未压缩，是可读的代码）
• Download jQuery | jQuery

CDN在线使用

CDN- jquery

<script  src="https://lib.baomitu.com/jquery/3.6.0/jquery.js"></script>

公式： $(selector).action()

美元符号定义 jQuery

选择符（selector）"查询"和"查找" HTML 元素

jQuery 的 action() 执行对元素的操作

1、选择器

按 tag 查找

var ps = $('p'); 
// 返回所有<p>节点 
ps.length; 
// 数一数页面有多少个<p>节点

按 ID 查找

// 查找<div id="abc">: 
var div = $('#abc');

按class查找

var a = $('.red'); 
// 所有节点包含`class="red"`都将返回 
// 例如: 
// <div class="red">...</div> 
// <p class="green red">...</p> 1234

。。。。。还有很多选择器，请看参考文档

2、事件

<!--随时显示鼠标的位置-->
mouse:<span id = "mousemove"></span>

<script>
    // $(document).read(function () {
    //     ........页面加载，可省略
    // })
    $(function () {
        $(document).mousemove(function (e) {
            $("#mousemove").text("x:"+e.pageX+"y:"+e.pageY)
        })

    })
</script>

<ul id = "list">
    <li id="username">张三</li>
    <li id="age">12</li>
</ul>
<script>
    $("#list li[id = 'age']").text("10")
</script>

后面学点ajax就是一个公式： $(selector).action()中的action