Jquery & AJAX

 是一個JavaScript的函式庫，極大的簡化了JavaScript的流程

$(document).ready(function(){

  $("p").click(function(){

    $(this).hide();

  });

});

"p"處可塞任意元素

p 選取所有<p>的元素

p.infor 選取<p>中所有class為infor的元素

.infor 選取所有class = infor 元素

#infor 選取所有id = infor 元素

ul li:first 選取第一個ul的第一個li元素

ul li:first 選取每一個ul的第一個li元素

[href$='.jpg'] 選取所有帶有jpg結尾的屬性值並且帶有href屬性

a[target='_blank'] 選取所有帶有blank屬性的a元素

div#infor .head 所有 div元素中  id = infor 的 並且class = head的元素

:disabled 所有disabled的元素都將選取


Jquery事件

(document).ready(function(){});

Mouse Events

click , dbclick(double - click) , mouseenter , mouseleave

mousedown , mouseup , hover , focus

Keyboard Events

 keypress , keydown , keyup

Form Events

submit , change , focus , blur

Doucunent

load , resize , scroll , unload


hide(); 可以放 "fast" , " slow" 和數字 是以千分之一秒計時，ex 1000 = 1second 隱藏

toggle(); 同樣可以放 "fast" , " slow" 和數字 可以同時兼顧隱藏跟顯示


fadeIn(); 淡入 可以放 "fast" , " slow" 和數字 是以千分之一秒計時，ex 1000 = 1second

fadeOut(); 淡出 "fast" , " slow" 和數字 是以千分之一秒計時

fadeToggle(); 可以淡入或者淡出 可以放 "fast" , " slow" 和數字 是以千分之一秒計時

fadeTo(); 淡出到某種程度(speed , <=1); 以某速度淡出到某種程度 1 為 不淡


slideDown(); 滑下 展開頁籤

slideUp(); 滑上 閉合頁面

slideToggle();可以滑上或者滑下


animate([params] , speed); 移動到某個位置 端看position為何

多重屬性

$("button").click(function (){

  .animate({

    left : '250px',

    opacity: '0.5',

    height: '150px',

    width: '150px' 

  });

});

opacity 是 濃淡程度

height跟width也可以:'toggle'

stop(); 可以停止目前的動作


callback function

上述都可以加一個callback function 在結束時會喊得function

如

$("button").click(function(){

  $("div").hide(1000 , function(){

    alert("some some som");

  })

})

會在結束時丟出一段文字寫some some some


text(); set get 秀出純文字

html(); set get 秀出該段文字包含html符號

val(); set get 秀出指定的value

attr(); set get 秀出指定的id的href值

也可以用callback function 來set或get值

text(function(i , ordtext){

  return "some some some" + 

}); <-- function 第一個英文字為數字 第二個才是該文字內容-->


append("string"); 在某段後面增加

prepend("string"); 在某段之前增加


remove(); 移除 可於()處指定id or class進行清除

empty(); 清空 可於()處指定id or class進行清除


addClass(); 增加一個或多個css Class 用空白間隔

romoveClass(); 移除一個或多個css Class 用空白間隔

toggleClass(); 增加或移除css Class 用空白間隔


css(); get css 屬性

css(屬性,值)  set css屬性

css(屬性1 : 值 , 屬性2 : 值)



width(); set get 寬度

height(); set get 長度


innerWidth();

innerHeight();

outerWidth();

outerHeight();


$(document).width(); 獲得文件寬度

$(window).width(); 獲得螢幕寬度


first(); 第一個

last(); 最後一個

eq(number); 從0開始

filter("string"); 找相同 裡面可放class id

not("string"); 找不同 裡面可放class id


Ajax


Ajax是一種不重整網頁便可以加載數據並在網路上呈現的一種方式。


load(url data); 讀入一個文本 加上data 可以讀入文本內指定id的內容 或者是 指定的class內容

load(url data , function(responseTxt , statusTxt , xhr){

  

})

responseTxt 包含調用成功的結果

statusTxt 包含調用的狀態

xhr XMLHttpRequest的對象


$.post(url , data ); 對url 送data 或者不送單純呼叫

$.post(url , {data : value , data2 : value2 ...} , function(responseData , status){


})

$.get(url , data); 對url 送出 data 或者不送單純呼叫

$.get(url , {data : value , data2 : value2 ...} , function(responseData , status){


})

responseData 包含回傳的Data

status 包含調用的狀態


get和post的差別在於

get的request會被暫存紀錄，但是post不會，因此post刷新時會造成資料重送，因此需要提醒使用者會重送資料。

並且由於不會被暫存紀錄，因此不會存在於歷史紀錄中。

get對於長度有一定的限制，最大傳送長度為2048個字元，而post沒有限制。

而get只允許ASCII的字符，post則沒有限制。

get的安全性較差於post，因為get跳轉網頁時會把跳轉資訊寫入url中，post則是不會顯示。


noConflict() 用於釋放$，可以不用$當作Jquery的開頭

也就是$.noConflict(); 之後就可以用

jQuery(document).ready(function(){

})

或者是用 var jq = $.noConflict(); 以jq 替代 jQuery


響應式尋找文字，沒有該字的就toggle(false)掉

$(document).ready(function(){

  $("#myInput").on("keyup", function() {

    var value = $(this).val().toLowerCase();

    $("#myDIV *").filter(function() {

      $(this).toggle($(this).text().toLowerCase().indexOf(value) > -1)

    });

  });

});


get 和 post 的差別 https://www.w3schools.com/jquery/jquery_ajax_get_post.asp


The jQuery html() method works for both HTML and XML documents

jQuery 適用於HTML 和 XML嗎?

否 jQuery不適用於XML


jQuery用css設計圖樣


The jQuery animate() method can be used to animate ANY CSS property?

所有css元素的動畫jQuery都支援嗎?

不，僅支援有參數的


錯誤事件

'$'未經定義

有可能是jQuery未被載入

有兩種方法，第一種是直接解決方案->管理方案的NuGet套件->搜尋jQuery->下載



第二種是直接去jQuery官網搜尋後下載丟進資料夾後指定路徑

../xxxx/jQuery.css 或 ~/xxxx/jQuery.css ..是上一層 ~/是應用程式根目錄 /是網站根目錄


UI應用

jQuery 訊息盒、輸入盒和確認盒範例

$("#id").dialog(configure_object)

或者是

$("#id").dialog({

option1 : value , option2 : value

})

此物件可分為以下三種 Options , Method , Events

其中又以Events最少用到，Options是用於設定物件的屬性，而Method則是用於設定該物件的行為，如"open"和"colse"如

$("#testDialog").dialog("open");

接著比較常用的Options則是

title：dialog標頭

width：dialog寬度

height：dialog高度

model：是否為強制視窗，預設false

autoOpen：是否自動開啟預設true

button：定義按鈕及回傳函數

beforeClose：dialog關閉之前的回傳函數

appendTo：預設為false，無法將視窗指定到某個元素。

closeOnEscape：按Esc時自動關閉視窗，預設為false。

closeText：設定取代關閉視窗的文字，預設為close

dialogClass：設定dialog樣式。

draggable：設定dialog box拖曳功能


//純訊息框

Ex:

<div id = "hello" title="info">

hi

</div>

<script>

$(document).ready(function(){

  $("#hello").dialog();

}))

</script>


//具有傳入訊息

Ex:

<div id = "hello">

hi

</div>

<script>

$(document).ready(function(){

  $("#hello").dialog("open");

  }

$("#hello").dialog({

  autoOpen:false,

  modal:true,

  title:"info",

  button:{

    "ok" : function(){

      $(this).dialog("close");

    }

  }

})

</script>


上述的button 的 ok function是可以進行函式的

因此

"ok" : function(){

  //do something

  $(this).dialog("close");

}

如何增加效能

把do something寫成函式 讀取web的時候就先讀取(網站特性)

變成

function (){

  //do something

}

"ok" : function (){

  SomeFunction();

  $(this).dialog("close");

}


參考: 

http://yhhuang1966.blogspot.com/2019/03/jquery-ui_11.html

https://jqueryui.com/dialog/

https://api.jqueryui.com/dialog/#option-dialogClass

https://nknuahuang.wordpress.com/2014/07/21/jquery-dialog%E5%8F%83%E6%95%B8%E8%A8%AD%E5%AE%9A%E8%88%87%E6%95%99%E5%AD%B8/












留言

張貼留言

這個網誌中的熱門文章

無法載入檔案或組件 'System.IO.Compression' 或其相依性的其中之一。

圖片
曾經在拿取檔案的時候發生過這個問題 我不清楚究竟是版本的問題還是(應該不是版本的問題，因為我從我的夥伴手中拿它可以跑的程式，修改Config後仍然有問題) 主要的問題可能是因為package的問題，時常因為package跟參考以及nuget和WebConfig有不同而出現版本問題 遇到上述問題的話可能都要檢查以上三個檔案 建議是直接複製查詢 然後把「你認為不該存在的」參考給移除。 我自己本人是只留下參考中的檔案，是會把package和WebConfig的依賴給註解後再使用nuget重新安裝。 題外話抱怨 package.Config貌似就是參考的引入，但是不知道為啥連那邊都會跟參考互相衝突，微軟真的不打算修一下逆? 補充說明: 比如說遇到這個錯誤 上面有寫明說 Newtonsoft.Json culture = neutral publicKeyToken = 30ad4fe6b2a6aeed version = 6.0.0.0 就可以在web.config中寫這段加入  <dependentAssembly>    <assemblyIdentity name="Newtonsoft.Json" culture="neutral" publicKeyToken="30ad4fe6b2a6aeed"/>    <bindingRedirect oldVersion="0.0.0.0-6.0.0.0" newVersion="6.0.0.0"/>  </dependentAssembly> oldVersion - 那些版號要對應 - 可以用 - 來包含版號區間。 注意，newVersion不代表一定比oldVersion高。換句話說也有可能高版本全部要用低版本的dll（不過這種情景比較少 ，因為一般都是高版本會向下兼容） 不過這種方法不太建議，一律建議使用最上面的方法 參考 http://shaurong.blogspot.com/2020/02/systemiocompression.html
閱讀完整內容

MongoDB 入門

圖片
 MongoDB是一個NoSQL(非關聯性資料庫) 主要的儲存方式是 一個DB => 底下為一個Collection (類似Table) => 接著是文檔(docume) 存的資料型態為 BSON 是一種JSON的變體 如這樣 ID 自動生成 如SN 為唯一值 name sort之類的數值都是自己產生的 常用語法 通常都是以 db.CollectionName 開頭 find() 類似where 不輸入為全搜尋 insertOne({colname : data , colname2 :"data2"}) insert 用逗號分隔 insertMany([{colname : data} , {colname2 :"data2"}]) 如上 只是有中括號用來代表陣列 find().limit(N) 只回傳N筆 類似select() find().skip(N) 略過N筆後 類似skip() find().sort({colname : 1 , colname2 : -1}) 1是升冪 -1降冪 find()進階 => find({colname : 3} , {colname : 1 , colname2 : 0}) 這段的意思是 依照前面大括內的where 搜尋後 依照後面的select 條件選出 1是要輸出 0是不要輸出 假如只有0 則是 除了這些以外都要輸出  通常 1 跟 0 同時出現的時候是 _id這個字樣 因為這個是會自動返回的字樣 find(colname : {$gt : 3})  gt 大於 lt 小於 gte 大於等於 lte 小於等於 eq 等於 in => {$in :[ 1 , 3]} 一或三 nin => {$nin :[ 1 , 3]} 不等於1 或 3 都出 colname : { $exists : 1 } 代表這個colname存在的話則顯示 (nosql 因此型態可能不同) 0則是沒有的顯示 colname : {$regex :{/data/}} 正則表達式 找所有data  countDocuments() 總數 ex 找大於等於3小於等於5的 db.CollName.find(colname : {$gte : 3 , $let : 5}) 參考 : h...
閱讀完整內容

javascript 更改屬性及創建標籤

雖然應該是一些很基本的東西 但是我的前端其實蠻破的，所以筆記一下關於這個東西 //-----------------------------------1 如果要呈現某種屬性的話 就用 document.querySelector('id').setAttribute('readonly', true); 如果要刪除(隱藏)某種屬性的話就用 document.querySelector('id').removeAttribute('readonly'); //-----------------------------------2 $(document).ready(function () {         //取目標Tag為img者          //getElementsByTagName 不能使用forEach走訪 只好使用for走訪         var varTaglist = document.getElementsByTagName('img');         for (let i = 0; i < varTaglist.length; i++) {             //走訪建立id用於區分點選的目標             varTaglist[i].setAttribute('id', 'imgID' + i)             //走訪建立onclick屬性             varTaglist[i].setAttribute('onclick', 'imgclick(id)');         }     });     //設定屬性值 part2     var imgclick = function ...
閱讀完整內容