jquery

概述

javascript框架
write less do more

快速入门

<script src="../js/jquery-3.6.0.min.js"></script>
<script>
    jQuery(document).ready(function() {
        console.log("window loaded...");
    });

    jQuery(document).ready(function() {
        console.log("window loaded 2...");
    });

    $(document).ready(function (){
        console.log("window loaded 3...");
    })

    $(function (){
        console.log("window loaded 4...");
    });
</script>

js对象与jquery对象的互相转换

<script src="../js/jquery-3.6.0.min.js"></script>
<script>
    let jsVar = "<input type='password'>";
    let jqVar = $(jsVar);
    let transJsVar = jqVar.get(0);

    console.log(jqVar);
    console.log(transJsVar);
</script>

事件与事件绑定

<script src="../js/jquery-3.6.0.min.js"></script>
<script>
    $(function() {
        $("#bId").click(function() {
            alert("哟哟切克闹，煎饼果子来一套");
        });
    });
</script>

常用事件

<script src="../js/jquery-3.6.0.min.js"></script>
<script>
    $(function() {
        // blur/focus：<input id="e01" type="text"/><span id="textMsg"></span> <br/>
        $("#e01").blur(function() {
            console.log("e01 blur");
        });
        $("#e01").focus(function() {
            console.log("e01 focus");
        });

        // change：<input type="text" name="e02" id="e02"/><span id="textMsg2"></span> <br/>
        $("#e02").change(function() {
            console.log("e02 change");
        });

        // click：<input id="e03" type="button" value="可以点击"/><span id="buttonMsg"></span> <br/>
        $("#e03").click(function() {
            console.log("e03 click");
        })

        // <form action="#" method="get" id="myForm">
        $("#myForm").submit(function() {
            return false;
        });
    })
</script>

基本选择器

<script src="../js/jquery-3.6.0.min.js"></script>
<script type="text/javascript">
    $(function () {
        $("#btn1").click(function () {
            $("#one").css("background-color", "red");
        });

        $("#btn2").click(function () {
            $(".mini").css("background-color", "red");
        });

        $("#btn3").click(function () {
            $("div").css("background-color", "red");
        });

        $("#btn4").click(function () {
            $("*").css("background-color", "azure");
        });

        $("#btn5").click(function () {
            $("span,#two").css("background-color", "red");
        });
    });
</script>	

层级选择器

• $("...").prev("...")
• $("...").next("...")
• $("...").prevAll("...")
• $("...").nextAll("...")
• $("...").siblings("...")

<script src="../js/jquery-3.6.0.min.js"></script>
<script>
    $(function () {
        $("#btn1").click(function() {
            $("body>div").css("background-color", "red");
        })

        $("#btn2").click(function() {
            $("body div").css("background-color", "red");
        })

        $("#btn3").click(function() {
            $("#one").nextAll("div").css("background-color", "red");
            // $("#one").prevAll().css("background-color", "red");

        })

        $("#btn4").click(function() {
            $("#two").next("div").css("background-color", "red");
            //$("#one").prev().css("background-color", "red");
        })

        $("#btn5").click(function() {
            $("#two").siblings("div").css("background-color", "red");
        })
    });
</script>

属性过滤选择器

<script src="../js/jquery-3.6.0.min.js"></script>
<script type="text/javascript">
    $(function () {
        $("#btn1").click(function() {
            $("[title]").css("background-color", "red");
        });

        $("#btn2").click(function() {
            $("[title=test]").css("background-color", "red");
        });
    });
</script>

基本过滤选择器

• :first

  过滤第一个

• :last

  过滤最后一个

• :even

  过滤偶数个

• :odd

  过滤奇数个

• :eq(num)

  过滤数字个

• :gt(num)

  过滤大于个

• :not(sel)

  否定选择器(css自带)

<script src="../js/jquery-3.6.0.min.js"></script>
<script type="text/javascript">
    $(function () {
        $("#btn1").click(function() {
            $("div:first").css("background-color", "red");
        });
        $("#btn2").click(function() {
            $("div:last").css("background-color", "red");
        });
        $("#btn3").click(function() {
            $("body>div:even").css("background-color", "red");
        });
        $("#btn4").click(function() {
            $("div:odd").css("background-color", "red");
        });
        $("#btn5").click(function() {
            $("div:eq(3)").css("background-color", "red");
        });
        $("#btn6").click(function() {
            $("div:gt(3)").css("background-color", "red");
        });
        $("#btn7").click(function() {
            $("div:not(.one)").css("background-color", "red");
        });
    });
</script>