Query 總結

来源:http://www.cnblogs.com/wangxiaoshuai0401/archive/2016/10/27/6005564.html
-Advertisement-
Play Games

JQuery官方網站 http://jquery.com/ 1、JQuery概念 A、Jquery是一個優秀的Javascript框架。它是輕量級的js庫 ，它相容CSS3，還相容各種瀏覽器，jQuery2.0及後續版本將不再支持IE6/7/8瀏覽器。jQuery使用戶能更方便地處理HTML doc ...


 JQuery官方網站

 http://jquery.com/

 

1、JQuery概念

A、Jquery是一個優秀的Javascript框架。它是輕量級的js庫 ，它相容CSS3，還相容各種瀏覽器，jQuery2.0及後續版本將不再支持IE6/7/8瀏覽器。jQuery使用戶能更方便地處理HTML documents、events、實現動畫效果，並且方便地為網站提供AJAX交互。jQuery還有一個比較大的優勢是，它的文檔說明很全，而且各種應用也說得很詳細，同時還有許多成熟的插件可供選擇。jQuery能夠使用戶的html頁面保持代碼和html內容分離，也就是說，不用再在html裡面插入一堆js來調用命令了，只需定義id即可。

B、JavaScript的缺點:控制項的操作方式不統一，不同瀏覽器容易出觀相容問題。為了簡化操作，出現了許多對JavaScript封裝的函數庫比如Prototype、JQuery等。

C、JQuery的優點:小巧、方便、功能強大。插件豐富、開源、免費。

D、VS在VS2010中已經實現自動完成功能，VS2008需要安裝VSSP1補丁和VS90SP1-KB958502-X86補丁才能更好的支持，然後引用jquery-1.4.1.js，jquery-1.4.1-vsdoc.js放在同目錄下，VS2008中才會有自動提示和自動完成功能。

E、JQuery文件說明:

       jquery-1.4.2.js是JQuery主文件。

       jquery-1.4.2.min.js是壓縮板JQuery主文件。

       jquery-1.4.2-vsdoc.js是JQuery在VS中的自動提示功能。

 

2、JQuery之Ready

A、JQuery的read和Dom onload的區別:onload是所有Dom元素創建完畢觸發，而ready則是Dom元素創建完就觸發，這樣可以提高網頁的響應速度。

 

3、JQuery內置函數

A、$.map(array, function)函數:對數組array中每個元素調用function函數逐個處理，function函數處理返回一個新的數組。如:

       var array = [3, 6, 9];

var arrary2 = $.map(array, function(item) { return item * 2 });

for (var i = 0; i < arrary2.length; i++) {

alert(arrary2[i]);

};

       或: alert(arrary2);

       註: $.map函數不能處理dictionary風格的數組。

B、$.each(array, function)對array每個元素進行處理，但沒有返回值。

       var array = ["TOM", "湯姆", "Jerry", "傑瑞"];

$.each(array, function() { alert(this); });

或:

var dict = { "TOM": 20, "Jerry": 50 };

$.each(dict, function(key, value) { alert(key + "=" + value); });

 

4、JQuery對象與Dom對象

A、JQuery對象是通過對Dom對象的封裝產生的對象。

B、Dom對象要想通過JQuery進行操作，需要先轉換成JQuery對象。

       $(‘#div1’).html等價於:document.getElementByid(‘div1’).innerHTML;

       $(‘#div1’)得到的是JQuery對象，JQuery對象可以調用JQuery對象封裝的方法，不能調用Dom對象的方法，Dom對象也不能調用JQuery對象的方法。

C、將Dom對象轉換成JQuery對象的方法，$(Dom對象)。當調用JQuery沒有封裝的方法時必須用Dom對象，轉換方法:var docobj = jqobj[0]或var domobj=jqobj.get(0)。

D、樣式的修改：

JQuery修改樣式方法:$(“#div1”).css(“background”, “red”);

JQuery獲得樣式的方法:$(“#div1”).css(“background”);

   修改value值方法:

       JQuery修改value方法: $(“#div1”).val(“Dragon”);

       JQuery獲得value方法: $(“#div1”).val();

 

5、JQuery選擇器

A、JQuery選擇器用於查找滿足條件的元素，比如可以使用$(“#控制項id”)來根據控制項id獲得控制項的JQuery對象。相當於getElementByid。

B、$(“TagName”)來獲取所有指定簽名的JQuery對象，相當於getElementsByTagName。

C、CSS選擇器，同時選擇擁有某個樣式的多個元素:

       $(“.text”).click(function(){alert($(this).text();)});

D、多條件選擇器:$(“p,div,span.menuitem”),同時選擇p標簽、div標簽和擁有menuitem樣式的span標簽。

E、層次選擇器:

       1、$(“div li”)獲取div下的所有li標簽(後代，子、子的子標簽…)。

       2、$(“div > li”)獲取div下的直接li子標簽。

       3、$(“.menuitem + div”)獲取樣式名為menuitem之後的第一個div標簽。

       4、$(“.menuitem ~ div”)獲取樣式名為menuitem之後的所有div標簽。

 

6、JQuery隱式迭代

A、註:如果用隱式迭代就會不容易發現錯誤。

       $(function(){

              var elements = $(“#btn1”);

              If (elements.length <= 0){

                     alert(“沒有找到提定對象”);

                     return;

       }

       elements.mouseover(function(){ alert(“找到了”)});

 

7、節點遍歷

A、next()方法用於獲取節點之後的挨著的第一個同輩標簽，$(“.menuitem”).next(“div”)、nextAll()方法用於獲取節點之後的所有同輩標簽。

B、siblings()方法用於獲取所有同級標簽。

 

8、鏈式編程

A、JQuery可以實現鏈式編程

9、JQuery過濾選擇器

A、:first選擇第一個標簽。$(“div:first”)選取第一個<div>。

B、:last選取最後一個標簽。$(“div:last”)選取最後一個<div>。

C、:not選取不滿足選擇器條件的標簽。$(“input:not(.myclass)”)選取樣式名不是myclass的<input>標簽。

D、:even、:odd，選取索引是奇數、偶數的標簽:$(“input:event”)選取索引是奇數的<input>。

E、:eq、:gt、:lt選取索引等於、大於、小於索引序號的標簽，比如$(“input:lt(1)”)選取索引小於1的<input>。

F、$(“:header”)選取所有的h1…h6標簽。

G、$(“div:animated”)選取正在執行動畫的<div>標簽。

 

10、屬性過濾選擇器

A、$(“div[id]”)選取有id屬性的<div>。

B、$(“div[title=test]”)選取title屬性為“text”的<div>。

C、$(“div[title!=test]”)選取title屬性不為“text”的<div>。

 

11、表單對象選擇器

A、$(“#form1:enabled”)選取id為form1的表單內所有啟用的標簽。

B、$(“#form1:disabled”)選取id為form1的表單內所有禁用的標簽。

C、$(“#form1:checked”)選取所有選中的標簽。(checkBox)。

D、$(“#form1:selected”)選取所有選中的選項標簽。(下拉列表)。

 

12、JQuery的Dom操作

A、使用html()方法讀取或設置標簽的innerHTML:

       alert($“a:first”).html());

       $(“a:first”).html(“hello”);

B、使用text()方法讀取或設置標簽的innerText:

       alert($(“a:first”).text());

       $(“a:first”).text(“hello”);

C、使用att()方法讀取或設置標簽的屬性:

       alert($(“a:first”).attr(href”));

       $(“a:first”).attr(“href”, http://www.rupeng.com);

D、使用removeAttr刪除屬性。

 

13、動態創建Dom節點

A、使用$(html字元串)來創建Dom節點，返回一個JQuery對象，然後調用append方法將新創建的節點添加到Dom中

       var link = $(“<a href=’http://www.baidu.com’>百度</a>”);

       $(“div:first”).append(link);

       Append方法用來在標簽的末尾追加標簽。

       prepend在標簽的開始添加標簽。

       after在標簽之後添加標簽。

       before在標簽之前添加標簽。

 

14、刪除節點

A、remove()刪除選擇的節點。

       如:清空ul中的項。$(“ul li.testitem”).remove();刪除ul下的li id=testitem的標答。

B、remove()方法返回值是被刪除的節點對象，還可以繼續使用刪除的節點。

       var lis = $(“#ulsite li”).remove();

       $(“#ulsite2”).append(lis);

C、empty()是將節點清空。

 

15、設定按鈕的啟用時間

<script type=“text/javescript”>

       var leftseconds = 10

       var intervalid;

       $(function(){

              $(“#btnReg”).attr(“disabled”,true);

              Intervalid = setInterval(“countDown()”,1000);

       }

 

       Function CountDown(){

              if(leftseconds <= 0){

                     $(“#btnReg”).val(“同意”);

                     $(“#btnReg”).attr(“disabled”,false);

                     clearIntervalid(Intervalid);

                     return;

              }

              Leftseconds--;

              $(“#btnReg”).val(“請仔細閱讀”+ Leftseconds + “”);

       }

</script>

 

16、樣式操作

A、獲取樣式attr(“class”)，設置樣式attr(“class”, “myclass”)。

B、追加樣式addclass(“myclass”)。

C、移除樣式removeclass(“myclass”)。

D、切換樣式togleclass(“myclass”)。如果存在則去掉樣式，如果不存在則添加。

E、判斷樣式是否存在:hasclass(“myclass”)。

 

17、RadioButton操作

A、取RadioButton選中值:

$(“input[name=gender]:checked”).val()

       <input id= “radio1” checked= “checked” name= “gender” type= “radio” value= “男” />男

       <input id= “radio2” checked= “checked” name= “gender” type= “radio” value= “女” />女

       <input id= “radio3” checked= “checked” name= “gender” type= “radio” value= “未知” />未知

B、設置RadioButton選中值:

       $(“input[name=gender]”).val([“女”]);

 

18、事件

A、JQuery中事件的綁定:$(“#btn”).bind(“click”,function(){})。

JQuery用$(“#btn”).click(function(){})來簡化。

B、調用事件對象的stopPropagation()方法終止事件冒泡。

C、阻止預設行為: 比如超鏈接點擊後會轉向新的鏈接。如果想阻止預設行為只要調用事件對象的preventDefault()方法。

D、屬性:pageX、pageY、target獲得觸發事件的元素（冒泡的起始,和this不一樣）。

   which如果是滑鼠事件獲得按鍵(1左鍵，2中鍵，3右鍵)。

   altKey、shiftKey、ctrlKey獲得alt、shift、ctrl是否按下，為bool值。

   keyCole、charCode屬性發生事件時的keyCode、charCode。

E、移除事件綁定:unbind()方法即可移除元素上綁定的事件，如果bind(“click”)則移除click事件的綁定。

F、一次性事件:如果綁定的事件只想執行一次隨後立即unbind可以使用one()方法進行綁定。

 

19、動畫

A、show、hide()方法用於顯示、隱藏標簽。用toggle()方法在顯示、隱藏之間切換。

       $(“:button[value=show]”).click(function(){$(“div”).show();});

       $(“:button[value=hide]”).click(function(){$(“div”).hide();});

B、show、hide可以帶參數使用。fast(200毫秒)、normal(400毫秒)、slow(600毫秒)。

 

20、JQuery cookie

A、使用方法:

       1、添加對jquery.cookie.js引用。

       2、設置,$.cookie(‘名字’, ‘值’)。cookie中保存的值是文本。

       3、讀取,var v = $.cookie(‘名字’)

B、$.cookie(‘名字’, ‘值’,{expires:7,path:’/’,domain:’baidu.com’,secure:true});

expires 保存的天數。

path 設置網站那些目錄下的文件可以讀取。

domain 保存的是哪個功能變數名稱的。

 

21、JQueryUI

 

22、JQuery輔助工具

A、DebugBar

B、IE開發人員工具


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

-Advertisement-
Play Games
更多相關文章
  • sql 查詢結果作為數據進行添加，where in 子查詢
    對於大神來說，不看都知道，但是對於和我一樣的菜鳥，就需要解釋一下了。 a,b是數據表名稱，c,d,e,f是數據。而c,d,e,f這些數據不一定非得來自b表，可以來自left join，right join和內連接查詢出來的結果 個人覺得使用起來還是比較方便的。 1 SELECT c,d,e FROM ...
  • 如何利用pt-online-schema-change進行MySQL表的主鍵變更
    業務運行一段時間，發現原來的主鍵設置並不合理，這個時候，想變更主鍵。這種需求在實際生產中還是蠻多的。 下麵，看看pt-online-schema-change解決這類問題的處理方式。 首先，創建一張測試表 create table t2(c1 int primary key, c2 int); 構造 ...
  • 會員系統中需要驗證用戶的郵箱是否真實存在
    在開髮網站時，我們需要對用戶註冊的郵箱進行核對與驗證，用戶填寫的郵箱是否有效郵箱。好吧，我們先從資料庫入手，修改用戶表讓用戶有填寫email的欄位，添加了2個欄位： ALTER TABLE [dbo].[Users] ADD [Email] VARCHAR(100) NULL, [IsVerify] ...
  • ORACLE資料庫-錯誤碼表
    ORA-00001: 違反唯一約束條件 (.) ORA-00017: 請求會話以設置跟蹤事件 ORA-00018: 超出最大會話數 ORA-00019: 超出最大會話許可數 ORA-00020: 超出最大進程數 () ORA-00021: 會話附屬於其它某些進程；無法轉換會話 ORA-00022:  ...
  • Hadoop集群搭建安裝過程（一）（圖文詳解---盡情點擊！！！）
    Hadoop集群搭建(一)(上篇中講到了Linux虛擬機的安裝) 一、安裝所需插件（以hadoop2.6.4為例，如果需要可以到官方網站進行下載：http://hadoop.apache.org） hadoop2.6.4插件、已經裝好的虛擬機（CentOS，這個百度一下自行安裝）、虛擬機安裝後將其克 ...
  • Spark standalone HA
    配置Spark standalone HA 主機：node1,node2,node3 master: node1,node2 slave:node2,node3 修改配置文件： node1,node3: spark-env.sh node2: spark-env.sh node2與node1的差別僅 ...
  • 史林楓：sqlserver資料庫中數據日誌的壓縮及sqlserver占用記憶體管理設置
    使用sqlserver和IIS開發.net B/S程式時，數據量逐漸增多，用戶也逐漸增多，那麼伺服器的穩定性就需要維護了。資料庫如何占用更小記憶體，無用的日誌如何瞬間清空？ ...
  • MYSQL基礎操作之數據約束與關聯查詢
    一、MYSQL約束 1.預設值約束，當欄位沒有插入值的時候，mysql自動給該欄位分配預設值。 預設值的欄位允許為空。 對預設值欄位也可以插入null。 2.非空約束 2.1非空欄位必須賦值(錯誤顯示) 2.2不能插入null（錯誤顯示） 3.唯一約束 下麵語句執行發生錯誤 錯誤提示 4.主鍵約束( ...
一周排行
    -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.數據驗證 在伺服器端進行嚴格的數據驗證，確保接收到的數據符合預期格 ...
所有分類