jQuery语法

引入jQuery

        <script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>

获取元素

        原生js  

                var box =document.querySelectorAll(".box")

        jQuery

                var box=$(".box")

jQuery事件

        $(".box").click(function(){  })

        $(".box").mousedown(function(){  })

操作元素内容

        $(".box").text("盒子");

        $(".box").html('<div class="_box">盒子</div>');

        $("input").val("点击")

操作元素属性

        $("input").attr("type","password")

操作元素样式

        $(".box").css({"width":"100px","height":"200px"})

jQuery选择器

        $(".box:eq(1)").click(function(){})  选择类名为box的第二个元素 下标从0开始

        $(".box:gt(3)").click(function(){})   选择类名为box 所有下标大于3的元素（不包含3）

        $(".box:lt(3)")..click(function(){})   选择类名为box  所有下标小于3的元素（不包含3）

jQuery尺寸

        $(".box:eq(0)").width()  不包括边框内边距

        $(".box:eq(0)").height()  不包括边框内边距

        $(".box:eq(0)").innerWidth()  包括内边距 不包括边框

        $(".box:eq(0)").innerHeight()  包括内边距 不包括边框

        $(".box:eq(0)").outerWidth()  包括边框内边距

        $(".box:eq(0)").outerHeight()  包括边框内边距

jQuery事件进阶

         $("input").toggle(

                function () {

                    $("body").css("background-color", "green");

                },

                function () {

                    $("body").css("background-color", "red");

                },

                        function () {

                    $("body").css("background-color", "yellow");

                }

            )