2017年7月28日 星期五

[jQuery]Udemy Keen Cen 9語言0基礎 #84-#106 流水帳筆記

jQuery / jQuery UI 官網有 tutorial 可學!

#88
$('p').html("This is test text.")
<iframe>
.css("display","none") = .hide() 或 .fadeOut( 時間 )

#92
$.ajax ({
  url:"test.html"
}).done(function(data)){
    $("h1").append(data);
});
呼叫外部文件

#93
RegExp
搜尋、檢查字串

#94-95
表單檢查範例:

除了控制輸入框大小,也能控制輸入字的大小、字與邊框距離。
在 input 前運用 label 清楚定義;input 中運用 type="password" 設定密碼文字不顯示

e.preventDefault()
阻止提交

在#95 2:21直接套用 email 驗證程式碼

$isNumeric()
驗證數值(字)
----

#98
jQuery UI
這裡示範在 document 中直接線上引用 google API jQuery UI,而非下載檔案使用

#99
使用 .resizable() 前要先載入 jQuery UI 的 CSS <link>

#101
.accordion() 可以很容易使多個文章變成標題卷軸,也可嘗試運用在 nav menu 上
.sortable() 讓使用者將項目拖動並排列

#102-105
代碼播放器範例:
切 JS Bin 網站

$(window).height();
$('.className').height(varName or method+'px');

$().click(function(){
  $(this).toggleClass('selected');
});

var activeDiv = $(this).html();
$('#'+activeDiv+'Container'
).toggle();

var showingDiv = $('.codeContainer').filter(function(){    return($(this).css('display') != none );
}).length;

CSS屬性: overflow: hidden;

$('iframe').contents().find('html').html($('#htmlcode').val());

沒有留言:

張貼留言