PIXNET Logo登入

Bug倉庫 // 程式日記

跳到主文

Bug倉庫 // 程式日記已經搬家到 https://bugswarehouse.blogspot.tw/ 了喔

部落格全站分類：數位生活

  • 相簿
  • 部落格
  • 留言
  • 名片
  • 9月 07 週四 201720:37

  • 色碼記憶法

錄製_2017_09_07_20_35_05_57.gif

(繼續閱讀...)
文章標籤

Jerry 發表在 痞客邦 留言(0) 人氣(8)

  • 個人分類：CSS工具
▲top
  • 9月 07 週四 201720:37

  • 色碼記憶法

錄製_2017_09_07_20_35_05_57.gif

(繼續閱讀...)
文章標籤

Jerry 發表在 痞客邦 留言(0) 人氣(0)

  • 個人分類：CSS工具
▲top
  • 9月 07 週四 201714:50

  • 過濾器filter、is、has、:text選取器


<!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">
li{
width: 300px;
padding: 20px;
background-color: #eee;
list-style: none;
margin: 10px;
}
</style>
</head>
<body>
<ul>
<li class="one"><span>1</span></li>
<li class="two">2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
<script type="text/javascript">
$('li').filter(':last').css('background-color','#00f');
$('li').each(function(){
$(this).has('span').css('background-color','#0f0');
/*不會傳回布林值*/
if($(this).is('.two')){
$(this).css('background-color','#f00');
}
});
</script>
</body>
</html>
(繼續閱讀...)
文章標籤

Jerry 發表在 痞客邦 留言(0) 人氣(0)

  • 個人分類：jQuery
▲top
  • 9月 07 週四 201714:50

  • 過濾器filter、is、has、:text選取器


<!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">
li{
width: 300px;
padding: 20px;
background-color: #eee;
list-style: none;
margin: 10px;
}
</style>
</head>
<body>
<ul>
<li class="one"><span>1</span></li>
<li class="two">2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
<script type="text/javascript">
$('li').filter(':last').css('background-color','#00f');
$('li').each(function(){
$(this).has('span').css('background-color','#0f0');
/*不會傳回布林值*/
if($(this).is('.two')){
$(this).css('background-color','#f00');
}
});
</script>
</body>
</html>
(繼續閱讀...)
文章標籤

Jerry 發表在 痞客邦 留言(0) 人氣(12)

  • 個人分類：jQuery
▲top
  • 9月 07 週四 201714:30

  • find、closest、parent、parents、siblings、next、nextAll、prev、prevAll等DOM元素操作


<!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">
.grandfather{
background-color: #eee;
display: inline-block;
}
.Afather,.Bfather{
background-color: #aaa;
display: inline-block;
margin: 10px;
}
.Achildren,.Bchildren{
display: inline-block;
width: 100px;
margin: 10px;
background-color: #555;
height: 100px;
}
button{
margin: 10px;
font-size: 25px;
}
.beselected{
background-color: #f59;
}
.main{
background-color: #0af;
}
</style>
</head>
<body>
<h2>A家庭</h2>
<div class="grandfather">
<div class="Afather father">
<div class="Achildren child"></div>
<div class="Achildren child"></div>
<div class="Achildren child main"></div>
<div class="Achildren child"></div>
<div class="Achildren child"></div>
</div>
<div class="Bfather father">
<div class="Bchildren child"></div>
<div class="Bchildren child"></div>
<div class="Bchildren child"></div>
</div>
</div>
<br>
<button id="reset">清空</button>
<button id="findchild">Afather.find('Achildren')</button>
<button id="closest">Achildren.closest('father')</button><br>
<button id="parent">Achildren.parent()</button>
<button id="parents">Achildren.parents()</button>
<button id="siblings">Achildren.siblings()</button><br>
<button id="next">Achildren.next()</button>
<button id="nextAll">Achildren.nextAll()</button>
<button id="prev">Achildren.prev()</button>
<button id="prevAll">Achildren.prevAll()</button>
<script type="text/javascript">
$('#reset').on('click',function(){
$('*').removeClass('beselected');
});
$('#findchild').on('click',function(){
$('.Afather').find('.Achildren').addClass('beselected');
});
$('#closest').on('click',function(){
$('.main').closest('.father').addClass('beselected');
});
$('#parent').on('click',function(){
$('.main').parent().addClass('beselected');
});
$('#parents').on('click',function(){
$('.main').parents().addClass('beselected');
});
$('#siblings').on('click',function(){
$('.main').siblings().addClass('beselected');
});
$('#next').on('click',function(){
$('.main').next().addClass('beselected');
});
$('#nextAll').on('click',function(){
$('.main').nextAll().addClass('beselected');
});
$('#prev').on('click',function(){
$('.main').prev().addClass('beselected');
});
$('#prevAll').on('click',function(){
$('.main').prevAll().addClass('beselected');
});
</script>
</body>
</html>
(繼續閱讀...)
文章標籤

Jerry 發表在 痞客邦 留言(0) 人氣(0)

  • 個人分類：jQuery
▲top
  • 9月 07 週四 201714:30

  • find、closest、parent、parents、siblings、next、nextAll、prev、prevAll等DOM元素操作


<!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">
.grandfather{
background-color: #eee;
display: inline-block;
}
.Afather,.Bfather{
background-color: #aaa;
display: inline-block;
margin: 10px;
}
.Achildren,.Bchildren{
display: inline-block;
width: 100px;
margin: 10px;
background-color: #555;
height: 100px;
}
button{
margin: 10px;
font-size: 25px;
}
.beselected{
background-color: #f59;
}
.main{
background-color: #0af;
}
</style>
</head>
<body>
<h2>A家庭</h2>
<div class="grandfather">
<div class="Afather father">
<div class="Achildren child"></div>
<div class="Achildren child"></div>
<div class="Achildren child main"></div>
<div class="Achildren child"></div>
<div class="Achildren child"></div>
</div>
<div class="Bfather father">
<div class="Bchildren child"></div>
<div class="Bchildren child"></div>
<div class="Bchildren child"></div>
</div>
</div>
<br>
<button id="reset">清空</button>
<button id="findchild">Afather.find('Achildren')</button>
<button id="closest">Achildren.closest('father')</button><br>
<button id="parent">Achildren.parent()</button>
<button id="parents">Achildren.parents()</button>
<button id="siblings">Achildren.siblings()</button><br>
<button id="next">Achildren.next()</button>
<button id="nextAll">Achildren.nextAll()</button>
<button id="prev">Achildren.prev()</button>
<button id="prevAll">Achildren.prevAll()</button>
<script type="text/javascript">
$('#reset').on('click',function(){
$('*').removeClass('beselected');
});
$('#findchild').on('click',function(){
$('.Afather').find('.Achildren').addClass('beselected');
});
$('#closest').on('click',function(){
$('.main').closest('.father').addClass('beselected');
});
$('#parent').on('click',function(){
$('.main').parent().addClass('beselected');
});
$('#parents').on('click',function(){
$('.main').parents().addClass('beselected');
});
$('#siblings').on('click',function(){
$('.main').siblings().addClass('beselected');
});
$('#next').on('click',function(){
$('.main').next().addClass('beselected');
});
$('#nextAll').on('click',function(){
$('.main').nextAll().addClass('beselected');
});
$('#prev').on('click',function(){
$('.main').prev().addClass('beselected');
});
$('#prevAll').on('click',function(){
$('.main').prevAll().addClass('beselected');
});
</script>
</body>
</html>
(繼續閱讀...)
文章標籤

Jerry 發表在 痞客邦 留言(0) 人氣(59)

  • 個人分類：jQuery
▲top
  • 9月 07 週四 201713:16

  • 按下去後，往右淡出並刪掉，利用animate


<!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">
li{
padding: 20px;
background-color: #0af;
margin: 10px 0;
list-style: none;
width: 300px;
}
</style>
</head>
<body>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
<script type="text/javascript">
$('li').on('click',function(){
$(this).animate({
opacity:0,
'margin-left':'+=80'
},500,function(){
$(this).remove();
});
});
</script>
</body>
</html>
(繼續閱讀...)
文章標籤

Jerry 發表在 痞客邦 留言(0) 人氣(0)

  • 個人分類：jQuery
▲top
  • 9月 07 週四 201713:16

  • 按下去後，往右淡出並刪掉，利用animate


<!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">
li{
padding: 20px;
background-color: #0af;
margin: 10px 0;
list-style: none;
width: 300px;
}
</style>
</head>
<body>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
<script type="text/javascript">
$('li').on('click',function(){
$(this).animate({
opacity:0,
'margin-left':'+=80'
},500,function(){
$(this).remove();
});
});
</script>
</body>
</html>
(繼續閱讀...)
文章標籤

Jerry 發表在 痞客邦 留言(0) 人氣(0)

  • 個人分類：jQuery
▲top
  • 9月 07 週四 201713:07

  • on綁定傳入四個參數，事件物件的type和data.自定義


<!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">
#btn{
background-color: #0ef;
padding: 20px;
width: 300px;
}
li{
margin: 10px 0;
}
</style>
</head>
<body>
<ul id="btn"><li>按我</li> <li id="nono">按我沒反應喔</li></ul>
<div id="result"></div>
<script type="text/javascript">
$('#btn').on('click',':not(#nono)',{status:'被按下去囉'},function(e){
$('#result').html(
'<h3>按鈕上的文字：'+e.target.textContent+'</h3>'+
'<h3>按鈕的狀態：'+e.data.status+'</h3>'+
'<h3>按鈕綁定的事件：'+e.type+'</h3>'
);
});
</script>
</body>
</html>
(繼續閱讀...)
文章標籤

Jerry 發表在 痞客邦 留言(0) 人氣(0)

  • 個人分類：jQuery
▲top
  • 9月 07 週四 201713:07

  • on綁定傳入四個參數，事件物件的type和data.自定義


<!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">
#btn{
background-color: #0ef;
padding: 20px;
width: 300px;
}
li{
margin: 10px 0;
}
</style>
</head>
<body>
<ul id="btn"><li>按我</li> <li id="nono">按我沒反應喔</li></ul>
<div id="result"></div>
<script type="text/javascript">
$('#btn').on('click',':not(#nono)',{status:'被按下去囉'},function(e){
$('#result').html(
'<h3>按鈕上的文字：'+e.target.textContent+'</h3>'+
'<h3>按鈕的狀態：'+e.data.status+'</h3>'+
'<h3>按鈕綁定的事件：'+e.type+'</h3>'
);
});
</script>
</body>
</html>
(繼續閱讀...)
文章標籤

Jerry 發表在 痞客邦 留言(0) 人氣(2)

  • 個人分類：jQuery
▲top
«1...26272837»

文章搜尋

文章搜尋

文章分類

toggle 伺服器架設 (1)
  • AWS (2)
toggle 伺服器架設 (1)
  • AWS (2)
toggle 前端框架 (2)
  • Vue.js (26)
  • Angular.js (2)
toggle 前端框架 (2)
  • Vue.js (26)
  • Angular.js (2)
toggle HTML與開發工具 (2)
  • HTML (2)
  • 開發工具相關 (8)
toggle HTML與開發工具 (2)
  • HTML (2)
  • 開發工具相關 (8)
toggle CSS與framework (4)
  • CSS (9)
  • Bootstrap (26)
  • CSS插件 (1)
  • CSS工具 (3)
toggle CSS與framework (4)
  • CSS (9)
  • Bootstrap (26)
  • CSS插件 (1)
  • CSS工具 (3)
toggle JS與函式庫 (3)
  • js套件 (1)
  • jQuery (28)
  • Javascript (46)
toggle JS與函式庫 (3)
  • js套件 (1)
  • jQuery (28)
  • Javascript (46)
toggle 後端框架 (1)
  • Laravel (26)
toggle 後端框架 (1)
  • Laravel (26)
  • 自學資源 (1)
  • 自學資源 (1)
  • 未分類文章 (1)

文章分類

toggle 伺服器架設 (1)
  • AWS (2)
toggle 伺服器架設 (1)
  • AWS (2)
toggle 前端框架 (2)
  • Vue.js (26)
  • Angular.js (2)
toggle 前端框架 (2)
  • Vue.js (26)
  • Angular.js (2)
toggle HTML與開發工具 (2)
  • HTML (2)
  • 開發工具相關 (8)
toggle HTML與開發工具 (2)
  • HTML (2)
  • 開發工具相關 (8)
toggle CSS與framework (4)
  • CSS (9)
  • Bootstrap (26)
  • CSS插件 (1)
  • CSS工具 (3)
toggle CSS與framework (4)
  • CSS (9)
  • Bootstrap (26)
  • CSS插件 (1)
  • CSS工具 (3)
toggle JS與函式庫 (3)
  • js套件 (1)
  • jQuery (28)
  • Javascript (46)
toggle JS與函式庫 (3)
  • js套件 (1)
  • jQuery (28)
  • Javascript (46)
toggle 後端框架 (1)
  • Laravel (26)
toggle 後端框架 (1)
  • Laravel (26)
  • 自學資源 (1)
  • 自學資源 (1)
  • 未分類文章 (1)

最新文章

  • 部落格搬家囉！ 網址：https://bugswarehouse.blogspot.tw/
  • 部落格搬家囉！ 網址：https://bugswarehouse.blogspot.tw/
  • 用vue寫出：有頁碼表格，可排序，搜尋，限制出現之資料
  • 用vue寫出：有頁碼表格，可排序，搜尋，限制出現之資料
  • 使用laravel內建的vue componet
  • 使用laravel內建的vue componet
  • Vuetify
  • Vuetify
  • VS code安裝後相關
  • VS code安裝後相關

最新文章

  • 部落格搬家囉！ 網址：https://bugswarehouse.blogspot.tw/
  • 部落格搬家囉！ 網址：https://bugswarehouse.blogspot.tw/
  • 用vue寫出：有頁碼表格，可排序，搜尋，限制出現之資料
  • 用vue寫出：有頁碼表格，可排序，搜尋，限制出現之資料
  • 使用laravel內建的vue componet
  • 使用laravel內建的vue componet
  • Vuetify
  • Vuetify
  • VS code安裝後相關
  • VS code安裝後相關

個人資訊

Jerry
暱稱：
Jerry
分類：
數位生活
好友：
累積中
地區：

個人資訊

Jerry
暱稱：
Jerry
分類：
數位生活
好友：
累積中
地區：

文章精選

文章精選

熱門文章

  • (1,572)用vue寫購物車（小計、總計、數量計算）
  • (473)用js寫一個時鐘，用Date物件
  • (387)Autoprefixer CSS 自動加前綴工具（以符合各瀏覽器）
  • (43)過濾器，排列方式依據名稱字首，1與-1切換升冪與降冪
  • (42)createElement、createTextNode、appendChild，動態新增元素組合技
  • (12)Laravel，view視圖
  • (8)面試會考：寫出5的倍數的乘法表
  • (7)counter-increment與counter-rest，文章分段可用
  • (6)childNode和nodeValue，我的html是一棵樹，啊哩啊紮都是節點
  • (2)on綁定傳入四個參數，事件物件的type和data.自定義

熱門文章

  • (1,572)用vue寫購物車（小計、總計、數量計算）
  • (473)用js寫一個時鐘，用Date物件
  • (387)Autoprefixer CSS 自動加前綴工具（以符合各瀏覽器）
  • (43)過濾器，排列方式依據名稱字首，1與-1切換升冪與降冪
  • (42)createElement、createTextNode、appendChild，動態新增元素組合技
  • (12)Laravel，view視圖
  • (8)面試會考：寫出5的倍數的乘法表
  • (7)counter-increment與counter-rest，文章分段可用
  • (6)childNode和nodeValue，我的html是一棵樹，啊哩啊紮都是節點
  • (2)on綁定傳入四個參數，事件物件的type和data.自定義

最新留言

    最新留言

      動態訂閱

      動態訂閱

      誰來我家

      誰來我家

      參觀人氣

      • 本日人氣：
      • 累積人氣：

      參觀人氣

      • 本日人氣：
      • 累積人氣：