學習筆記本: jquery

顯示具有 jquery 標籤的文章。顯示所有文章

2020年1月6日星期一

【Jquery】ajax post from 檔案上傳

    $.ajax({
        type : "POST",
        url : "/sj/cooperation/ajax_dd",
        data : new FormData($('#myform')[0]),
        async: false,
        cache: false,
        contentType: false,
        processData: false,
        success : function($data) {
            $re = jQuery.parseJSON($data);
            $("#dd_id").val($re.dd_id);
            $msg = temp_dd($re.ddd);
            $($msg).hide().prependTo(".coop-msg").fadeIn('show');
            $("#coop_msg").val("");
        }
    });

2018年6月28日星期四

【jquery】插入內容方式

久沒用就會忘記，快點記下來
after()
before()
insertAfter()
insertBefore()
prepend()
prependTo()
append()
appendto()

2018年6月26日星期二

【jquery】bind、live、on

bind必需要每一個HtmlElement都要綁定，而live不用，
live適合用在動態新增element，如Ajax下載回來的HTML，
用live其中相同的selector的HtmlElement，就不用重Bind，
可以省去不少麻煩。

//在 jQuery 1.3 以上版本

$(selector).live(events, data, handler);

//在 jQuery 1.4.3 以上版本 

$(document).delegate(selector, events, data, handler);

//在 jQuery 1.7 以上版本

$(document).on(events, selector, data, handler);

$(":input").bind("keyup change", function(e) {
    // do stuff!
})

$("#myform").on("change","input",save_complete);
$("#myform").on("change","select",save_complete);
$("#myform").on("click",".del_score",del_score);

https://dotblogs.com.tw/wadehuang36/2010/10/13/jquery-bind-live

2018年6月7日星期四

【Jquery】動態產生也可綁定事件

利用Jquery產生出來的物件 (append、prepend)，
在之前設定的$('.item').click()會失效，
要改成 $('body').on('click','.item',funciton (){});

2018年6月5日星期二

【Jquery】is show 是否可見

判斷物件是否可見：$(element).is(":visible");

2017年9月6日星期三

【jquery】keypress 按鈕對應

在表單中，按enter送出表單的方法：

$("#myform input").keypress(function (e){

$code = (e.keyCode ? e.keyCode : e.which);

if ($code == 13)

{

$("#myform").submit();

}

});

其中的 code 代碼要在下面查詢

event.keycode值大全

keycode 8 = BackSpace BackSpace

keycode 9 = Tab Tab

keycode 12 = Clear

keycode 13 = Enter

keycode 16 = Shift_L

keycode 17 = Control_L

keycode 18 = Alt_L

keycode 19 = Pause keycode 20 = Caps_Lock

keycode 27 = Escape Escape

keycode 32 = space space

keycode 33 = Prior

keycode 34 = Next

keycode 35 = End

keycode 36 = Home

keycode 37 = Left

keycode 38 = Up

keycode 39 = Right

keycode 40 = Down

keycode 41 = Select

keycode 42 = Print

keycode 43 = Execute

keycode 45 = Insert

keycode 46 = Delete

keycode 47 = Help

keycode 48 = 0 equal braceright

keycode 49 = 1 exclam onesuperior

keycode 50 = 2 quotedbl twosuperior

keycode 51 = 3 section threesuperior

keycode 52 = 4 dollar

keycode 53 = 5 percent

keycode 54 = 6 ampersand

keycode 55 = 7 slash braceleft

keycode 56 = 8 parenleft bracketleft

keycode 57 = 9 parenright bracketright

keycode 65 = a A

keycode 66 = b B

keycode 67 = c C

keycode 68 = d D

keycode 69 = e E EuroSign

keycode 70 = f F

keycode 71 = g G

keycode 72 = h H

keycode 73 = i I

keycode 74 = j J

keycode 75 = k K

keycode 76 = l L

keycode 77 = m M mu

keycode 78 = n N

keycode 79 = o O

keycode 80 = p P

keycode 81 = q Q at

keycode 82 = r R

keycode 83 = s S

keycode 84 = t T

keycode 85 = u U

keycode 86 = v V

keycode 87 = w W

keycode 88 = x X

keycode 89 = y Y

keycode 90 = z Z

keycode 96 = KP_0 KP_0

keycode 97 = KP_1 KP_1

keycode 98 = KP_2 KP_2

keycode 99 = KP_3 KP_3

keycode 100 = KP_4 KP_4

keycode 101 = KP_5 KP_5

keycode 102 = KP_6 KP_6

keycode 103 = KP_7 KP_7

keycode 104 = KP_8 KP_8

keycode 105 = KP_9 KP_9

keycode 106 = KP_Multiply KP_Multiply

keycode 107 = KP_Add KP_Add

keycode 108 = KP_Separator KP_Separator

keycode 109 = KP_Subtract KP_Subtract

keycode 110 = KP_Decimal KP_Decimal

keycode 111 = KP_Divide KP_Divide

keycode 112 = F1

keycode 113 = F2

keycode 114 = F3

keycode 115 = F4

keycode 116 = F5

keycode 117 = F6

keycode 118 = F7

keycode 119 = F8

keycode 120 = F9

keycode 121 = F10

keycode 122 = F11

keycode 123 = F12

keycode 124 = F13

keycode 125 = F14

keycode 126 = F15

keycode 127 = F16

keycode 128 = F17

keycode 129 = F18

keycode 130 = F19

keycode 131 = F20

keycode 132 = F21

keycode 133 = F22

keycode 134 = F23

keycode 135 = F24

keycode 136 = Num_Lock

keycode 137 = Scroll_Lock

keycode 187 = acute grave

keycode 188 = comma semicolon

keycode 189 = minus underscore

keycode 190 = period colon

keycode 192 = numbersign apostrophe

keycode 210 = plusminus hyphen macron

keycode 211 =

keycode 212 = copyright registered

keycode 213 = guillemotleft guillemotright

keycode 214 = masculine ordfeminine

keycode 215 = ae AE

keycode 216 = cent yen

keycode 217 = questiondown exclamdown

keycode 218 = onequarter onehalf threequarters

keycode 220 = less greater bar

keycode 221 = plus asterisk asciitilde

keycode 227 = multiply division

keycode 228 = acircumflex Acircumflex

keycode 229 = ecircumflex Ecircumflex

keycode 230 = icircumflex Icircumflex

keycode 231 = ocircumflex Ocircumflex

keycode 232 = ucircumflex Ucircumflex

keycode 233 = ntilde Ntilde

keycode 234 = yacute Yacute

keycode 235 = oslash Ooblique

keycode 236 = aring Aring

keycode 237 = ccedilla Ccedilla

keycode 238 = thorn THORN

keycode 239 = eth ETH

keycode 240 = diaeresis cedilla currency

keycode 241 = agrave Agrave atilde Atilde

keycode 242 = egrave Egrave

keycode 243 = igrave Igrave

keycode 244 = ograve Ograve otilde Otilde

keycode 245 = ugrave Ugrave

keycode 246 = adiaeresis Adiaeresis

keycode 247 = ediaeresis Ediaeresis

keycode 248 = idiaeresis Idiaeresis

keycode 249 = odiaeresis Odiaeresis

keycode 250 = udiaeresis Udiaeresis

keycode 251 = ssharp question backslash

keycode 252 = asciicircum degree

keycode 253 = 3 sterling

keycode 254 = Mode_switch

2017年9月5日星期二

【Jquery】reset

jquery 並沒有提供 html 的 reset 功能

要使用 javascript 的寫法：

document.getElementById("myform").reset();

2016年11月23日星期三

【Jquery】抽獎轉盤、輪盤

這次要做轉盤抽獎，像是這樣：

於是我在網路上找範例，找到了這個網站：
http://www.js-css.cn/a/jscode/award/2015/0211/1452.html
備份檔案：檔案下載

範例是純js製作，因為要發送折價券給會員及安全性考量，
所以需要改成 ajax 與 php 配合，
原理很簡單就是每格給予一個號碼，再用號碼算出要轉的角度，
再利用awardRotate.js指定要停在哪一格，

例如：

指定好每格號碼後，算出每格角度，
用php的 rand(0,6) 隨機找出一個數字，
每格角度：360 / 7
再用這個數字算出角度，
如今天抽到數字 2 公式：
(360 / 7 ) * 2 + (+-20)

因為不想每次都停在正中間，
所以我再給他加一個正負值 360 / 7 大約等於 51 一半是25，
所以我抓+-20
簡易程式說明JS:

PHP：

2016年11月16日星期三

【Jquery】twzipcode 臺灣 3 碼郵遞區

twzipcode 快速建立郵遞區號及縣市，
以前都是自己做，把對應縣市及郵遞區號放在資料庫裡，
之後每次都要到資料抓，用了twzipcode真的快多了，
簡易用法：

2016年6月22日星期三

【Jquery】position:fixed 可左右拉動

今天遇到一件奇怪的需求，

在使用 CSS position:fixed 使區塊固定時，

當拉動左右的卷軸時這個區塊也要跟著動，

這時只能用javascript來解決：

$(window).scroll(function(){
  $(".nav").css({ // 要移動的class或div
    'left': 0 - $(this).scrollLeft()
  });
  $(".footer").css({
    'left': 0 - $(this).scrollLeft()
  });
});

2016年5月13日星期五

【jQuery】左右不間斷廣告

HTML 配置：

2014年11月3日星期一

【jquery】post 使用 json 傳值

post 使用 json 傳值

$.post("userorder_v2.php",{mod:'detail',orderid:$orderid},function ($data){
// 判斷CSS是否要隱藏
for($key in $data.data){
  if (!$data.data[$key]){
    $("#ar-"+$key).hide();
  }else{
    $("#ar-"+$key).show();
  }
  
  $thisValue = $(".od-" + $key);

  // 加上另外的處理
  if ($thisValue.hasClass("plus")){ // +
    $data.data[$key] = '+'+$data.data[$key];
  }else if ($thisValue.hasClass("less")){
    $data.data[$key] = '-'+$data.data[$key];
  }
  
  // 將值放入對應的CSS中
  $thisValue.html($data.data[$key]);
}
},"json");

HTML:


<table border="0" cellspacing="2" cellpadding="5" width="760">
	<tr>
		<th colspan="4" align="center">訂單資料</th>
	</tr>
	<tbody>
	<tr>
		<td width="100" align="center">訂單編號</td>
		<td width="200" class="od-orderid"></td>
		<td width="100" align="center">付款方式</td>
		<td class="od-payWayName"></td>
	</tr>
	<tr>
		<td align="center">訂單金額</td>
		<td class="od-order_total"></td>
		<td align="center">取貨方式</td>
		<td class="od-get_goods_name"></td>
	</tr>
	<tr>
		<td align="center">訂單日期</td>
		<td class="od-order_time"></td>
		<td align="center"><span id="ar-identity">訂購身分</span></td>
		<td class="od-identity"></td>
	</tr>
	<tr>
		<td align="center">訂單狀態</td>
		<td colspan="3" class="od-shipName"></td>
	</tr>
	<tr>
		<td align="center">收貨地址</td>
		<td colspan="3" class="od-address"></td>
	</tr>
	<tr>
		<td align="center">gt;備註</td>
		<td colspan="3" class="od-comp_note"></td>
	</tr>
	</tbody>
</table>

2014年8月11日星期一

【PHP、Jquery】廣告計數

計算一個廣告被被點擊次數有兩種狀況

1.站內廣告

原理：當點擊時用ajax計數，範例：

<a href="7311.tw" class="st-ad" adid="10"></a>

<script>
// 廣告計數
$("a.st-ad").click(function (e){
  e.preventDefault();
  $this = $(this);
  $.post("aj_ad.php",
    {mod:'ad_statistics',ad_id:$(this).attr('adid')},
    function (){
      window.location = $this.attr('href');
  });
});
</script>

2.站外廣告

原理：先連結到一頁專門計數的頁面，再轉到連結頁面

2014年8月4日星期一

【Jquery】canvas繪圖1 - 矩形

畫矩形

Html:

<canvas id="myCanvas" width="100" height="100"></canvas>

Javascript:

$ele = $('#myCanvas').css({border: '1px solid #333'}).get(0);
// 不能使用CSS的width跟height 或在canvas標籤上寫長寬 也可不限制
$ele.width = 100; 
$cv = $ele.getContext('2d'); // 畫布環境 用Jquery要取得物件要加上get(0)
//$cv = document.getElementById('myCanvas').getContext("2d"); // 用document.getElementById的方法
$cv.fillStyle = "rgba(0,0,255,0.5)";
$cv.fillRect(0,0,50,50);
$cv.fillStyle = "rgba(255,0,0,0.8)";
$cv.fillRect(50,50,100,100);

結果:

2014年8月3日星期日

【Jquery】滑動選單

無標題文件

成品連結：演示

技巧1：

滑動選單基本上就在寫CSS，先用CSS寫出想要的樣子，要將子選項寫在選項當中
HTML:

  <div id="home-menu">
    <div class="title">全站分類/div>
    <div class="menu1">
      <li><a href="#"><h1>筆記型電腦</h1></a>
       <dl>
         <dt>
            <a href="#"><h2>ACER 宏碁</h2></a>
            <a href="#"><h2>ASUS 華碩</h2></a>
            <a href="#"><h2>HP 惠普</h2></a>
            <a href="#"><h2>LENOVO 聯想</h2></a>
            <a href="#"><h2>MSI 微星</h2></a>
          </dt>  
          <dt>
            <a href="#"><h2>文書上網</h2></a>
            <a href="#"><h2>輕薄時尚</h2></a>
            <a href="#"><h2>影音娛樂</h2></a>
            <a href="#"><h2>行動商務</h2></a>
            <a href="#"><h2>遊戲電競</h2></a>
            <a href="#"><h2>大尺吋</h2></a>
          </dt>
        </dl>
      </li>
      <li><a href="#"><h1>桌上型電腦</h1></a></li>
      <li><a href="#"><h1>平板電腦</h1></a></li>
      <li><a href="#"><h1>DIY 零組件</h1></a></li>
      <li><a href="#"><h1>儲存裝置</h1></a></li>
      <li><a href="#"><h1>週邊耗材</h1></a></li>
      <li><a href="#"><h1>印表機及耗材</h1></a></li>
      <li><a href="#"><h1>遊戲軟體</h1></a></li>
    </div>
  </div>

CSS:

h1,h2,h3 {
 padding:0px;
 margin:0px;
 font-weight:normal; 
}
a:link, a:visited {
 color:#5b5247;
  text-decoration: none;
}
a:hover {
 color:#5b5247;
  text-decoration: none;
}
li {
 list-style: none;
}
/****** home-menu:start ******/
#home-menu {
 width:160px;
 padding-left:10px;
 float:left;
}

#home-menu .menu1 a {
 padding-left:10px;
 list-style: none;
 margin-right:20px;
 color:#333;
 height:28px;
 padding-left:10px;
 padding-top:7px;
 display:block;
 font-size:15px;
 letter-spacing:1px;
}

#home-menu .menu1 h1 {
 font-size:15px;
}

#home-menu .title {
 border-bottom: 1px solid #999;
 height: 25px;
 color: #333;
 padding-left: 10px;
 font-weight: bold;
 margin-right:20px;
}

#home-menu .menu1 {
 padding-top:10px; 
}

#home-menu .menu1 a:hover{
 background: #A8FFFF;
}

#home-menu .line {
 border-bottom: 1px solid #999;
 margin:15px 0;
}

#home-menu .menu1 li {
 position:relative;
}

#home-menu .menu1 dl {
 position: absolute;
 top:-30px;
 left:140px;
 background-color:#FFF;
 border:1px solid #DDD;
 padding:10px 15px 5px 15px;
 min-width:160px;
 min-height:360px;
 box-shadow:2px 2px 5px #999;
 z-index:10;
 /*display:none;*/
}

#home-menu .menu1 dl a{
 margin:3px 0 0 0;
 padding:5px;
 font-size:15px;
 color:#333;
 display:block;
 height:auto;
}

#home-menu .menu1 dl h2{
 font-size:15px;
}

#home-menu .menu1 dl dd:hover{
 background: #A8FFFF;
}
/****** home-menu:end ******/

技巧2：

在把子選單隱藏，用JS讓她動

CSS：

#home-menu .menu1 dl {
 position: absolute;
 top:-30px;
 left:140px;
 background-color:#FFF;
 border:1px solid #DDD;
 padding:10px 15px 5px 15px;
 min-width:160px;
 min-height:360px;
 box-shadow:2px 2px 5px #999;
 z-index:10;
 display:none;
}

JS:

$("#home-menu .menu1 li").hover(function(){
  $(this).find("dl").show();
},function (){
  $(this).find("dl").hide();
});

2014年7月31日星期四

【Jquery】排行榜 (跳過中間順序)

成品連結：演示

展示圖：

技巧一CSS：

下方商品區因為換頁簽不會滑過中間頁簽
所以寫CSS需用到：position:relative; position: absolute; overflow:hidden;
將第一個放到要顯示的框框裡，其餘的放到看不到的地方

#rank-area-1 .rank-detail {
 margin-top:10px;
 position:relative;
 width:703px;
 height:405px;
 overflow:hidden;
}
#rank-area-1 .content{
 position:absolute;
 top:0px;
 left:703px;
 width:703px;
 height:405px;
}

#rank-area-1 .content:first-child{
 left:0px;
}

技巧二JS：

原理是當滑鼠移過，先判斷要往左還是右
找出下一個頁面放到左邊或右邊
然後兩個區塊同時移動

// 判斷往左往右
if ($selectArea.index() > $currArea.index()){
  $selectArea.css('left',$randWidth);
  $currArea.animate({left:"-="+$randWidth},500);
  $selectArea.animate({left:"-="+$randWidth},500);
}else{
  $selectArea.css('left',$randWidth*-1);
  $currArea.animate({left:"+="+$randWidth},500);
  $selectArea.animate({left:"+="+$randWidth},500);
}

技巧三上方移動線條：

原理：當滑鼠移到自上方，取得距離原點距離，用animate做移動

$lineMove = $("#rank-area-1 i[kid="+$selectKid+"]").position().left + 5;
  $lineWidth = $("#rank-area-1 i[kid="+$selectKid+"]").outerWidth();
  $("#rank-area-1 .line").animate({left:$lineMove,width:$lineWidth},500);

2014年7月30日星期三

【Jquery】Lazy Load 圖片延遲載入

使用方法

1.先到官網將下載檔案

2.引入檔案

<script src="js/jquery-1.9.1.min.js"></script>
<script src="js/jquery.lazyload.js"></script>

3.Javascript 部分

$(function (){
 $(".imgload").lazyload();
});

* $(".imgload") 代表所有class=imgload都適用

4.圖片部分

<img class="imgload" data-original="http://7311.tw/style/snp01/image/banner-1.jpg" src="http://7311.tw/style/snp01/image/imgload.jpg" />

* src->可以是載入的圖片, data-original->要載入的圖片
預覽：

2014年4月7日星期一

【Jquery】自己寫的簡易連續跑馬燈

展示

CSS:

程式部分：

HTML:

2014年1月2日星期四

【jquery】keypress、keydown 取得所按的鍵

1.數字0鍵值48..數字9鍵值57
2.a鍵值97..z鍵值122;A鍵值65..Z鍵值90
3.+鍵值43;-鍵值45;.鍵值46;退格8;tab鍵值9;
4.event在ie中是全局的，在firefox是臨時對象，需要傳遞參數

2013年10月18日星期五

【Jquery】開合選單

範例網址:http://7311.tw/study/js/fcode/menu/left_open_menu1.html

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script>

$(function(){
var curr='';
$('#menu h2').click(function(){
if($(this).attr('id') != curr){ // 是否由展開
$('#menu ul').slideUp(); // 全部關上
$(this).next().slideDown(1000); // 點的往下開
curr = $(this).attr('id'); // 將目前ID存入Tag
}else{
$(this).next().slideUp(300);
curr='';
}
}).css("cursor","pointer");
$('#menu h2').eq(1).click(); // 預設開啟哪一個
});

</script>

<ul id="menu">
<li>
<h2 id="menu1">AAAA</h2>
<ul>
<li><a href="a.php" >aaaa</a></li>
</ul>
</li>
<li>
<h2 id="menu2">BBBB</h2>
<ul>
<li><a href="b.php">bbbb</a></li>
</ul>
</li>

</ul>

效果:

訂閱：文章 (Atom)

2020年1月6日 星期一

2018年6月28日 星期四

2018年6月26日 星期二

2018年6月7日 星期四

2018年6月5日 星期二

2017年9月6日 星期三

2017年9月5日 星期二

2016年11月23日 星期三

2016年11月16日 星期三

2016年6月22日 星期三

2016年5月13日 星期五

2014年11月3日 星期一

2014年8月11日 星期一

2014年8月4日 星期一

2014年8月3日 星期日

成品連結：演示

筆記型電腦

ACER 宏碁

ASUS 華碩

HP 惠普

LENOVO 聯想

MSI 微星

文書上網

輕薄時尚

影音娛樂

行動商務

遊戲電競

大尺吋

桌上型電腦

平板電腦

DIY 零組件

儲存裝置

週邊耗材

印表機及耗材

遊戲軟體

2014年7月31日 星期四

成品連結：演示

技巧一CSS：

技巧二JS：

技巧三 上方移動線條：

2014年7月30日 星期三

使用方法

2014年4月7日 星期一

2014年1月2日 星期四

2013年10月18日 星期五

AAAA

BBBB

2020年1月6日星期一

2018年6月28日星期四

2018年6月26日星期二

2018年6月7日星期四

2018年6月5日星期二

2017年9月6日星期三

2017年9月5日星期二

2016年11月23日星期三

2016年11月16日星期三

2016年6月22日星期三

2016年5月13日星期五

2014年11月3日星期一

2014年8月11日星期一

2014年8月4日星期一

2014年8月3日星期日

2014年7月31日星期四

技巧三上方移動線條：

2014年7月30日星期三

2014年4月7日星期一

2014年1月2日星期四

2013年10月18日星期五