發表文章

目前顯示的是有「JQuery」標籤的文章

好用的前端資料清單顯示 JQuery datatables 套件

作者： -
好用的前端資料清單顯示 JQuery datatables 套件 官網: https://datatables.net/ 套件引用 <script src="https://code.jquery.com/jquery-3.7.1.js"></script> <script src="https://cdn.datatables.net/2.0.3/js/dataTables.js"></script> <link rel="stylesheet" href="https://cdn.datatables.net/2.0.3/css/dataTables.dataTables.css" /> HTML範例資料 <table id="example" class="display" style="width:100%"> <thead> <tr> <th>Name</th> <th>Position</th> <th>Office</th> <th>Age</th> <th>Start date</th> <th>Salary</th> </tr> </thead> <tbody> <tr> <td>Tiger Nixon</td> <td>System Architect</td> ...
張貼留言
閱讀完整內容

ASP.Net WebForm JQuery 呼叫 CodeBehind方法 (手動postback)

作者： -
ASP.Net WebForm JQuery 呼叫 CodeBehind方法 (手動postback) JQuery $('#myTextBoxB').keypress(function (e) { if (event.which == 13) { blockUI(); var param = '{ ' + '"Event":"keypress", ' + '"A":"' + $("#myTextBoxA").val() + '", ' + '"B":"' + $("#myTextBoxB").val() + '"' + ' }'; //第1個參數 eventTarget, 第2個參數 eventArgument __doPostBack("<%=this.myTextBoxB.ClientID%>", param); } }); Code Behind protected void Page_Load(object sender, EventArgs e) { if (!IsPostBack) { } else { string eventTarget = Request.Params.Get("__EVENTTARGET"); string eventArgument = Request.Params.Get("__EVENTARGUMENT"); ParamData PData = Newtonsoft.Json.JsonConvert.DeserializeObject<ParamData>(p_EventArgument...
張貼留言
閱讀完整內容

Query dialog 基本語法

作者： -
JQuery dialog 基本語法 寫法1 $("#myDialog").dialog({ resizable: false, height: "auto", width: 800, modal: true, buttons: { "OK": function() { // 這裡是 OK 按鈕的功能 }, "Cancel": function() { $(this).dialog("close"); } }, open: function() { // 當對話框打開時，為對話框添加 keydown 事件處理器 $(this).keydown(function(event) { // 如果按下的是 Enter 鍵，則阻止其預設行為 if (event.keyCode === 13) { event.preventDefault(); } }); } }); 寫法2 $("#myDialog").dialog({ resizable: false, height: "auto", width: 800, modal: true, buttons: { "OK": myDialog_OK, "Cancel": myDialog_Cancel }, open: function() { // 當對話框打開時，為對話框添加 keydown 事件處理器 $(this).keydown(function(event) { // 如果按下的是 Enter 鍵，則阻止其預設行為 if (event.keyCod...
張貼留言
閱讀完整內容

JQuery .each 用法

作者： -
JQuery .each 用法 對象Array var array = [1, 2, 3, 4, 5]; $.each(array, function(index, value) { console.log(index + ": " + value); }); 結果: 0: 1 1: 2 2: 3 3: 4 4: 5 對象Json var people = [ { name: "John", age: 30, city: "New York" }, { name: "Jane", age: 25, city: "Chicago" }, { name: "Mike", age: 35, city: "Los Angeles" } ]; $.each(people, function(index, person) { console.log("Name: " + person.name + ", Age: " + person.age + ", City: " + person.city); }); 結果: Name: John, Age: 30, City: New York Name: Jane, Age: 25, City: Chicago Name: Mike, Age: 35, City: Los Angeles 列出JSon每個屬性 var data = {}; data.name = 'Alex'; data.id = "1"; $.each(data, function (key, value) { alert('key=' + key); alert('value=' + value); }); 結果: key=name value=Alex  
張貼留言
閱讀完整內容

JQuery 載入網頁至DIV時, 增加載入失敗CallBack

作者： -
JQuery 載入網頁至DIV時, 增加載入失敗CallBack $('#div_content').load('_GetList?' + 'AA=' + AA + '&BB=' + BB function (response, status, xhr) { if (status == "error") { var msg = "Error!" + xhr.status + " " + xhr.statusText; alert(msg); } });      
張貼留言
閱讀完整內容

JQuery selector範例

作者： -
JQuery selector範例 取得第一個找到的 li 標籤元素 $("li:first"); //jQuery li:first {} //CSS 取得其 class 屬性值為class1 的 input元素 $("input[class='class1']"); //jQuery input[name='newsletter'] {} //CSS 取得id為container之元素其內部的所有超連結 $(‘#container a’); //jQuery #container a {} //CSS 取得div父元素其下所有的p子元素 $("div > p"); //jQuery div > p {} //CSS 基本選擇器 jQuery 有三個最重要的選擇器，如下： $(“element”)：選出所有該 element 的節點 例如： $(“p”) ：選出所有＜p＞的節點 $(“#divId”)：選出所有id=divid的節點 $(“.divClass”)：選出所有class=divCLass的節點 階層選擇器 階層屬性有以下四種： 物件中的某一種物件(空白)：$(‘#div1 p’).addClass(‘d1′); 物件中的所有物件(*)：$(‘#div1 *’).addClass("d1); 之後符合條件的第一個(+)：$(‘#div1 + p’).addClass(‘d1′); 之後符合的所有(~)：$(‘#div1 ~ p’).addClass(‘d1′); 可進來這裡觀看階層選擇器範例： http://jsfiddle.net/divaka/fuHFD/1/ 子元素選擇器 $("ul li:nth-child(2)"); //第 2 個節點 $("ul li:nth-child(odd)"); //所有奇數子節點 $("ul li:nth-child(3n + 1)"); //1, 4, 7 … 個節點 $("div span:first-child") //所有的div元素的第一個子節點 $("div...
張貼留言
閱讀完整內容

JQuery, 取得各input欄位資料的JQuery寫法

作者： -
取得各input欄位資料的JQuery寫法 text <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>jQuery 取得資料範例</title> <script src="https://code.jquery.com/jquery-3.6.4.min.js"></script> </head> <body> <input type="text" id="textInput" value="Hello, World!"> <button id="getTextBtn">取得文字框的值</button> <script> $(document).ready(function(){ $('#getTextBtn').click(function(){ var textValue = $('#textInput').val(); alert('文字框的值是：' + textValue); }); }); </script> </body> </html> textarea <!-- 在上面的 HTML 檔案中加入以下程式碼 --> <select id="selectOption"> <option value="option1">選項1</option> <option value=...
張貼留言
閱讀完整內容

JQuery 取消每個Input欄位自動完成功能

作者： -
$(':input').on('focus', function () { $(this).attr('autocomplete', 'off') });
張貼留言
閱讀完整內容

[JQuery] DIV Load Callback怎麼取得錯誤訊息

作者： -
  $("#yourDivId").load("yourUrl", function(response, status, xhr) { if (status === "error") { // 加载失败，可以由xhr取得錯誤狀態及訊息 var errorMessage = "加载失败：" + xhr.status + " " + xhr.statusText; console.log(errorMessage); } else { // 載入成功 console.log("載入成功"); } });
張貼留言
閱讀完整內容

JQuery 筆記

作者： -
  * JQuery(document).ready(function(){...}; 可以用以下方式表示 JQuery(function(){}); $(function(){}); * 依Class和data-qid值找到對應Element var aa = $("button[data-qid='" + qid + "']").filter(".btnLINK2").data('qname'); var aa = $(".btnLINK2").filter("button[data-qid='" + qid + "']").data('qname'); var aa = $(".btnLINK2").filter("[data-qid='" + qid + "']").data('qname');
張貼留言
閱讀完整內容

JSP+JQuery+Ajax 使用JSON方式取得Server-Side網頁回傳值

作者： -
查網路上查到JSON是一個使用key-value架構的資料格式, 但我只要在dataType指定為"json", JQuery就會出錯, 我想可能是我搞錯 JQuery Ajax json的使用方式了吧。以下為我測試出來的程式碼, 記錄一下。 <Client-Side> <%@ page language="java" contentType="text/html; charset=BIG5" pageEncoding="BIG5"%> <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <head> <meta http-equiv="Content-Type" content="text/html; charset=BIG5"> <title>jquery client submit insert data</title> <script src="jquery-1.11.0.js" type="text/javascript"></script> </head> <body> <div id="apply"> <table> <tr> <td style="width:80px;">UserId</td> <td><input type="text" id="txtUserId" name="txtUserId" /></td>...
2 則留言
閱讀完整內容