PIXNET Logo登入

Bug倉庫 // 程式日記

跳到主文

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

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

  • 相簿
  • 部落格
  • 留言
  • 名片
  • 9月 05 週二 201718:45

  • append()和html()的用法


<!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>
</head>
<body>
<div class="container">
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
</div>
<script type="text/javascript">
$('body').append($('.container').html());
</script>
</body>
</html>
(繼續閱讀...)
文章標籤

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

  • 個人分類：jQuery
▲top
  • 9月 05 週二 201718:45

  • append()和html()的用法


<!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>
</head>
<body>
<div class="container">
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
</div>
<script type="text/javascript">
$('body').append($('.container').html());
</script>
</body>
</html>
(繼續閱讀...)
文章標籤

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

  • 個人分類：jQuery
▲top
  • 9月 05 週二 201718:41

  • 屬性選取器不等於的做法


<!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">
.red{
color: red;
}
</style>
</head>
<body>
<ul>
<li>1</li>
<li>2</li>
<li id="three">3</li>
<li>4</li>
<li>5</li>
</ul>
<script type="text/javascript">
$(function(){
$('li[id!="three"]').addClass('red');
});
</script>
</body>
</html>
(繼續閱讀...)
文章標籤

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

  • 個人分類：jQuery
▲top
  • 9月 05 週二 201718:41

  • 屬性選取器不等於的做法


<!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">
.red{
color: red;
}
</style>
</head>
<body>
<ul>
<li>1</li>
<li>2</li>
<li id="three">3</li>
<li>4</li>
<li>5</li>
</ul>
<script type="text/javascript">
$(function(){
$('li[id!="three"]').addClass('red');
});
</script>
</body>
</html>
(繼續閱讀...)
文章標籤

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

  • 個人分類：jQuery
▲top
  • 9月 05 週二 201717:45

  • on綁定事件、:lt選取器、remove用法


<!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>
</head>
<body>
<h2>title</h2>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
小於<input id="input">會被刪掉
<button id="btn">按我</button>
<script type="text/javascript">
$('#btn').on('click',function(){
var input=$('#input').val()-1;
$('li:lt('+input+')').fadeOut(800).queue(function(){
$(this).remove();
})
});
</script>
</body>
</html>
(繼續閱讀...)
文章標籤

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

  • 個人分類：jQuery
▲top
  • 9月 05 週二 201717:45

  • on綁定事件、:lt選取器、remove用法


<!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>
</head>
<body>
<h2>title</h2>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
小於<input id="input">會被刪掉
<button id="btn">按我</button>
<script type="text/javascript">
$('#btn').on('click',function(){
var input=$('#input').val()-1;
$('li:lt('+input+')').fadeOut(800).queue(function(){
$(this).remove();
})
});
</script>
</body>
</html>
(繼續閱讀...)
文章標籤

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

  • 個人分類：jQuery
▲top
  • 9月 05 週二 201717:33

  • hide、slideDown、each、傳入index、delay、fadeIn用法


<!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>
</head>
<body>
<h2>降下來</h2>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
<script type="text/javascript">
$(function(){
$('h2').hide().slideDown();
$('li').hide().each(function(index){
$(this).delay(index*500).fadeIn(500);
});
});
</script>
</body>
</html>
(繼續閱讀...)
文章標籤

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

  • 個人分類：jQuery
▲top
  • 9月 05 週二 201717:33

  • hide、slideDown、each、傳入index、delay、fadeIn用法


<!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>
</head>
<body>
<h2>降下來</h2>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
<script type="text/javascript">
$(function(){
$('h2').hide().slideDown();
$('li').hide().each(function(index){
$(this).delay(index*500).fadeIn(500);
});
});
</script>
</body>
</html>
(繼續閱讀...)
文章標籤

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

  • 個人分類：jQuery
▲top
  • 9月 03 週日 201722:49

  • 阿公、爸爸、孩子，同時監聽，孩子先作用


<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
.out{
width: 500px;
height: 500px;
background-color: Coral;
}
.middle{
width: 300px;
height: 300px;
background-color: Wheat;
margin:auto;
transform: translateY(calc(250px - 150px));
}
.inside{
width: 100px;
height: 100px;
background-color: PaleGoldenRod;
margin: auto;
transform: translateY(calc(150px - 50px));
}
</style>
</head>
<body>
<div class="out">
<div class="middle">
<div class="inside"></div>
</div>
</div>
<script type="text/javascript">
var i =0;
document.getElementsByClassName('inside')[0].onclick=function(){
i++;
this.appendChild(document.createTextNode('按到我了'+i));
}
document.getElementsByClassName('middle')[0].onclick=function(){
i++;
this.appendChild(document.createTextNode('按到我了'+i));
}
document.getElementsByClassName('out')[0].onclick=function(){
i++;
this.appendChild(document.createTextNode('按到我了'+i));
}
/*註：這裡如果把this換成e.target就沒有這個效果*/
</script>
</body>
</html>
(繼續閱讀...)
文章標籤

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

  • 個人分類：Javascript
▲top
  • 9月 03 週日 201722:49

  • 阿公、爸爸、孩子，同時監聽，孩子先作用


<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
.out{
width: 500px;
height: 500px;
background-color: Coral;
}
.middle{
width: 300px;
height: 300px;
background-color: Wheat;
margin:auto;
transform: translateY(calc(250px - 150px));
}
.inside{
width: 100px;
height: 100px;
background-color: PaleGoldenRod;
margin: auto;
transform: translateY(calc(150px - 50px));
}
</style>
</head>
<body>
<div class="out">
<div class="middle">
<div class="inside"></div>
</div>
</div>
<script type="text/javascript">
var i =0;
document.getElementsByClassName('inside')[0].onclick=function(){
i++;
this.appendChild(document.createTextNode('按到我了'+i));
}
document.getElementsByClassName('middle')[0].onclick=function(){
i++;
this.appendChild(document.createTextNode('按到我了'+i));
}
document.getElementsByClassName('out')[0].onclick=function(){
i++;
this.appendChild(document.createTextNode('按到我了'+i));
}
/*註：這裡如果把this換成e.target就沒有這個效果*/
</script>
</body>
</html>
(繼續閱讀...)
文章標籤

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

  • 個人分類：Javascript
▲top
«1...28293037»

文章搜尋

文章搜尋

文章分類

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

熱門文章

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

最新留言

    最新留言

      動態訂閱

      動態訂閱

      誰來我家

      誰來我家

      參觀人氣

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

      參觀人氣

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