JQuery

/*
时间：2021/12/07
功能：CSS
目录: 
    一: 官网下载
    二: 使用
    三: 选择器
    四: 选择器过滤
    五: 选择器转移
    六: 标签内容_获取和设置
    七: 标签属性_获取和设置
    八: 常用事件
    九: 事件代理
    十: ajax
        1 get 
        2 post
*/

一: 官网下载

1 : 官网下载地址: https://code.jquery.com/

2 : 选择红框内链接下载。

二: 使用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- 导入文件: jQuery - js -->
    <script src="js/jquery-1.12.4.min.js"></script>
    <!-- 新的标签: jQuery - code -->
    <script>
        // 写法一: js
        // window.onload = function(){
        //     var oDiv = document.getElementById("input1"); // 执行条件: 标签和资源 - 全部加载
        //     alert(oDiv);
        // };

        // // 写法二: jquery全写
        // // $() - 函数; 函数名 - $ 
        // $(document).ready(function(){
        //     // 变量名开头 - $; 
        //     var $input = $("#input1");
        //     alert($input);
        // });

        // 写法三: jquery简写
        $(function(){
            var $input = $("#input1");
            alert($input)
        })

        
    </script>
</head>
<body>
    <div id="div1">哈哈</div>
    <input id = "input1", type="button" value="按钮">
</body>
</html>

三: 选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="js/jquery-1.12.4.min.js"></script>
    <script>
        $(function(){
            // 选择器 - 标签
            var $p = $("p");
            console.log("标签选择器 <p>: " + $p.length);     // 获取个数
            $p.css({"color":"red"});    // 设置样式 - css

            // 选择器 - class
            var $div = $(".div1");
            console.log("class选择器 <div>: " + $div.length);     // 获取个数

            // 选择器 - id
            var $id = $("#id1");
            console.log("id选择器 <div1>: " + $id.length);     // 获取个数
            $id.css({"background":"orange", "color":"red", "font-size":"26px"});

            // 选择器 - 层级
            var $h1 = $("div h1")
            $h1.css({"color":"blue"})

            // 选择器 - 属性
            var $input = $("input[type=submit]")
            $input.css({"color":"orange", "font-size":"26px"})
        })
    </script>
</head>
<body>
    <p> hello </p>
    <p> hi </p>

    <div class="div1"> class_你好 </div>
    <div id="id1"> id_你好 </div>

    <div>
        <h1> h1_你好 </h1>
    </div>

    <input type="submit", value="username">
    <input type="button", value="按钮">
</body>
</html>

四: 选择器过滤

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="js/jquery-1.12.4.min.js"></script>
    <script>
        $(function(){
            var $divs = $("div");
            // has : 选择器名称
            $divs.has(".pname").css({"color":"blue"});

            // eq : 索引
            $divs.eq(1).css({"background":"blue"});
            
        });     
    </script>
</head>
<body>
    <div>
        <p class="pname"> hi </p>
    </div>

    <div>
        <input type="submit" id="name" value="username">
    </div>
</body>
</html>

五: 选择器转移

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="js/jquery-1.12.4.min.js"></script>
    <script>
        $(function()
        {
            var $div = $("#box1");

            // 定位标签 - 上一级
            $div.prev().css({"color":"orange", "font-size":"26px"});
            // 定位标签 - 上面同级
            $div.prevAll().css({"text-indent":"50px"});

            // 定位标签 - 下一级
            $div.next().css({"color":"green"});
            // 定位标签 - 下面同级
            $div.nextAll().css({"text-indent":"50px"});

            // 定位标签 - 同级其他
            $div.siblings().css({"text-decoration":"underline"});

            // 定位标签 - 父标签
            $div.parent().css({"background":"gray"});

            // 定位标签 - 所有子标签
            $div.children().css({"color":"red"});
            // 定位标签 - 指定子标签
            $div.find(".sp1").css({"color":"green"});

        })
    </script>
</head>
<body>
    <div>
        <h4> 二级标签</h4>
    </div>

    <div>
        <h3> 三级标签</h3>
        <p> hi </p>
        <div id="box1">
            <span> I am  </span>
            <span class="sp1"> div </span>
            标签
        </div>
        <h3> h3 </h3>
        <p> hello</p>
    </div>
</body>
</html>

六: 标签内容_获取和设置

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="js/jquery-1.12.4.min.js"></script>
    <script>
        $(function(){
            var $div = $("div");
            // 获取内容
            console.log($div.html());    
            // 设置内容
            $div.html('<a href="http://www.bing.com"> 必应 </a>');    
            // 追加内容
            $div.append('<a href="http://www.google.com"> 谷歌 </a>')
        })
    </script>
</head>
<body>
    <div> hi </div>
    
</body>
</html>

七: 标签属性_获取和设置

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="js/jquery-1.12.4.min.js"></script>
    <script>
        $(function(){
            // 获取标签
            var $p = $("p");
            // 获取样式
            var $px = $p.css("font-size");
            console.log($px);
            // 设置样式
            $p.css({"font-size":"30px", "background":"green"});

            // 获取标签
            var $text = $("#txt1");
            // 获取属性
            var $name = $text.prop("name")
            var $type = $text.prop("type")
            alert($name + "   " + $type)
            // 设置属性
            $text.prop({"value":"张三", "class":"c_name"});

            // val方法
            alert($text.val())  // 获取属性 - value
            $text.val("王五")   // 设置属性 - value
        })
    </script>
</head>
<body>
    <p> hi，I'm title </p>
    <input type="text" name="username" id="txt1" value="李四">
</body>
</html>

八: 常用事件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="js/jquery-1.12.4.min.js"></script>
    <script>
        $(function(){
            var $lis = $("ul li");
            var $btn = $("#btn1");
            var $text = $("#txt1");
            var $div = $("div");

            // 事件处理: 点击事件 - lis
            $lis.click(function(){
                // // 写法一: js
                // this.style.color = "red";

                // 写法二: jquery
                $(this).css({"color":"orange"});
                alert($(this).index());
            });

            // 事件处理: 点击事件 - btn
            $btn.click(function(){
                alert($text.val());
            });

            // 事件处理: 获得焦点 - text
            $text.focus(function(){
                $(this).css({"background":"orange"});
            });
            // 事件处理: 失去焦点 - text
            $text.blur(function(){
                $(this).css({"background":"white"});
            })

            // 事件处理: 鼠标进入 - div
            $div.mouseover(function(){
                $(this).css({"background":"green"});
            })
            // 事件处理: 鼠标离开 - div
            $div.mouseout(function(){
                $(this).css({"background":"white"});
            })
        })
    </script>
</head>     
<body>
    <div>
        <ul>
            <li>apple</li>
            <li>banana</li>
            <li>orange</li>
        </ul>
        <input type="text" id="txt1">
        <input type="button" id="btn1" value="Click me">
    </div>
</body>
</html>

九: 事件代理

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="js/jquery-1.12.4.min.js"></script>
    <script>
        $(function(){
            var $btn = $("#btn1");
            var $div = $("#id_div_1");
            $btn.click(function(){
                alert("I'm button");
                return false;   // 取消事件冒泡 
                //return true;  // 进行事件冒泡 : 条件 - 默认/true
            });
            $div.click(function(){
                alert("I'm div");
            });

            // 事件代理: 子列表
            var $ul = $("div ul")
            $ul.delegate("li", "click", function(){
                $(this).css({"color":"red"})
            });

            // 事件代理 : 不同子控件
            var $div1 = $("#box")
            $div1.delegate("#p2, #btn2", "click", function(){
                alert("OK")
            })
        })
    </script>
</head>
<body>
    <div id="id_div_1">
        <p id="p1"> hi </p>
        <input type="button" value="but" id="btn1">
        <ul>
            <li>l_1_hi</li>
            <li>l_2</li>
            <li>l_3</li>
            <li>l_4</li>
        </ul>
    </div>
    <div id="box">
        <p id="p2"> p_hi </p>
        <input type="button" value="but_div" id="btn2">
    </div>
</body>
</html>

十: ajax

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="js/jquery-1.12.4.min.js"></script>
    <script>
        // // 发送服务器 : ajax请求
        // $.ajax({
        //     url:"data.json",    // 无ip : 请求自己
        //     type: "get",        // 请求方式: get post
        //     dataType:"JSON",    // 请求类型: JSON
        //     data:{"name":"ls"}, // 请求参数
        //     success:function(data){     // 执行条件 : 请求成功
        //         console.log(data.name)
        //     },
        //     error:function(){           // 执行条件 : 请求失败
        //         alert("网络异常")
        //     },
        //     async: true // 是否异步 : 是
        // });

        // // 简写: ajax请求 - get
        // // 参数: 请求地址; 请求参数; 成功回调函数; 返回数据解析方式; 失败回调函数
        // $.get("data.json", {"name":"ls"}, function(data){
        //     alert(data.name);
        // }, "JSON").error(function(){
        //     alert("网络异常");
        // });

        // 简写: ajax请求 - post
        $.post("data.json", {"name":"ls"}, function(data){
            alert(data.name);
        }, "JSON").error(function(){
            alert("网络异常");
        })
    </script>
</head>
<body>
    
</body>
</html>