/**
* * ~~~~~~~
* 1. JS
*/
//1.1
[] == ![]; // 输出==>false
//1.2
var a = function( k ) { return false; };
a() && [] == ![]; // 输出==>true
//1.3
var k = true;
var a = function( k ){
var k = k && true;
return k;
};
a() && [] == ![]; // 输出==>undefined
//1.4
/**
* 在不动1.3的原有代码情况下,
* 使其 a() && [] == ![] 输出我们想要的答案
*/
var k = true;
var a = function( k ){
var k = k && true;
return k;
};
在这个区域输入什么代码,使其下列输出正常值
a(k) && [] == ![];
将k作为参数传递到a函数中则返回true
//1.5
var arr = [ 1, 2 ];
arr.b = “123”;
arr.toString(); // 输出==> 1,2
//1.6
var o = {
a : 2,
b : function(){
this.a = 3;
(function(){
alert( this.a ); // 输出==>第一次运行是undefined,第二就是4,因为这里的this对象指向的window对象
this.a = 4;
})();
alert( this.a ); // 输出==>3
return { d : o.a + 3 };
}
};
o.b();
o.b.d; // 输出==>undefined,因为o.b返回的b函数的定义。正确是o.b().d。只有o.b()这个函数执行之后返回的对象中存在d这个属性
//1.7
var i = 1, j = m = 0;
function a ( k ){
return k = k + 1;
}
j = a( i );
function a ( k ){
return k = k + 3;
}
m = a ( i );
j //输出==> 4
m //输出==> 4
函数声明会提前执行,函数表达式则按顺序执行。前者代码执行之前(解释期)被加载到作用域中,后者则需在代码执行时(运行期)加载
//1.8 alert 结果
alert( typeof a);
function a(){
alert( “a.function” );
}
var a = “a.string”;
alert( a );
Function
-
String
原因:如上
//1.9 alert 结果
var o = {
a : function(){
alert ( this.c );
},
c : ” Hunteron ”
};
( f = o.a )();
Undefined,需要输出”Hunteron “,应该将this改为o。因为o.a的函数定义赋值给全局变了f,然后由window对象来调用这个表达式所以this指向的则是window对象。
/* ~~~~~~~
* 2. CSS
*/
// 2.1 要求只用下列HTML标签写出邮件附件图片效果
// 要求:
// 1. chrome22+, ff3+ 正常显示
// 2. 不能在HTML标签里添加任何选择器
// 3. 格内文字垂直,水平居中
// 4. 不能使用JS
/**
<html>
<body>
<div>
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5.0</div>
<div>6</div>
<div>7</div>
<div>8</div>
<div>9</div>
</div>
</body>
</html>
*/
<!DOCTYPE html>
<!–需要加上文档声明否则部分css会实效–>
<html>
<head>
<style type=”text/css”>
*{
margin: 0;
padding: 0
}
body div{
width:165px;
height:165px;
border: 10px solid #ccc;
}
div div{
width: 50px;
height: 50px;
border: 5px solid blue;
margin: 0 -5px -5px 0;
float: left;
position: relative;
z-index: 0;
text-align: center;
line-height: 50px;
cursor: pointer;
}
div div:hover{
z-index: 1;
border-color: red;
}
</style>
</head>
<body>
<div>
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5.0</div>
<div>6</div>
<div>7</div>
<div>8</div>
<div>9</div>
</div>
</body>
</html>
//2.2 同样邮件附件图片效果
//要求:
//1. 可以自定义HTML标签
//2. 可以添加任何选择器
//3. 兼容所有常见浏览器,IE6~10,Chrome,FF,Oprea,safari 等
//4. 不能使用JS
<!DOCTYPE html>
<!–需要加上文档声明否则部分css会实效–>
<html>
<head>
<style type=”text/css”>
*{
margin: 0;
padding: 0
}
ul{
width:165px;
height:165px;
border: 10px solid #ccc;
}
ul li{
width: 50px;
height: 50px;
border: 5px solid blue;
margin: 0 -5px -5px 0;
float: left;
position: relative;
z-index: 0;
text-align: center;
line-height: 50px;
cursor: pointer;
list-style-type:none;
}
ul li:hover{
z-index: 1;
border-color: red;
}
</style>
</head>
<body>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5.0</li>
<li>6</li>
<li>7</li>
<li>8</li>
<li>9</li>
</ui>
</body>
</html>
//2.3
//要求:
//1. 同2.1
//2. 可以使用JS
//3. 兼容所有常见浏览器,IE6~10,Chrome,FF,Oprea,safari 等
<!DOCTYPE html>
<!–需要加上文档声明否则部分css会实效–>
<html>
<head>
<style tyle=”text/css”>
body div{
width:165px;
height:165px;
border: 10px solid #ccc;
}
div div{
width: 50px;
height: 50px;
border: 5px solid blue;
margin: 0 -5px -5px 0;
float: left;
position: relative;
z-index: 0;
text-align: center;
line-height: 50px;
cursor: pointer;
}
.mark{
z-index: 1;
border-color: red;
}
</style>
<script type=”text/javascript” src=”jquery.min.js”></script>
<script type=”text/javascript”>
$(document).ready(function(){
$(“div div”).each(function(){
$(this).on(“mouseover”,function(){
$(this).addClass(“mark”);
}).on(“mouseout”,function(){
$(this).removeClass(“mark”);
})
})
})
</script>
</head>
<body>
<div>
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5.0</div>
<div>6</div>
<div>7</div>
<div>8</div>
<div>9</div>
</div>
</body>
</html>