jquery筆記整理

来源:https://www.cnblogs.com/fenqinearl/archive/2019/03/19/10561834.html
-Advertisement-
Play Games

01-jquery簡介1）功能： ·html元素選取 ·Html元素操作 ·Css操作 ·Html事件函數 ·JavaScript特效和動畫 ·DOM的遍歷及修改 ·AJAX ·Utilities ·插件2）版本支持 ·jquery2 及以上不支持IE6,7,8 ·使用註釋: · · ·... ...


01-jquery簡介

1）功能：
     ·html元素選取
     ·Html元素操作
     ·Css操作
     ·Html事件函數
     ·JavaScript特效和動畫
     ·DOM的遍歷及修改
     ·AJAX
     ·Utilities
     ·插件
2）版本支持
     ·jquery2 及以上不支持IE6,7,8
     ·使用註釋:
     ·<!--[if lt IE 9]>
     ·<script src="Script/jquery-1.9.0.js"></script>
     ·<![endif]-->
     ·<!--[if gte IE 9]><!-->
     ·<script src="Script/jquery-2.0.0.js"></script>
     ·<!--<![endif]-->
3）版本
     ·Production version:實際網站，壓縮版
     ·Development Version：測試和開發，未壓縮
4)引用：
     文件類型:xxx.js
     ·<script src="xxx.js"></script>
     ·CDN（內容分髮網絡）引用
     ·<script src="//libs.baidu.com/jquery/1.10.2/jquery.min.js"></script>
     --CDN:
         https://baike.baidu.com/item/CDN/420951?fr=aladdin
     常用CDN引用：
     1、谷歌
     <script src="http://ajax.googleapis.com/ajax/1ibs/jquery/1.10.2/jquery.min.js">
     </script>
     2、微軟
     <script src="http://ajax.Microsoft.com/ajax/jquery/jquery/1.10.2/jquery.min.js">
     </script>
     使用百度、又拍雲、新浪、谷敵或微軟的jQuery，有一個很大的優勢：
     許多用戶在訪問其他站點時，已經從百度、又拍雲、新浪、谷歌或微軟載入過 jQuery。
     所有結果是，當他們訪問您的站點時，會從緩存中載入jQuery，這樣可以減少載入時間。
     同時，大多數CDN都可以確保當用戶向其請求文件時，會從離用戶最近的伺服器上返迴響應，
     這樣也可以提高載入速度。

02-jquery語法

1）步驟：
$(selector).action();
     ·$:jquery
     ·查詢：selector
     ·操作: action
2)選擇器：Xpath(xml中的查詢信息的語言)+CSS
     $(this).hide();
     $("p").hide();
     $("p.test").hide();
     $("#test").hide();
3)文檔就緒事件：
//文檔載入完執行方法
     $(document).ready(function(){
    
     });
     $(function(){
     });


03-jquery選擇器

1）HTML
     1、元素
     2、id
     3、class
2）CSS
     $("p").css("background","red");
3)more
     $("*")        --選取所有元素
     $(this)        --選取當前htnl元素
     $("p.td")    --選取class為td的p元素
     $("p:first")--選取第一個p元素
     $("ul li:first")--選取第一個ul li元素   
     $("ul li:first-child")選取每個ul的第一個li元素
     $("[href]")    --選取帶有href屬性的元素
     $("a[target='_blank']")--選取所有target屬性為"_blank"的a元素
     $("a[target!='_blank']")--選取所有target屬性不為"_blank"的a元素
     $(":button")--選取所有type="button"的input元素和button元素
     $("tr:even")--選取偶數位置的tr元素
     $("tr:odd")--選取奇數位置的tr元素
4)獨立文件內引用jquery函數


04-jquery事件

1）dom事件對應的Jquery事件
2）常見事件：
滑鼠事件            鍵盤事件            表單事件            文檔/視窗事件
click            keypress        submit            load
dblclick        keydown            change            resize
mouseenter        keyup            focus            scroll
mouseleave        blur                            unload

3）比較keypress、keydown與keyup
·keydown：    在鍵盤上按下某鍵時發生，一直按著則會不斷觸發（opera瀏覽器除外），它返回的是鍵盤代碼；
·keypress：    在鍵盤上按下一個按鍵，並產生一個字元時發生，返回ASCII碼。
             註意：shift、alt、ctrl等鍵按下並不會產生字元，所以監聽無效，
             換句話說，只有按下能在屏幕上輸出字元的按鍵時keypress事件才會觸發。若一直按著某按鍵則會不斷觸發。
·keyup：        用戶鬆開某一個按鍵時觸發，與keydown相對，返回鍵盤代碼。


05-jquery效果-01隱藏顯示及切換

1)隱藏和顯示，切換
$(selector).hide(speed,callback);
$(selector).show(speed,callback);
$(selector).toggle(speed,callback);
//$(selector)選中的元素為n，callback執行n次
//callback可以是函數名，也可以是匿名函數
//callback函數名後加括弧，函數會立即執行，而不是完成顯示隱藏後執行
可選參數speed為顯示速度
取值：slow,fast,毫秒
可選參數callback是隱藏或顯示或切換後執行的函數名稱
例：$("p").hide(1000,function(){
     $(p).show();
     });


05-jquery效果-02淡入淡出

1）淡入淡出函數
     ·fadeIn()--淡入
     ·fadeOut()--淡出
     ·fadeToggle()--如果淡入，則淡出，反之。
     ·fadeTo()
$(selector).fadeIn(speed,callback);
$(selector).fadeOut(speed,callback);
$(selector).fadeToggle(speed,callback);
$(selector).fadeTo(speed,opacity,callback);--speed,opacity為必選參數


05-jquery效果-03滑動

1)滑動函數
slideDown()
slideUp()
slideToggle()
$(selector).slideDown(speed,callback);
$(selector).slideUp(speed,callback);
$(selector).slideToggle(speed,callback);--在slideUp,slideDown之間切換
--沒有註明都為可選參數


05-jquery效果-04動畫

1)animate簡介

--用於創建自定義動畫
--語法：
$(selector).animate({params},speed,callback);
--params為必選參數，定義了形成動畫的CSS屬性
$(selector).animate({styles,speed,easing,callback);
--easing為內置函數
     取值：swing,liner
$(selector).animate(styles,options);
--options為規定動畫的額外選項
可能的值：
·speed-設置動畫的速度
·easing-規定要使用的easing 函數
·callback-規定動畫完成之後要執行的函數·step-規定動畫的每一步完成之後要執行的函數
·queue-布爾值。指示是否在效果隊列中放置動畫。如果為false，則動畫將立即開始
·specialEasing-來自styles參數的一個或多個CSS屬性的映射，以及它們的對應 easing函數
//預設情況下html都有一個靜態的位置，設置位置時要相對於CSS設置，如設置子屬性
//父級relative,子absolute
//params可以為多個屬性，逗號隔開
--animate可以所有的css屬性，必須使用Camel命名屬性名，如paddingLeft,marginLeft
--如果要生成顏色動畫，jquery提供了Color Animations插件
--只有數字值可創建動畫(margin:30px)，字元串無法創建動畫(background:red)
2)animate()使用相對值
+=,-=   --創建相對動畫，相對於元素的當前值改變
例：
<script>
$(document).ready(function(){
   $("button").click(function(){
     $("div").animate({
       left:'250px',
       height:'+=150px',
       width:'+=150px'
     });
   });
});
</script>
3)animate()使用預定義的值
show,hide,toggle
例：
<script>
$(document).ready(function(){
   $("button").click(function(){
     $("div").animate({
       height:'toggle'
     });
   });
});
</script>
4)animate()使用隊列功能
例：
<script>
$(document).ready(function(){
   $("button").click(function(){
     var div=$("div");
     div.animate({height:'300px',opacity:'0.4'});
     div.animate({width:'300px',opacity:'0.8'});
     div.animate({height:'100px',opacity:'0.4'});
     div.animate({width:'100px',opacity:'0.8'});
   });
});
</script>


    

05-jquery效果-05停止動畫

1)stop()
語法：
$(selector).stop(stopAll,goToEnd);
--可選參數stopAll規定是否清除動畫隊列，預設為false
--可選參數goToEnd規定是否立即完成當前動畫，預設為false
--


05-jquery效果-06callback方法

1)
callback函數在當前動畫完成後執行。
//JavaScript代碼是逐條執行的通過傳參執行函數可以避免動畫
//效果衝突。
例：
有回調函數
<script>
$(document).ready(function(){
   $("button").click(function(){
     $("p").hide("slow",function(){
       alert("段落現在被隱藏了");
     });
   });
});
</script>
無回調函數
<script>
$(document).ready(function(){
   $("button").click(function(){
     $("p").hide(1000);
     alert("現在段落被隱藏了");
   });
});
</script>


05-jquery效果-07Chaining方法

1)chaining方法
--允許我們一條語句中執行多個jquery方法（相同元素上）
--jquery方法鏈接
--即將多個動作函數鏈接起來執行
例：
<script>
$(document).ready(function()
   {
   $("button").click(function(){
     $("#p1").css("color","red").slideUp(2000).slideDown(2000);
   });
});
</script>
書寫格式：（厲害！！！）
//jquery會捨棄多餘的空格，當成一句去執行
<script>
$(document).ready(function()
   {
   $("button").click(function(){
     $("#p1").css("color","red")
       .slideUp(2000)
       .slideDown(2000);
   });
});
</script>


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

-Advertisement-
Play Games
更多相關文章
  • mysql索引和外鍵
    innodb外鍵： 1、CASCADE：從父表刪除或更新會自動刪除或更新子表中匹配的行 2、SET NULL：從父表刪除或更新行，會設置子表中的外鍵列為NULL，但必須保證子表列沒有指定NOT NULL 3、RESTRICT：拒絕對父表的刪除或更新操作（如果子表中有匹配的記錄,則不允許對父表對應候選 ...
  • SQL - Order By如何處理NULL
    問題來了。執行SQL語句 如果用來排序的列x、y當中有NULL值，那麼它們的順序是怎樣的呢？ 不同的資料庫有不同的答案，目前的主流資料庫大致分為兩派。 一、NULL最大派 這一派包括PostgreSQL、Oracle、DB2等。它們的原則是，排序時NULL比其他的值都要大。 最大派還有一個共性，就是 ...
  • MySQL 性能測試
    MySQL 查詢優化器有幾個目標，但是其中最主要的目標是儘可能地使用索引，並且使用最嚴格的索引來消除儘可能多的數據行。最終目標是提交 SELECT 語句查找數據行，而不是排除數據行。優化器試圖排除數據行的原因在於它排除數據行的速度越快，那麼找到與條件匹配的數據行也就越快。如果能夠首先進行最嚴格的測試 ...
  • mac上cocoapods安裝與卸載
    安裝 卸載 1. ，卸載pod命令。 2. ，查看所有安裝的cocoapods組件，依次刪除， 或者執行以下腳本 Xcode工程里的cocoapods卸載與重裝 ...
  • 關於RecyclerView嵌套導致item復用異常，界面異常的問題
    常規需求： 外層RecyclerView嵌套內層RecyclerView ， 在上下滑動的時候會出現item數據以及view的顯示異常。 解決辦法： 1、重寫 getItemViewType 方法 2、因為是RecyclerView的復用機制導致的問題，可以暴力解決，禁止RecyclerView的復 ...
  • iOS----------四捨五入（只舍不入）
    NSString * totalAssetString =@"1161000.00"; NSDecimalNumber *totalAssetNumber = [NSDecimalNumber decimalNumberWithString:totalAssetString]; NSDecimalN ...
  • RadioButton監聽事件
    RadioButton為單選按鈕，他需要與RadioGroup配合使用 對應的佈局代碼： Java代碼： 在上述代碼中，利用setCheckedChangeListener（）監聽RadioGroup控制項狀態，獲取監聽結果輸出到TextView控制項里顯示 ...
  • 基於flexbox純css框架的解析
    學CSS很好的一個方法大概是先用純CSS來實現一個自己的框架，然後便可以在之後的使用中對一開始可能很粗糙的框架做細緻的優化與改進，刪除些冗餘，添加些功能之類的。 當然，為了避免一開始寫框架時候的時候手足無措，對一個css框架應該實現些什麼功能不大清楚，便可以參考已有的框架自己重寫一遍，寫的過程中這些 ...
一周排行
    -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.數據驗證 在伺服器端進行嚴格的數據驗證，確保接收到的數據符合預期格 ...
所有分類