<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<script type="text/javascript">
var person={
name:'jerry',
height:'177'
};
document.write(person.hasOwnProperty('name'));
</script>
</body>
</html>
- 9月 17 週日 201700:52
物件是否含有某屬性，hasOwnProperty
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<script type="text/javascript">
var person={
name:'jerry',
height:'177'
};
document.write(person.hasOwnProperty('name'));
</script>
</body>
</html>
- 9月 17 週日 201700:52
物件是否含有某屬性，hasOwnProperty
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<script type="text/javascript">
var person={
name:'jerry',
height:'177'
};
document.write(person.hasOwnProperty('name'));
</script>
</body>
</html>
- 9月 16 週六 201721:33
自己做一個燈箱函式，輸入一個物件含有內容、寬高屬性，即可產生
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<style type="text/css">
*{
margin: 0;
padding: 0;
list-style:none;
}
body{
height: 100vh;
position: relative;
padding: 20px;
box-sizing: border-box;
}
.newBox{
position: fixed;
border: 1px solid #aaa;
text-align: center;
padding: 10px;
box-sizing: border-box;
}
</style>
</head>
<body>
<button id="btn">按我</button>
<div id="lightbox">
<img src="https://api.fnkr.net/testimg/100x100/a00/FFF/?text=LightBox">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Blanditiis, pariatur! Alias aspernatur, animi adipisci amet similique ipsam, incidunt laborum totam!</p>
</div>
<script type="text/javascript"> //定義
var myFunction=(function(){
//加錢字號避免撞名
var $window = $(window);
var $newBox=$('<div class="newBox"></div>');
var $newContent=$('<div class="newBoxContent"></div>');
var $newClose=$('<button class="newBoxClose">關掉</button>');
$newBox.append($newContent,$newClose);//一次加兩個孩子
$newClose.on('click',function(){
myFunction.close();
});
return{
center:function(){
//從兩數中選比較高者（避免負數） //含外距
var dtop = Math.max($window.height()-$newBox.outerHeight(),0)/2;
var dleft = Math.max($window.width()-$newBox.outerWidth(),0)/2;
$newBox.css({
top:dtop+$window.scrollTop(),
left:dleft+$window.scrollLeft()
});
},
open:function(data){
//刪掉所有兒子 //加上執行時輸入的物件的content屬性
$newContent.empty().append(data.content);
$newBox.css({
width:data.width || 'auto', //執行時沒輸入就代入auto
height:data.height || 'auto'
}).appendTo('body'); //當body的最後一個新兒子
myFunction.center(); //若resize事件發生，就執行剛剛定義好的center方法
$window.on('resize',myFunction.center);
},
close:function(){
$newContent.empty();
$newBox.detach();
$window.off('resize',myFunction.center);//監聽器關掉
}
}
}());
</script>
<script type="text/javascript"> //執行
(function(){
var $newContent=$('#lightbox').detach();
$('#btn').on('click',function(){
myFunction.open({
content:$newContent,
width:340,
height:300
})
});
}());
</script>
</body>
</html>
- 9月 16 週六 201721:33
自己做一個燈箱函式，輸入一個物件含有內容、寬高屬性，即可產生
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<style type="text/css">
*{
margin: 0;
padding: 0;
list-style:none;
}
body{
height: 100vh;
position: relative;
padding: 20px;
box-sizing: border-box;
}
.newBox{
position: fixed;
border: 1px solid #aaa;
text-align: center;
padding: 10px;
box-sizing: border-box;
}
</style>
</head>
<body>
<button id="btn">按我</button>
<div id="lightbox">
<img src="https://api.fnkr.net/testimg/100x100/a00/FFF/?text=LightBox">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Blanditiis, pariatur! Alias aspernatur, animi adipisci amet similique ipsam, incidunt laborum totam!</p>
</div>
<script type="text/javascript"> //定義
var myFunction=(function(){
//加錢字號避免撞名
var $window = $(window);
var $newBox=$('<div class="newBox"></div>');
var $newContent=$('<div class="newBoxContent"></div>');
var $newClose=$('<button class="newBoxClose">關掉</button>');
$newBox.append($newContent,$newClose);//一次加兩個孩子
$newClose.on('click',function(){
myFunction.close();
});
return{
center:function(){
//從兩數中選比較高者（避免負數） //含外距
var dtop = Math.max($window.height()-$newBox.outerHeight(),0)/2;
var dleft = Math.max($window.width()-$newBox.outerWidth(),0)/2;
$newBox.css({
top:dtop+$window.scrollTop(),
left:dleft+$window.scrollLeft()
});
},
open:function(data){
//刪掉所有兒子 //加上執行時輸入的物件的content屬性
$newContent.empty().append(data.content);
$newBox.css({
width:data.width || 'auto', //執行時沒輸入就代入auto
height:data.height || 'auto'
}).appendTo('body'); //當body的最後一個新兒子
myFunction.center(); //若resize事件發生，就執行剛剛定義好的center方法
$window.on('resize',myFunction.center);
},
close:function(){
$newContent.empty();
$newBox.detach();
$window.off('resize',myFunction.center);//監聽器關掉
}
}
}());
</script>
<script type="text/javascript"> //執行
(function(){
var $newContent=$('#lightbox').detach();
$('#btn').on('click',function(){
myFunction.open({
content:$newContent,
width:340,
height:300
})
});
}());
</script>
</body>
</html>
- 9月 16 週六 201718:45
匿名函式與立即函式，不取名直接執行
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
span{
color: #a00;
}
</style>
</head>
<body>
<h2>greet1：<span id="greet1"></span></h2>
<h2>greet1.language：<span id="greet1_lan"></span></h2>
<h2>greet2：<span id="greet2"></span></h2>
<h2>greet3：<span id="greet3"></span></h2>
<h2>greet4：<span id="greet4"></span></h2>
<script type="text/javascript">
/*函式也是物件，可以定義屬性*/
function greet1(name){
document.getElementById('greet1').innerHTML='Hi '+name;
}
greet1('john');
greet1.language='English';
document.getElementById('greet1_lan').innerHTML=greet1.language;
/*匿名函式*/
var greet2=function(name){
document.getElementById('greet2').innerHTML='Hi '+name;
}
greet2('mike');
/*直接執行匿名函式*/
var greet3=function(name){
document.getElementById('greet3').innerHTML='Hi '+name;
}('peter');
/*直接執行匿名函式並不幫函式命名*/
(function(name){
document.getElementById('greet4').innerHTML='Hi '+name;
}('frank'));
</script>
</body>
</html>
- 9月 16 週六 201718:45
匿名函式與立即函式，不取名直接執行
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
span{
color: #a00;
}
</style>
</head>
<body>
<h2>greet1：<span id="greet1"></span></h2>
<h2>greet1.language：<span id="greet1_lan"></span></h2>
<h2>greet2：<span id="greet2"></span></h2>
<h2>greet3：<span id="greet3"></span></h2>
<h2>greet4：<span id="greet4"></span></h2>
<script type="text/javascript">
/*函式也是物件，可以定義屬性*/
function greet1(name){
document.getElementById('greet1').innerHTML='Hi '+name;
}
greet1('john');
greet1.language='English';
document.getElementById('greet1_lan').innerHTML=greet1.language;
/*匿名函式*/
var greet2=function(name){
document.getElementById('greet2').innerHTML='Hi '+name;
}
greet2('mike');
/*直接執行匿名函式*/
var greet3=function(name){
document.getElementById('greet3').innerHTML='Hi '+name;
}('peter');
/*直接執行匿名函式並不幫函式命名*/
(function(name){
document.getElementById('greet4').innerHTML='Hi '+name;
}('frank'));
</script>
</body>
</html>
- 9月 16 週六 201701:01
jQuery製作頁籤，在href放入id選擇器，this.hash取出href值
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<style type="text/css">
.tab-list li{
display: inline-block;
}
.tab-list li a{
display: block;
padding: 3px 10px;
}
.tab-panel{
display: none;
}
.tab-panel.active{
display: block;
}
</style>
</head>
<body>
<section class="page">
<div class="tabs">
<ul class="tab-list">
<li class="active">
<a href="#tab-1" class="tab-control">
<h3>第一籤</h3>
</a>
</li>
<li>
<a href="#tab-2" class="tab-control">
<h3>第二籤</h3>
</a>
</li>
<li>
<a href="#tab-3" class="tab-control">
<h3>第三籤</h3>
</a>
</li>
</ul>
<div class="tab-panel active" id="tab-1">
<p>第一籤內容 Lorem ipsum dolor sit amet, consectetur adipisicing elit. Magni porro provident aliquam modi nemo officiis, qui obcaecati autem numquam nihil.</p>
</div>
<div class="tab-panel" id="tab-2">
<p>第二籤內容 Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reprehenderit sunt laudantium tenetur distinctio dolorum illum necessitatibus iure voluptas ipsam error.</p>
</div>
<div class="tab-panel" id="tab-3">
<p>第三籤內容 Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolores consequatur facilis beatae ex dolore et velit omnis repellat quidem sunt!</p>
</div>
</div>
</section>
<script type="text/javascript">
/*類似迴圈效果*/
$('.tab-list').each(function(){
var tab = $(this).find('li.active');
var link = tab.find('a');
var panel = $(link.attr('href'));
/*#tab-1（又是href的屬性值，又是jQ的id選取方法）*/
$(this).on('click','.tab-control',function(e){
e.preventDefault();
var link2=$(this);
var id = this.hash;/*#tab-1、#tab-2...*/
/*id一定存在，所以是true*/
/*不是正在顯示的，被按下去的a，沒有active這個class，所以!false就是true*/
if(id && !link2.is('.active')){
panel.removeClass('active');/*div#tab-1拿掉*/
tab.removeClass('active');/*li拿掉*/
panel=$(id).addClass('active');/*被按下去的那一個div#tab-?*/
tab=link2.parent().addClass('active');/*被按下去的那一個a的爸爸li*/
}
})
});
</script>
</body>
</html>
- 9月 16 週六 201701:01
jQuery製作頁籤，在href放入id選擇器，this.hash取出href值
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<style type="text/css">
.tab-list li{
display: inline-block;
}
.tab-list li a{
display: block;
padding: 3px 10px;
}
.tab-panel{
display: none;
}
.tab-panel.active{
display: block;
}
</style>
</head>
<body>
<section class="page">
<div class="tabs">
<ul class="tab-list">
<li class="active">
<a href="#tab-1" class="tab-control">
<h3>第一籤</h3>
</a>
</li>
<li>
<a href="#tab-2" class="tab-control">
<h3>第二籤</h3>
</a>
</li>
<li>
<a href="#tab-3" class="tab-control">
<h3>第三籤</h3>
</a>
</li>
</ul>
<div class="tab-panel active" id="tab-1">
<p>第一籤內容 Lorem ipsum dolor sit amet, consectetur adipisicing elit. Magni porro provident aliquam modi nemo officiis, qui obcaecati autem numquam nihil.</p>
</div>
<div class="tab-panel" id="tab-2">
<p>第二籤內容 Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reprehenderit sunt laudantium tenetur distinctio dolorum illum necessitatibus iure voluptas ipsam error.</p>
</div>
<div class="tab-panel" id="tab-3">
<p>第三籤內容 Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolores consequatur facilis beatae ex dolore et velit omnis repellat quidem sunt!</p>
</div>
</div>
</section>
<script type="text/javascript">
/*類似迴圈效果*/
$('.tab-list').each(function(){
var tab = $(this).find('li.active');
var link = tab.find('a');
var panel = $(link.attr('href'));
/*#tab-1（又是href的屬性值，又是jQ的id選取方法）*/
$(this).on('click','.tab-control',function(e){
e.preventDefault();
var link2=$(this);
var id = this.hash;/*#tab-1、#tab-2...*/
/*id一定存在，所以是true*/
/*不是正在顯示的，被按下去的a，沒有active這個class，所以!false就是true*/
if(id && !link2.is('.active')){
panel.removeClass('active');/*div#tab-1拿掉*/
tab.removeClass('active');/*li拿掉*/
panel=$(id).addClass('active');/*被按下去的那一個div#tab-?*/
tab=link2.parent().addClass('active');/*被按下去的那一個a的爸爸li*/
}
})
});
</script>
</body>
</html>
伺服器架設 (1)