jQuery知识点小结

博主之前学习一段时间后做了点Demo，借此机会发出来分享，其实学jQuery只要简单看看文档即可，但有些细枝末节的东西文档会默认使用者是了解的，所以还是得系统学习系统训练；Talk is cheap,let me show the code.

TIP：我常用的API

　　　　　<script src="jquery-2.1.3.js"></script>
        <script src="bootstrap.min.js"></script>
        <script>
            //$();  调用核心函数
            
            //用js原生的入口函数时，在加载完DOM和图片后才会调用，但jQuery在DOM加载之后，图片加载之前就执行了；
            Window.onload = function(ev){
                //do
            }

            //js原生的入口函数会相互覆盖，但jQuery时顺序执行的；


            //接收一个函数,若为function则时入口函数:
            $(function(){
                //do
            });
    
            //接收字符串选择器，并封装成jQuery对象
            $(function(){
                var $box1 = $(".box1");
                var $box2 = $("#box2");
            });
            //接收一个代码片段,自动创建对应的元素并返回
            $(function(){
                var $p = $('<p>"段落"</p>');
                console.log($p.html());
            });
            //接收一个元素

            $(function(){
                var span = document.getElementByTagName("span")[0];
                var $span = $(span); //jQuery将span封装成jQuery对象并返回
            });
        </script>

 

<script src="jquery-2.1.3.js"></script>
        <script src="bootstrap.min.js"></script>
        <script>

            //jQuery是以伪数组存储对象的，有length属性；
            //伪数组：0~length-1，长度为length

            //定义一个类：
            function ClassA(){
                
            }
            //增加一个静态方法并调用：
            ClassA.staticMethod = function(){
                //do
            }
            ClassA.staticMethod();
            
            //创建普通方法,创建实例并调用:
            ClassA.prototype.instanceMethod = function(){
                //do
            }
            var a = new ClassA();
            a.instanceMethod();
            
            //forEach方法,不能在伪数组上用,但each可以,each的默认返回值就是遍历的类型，不支持自定义返回值
            var arr = [1, 2, 3, 4, 5];
            var obj = {0:1, 1:3, 2:5, 3:7, 4:9, length:5};
            arr.forEach(function(value, index){
              //do  
            });
            $.each(obj, function (index, value) {
                //do
            })

            //原生map不能遍历伪数组，但jQuery的map方法可以，map默认的返回值是新的空数组，也可自定义返回值
            arr.map(function(value, index, array){
                //do
            });
            $.map(obj, function (value, index){
                return value+index;
            });
            
            //trim
            var str = "   ins   ";
            var str1 = $.trim(str);

            //判断是否为窗口对象
            var w = window;
            var res = $.isWindow(str);

            //判断是否为真数组
            var array = $.isArray(arr);

            //判断是否为函数,下面都为true
            var fun = $.isFunction(ClassA);
            var func = $.isFunction(jQuery);
            
            //jQuery就是一个匿名函数，是立即执行的
            (function(window, undefined){
                //jQuery的内部 
            })(window);
        </script>

 

　　　　　<script src="jquery-2.1.3.js"></script>
        <script src="bootstrap.min.js"></script>
        <script>
            //holdReady可以暂停入口函数的执行
            $.holdReady(true);
            $(document).ready(function(){
                //do
                $.holdReady(false);//回复执行入口函数
            });
        </script>

<script src="jquery-2.1.3.js"></script>
        <script src="bootstrap.min.js"></script>
        <script>
            //empty选择器找到元素下没有 子元素 和 内容 的元素集合
            var $e = $("div:empty");

            //parent选择器找到多有含有 子元素 或 文本的元素集合
            var $p = $("div:parent");

            //contains选择器找到所有 含有 对应文本内容 的元素集合
            var $c = $("div:contains('文本内容')");

            //has选择器找到所有 含有 对应子元素的元素集合
            var $h = $("div:has('span')");
            
            //操作属性
            p.name = "AAA";
            p["name"] = "BBB";
            console.log(p.name);

            //设置属性节点,只有DOM对象才有属性节点
            span.setAttribute("属性名","属性值");
            span.getAttribute("属性名");
            
            /*jQUery的attr(name|pro|kry, val|fn)
                作用：获取或设置属性节点的值
                传递一个参数时，代表只获取 第一个元素 属性节点的值
                传递两个参数时，代表设置所有元素的属性节点值
                常用于多元属性
            */
            $("span").attr("class");
            $("span").attr("id","s");

            //jQuery的removeAttr("name")：删除所有元素的一个或多个属性节点
            $("span").removeAttr("class name");

            //jQUery的prop(name|properties|key,value|fn):常用于两元属性（只有true和false）
            $("span").eq(0).prop("name", "CCC"); //eq(0)指选择找到元素伪数组的第一个元素,若没有name属性，则新增并赋值

            //removeProp(name)
            $("span").removeProp("name");

            
        </script>

 

<script src="jquery-2.1.3.js"></script>
        <script src="bootstrap.min.js"></script>
        <script>
            
            $(function(){
                
                //addClass():动态增加CSS样式类,bootstrap就可以这样用，多个用空格隔开
                $().addClass("class1");

                //removeClass():删除类属性,也可删除多个
                $().removeClass("sr-only");

                //toggleClass():没有就添加，有就删除
                $().toggleClass("class2");
            });
            
                //html():相当于innerHTML,有内容就是添加，没有就是获取
                $().html();

                //text():相当于innerText
                $().text();

                //val():相当于value
                $().val();

                //操作CSS样式的方法：

                //css的注意点：链式操作如果大于三步，则要分开写，否则可读性很差
                $().css("width", "50px").css("height", "50px");
                $().css({
                    width: 50px;
                    height: 50px;
                });
                var $css = $().css("width");//返回CSS值
                $().height();//返回CSS值,也可以加参数并赋值
                
                
                //offset():获取元素距离窗口的偏移位
                $().offset().left;
                $().offset({
                    left: 10
                });

                //position():获取元素距离定位元素(parent元素)的偏移位,但没有设置功能因为没必要
                $().position().left;

                //scrollTop():
                //Tip:当文本超出文本框时，用overflow:auto;来设置出滚动条
                $().scrollTop();                            //获取第一段相对滚动条顶部的偏移
                $().scrollTop(300);                         //设置滚动条的偏移量
                $("html").scrollTop()+$("body").scrollTop();//直接获取网页的滚动偏移量
                $("html,body").scrollTop(300);              //设置网页的滚动条的滚动偏移量
                $(window).scroll(function(){                //监听当前页面的滚动条
                    var offset = $("html,body").scrollTop();//返回竖直滚动条的距顶像素数
                });
                
        </script>

 

<script src="jquery-2.1.3.js"></script>
        <script src="bootstrap.min.js"></script>
        <script>
            //两种绑定事件的方式，相同的事件之间不会覆盖
            //1:编码效率较高,但部分jQuery没有实现对应的事件，得用第二种
                $("button").click(function(){
                    //do
                });

            //2
                $("button").on("click", function(){
                    //do
                });

            //移除事件:
                $("button").off();//带参就逐个移除，不传就全部移除

            //事件冒泡: 从子元素绑定的事件默认传递给parent元素
                $("son").click(function(){
                    //do
                    return false;//阻止事件冒泡,或者:event.stopPropagation()
                });
            //默认行为:比如<a>标签，点击之后会默认跳转，但并没有绑定任何事件,或者input自动的submit行为
                $("a").click(function(){
                    return false;//阻止默认的行为event.preventDefault()
                });
            
            //事件的自动触发
                $("son").trigger("click");       //既会触发事件冒泡,也会触发默认行为 
                $("son").triggerHandler("click");//不会触发事件冒泡,不会触发默认行为
                $("input[type='submit']").click(function(){

                });
            //面试题
                $("span").trigger(function(){//若想用trigger触发<a>的绑定事件和默认行为，一定要在<a>内包上<span>并对<span>进行触发器绑定
                    //do
                });

            //自定义事件
                $().on("myClick", function(){
                    //do
                });
                $().trigger("myClick");

            //事件命名空间
            //面试题
                //利用trigger触发子元素带命名空间的事件，那么父元素带相同命名空间的事件也会触发(事件冒泡)，而没有命名空间的事件不会触发
                $("son").trigger("click.ls");
                //利用trigger触发子元素不带命名空间的事件,子父元素中所有相关的元素都会触发
                $("son").trigger("click");

            //事件委托
                $("ul>li").click(function(){//jQuery若找到多个元素，则事件的绑定是顺序赋予的,加载完后新增的<li>无法拥有事件绑定,此写法就不适用了
                    alert($(this).html());
                });
                $("ul").delegate("li", "click", function(){//将事件绑定的工作委托li的父元素ul,使ul加载完毕后监听并执行
                    alert($(this).html());
                })
            
            
        </script>

 

接下来是自己用bootstrap+jQuery做的登陆弹窗

　　　　　<script src="jquery-2.1.3.js"></script>
        <script src="bootstrap.min.js"></script>
        <style>
            *{
                margin: 0;
                padding: 0;
            }
            html.body{
                width: 100%;
                height:100%;
            }
            .mask{
                width: 100%;
                height: 100%;
                background: rgba(0, 0, 0, 0.5);
                position: fixed; 
                top: 0;
                left: 0;
            }
            #login{
                width: 500px;
                height: 400px;
                margin: 100px auto;
                padding: 40px;
                padding-top: 0px;
                background: rgb(255, 255, 255);
            }
            #closeBtn{
                float: right;
                font-size: 24px;
            }
        </style>
        <script>
            $(function(){
                $("#register").click(function(){
                    var inputCode = '<div class="mask">'+
                                        '<div class="panel panel-default" id="login">'+
                                            '<div class="page-header">'+
                                                '<h2>开始注册！'+
                                                    '<button id="closeBtn" type="button" class="btn btn-default" aria-label="Left Align">'+
                                                        '<span class="glyphicon glyphicon-off" aria-hidden="true"></span>'+
                                                        '</button>'+
                                                    '</h2>'+
                                                '</div>'+
                                            '<div id="form1">'+
                                                '<form>'+
                                                    '<div class="form-group">'+
                                                        '<label for="Username">Username:</label>'+
                                                        '<input type="Username" class="form-control" id="Username1" placeholder="用户名">'+
                                                        '</div>'+
                                                    '<div class="form-group">'+
                                                        '<label for="Password">Password:</label>'+
                                                        '<input type="Password" class="form-control" id="Password1" placeholder="密码">'+
                                                        '</div>'+
                                                        '<button type="submit" class="btn btn-default">立即注册！</button>'+
                                                    '</form>'+
                                                '</div>'+
                                            '</div>'+
                                        '</div>';
                    $("body").prepend(inputCode);
                    $("body").delegate("#closeBtn", "click", function(){ //将关闭按钮的点击事件委托给已经加载的body元素
                        $(".mask").remove();
                    });
                    /* $("#closeBtn").click(function(){                  //正常方式
                        $(".mask").remove();
                    }); */
                });
            });
        </script>

<body>

        <div id="pageContent">

            <a href="#" id="register">点我注册</a>

            <h1>Page Content...</h1>

        </div>

       

    </body>

 

<script>
            //鼠标移入移出事件:子元素的事件也会出发父元素的
            $().mouseover(function(){
                //do
            });
            $().mouseout(function(){
                //do
            });
            //不会发生事件冒泡
            $().mouseenter(function(){
                //do
            });
            $().mouseleave(function(){
                //do
            });
            //hover()封装了mouseenter()和mouseleave()
            $().hover(function(){
                //移入时:
            },function(){
                //移出时:
            });
        </script>

 

<script>
            //效果
            $().show(1000, function(){
                //动画执行完毕后调用
            });
            $().hide(1000, function(){
                //动画执行完毕后调用
            });
            $().toggle(1000, function(){
                //显示/隐藏
            });

            $().slideDown(1000, function(){
                //1秒完成向下滑动
            });
            $().slideUp(1000, function(){
                //1秒完成向上滑动
            });
            $().slideToggle(1000, function(){
                //1秒完成反向滑动
            });

            //淡入淡出
            $().fadeOut(1000, function(){
                //do
            });
            $().fadeIn(1000, function(){
                //do
            });
            $().fadeToggle(1000, function(){
                //do
            });
            $().fadeTo(1000, 0.5 ,function(){
                //do
            });

            $().stop().slideDown(1000).fadeOut(1000).fadeIn(1000);//动画的执行存在队列，一个执行完了才能开始下一个,并在动画开始之前调用stop增加健壮性
            
            $().animate({   //第一个参数内的所有属性会自动附加动画效果
                width: "+=100" //在原来的基础上累加100
                //width: "toggle" 宽度的有无的切换
                //width: "hide" 宽度隐藏
            }, 1000, "linear", function(){ //第三个参数:动画节奏
                //do
            }).delay(2000);
            $().stop(false, false);//立即停止当前动画并开始后续动画
            $().stop(true);//立即停止和后续所有动画
            $().stop(false, true);//立即完成当前动画并继续多有后续的动画
            $().stop(true, true);//立即完成当前的，并停止后续动画

            $().fadeTo(100, 1);//去除蒙版
            $().fadeTo(100, 0.5);//添加蒙版

            //关于深复制与浅复制
            $().clone(false);//浅复制:不会复制元素的事件
            $().clone(true);//深复制:会复制元素的事件


            </script>

 

下面是自己做的一个静态的菜单分级的Demo，带了点动画效果

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width,initial-scale=1">
        <title>jQuery</title>
        <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
        <!-- <link rel="stylesheet" type="text/css" href="bootstrap.min.css"> -->
        <script src="jquery-2.1.3.js"></script>
        <script src="bootstrap.min.js"></script>
        <style>
            *{
                margin: 0;
                padding: 0;
            }
            .nav{
                list-style: none;
                width: 300px;
                margin: 100px auto;
            }
            li{
                border: 1px solid #000;
                line-height: 35px; /* 设置元素占高 */
                border-bottom: none;
                text-indent: 2em; /* 元素内文字前空两个字符 */
            }
            .nav>li:last-child{
                border-bottom: 1px solid #000;
                border-bottom-left-radius: 5px;   
                border-bottom-right-radius: 5px;   /* 给最后一个<li>子元素添加左右圆角 */
            }
            .nav>li:first-child{
                border-top-left-radius: 5px;   
                border-top-right-radius: 5px;   /* 给第一个<li>子元素添加左右圆角 */
            }
            .nav>li>span{
                top: 5px;
                float: right;
                font-size: 24px;
            }
            .g2>li{
                background: darkorchid;
                list-style: none;
                border-bottom: 1px solid white;
            }
            #arrow{
                transform: rotate(90dep);
            }
        </style>
        <script>
            $(function(){
                $(".g2").hide();
                $(".g1").click(function(){
                    /* var content = '<li class="g2">二级菜单</li>'+
                                    '<li class="g2">二级菜单</li>'+
                                    '<li class="g2">二级菜单</li>'+
                                    '<li class="g2">二级菜单</li>';
                    if($(this).attr("active") == "true"){
                        $(this).removeAttr("active");
                        $(".g2").remove();
                        
                    }else{
                        $(this).after(content);
                        $(this).attr("active", "true");
                    } */
                    $(this).attr("id", "arrow");
                    $(this).siblings().children(".g2").slideUp(1000);
                    $(this).siblings().children(".g2").removeAttr("id");
                    $(this).children(".g2").slideDown(1000);
                        
                    
                });
                $("body").delegate(".g2>li", "mouseenter", function(){
                    $(this).css("background", "darkred");
                })
                $("body").delegate(".g2>li", "mouseleave", function(){
                    $(this).css("background", "darkorchid");
                })
                
            });
        </script>
    </head>

    <body>
        <ul class="nav">
            <li class="g1">一级菜单<span class="glyphicon glyphicon-option-vertical"></span>
                <ul class="g2">
                    <li>二级菜单</li>
                    <li>二级菜单</li>
                    <li>二级菜单</li>
                    <li>二级菜单</li>
                </ul>
            </li>
            <li class="g1">一级菜单<span class="glyphicon glyphicon-option-vertical"></span>
                <ul class="g2">
                    <li>二级菜单</li>
                    <li>二级菜单</li>
                    <li>二级菜单</li>
                    <li>二级菜单</li>
                </ul>
            </li>
            <li class="g1">一级菜单<span class="glyphicon glyphicon-option-vertical"></span>
                <ul class="g2">
                    <li>二级菜单</li>
                    <li>二级菜单</li>
                    <li>二级菜单</li>
                    <li>二级菜单</li>
                </ul>
            </li>
            <li class="g1">一级菜单<span class="glyphicon glyphicon-option-vertical"></span>
                <ul class="g2">
                    <li>二级菜单</li>
                    <li>二级菜单</li>
                    <li>二级菜单</li>
                    <li>二级菜单</li>
                </ul>
            </li>
            <li class="g1">一级菜单<span class="glyphicon glyphicon-option-vertical"></span>
                <ul class="g2">
                    <li>二级菜单</li>
                    <li>二级菜单</li>
                    <li>二级菜单</li>
                    <li>二级菜单</li>
                </ul>
            </li>
            <li class="g1">一级菜单<span class="glyphicon glyphicon-option-vertical"></span>
                <ul class="g2">
                    <li>二级菜单</li>
                    <li>二级菜单</li>
                    <li>二级菜单</li>
                    <li>二级菜单</li>
                </ul>
            </li>
        </ul>
    </body>
</html>