jQuery中的常用內容總結(二)

来源:http://www.cnblogs.com/funnyzpc/archive/2017/10/09/7571993.html
-Advertisement-
Play Games

jQuery中的常用內容總結(二) 轉載請註明地址: http://www.cnblogs.com/funnyzpc/p/7571993.html 前言 距離上次博客更新已經有二十來天了(●′ω`●)，恍惚之間時間已經從身邊流走~，好難過≡(▔﹏▔)≡；所以，我決定這次不管熬夜到幾點都要把本節和第三 ...


jQuery中的常用內容總結(二)

轉載請註明地址: http://www.cnblogs.com/funnyzpc/p/7571993.html

前言

　　距離上次博客更新已經有二十來天了(●′ω`●)，恍惚之間時間已經從身邊流走~，好難過≡(▔﹏▔)≡；所以，我決定這次不管熬夜到幾點都要把本節和第三節內容全部寫完~

內容提要

 

　　ajax在實際開發中用的特別多,尤其是前後端分離的今天甚是~，接下來所說的ajax都是經過jQuery封裝過的，至於寫法大致有ajax標準寫法和jQuery簡寫兩種，下麵先給出這兩種寫法的樣式->

$.ajax({
             type : "post",  
              url :app+"/app/forum/getUser.json",
              data : {"a":"1","b":"2"},
              async : false,
              success : function(d){  
                  $elem.append("<option value=''>"+"--"+"</option>");
                  for(var i in d){
                      if(d[i].value)
                      $elem.append("<option value='"+d[i].userid+"'>"+d[i].value+"</option>");
                  }
              }  
         }); 
1     $.post(module.opts.url + "/delete.json", {"a":"1","b":"2"}, function(d){
2             if (d.error){
3                 alert("刪除出錯:" + d.error.msg);
4                 return;
5             }
6                         /*請求成功後的邏輯代碼*/
7         });

　　以上第一種(同步)是ajax標準寫法，第二種(非同步)是jQuery簡潔寫法，當然如果是非同步的話這兩種寫法都可行，但是，如果是同步(涉及到多個請求並且分前後的話)只可以取第一種寫法，在同步請求的時候請註意要講async(是否同步)這個變數的參數寫成false,至於一般情況下的請求是post還是get呢，這個我給出的建議是：一般傳參到後端都用post方法就可以，實際使用中這兩種請求並沒有明顯的區別(是否冪等可以忽略不計);另外以上兩種請求的方法的參數數量或返回參數的數量可能與jQuery完整寫法不一致，對於這個問題，我的解釋是:在js中，方法調用和方法申明這兩者之中前者的參數可以少於後者的參數數量~，遂，大家不要介意哈（●´∀｀）~

B>事件

　jQuery事件是在開發中幾乎是每天都會有，這裡先給大家列舉下主要的幾個事件->

　　bind():匹配的dom元素附加一個或多事件處理器，多個事件需使用空格隔開，形如：$("#id").bind("click mouseover",function(){}) 

　　on():用於綁定未來元素的事件,一般在插入dom時會使用到

　　blur():匹配的dom失去焦點事件，一般用於綁定input輸入框

　　change():用於匹配的dom的值改變事件，常用於表單中select下拉框或者單選按鈕

　　click():用於匹配的dom被點擊事件

　　focus():dom獲取焦點事件，一般用戶點擊輸入框進行輸入時候使用此事件

　　keydown():按鍵按下事件,一般用於輸入框輸入時綁定此事件

　　keypress():按鍵鬆開事件,一般用於輸入框輸入時綁定此事件

　　load():dom載入完畢事件，一般用於頁面載入後自動執行此事件

　　mousedown():滑鼠指針移動到dom上方事件

　　mouseenter():滑鼠指針穿過dom事件

　　mouseleave():滑鼠指針離開dom事件

　　mousemove():滑鼠指針在dom中移動事件

　　mouseout():滑鼠指針從dom上移開事件

　　mouseover():滑鼠指針位於元素上方事件

　　mouseup():滑鼠在dom上鬆開事件

　好了(◕ܫ◕)，以上事件列舉完畢，現在實例應用一個重要的不怎麼用到的事件bind():

　　

　　上圖中 id為p2的dom是用jQuery插入的，然後綁定的一個點擊事件和一個滑鼠移開事件，當然(•‾̑⌣‾̑•)✧˖°只有在dom存在的時候才會執行綁定的事件，也就是將這兩個事件歸一(用統一的函數處理這些事件)；當然上圖中id為p2的節點是用jQuery插入的(屬於未來事件的處理範疇)，比較合適的一種方式是用on來進行綁定，如果低版本的jQuery 的話建議也可以使用live()進行綁定(￣ε ￣)~

C>彈窗

　　這裡介紹五種彈窗，兩大類，一類是js原生彈窗，一類是jQuery UI彈窗

　　1>alert彈窗

　　　　

 

 

　　2>對話輸入彈窗

 　　　　

 

 

　　3>按鈕是/否 彈框

 　　　　

 

 

　　4>html子窗 彈窗

 

 

 

　　5>jQuery UI彈窗(需要引入jquery UI)

 

 

 　　咳咳~，以上5種彈窗，第一種是不可傳參的，第五種需要使用jquery_UI.js(jQuery 彈窗插件)且傳參需要單獨從表單取值...

只有展示效果可不行，現在(*☉౪⊙*)把源碼展示下：

 1 <br/>
 2 　　<button onclick="popUp(1)">1.alert彈窗</button>
 3 <br/><br/>
 4 　　<button onclick="popUp(2)">2.對話輸入彈窗</button>
 5 <br/><br/>
 6 　　<button onclick="popUp(3)">3.按鈕是/否 彈框</button>
 7 <br/><br/>
 8 　　<button onclick="popUp(4)">4.html子窗 彈窗</button>
 9 <br/><br/>
10 　　<button onclick="popUp(5)">5.jQuery UI彈窗</button>
11 <!-- <button onclick="insertDom();">P後面插入一個P元素</button> -->
12 <script>
 1 function popUp(val){
 2     if(1==val){
 3         alert("這是一個彈出框~");
 4     }else if(2==val){
 5         var text = prompt("這是一個輸入對話框,請輸入您的內容:","20");
 6         alert("您輸入的內容是:"+text);
 7     }else if(3==val){
 8         var text=confirm("確定是您輸入的內容嗎?");
 9         if(text)
10             alert("您輸入的是 "+text);
11         else
12             alert("您輸入的是 "+text);
13     }else if(4==val){
14          var pop = window.open('','_blank','width=400,height=200,menubar=no,toolbar=no,location=no,directories=no,status=no,scrollbars=yes,resizable=yes');
15          pop.document.write("<h2>這是一個視窗哦~</h2>");
16          pop.document.write("<br/>");
17          pop.document.write("<br/>");
18          pop.document.write("<button>確認</button>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;");
19          pop.document.write("<button>取消</button>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;");
20          window.opener="success";
21         var loop= setInterval(function() {     
22                 if(pop.closed) {    
23                       clearInterval(loop); 
24                     alert("您關閉了視窗咯~");
25                 }    
26             }, 500);
27     }else{
28         var cc="<div class=col-sm-3>" +
29         "<input type=\"text\" name=\"id\" value="+99+" style=\"display:none;\">" +
30                 "<textarea style=\"width:440px;height:150px;\" name=\"reply\"></textarea>" +
31                 "</div>";
32         $dlg = $("<div title=\"您的內容\"><div>").html(cc).dialog({
33         modal:true,width:500,height:300,
34         buttons:{
35             "確認":function(){
36                 if($("textarea[name=reply]").val()=="")
37                     alert("您回覆的內容為空，請檢查！");
38                 else
39                     alert("您輸入的內容是:"+$('textarea[name=reply]').val());
40             },
41             "取消":function(){
42                 $dlg.dialog("close");
43             }
44         },
45         close:function(){
46             $dlg.dialog("destroy");
47         }
48     });
49     }
50 }

　　以上我是根據函數的參數(val)來區別彈窗類別，其：

　　　　第一種彈窗使用alert，是最簡單最通用也是最不堪大用的彈框

　　　　第二種彈窗使用的是原生的prompt,同時需要把這個對象賦給一個變數，通過參數可以即可獲取到用戶輸入的內容哦~

　　　　第三種彈框是一種單選性質的彈框，使用的是confirm，同樣也是需要將這個對象賦給一個變數才可獲取到true 或 false 嘿~

　　　　第四種彈框使用的是一個完整的html頁面(需要window.open,裡面一堆配置參數哈~)，其最大的好處就是自定義特別強而且原生，目前項目也用到過；在這裡說個缺點哈：

　　　　　　 這種彈框很容易被瀏覽器攔截(尤其chrome)，如果攔截了請點擊瀏覽器地址欄，然後點同意即可~

　　　　第五種彈窗需要用到jQuery的UI插件(dialog方法)，自定義也很強，不過個人感覺很醜，如果有時間建議嘗試bootstrap插件，比這個亮潵百倍哄~

 

oh~yeah，本章搞定ㄟ(▔▽▔)ㄏ

 

 


您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • try--catch--finally中return返回值執行的順序
    1、try塊中沒有拋出異常，try、catch和finally塊中都有return語句 1 public static int NoException(){ 2 int i=10; 3 try{ 4 System.out.println("i in try block is："+i); 5 retu ...
  • Phyton學習筆記
    Python的整數運算結果仍然是整數，浮點數運算結果仍然是浮點數。 但是整數和浮點數混合運算的結果就變成浮點數了。 ...
  • hihoCoder_1449_尾碼自動機三·重覆旋律6
    #1449 : 尾碼自動機三·重覆旋律6 #1449 : 尾碼自動機三·重覆旋律6 時間限制:15000ms 單點時限:3000ms 記憶體限制:512MB 描述 小Hi平時的一大興趣愛好就是演奏鋼琴。我們知道一個音樂旋律被表示為一段數構成的數列。 現在小Hi想知道一部作品中所有長度為K的旋律中出現次 ...
  • jacascript JSON對象的學習
    前言：這是筆者學習之後自己的理解與整理。如果有錯誤或者疑問的地方，請大家指正，我會持續更新！ JSON (javascript object notation) 全稱是 javascript 對象表示法，它是一種數據交換的文本格式，而不是一種編程語言，用於讀取結構化數據。2001年由Douglas ...
  • jQuery中的常用內容總結(三)
    jQuery中的常用內容總結(三) 轉載請註明地址:http://www.cnblogs.com/funnyzpc/p/7571998.html 內容提要 選擇器(第一節) 選擇器的擴展方法(第一節) 節點的CSS操作及節點其他操作(第一節) Ajax同步與非同步(上一節) 事件(上一節) 彈窗(上一 ...
  • contenteditable元素的placeholder輸入提示語設置
    在某些情況下，textarea是不夠用的，我們還需要顯示一些圖標或者高亮元素，這就需要用富文本編輯器，而富文本編輯器本質上是HTML元素設置了contenteditable。 然後可能需要像input、textarea有placeholder的輸入提示語，但contenteditable的元素，pl ...
  • Sublime Text編輯器 + vim插件
    Sublime安裝 Sublime Text 是一個代碼編輯器。Sublime Text是由程式員Jon Skinner於2008年1月份所開發出來，它最初被設計為一個具有豐富擴展功能的Vim。 Sublime Text具有漂亮的用戶界面和強大的功能，例如代碼縮略圖，Python的插件，代碼段等。還 ...
  • 實現對象合併功能
    前言 jQuery 中的 $.extend() 是經常使用到工具函數，多用於合併參數（對象），具體用法在這裡不過多贅述，可通過傳參控制合併過程中是否使用深度拷貝；而ES2015中新增的 Object.assign()方法，也可以實現對象的合併，不過合併過程中使用的是淺拷貝；本文參考了jQuery的e ...
一周排行
    -Advertisement-
    Play Games
  • 移動開發（一）：使用.NET MAUI開發第一個安卓APP
    移動開發（一）：使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說，近來想嘗試開發一款安卓APP，考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP，畢竟是使用Visual Studio開發工具，使用起來也比較的順手，結合微軟官方的教程進行了安卓 ...
  • wpf ToggleButton選中效果和一個登錄界面
    前言 QuestPDF 是一個開源 .NET 庫，用於生成 PDF 文檔。使用了C# Fluent API方式可簡化開發、減少錯誤並提高工作效率。利用它可以輕鬆生成 PDF 報告、發票、導出文件等。 項目介紹 QuestPDF 是一個革命性的開源 .NET 庫，它徹底改變了我們生成 PDF 文檔的方 ...
  • 彈幕樹洞項目功能新增篇
    項目地址 項目後端地址： https://github.com/ZyPLJ/ZYTteeHole 項目前端頁面地址： ZyPLJ/TreeHoleVue (github.com) https://github.com/ZyPLJ/TreeHoleVue 目前項目測試訪問地址： http://tree ...
  • 第27篇 sqlserver2022詳細安裝步驟
    話不多說，直接開乾 一.下載 1.官方鏈接下載： https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe，運行開始下載SQL server； 二. ...
  • .NET 開源高性能 MQTT 類庫
    前言 隨著物聯網（IoT）技術的迅猛發展，MQTT（消息隊列遙測傳輸）協議憑藉其輕量級和高效性，已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫，為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog文檔翻譯系列（六） - 可用的接收器、增強器、格式化輸出
    Serilog支持多種接收器用於日誌存儲，增強器用於添加屬性，LogContext管理動態屬性，支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項，適用於不同需求。 ...
  • 警惕 Visual Studio 屬性求值副作用導致邏輯不符合預期
    目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據，爬取信息時需要模擬瀏覽器行為，否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下： 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • [使用目前最新版]HybridCLR6.9.0+YooAsset2.2.4實現純C# Unity熱更新方案 (一)
    1.前言 什麼是熱更新 游戲或者軟體更新時，無需重新下載客戶端進行安裝，而是在應用程式啟動的情況下，在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR，Xlua，ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles，Addressable， ...
  • 在 ASP.NET Core Web API 中使用操作篩選器統一處理通用操作
    本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺，其實像阿裡雲，騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後，它會送 ...
  • 第28篇 如何.net中實現高效可靠數據同步api
    通過以下方式可以高效，並保證數據同步的可靠性 1.API設計 使用RESTful設計，確保API端點明確，並使用適當的HTTP方法（如POST用於創建，PUT用於更新）。 設計清晰的請求和響應模型，以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證，確保接收到的數據符合預期格 ...
所有分類