未加星标

js 面试的坑

字体大小 | |
[前端(javascript) 所属分类 前端(javascript) | 发布者 店小二03 | 时间 2016 | 作者 红领巾 ] 0人收藏点击收藏
javascript事件属性event.target
js 面试的坑
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">#main { width: 200px; height: 100px; background: red;}
</style>
<script type="text/javascript">window.onload = function() { document.getElementById("main").onclick = function(e) { console.log(e.target); console.log(e.target.id); console.log(e.target.tagName); console.log(e.target.nodeName); console.log(e.target.classList); console.log(e.target.className); console.log(e.target.innerHTML); console.log(e.target.innerText); }}
</script>
</head>
<body>
<div id="main" class="sb js node"><span>我爱JavaScript</span></div>
</body>
</html>
jquery检查元素存在性

javascript检查元素存在性:

即使这个元素被删除了,也不担心javascript代码报错;

jquery检查元素存在性:

代码如下:

if(!document.getElementById("preview")) return false;

jquery $(“#preview”)获取的永远是对象,即使网页上没有此元素。

不能使用以下代码:

if($("#preview"){
//do something
}

因此要用jquery检查某个元素在网页上是否存在时,应该根据获取到元素的长度来判断。

代码如下:

if($("#preview").length>0){
//do something
} 判断页面滚动方向(上下) <!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> 去掉字符串中所有空格
js 面试的坑
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距离浏览器窗口的高度(重要)
js 面试的坑
js 面试的坑
制作图片懒加载: 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样式
js 面试的坑
<!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.csdn.net/james521314/article/details/8645815 JS原型链简单图解 http://www.cnblogs.com/libin-1/p/5820550.html http://blog.csdn.net/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,都快忘了你了
js 面试的坑

参考: http://blog.csdn.net/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(null)); //null
console.log($.type([])); //array
console.log($.type({})); //object
console.log($.type(1)); //number
......不全写完了,结果和{}.toString.call(obj);是一样的
实际上{}.toString.call(obj);就是jQuery中$.type()这个工具方法的实现最重要的一段代码(⊙o⊙)哦,神奇吧!赶快去jQuery源码中找找看吧~~
如果哪里写的有问题,欢迎各路大神指正!
js 面试的坑
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">div { width: 200px; height: 200px; border: 3px solid red; padding: 17px; margin: 16px; color: blue;}
</style>
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<script type="text/javascript">$(function() { console.log("width:" + $("div").width()); console.log("width+padding:" + $("div").innerWidth()); console.log("width+padding+border:" + $("div").outerWidth()); console.log("width+padding+border+margin:" + $("div").outerWidth(true));})
</script>
</head>
<body>
<div><p>width: 200px;</p><p> height: 200px;</p><p> border: 3px solid red;</p><p> padding: 17px;</p><p> margin: 16px;</p>
</div>
</body>
</html> 像素转为整数
js 面试的坑
禁止用户输入非数字 <input type="text" placeholder="只能输入数字" onkeyup="this.value = this.value.replace(/\D/,'')" > window.onload的jQuery写法 window.onload=function(){} === 或者$(window).load(function(){}); js判断终端是PC还是移动端 function IsPC() {
var userAgentInfo = navigator.userAgent;
var Agents = new Array("Android", "iPhone", "SymbianOS", "windows Phone", "iPad", "iPod");
var flag = true;
for (var v = 0; v < Agents.length; v++) {
if (userAgentInfo.indexOf(Agents[v]) > 0) { flag = false; break; }
}
return flag; } 最简单的排序 <script type="text/javascript">var a = [1, 18, 23, 9, 16, 10, 29, 17];var t = 0;for(var i = 0; i < a.length; i++) { for(var j = i + 1; j < a.length; j++) { if(a[i] > a[j]) { t = a[i]; a[i] = a[j]; a[j] = t; } }}console.log(a); //[1, 9, 10, 16, 17, 18, 23, 29]
</script> 判断终端类型跳转 <!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Document</title>
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<script type="text/javascript">if(/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent)) {   window.location.href = "http://www.baidu.com";} else { window.location.href = "https://wx.qq.com/";}
</script>
</head>
<body>
</body>
</html> 深入理解JavaScript中 fn() 和 return fn() 的区别

在 js 中,经常会遇到在函数里调用其它函数的情况,这时候会有 fn() 这种调用方式,还有一种是 return fn() 这种调用方式,一些初学者经常会一脸萌逼地被这两种方式给绕晕了。这里用一个优雅的面试题来分析一下两种方式的不同之处。

var i = 0;
function fn(){
i++;
if(i < 10){
fn();
}else{
return i;
}
}
var result = fn();
console.log(result);

这是一道隐藏了坑的面试题,看似很简单,大部分人可能想都不想就答出了10。而实际上运行可知打印出来的是 undefined。这道陷阱题很直观的体现出了前面所说的问题,当我们将执行fn的那一行修改为:

var i = 0;
function fn(){
i++;
if(i < 10){
return fn();
}else{
return i;
}
}
var result = fn();
console.log(result);

这时,会发现打印出来的结果终于不负众望的是 10 了。

为什么这里加不加return区别会这么大?

这里的主要原因很简单,JavaScript的函数都是有默认返回值的,如果函数结尾不写return,会默认返回undefined,这就是为什么在chrome的console控制台里,写代码经常下面会出现一行undefined的原因。

再仔细看看这个例子,当i自增到9的时候,也就是倒数第二次递归调用fn的那一次,如果没有return,这一次执行完fn,会默认return undefined,而不会继续下一次递归了。当加上了 return,在这里则会继续最后一次递归,即i=10的时候,跳入else里面返回得到正确的10。

说到这里,可以引申出一个更为经典的例子,著名的二分查

var midMath.floor((arr.length - 1) / 2);
function search(n, mid) {
if (n > arr[mid]) {
mid = Math.floor((mid + arr.length) / 2);
return search(n, mid);
} else if (n < arr[mid]) {
mid = Math.floor((mid - 1) / 2);
return search(n, mid);
} else {
return mid;
}
}
var index = search(n, mid);
console.log(index);

也是需要多次递归调用,很多新手在第一次实现这个算法的时候经常会犯的一个错误就是忘记在递归的函数前加上return,最后导致返回结果是undefined,这里的道理也和前面是类似的,不加return,会导致递归后,直接返回undefined,不会继续下一次递归。

localStorage使用很简单
js 面试的坑
js 面试的坑
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Document</title>
<script type="text/javascript">window.onload = function() { window.localStorage.clear(); //清除所有的变量和值 window.localStorage.a = 100; window.localStorage["b"] = 200; window.localStorage.setItem("c", 300);; console.log("window.localStorage.a=" + window.localStorage.a); console.log("window.localStorage['b']=" + window.localStorage["b"]); console.log("window.localStorage.getItem('c')=" + window.localStorage.getItem("c")); console.log(window.localStorage); console.log(typeof window.localStorage); for (var i = 0; i < window.localStorage.length; i++) { var key1 = window.localStorage.key(i); var key2 = window.localStorage.getItem(key1); console.log("字段名:" + key1 + " 值:" + key2); } console.log(typeof window.localStorage.a); console.log(typeof window.localStorage['b']); console.log(typeof window.localStorage.getItem('c')); console.log("空了:" + window.localStorage); window.localStorage.SB = "我是你大爷!"; window.localStorage.aaa = "this is test!"; window.localStorage.removeItem("aaa"); console.log("-------------------------------------------------"); var storage = window.localStorage; var data = { name: 'xiecanyong', sex: 'man', hobby: 'program' }; var d = JSON.stringify(data); console.log(typeof d); storage.setItem("data", d); console.log(storage.data); var json = storage.getItem("data"); var jsonObj = JSON.parse(json); console.log(typeof jsonObj); console.log(storage.data);}
</script>
</head>
<body>
</body>
</html> 注意
js 面试的坑
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<script type="text/javascript">"use strict";var B = { "name": "SBSBSBS", "age": "32", say: function() { console.log("不加this可能会报错:"+this.name+":"+this.age); }}B.say();var name="我是你大爷";function USR(name) { this.name = name; this.say = function() { console.log("window下的: " + window.name); console.log("USR 里面的:" + this.name); }};var a = new USR("我是谁?");a.say();
</script>
<style type="text/css">* { margin: 0px; padding: 0px;}div { width: 50%; height: 200px;}.demo { float: left; background: red;}.main { float: right; background: green;}
</style>
</head>
<div class="demo">
</div>
<div class="main">
</div>
<body>
</body>
</html> 深入理解变量提升和函数提升
js 面试的坑
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Document</title>
<script type="text/javascript">console.log(x());console.log(x);var x = 10;console.log(x);x = 20;function x() { var a = new Array();}console.log(x);if (true) { var a = 1;} else { var b = true;}console.log(a);console.log(b);
</script>
</head>
<body>
</body>
</html> constructor 和 instanceof
js 面试的坑
instanceof 用于判断一个变量是否某个对象的实例,或用于判断一个变量是否某个对象的实例; constructor 用于判断一个变量的原型,constructor 属性返回对创建此对象的数组函数的引用。 Javascript中对象的prototype属性的解释是:返回对象类型原型的引用。 <!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script type="text/javascript">console.log("----------------Number---------------");var A = 123;console.log(A instanceof Number); //falseconsole.log(A.constructor == Number); //trueconsole.log(A.constructor);console.log("----------------String---------------");var B = "javascript";console.log(B instanceof String); //falseconsole.log(B.constructor == String); //trueconsole.log(B.constructor);console.log("----------------Boolean---------------");var C = true;console.log(C instanceof Boolean); //falseconsole.log(C.constructor == Boolean); //trueconsole.log(C.constructor);console.log("----------------null---------------");var D = null;console.log(D instanceof Object); //false//console.log(D.constructor == null); //报错//console.log(D.constructor); //报错console.log("----------------undefined---------------");var E = undefined;//console.log(E instanceof undefined); // //报错//console.log(E.constructor == undefined); //报错//console.log(E.constructor); //报错console.log("----------------function---------------");var F = function() {};console.log(F instanceof Function);console.log(F.constructor == Function);console.log(F.constructor);console.log("----------------new function---------------");function SB() {};var G = new SB();console.log(G instanceof SB);console.log(G.constructor == SB);console.log(G.constructor);console.log("----------------new Object---------------");var H = new Object;console.log(H instanceof Object);console.log(H.constructor == Object);console.log(H.constructor);console.log("-----------------Array--------------");var I = [];console.log(I instanceof Array);console.log(I.constructor == Array);console.log(I.constructor);console.log("-----------------JSON--------------");var J = { "sb": "javascript", "node": "very SB"};console.log(J instanceof Object);console.log(J.constructor == Object);console.log(J.constructor);
</script>
</head>
<body>
</body>
</html> <!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script type="text/javascript">var A = new Array();var B = new Boolean();console.log(A instanceof Array); // trueconsole.log(A instanceof Boolean); // falseconsole.log(B.constructor == Array); // falseconsole.log(B.constructor == Boolean); // true
</script>
</head>
<body>
</body>
</html> <!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script type="text/javascript">function sb(name, age) { this.name = name; this.age = age; this.sbs = function() { console.log(this.name + "," + this.age); }}var A = new Array();var B = new Boolean();var C=new sb("libin",28);document.writeln(A.constructor + "<br />"); //function Array() { [native code] }document.writeln(B.constructor + "<br />"); //function Boolean() { [native code] }document.writeln(C.constructor + "<br />"); //function sb(name, age) { this.name = name; this.age = age; this.sbs = function() { console.log(this.name + "," + this.age); } }C.name="李斌";C.sbs(); //李斌,28
</script>
</head>
<body>
</body>
</html> 注意 <!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript">function aaa(){ alert(a); //报错:a is not defined}function bbb(){ var a=10; aaa();}bbb();
</script>
</head>
<body>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript">var a=100;function aaa(){ alert(a); //100}function bbb(){ var a=10; aaa();}bbb();
</script>
</head>
<body>
</body>
</html>
数组去重 <!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Document</title>
<script type="text/javascript">var a = [1, 2, 5, 5, 7, 9];Array.prototype.unique = function() { var b = []; for (var i = 0; i < this.length; i++) { if (b.indexOf(this[i]) == -1) { b.push(this[i]); } } return b;}document.writeln(a.unique());
</script>
</head>
<body>
</body>
</html> 可恶的forEach
js 面试的坑
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Document</title>
<script type="text/javascript">var a = ["a", "b", "c", "d", "e"];a.forEach(function(i, j) { //注意参数i,j对应关系相反 console.log(i + ":" + j); //妈的个巴子,j居然是索引})
</script>
</head>
<body>
</body>
</html> call 和 apply 是为了动态改变 this 而出现的
js 面试的坑
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Document</title>
<script type="text/javascript">
//apply 、 call 、bind 三者都是用来改变函数的this对象的指向的;
//apply 、 call 、bind 三者第一个参数都是this要指向的对象,也就是想指定的上下文;
//apply 、 call 、bind 三者都可以利用后续参数传参;
//bind 是返回对应函数,便于稍后调用;apply 、call 则是立即调用 。var xw = { name: "小王", gender: "男", age: 24, say: function(school, grade) { console.log(this.name + " , " + this.gender + " ,今年" + this.age + " ,在" + school + "上" + grade); }}var xh = { name: "小红", gender: "女", age: 18}xw.say("清华大学","本科");xw.say.call(xh,"北京大学","研究僧"); //call后面的参数与say方法中是一一对应的xw.say.apply(xh,["新东方","电气焊"]); //而apply的第二个参数是一个数组,数组中的元素是和say方法中一一对应的xw.say.bind(xh)("蓝翔技校","挖掘机"); //bind返回的仍然是一个函数,所以我们还可以在调用的时候再进行传参
</script>
</head>
<body>
</body>
</html> js计算div 宽高等(面试常问)
js 面试的坑
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Document</title>
<style type="text/css">* { padding: 0px; margin: 0px;}#main { width: 200px; height: 300px; padding: 3px; margin: 7px; background: green; border: 5px solid red; position: absolute; top: 100px; left: 200px;}span{ color: red;}
</style>
<script type="text/javascript">function G(a) { return document.getElementById(a);}window.onload = function() { document.onmousemove = function(e) { document.getElementsByTagName('span')[0].innerText = e.clientX + "," + e.clientY; }; G("main").onmousemove = function(e) { document.getElementsByTagName('span')[1].innerText = e.offsetX + "," + e.offsetY; } console.log("屏幕宽高:" + window.screen.width+","+window.screen.height); console.log("body宽高:" +document.body.clientWidth +","+ document.body.clientHeight); console.log("offsetWidth包含width,padding,border:" + G('main').offsetWidth); console.log("offsetHeight包含height,padding,border:" + G('main').offsetHeight); console.log("offsetTop包含top,margin:" + G('main').offsetTop); console.log("offsetLeft包含left,margin:" + G('main').offsetLeft);}
</script>
</head>
<body>
<div id="main">
</div>
<p>相对窗口的座标:e.clientX,e.clientY:(<span>0,0</span>)</p>
<p>相对容器的坐标:e.offsetX,e.offsetY:(<span>0,0</span>)</p>
</body>
</html>

本文前端(javascript)相关术语:javascript是什么意思 javascript下载 javascript权威指南 javascript基础教程 javascript 正则表达式 javascript设计模式 javascript高级程序设计 精通javascript javascript教程

主题: JavaJavaScriptjQueryUTAndroidiPhoneiPadiPodHTML算法
分页:12
转载请注明
本文标题:js 面试的坑
本站链接:http://www.codesec.net/view/483325.html
分享请点击:


1.凡CodeSecTeam转载的文章,均出自其它媒体或其他官网介绍,目的在于传递更多的信息,并不代表本站赞同其观点和其真实性负责;
2.转载的文章仅代表原创作者观点,与本站无关。其原创性以及文中陈述文字和内容未经本站证实,本站对该文以及其中全部或者部分内容、文字的真实性、完整性、及时性,不作出任何保证或承若;
3.如本站转载稿涉及版权等问题,请作者及时联系本站,我们会及时处理。
登录后可拥有收藏文章、关注作者等权限...
技术大类 技术大类 | 前端(javascript) | 评论(0) | 阅读(30)