js 面试的坑

最新推荐文章于 2022-03-12 00:02:55 发布

置顶最骚的就是你

最新推荐文章于 2022-03-12 00:02:55 发布

阅读量2.9k

点赞数 3

CC 4.0 BY-SA版权

分类专栏： web前端学习文章标签：函数 javascript 面试笔试技巧

本文链接：https://blog.youkuaiyun.com/libin_1/article/details/51367103

web前端学习专栏收录该内容

301 篇文章

订阅专栏

本文介绍了两种手风琴效果的实现方法，并探讨了jQuery在网页开发中的应用技巧，包括解决sea.js引用jQuery的问题、判断页面滚动方向、理解回调函数及JavaScript继承等。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

手风琴效果2

参考文章：http://blog.youkuaiyun.com/libin_1/article/details/52489724

<!DOCTYPE html>
<html>

    <head>
        <meta charset="utf-8">
        <title>菜鸟教程(runoob.com)</title>
        <script type="text/javascript" src="js/jquery-2.1.4.js"></script>
        <style type="text/css">
            * {
                padding: 0px;
                margin: 0px;
            }

            p {
                height: 200px;
                background: green;
                line-height: 200px;
                color: red;
                font-size: 100px;
                display: none;
            }
        </style>
        <script>
            $(document).ready(function() {
                $("h1").click(function() {
                    $("p").eq($(this).index('.main')).slideToggle();
                });
            });
        </script>
    </head>

    <body>

        <h1 class="main">Coffee</h1>
        <p>哈哈哈哈哈哈哈</p>

        <h1 class="main">Milk</h1>
        <p>哈哈哈哈哈哈哈</p>

        <h1 class="main">Soda</h1>
        <p>哈哈哈哈哈哈哈</p>

    </body>

</html>

手风琴效果1

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title></title>
        <script src="js/jquery-1.12.4.js" type="text/javascript" charset="utf-8"></script>
        <style type="text/css">
            * {
                padding: 0px;
                margin: 0px;
            }
        </style>
        <script type="text/javascript">
            $(function() {
                $("p").click(function() {
                    $("div").slideToggle(1000);
                });
                $("ul").click(function() {
                    $("h1").slideToggle(1000);
                })
            })
        </script>
    </head>

    <body>
        <p style="padding: 10px 15px;background: #1685D3;cursor: pointer;">jquery 手风琴</p>
        <div style="width: 300px;height: 300px;border: 1px solid red;"></div>
        <ul style="padding: 10px 15px;background: #1685D3;cursor: pointer;">jquery 手风琴</ul>
        <h1 style="width: 300px;height: 300px;border: 1px solid red;">

        </h1>
    </body>

</html>

解决sea.js引用jQuery提示$ is not a function的问题

在使用sea.js的如下写法引用jQuery文件时，

//main.js
define(function(require,exports,module){
    var $ = require('jquery-3.1.0.min');
    $('#name').html('helloworld');
})
会报错，提示$ is not a function；



原因在于jQuery是默认支持AMD规范的，而sea.js是遵循CMD规范进行加载；这两种规范对外提供模块时的定义方法不一样：

复制代码
// CMD
define(function(require, exports, module) {
    var a = require('./a')
    a.doSomething()
    // 此处略去 100 行
    var b = require('./b') // 依赖可以就近书写
    b.doSomething()
    // ...
})

// AMD 默认推荐的是
define(['./a', './b'], function(a, b) { // 依赖必须一开始就写好
    a.doSomething()
    // 此处略去 100 行
    b.doSomething()
    // ...
})
复制代码
jQuery对外提供模块时默认支持的是AMD规范，其写法为：

if ( typeof define === "function" && define.amd ) {
    define( "jquery", [], function() {
        return jQuery;
    } );
}
因此，如果想让jQuery支持CMD规范，则将以上代码修改为如下代码即可：

if ( typeof define === "function") {
    define(function(require,exports,module){
        return jQuery;
    });
}
其区别就在于define方法支持规范的判断，以及参数类型的不同。

判断页面滚动方向（上下）

 <!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title></title>
        <style>
            body{
                height:1000px;
            }
        </style>
        <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
    </head>

    <body>
        <script type="text/javascript">
            $(function() {
                function scroll(fn) {
                    var beforeScrollTop = document.body.scrollTop,
                        fn = fn || function() {};
                    window.addEventListener("scroll", function() {
                        var afterScrollTop = document.body.scrollTop,
                            delta = afterScrollTop - beforeScrollTop;
                        if(delta === 0) return false;
                        fn(delta > 0 ? "down" : "up");
                        beforeScrollTop = afterScrollTop;
                    }, false);
                }
                scroll(function(direction) {
                    if(direction == "down") {
                        console.log("向下滚");
                    } else {
                        console.log("向上滚");
                    }
                });
            });
        </script>
    </body>

</html>

深入理解javascript 回调指针

<!doctype html>
<html lang="en">

    <head>
        <meta charset="UTF-8" />
        <title>Document</title>
        <script type="text/javascript">
            window.onload = function() {
                var i=0;
                function test() {
                    document.getElementById('main').innerHTML=i++;
                }
                setInterval(test, 1000);//注意此处是test，不是test();
            }
        </script>
    </head>

    <body>
        <p id="main"></p>
    </body>

</html>

去掉字符串中所有空格

这里写图片描述

1、  去掉字符串前后所有空格：
代码如下：
         function Trim(str)
         { 
             return str.replace(/(^\s*)|(\s*$)/g, ""); 
     }
    说明：
    如果使用jQuery直接使用$.trim(str)方法即可，str表示要去掉前后所有空格的字符串。

2、 去掉字符串中所有空格(包括中间空格,需要设置第2个参数为:g)
代码如下：
        function Trim(str,is_global)
        {
            var result;
            result = str.replace(/(^\s+)|(\s+$)/g,"");
            if(is_global.toLowerCase()=="g")
            {
                result = result.replace(/\s/g,"");
             }
            return result;
}

JS获取div距离浏览器窗口的高度（重要）

这里写图片描述

制作图片懒加载：http://www.cnblogs.com/libin-1/p/5851872.html

http://www.cnblogs.com/vajoy/p/4263291.html

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title></title>
        <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
        <style type="text/css">
            * {
                padding: 0px;
                margin: 0px;
            }

            #main {
                height: 2000px;
                background: red;
            }

            #java {
                height: 300px;
                background: blue;
            }
            #js{
                height: 300px;
                background: green;
            }
            #haha{
                height: 300px;
                background: yellow;
            }
        </style>
        <script type="text/javascript">
            $(function() {
                console.log('$("#java").offset().top : '+$("#java").offset().top);
                $("#java").offset({
                    top: 200
                });
                console.log('document.getElementById("js").getBoundingClientRect().top : '+document.getElementById('js').getBoundingClientRect().top);
                console.log('document.getElementById("js").getBoundingClientRect().bottom : '+document.getElementById('js').getBoundingClientRect().bottom);
            })
        </script>
    </head>

    <body>
        <div id="main">

        </div>
        <div id="java">

        </div>
        <div id="js">

        </div>
        <div id="haha">

        </div>
    </body>

</html>

点击div外面该div消失

http://www.cnblogs.com/libin-1/p/5746167.html

自定义a标签悬浮title样式

这里写图片描述

<!doctype html>
<html lang="en">

    <head>
        <meta charset="UTF-8" />
        <title>Document</title>
        <style>
            #tooltip {
                border: 1px solid red;
                background: #FF6;
                position: absolute;
                padding: 1px;
                color: #333;
                display: none;
            }
        </style>
        <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
    </head>

    <body>

        <div id="link">
            <p>
                <a href="#" class="tooltip" title="这是我的超链接提示1">提示1</a>
            </p>
            <p>
                <a href="#" class="tooltip" title="这是我的超链接提示2">提示2</a>
            </p>
            <p>
                <a href="#" title="这是我的超链接提示1">自带提示1</a>
            </p>
            <p>
                <a href="#" title="这是我的超链接提示2">自带提示2</a>
            </p>
        </div>
        <script type="text/javascript">
            $(function() {
                var x = 10;
                var y = 20;
                $("a.tooltip").mouseover(function(e) {
                    this.myTitle = this.title;
                    this.title = "";
                    var tooltip = "<div id='tooltip'>" + this.myTitle + "</div>"; //创建DIV元素
                    $("#link").append(tooltip); //追加到文档中
                    $("#tooltip").css({
                        "top": (e.pageY + y) + "px",
                        "left": (e.pageX + x) + "px"
                    }).show(); //设置X  Y坐标， 并且显示
                }).mouseout(function() {
                    this.title = this.myTitle;
                    $("#tooltip").remove(); //移除
                }).mousemove(function(e) {
                    $("#tooltip").css({
                        "top": (e.pageY + y) + "px",
                        "left": (e.pageX + x) + "px"
                    });
                })
            })
        </script>
    </body>

</html>

回调函数是什么鬼？

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title></title>
        <script type="text/javascript">
            function test(a, b, c) {
                setInterval(function() {
                    b(a);
                }, c)
            }
            test(10, function(i) {
                console.log(i);
            }, 2000);
        </script>
    </head>

    <body>
    </body>

</html>

js如何实现继承

http://blog.youkuaiyun.com/james521314/article/details/8645815

JS原型链简单图解

http://www.cnblogs.com/libin-1/p/5820550.html

http://blog.youkuaiyun.com/libin_1/article/details/52366524

http://www.cnblogs.com/myqianlan/p/4421950.html

http://www.cnblogs.com/shuiyi/p/5343399.html

http://www.cnblogs.com/shuiyi/p/5305435.html

this，都快忘了你了

这里写图片描述
参考：http://blog.youkuaiyun.com/libin_1/article/details/52337576
http://www.cnblogs.com/libin-1/p/5814792.html
http://www.cnblogs.com/beyond-succeed/p/5808290.html

 <!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title></title>

        <script type="text/javascript">
            var name = "window1",
                lzh = {
                    name: "lzh",
                    sayName: function() {
                        function innerFunction() {
                            console.log(_this.name);
                        }
                        var _this=this;
                        innerFunction();
                        return function() {
                            console.log(_this.name);
                        }
                    }
                }
            lzh.sayName()();
        </script>
        <script type="text/javascript">
            var name1 = "window2",
                lzh1 = {
                    name: "lzh",
                    sayName: function() {
                        function innerFunction() {
                            console.log(this.name);
                        }
                        innerFunction();
                        return function() {
                            console.log(this.name);
                        }
                    }
                }
            lzh1.sayName()();
        </script>
    </head>

    <body>
    </body>

</html>

prototype,都快忘了你了

<!DOCTYPE html>
<html>

    <head>
        <meta charset="utf-8" />
        <title></title>
        <script type="text/javascript">
            function LIBIN(a, b) {
                this.a = a;
                this.b = b;
                this.fun = function() {
                    alert('真是日了dog了');
                    sb();
                }
                sb = function() {
                    alert("卧槽！");
                }
            }
            LIBIN.prototype = {
                dianzan: function() {
                    alert("点赞");
                },
                budianzan: function() {
                    alert("拒绝点赞");
                }
            }
            var libin = new LIBIN('小明', 18);
            libin.dianzan();
            alert(libin.a + ":" + libin.b);
            libin.fun();
        </script>
    </head>

    <body>

    </body>

</html>

<!DOCTYPE html>
<html>

    <head>
        <meta charset="utf-8" />
        <title></title>
        <script type="text/javascript">
            function LIBIN(a, b) {
                this.a = a;
                this.b = b;
                this.fun = function() {
                    alert('真是日了dog了');
                    sb();
                }
                sb = function() {
                    alert("卧槽！");
                }
            };

            LIBIN.prototype = {
                sb:"是你",
                dianzan: function() {
                    alert("点赞");
                },
                budianzan: function() {
                    alert("拒绝点赞");
                }
            };
            LIBIN.prototype.x="zhangsan";
            LIBIN.prototype.saycao=function(){
                alert("卧槽");
            }
            var libin = new LIBIN('小明', 18);
            libin.dianzan();
            alert(libin.a + ":" + libin.b+":"+libin.x+":"+libin.sb);
            libin.fun();
            libin.saycao();
        </script>
    </head>

    <body>

    </body>

</html>

JavaScript和jQuery的类型判断

参考：http://www.cnblogs.com/likeFlyingFish/p/5840496.html

“`
对于类型的判断，JavaScript用typeof来进行。

栗子：

复制代码
console.log(typeof null); //object
console.log(typeof []); //object
console.log(typeof {}); //object
console.log(typeof new Date()); //object
console.log(typeof new Object); //object
console.log(typeof function(){}); //function
console.log(typeof alert); //function
console.log(typeof 1); //number
console.log(typeof “abc”); //string
console.log(typeof true); //boolean
复制代码
可以看到，typeof并不能够准确的判断出每一种数据类型，比如null和数组等都是object类型。因此，JavaScript判断数据类型不推荐使用typeof。

那么要如何具体判断呢？？看一下语法<(￣3￣)> !

{}.toString.call(obj);
栗子：

复制代码
console.log({}.toString.call(null)); //[object Null]
console.log({}.toString.call([])); //[object Array]
console.log({}.toString.call({})); //[object Object]
console.log({}.toString.call(new Date())); //[object Date]
console.log({}.toString.call(function(){})); //[object Function]
console.log({}.toString.call(new Object)); //[object Object]
console.log({}.toString.call(alert)); //[object Function]
console.log({}.toString.call(1)); //[object Number]
console.log({}.toString.call(‘abc’)); //[object String]
console.log({}.toString.call(true)); //[object Boolean]
复制代码
哈哈，是不是一目了然呀！！

那如果你用的是jQuery，就不用这么麻烦喽，可以直接用工具方法$.type()，进行判断

栗子：

console.log( $.type(nudl))1F ;2520%�� 7r��q��1}#4-3�0g[�`u�m13 o2��4 �(2�T23205r!%2V��*50-r"ŷ2�U�nu$ ,�154cW�F\9<ɪf<135”<,�kp��
7B@ (D�)��#B%2��:5v<)6t3w $��Q61��p$ ’p06j;�|(�ﻰ6q6”��6��4rt�
}�, ��