jQuery

jQuery 是一个流行的JavaScript函数库
jQuery经常用于DOM查询，常用动画，Ajax等常用操作

jQuery的下载

打开网站https://jquery.com/download/下载jquery

也可以打开网站https://www.bootcdn.cn/jquery/直接复制使用jQuery

jQuery函数语法

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>jQuery</title>
</head>
<body>
    <div class="first">
        <li>item1</li>
        <li>item2</li>
        <li>item3</li>
    </div>
    <hr>
    <div class="second">
        <li>item1</li>
        <li>item2</li>
        <li>item3</li>
    </div>
    <hr>
    <div class="third">
        <li>item</li>
        <li>item</li>
        <li>item</li>
    </div>
    <script src="lib/jquery-3.5.1.js"></script>
    <script>
        // $()工厂函数
        // $()语法1.第一个参数为选择器，第二个参数为上下文
        // 原生js操作
        document.querySelectorAll(".first>li").forEach(function (item) {
            item.style.color = "lightcoral";
        });
        // jQuery操作
        $("li", ".second").css("color", "lightgreen");
        // $()语法2.参数为js原生对象
        var lis = document.querySelectorAll(".third>li");
        // js原生操作
        lis.forEach(function (item) {
            item.style.color = "lightgray";
        });
        // jQuery操作(自带循环，不用再进行foreach)
        $(lis).css("color", "cyan");
        // $()语法3.参数为html文本
        // js原生操作
        var p = document.createElement("p");
        p.innerHTML = "PHP中文网";
        document.body.appendChild(p);
        // jQeury操作
        $("<p>好好学习，天天向上</p>").appendTo(document.body);
        // 也可以插入到任意位置
        $("<p>加油，努力</p>").insertBefore(document.body);
        // $()语法4. 参数为回调函数，当文档加载完立即执行
        $(function () {
            $(document.body).css({
                "background-color": "wheat",
                "font-size": "25px",
                "color": "red",
            });
        });
    </script>
</body>
</html>

$和$()区别

$是一个函数
$()是用函数生成jQuery对象

// $ 和 $()的区别
// 直接在函数上调用方法(静态方法)
$.each($(".first>li"), function (key, vaule) {
    console.log("键：%s，值：", key, vaule);
});
// 效果和上面一样但是这个是在jQuery对象上调用方法
$(".first>li").each(function (key, vaule) {
    console.log("键：%s，值：", key, vaule);
});

对于查询结果的处理

// 对查询结果处理
 var lis = document.querySelectorAll(".first>li");
 console.log(lis);
 // 获取的结果不是数组，不好用foreach遍历 可以通过jQuery的toArray方法转为数组后遍历
 $(lis).toArray().forEach(function (item) {
     item.style.color = "lightcoral";
 });
 var res = $(lis).toArray().map(function (item, index) {
     if (index < 2) {
         return item.innerHTML = "好好学习";
     } else {
         return item.innerHTML = "天天向上";
     }
 });
 console.log(res);
 // index()方法返回jQuery集合中元素的索引
 $(".second>li").click(function () {
     console.log("你点击了第 %s 个元素", $(this).index() + 1);
 });

attr方法

// getter和setter操作
var div = $(".first");
// 查看属性值
console.log(div.attr("name"));
// 更改属性值
div.attr("name", "user");
console.log(div.attr("name"), div.attr("id"));
// 也可以同时更改多值
div.attr({
    "name": "possword",
    "id": "uesrname",
});
console.log(div.attr("name"), div.attr("id"));
// 也可以通过回调进行动态更改
div.attr("name", function () {
    var uid = $(this).attr("id").toLowerCase();
    return uid === "user" ? "item" : "contain";
});
console.log(div.attr("name"));