jQuery鏈式編程

来源:https://www.cnblogs.com/CGWTQ/archive/2019/03/22/10577233.html
-Advertisement-
Play Games

鏈式編程 多行代碼合併成一行代碼,前提要認清此行代碼返回的是不是對象.是對象才能進行鏈式編程 .html(‘val’).text(‘val’).css()鏈式編程,隱式迭代 鏈式編程註意:$(‘div’).html(‘設置值’).val(‘設置值’);這樣可以,但是$(‘div’).html().t ...


鏈式編程

多行代碼合併成一行代碼,前提要認清此行代碼返回的是不是對象.是對象才能進行鏈式編程

.html(‘val’).text(‘val’).css()鏈式編程,隱式迭代

鏈式編程註意:$(‘div’).html(‘設置值’).val(‘設置值’);這樣可以,但是$(‘div’).html().text()這樣是不對的,因為獲取值時返回的是獲取的字元串而不是對象本身所以不能鏈式編程。

 

案例:

頁面上有一個ul球隊列表當滑鼠移動到某個li上的時候改行背景顏色變紅,
當點擊某個li的時候,讓該li之前的所有li背景色變黃,之後的所有li背景色變藍。自
己不變色。註意:nextAll()、prevAll()等方法返回值是一個元素集合,這裡鏈式編程
時要想清楚當前返回的值是什麼。

 

獲得兄弟元素的幾個方法:

next(); //當前元素之後的緊鄰著的第一個兄弟元素(下一個)
nextAll();//當前元素之後的所有兄弟元素
prev();//當前元素之前的緊鄰著的兄弟元素(上一個)
prevAll();//當前元素之前的所有兄弟元素
siblings();//當前元素的所有兄弟元素

以下代碼為主要代碼:

$("ul>li").mouseenter(function () {
  $(this).css("backgroundColor","red").siblings().css("backgroundColor","");
  }).click(function () {
    $(this).prevAll().css("backgroundColor","yellow");
  $(this).nextAll().css("backgroundColor","blue");
  }).mouseleave(function () {
  $(this).css("backgroundColor","");
});

顯示效果:

 

 

 

特此聲明:如需轉載請註明出處,如有疑問請及時提出以便於改正,如有侵權,聯繫刪除,謝謝

 


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

-Advertisement-
Play Games
更多相關文章
  • 一、自定義函數function 函數就是功能、方法的封裝。函數能夠幫我們封裝一段程式代碼,這一段代碼會具備某一項功能,函數在執行時,封裝的這一段代碼都會執行一次,實現某種功能。而且,函數可以多次調用。 1.1函數的定義和調用 語法: 定義:把需要實現的功能預先做好 執行:需要的時候執行這個功能,而且 ...
  • transform 變形屬性屬性:translate 平移,rotate 旋轉, scale 縮放,skew 傾斜 ◆ translate :指定對象的2D平移第一個參數對應X軸,第二參數對應Y軸;如果第二個參數未提供,則預設為0;translate(10px,10px)X軸 往左邊移動 對應第一個 ...
  • 頭部... 內容內容內容內容內容內容 底部。。。 .HolyGrail { display: flex; min-height: 100vh; flex-direction: column; } header, footer { height:80px; line-height: 80px; tex... ...
  • 原文地址:http://wushaobin.top/2019/03/15/webpackPlugin/ 什麼是Plugin? 在 "Webpack學習-工作原理(上)" 一文中我們就已經介紹了 的基本概念,同時知道了webpack其實很像一條生產線,要經過一系列處理流程後才能將源文件轉換成我們理想的 ...
  • 秒轉換成年月日時分秒 秒轉換成年月日時分秒 複製文本 複製文本 <script type="text/javascript"> function copy() { var url=document.getElementById("textID"); // 獲取要操作的DOM Url2.select( ...
  • import axios from 'axios' let CdnPath = {} CdnPath.install = function (Vue, options) { Vue.prototype.$_cdnDomain = function () { if (process.env.NODE_... ...
  • HTML基本結構: 選擇圖片 預覽圖: 立即提交 Java... ...
  • 前端路由 看到這裡可能有朋友有疑惑了,前端也有路由嗎?這些難道不應該是在後端部分操作的嗎?確實是這樣,但是現在前後端分離後,加上現在的前端框架的實用性,為的就是均衡前後端的工作量,所以在前端也有了路由,減輕了伺服器對這方面的判斷,在前端做好路由分發之後,後端就只需要寫API介面了,更著重於數據... ...
一周排行
    -Advertisement-
    Play Games
  • 移動開發(一):使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說,近來想嘗試開發一款安卓APP,考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP,畢竟是使用Visual Studio開發工具,使用起來也比較的順手,結合微軟官方的教程進行了安卓 ...
  • 前言 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 ...
  • 話不多說,直接開乾 一.下載 1.官方鏈接下載: https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe,運行開始下載SQL server; 二. ...
  • 前言 隨著物聯網(IoT)技術的迅猛發展,MQTT(消息隊列遙測傳輸)協議憑藉其輕量級和高效性,已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫,為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog支持多種接收器用於日誌存儲,增強器用於添加屬性,LogContext管理動態屬性,支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項,適用於不同需求。 ...
  • 目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據,爬取信息時需要模擬瀏覽器行為,否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下: 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • 1.前言 什麼是熱更新 游戲或者軟體更新時,無需重新下載客戶端進行安裝,而是在應用程式啟動的情況下,在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR,Xlua,ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles,Addressable, ...
  • 本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺,其實像阿裡雲,騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後,它會送 ...
  • 通過以下方式可以高效,並保證數據同步的可靠性 1.API設計 使用RESTful設計,確保API端點明確,並使用適當的HTTP方法(如POST用於創建,PUT用於更新)。 設計清晰的請求和響應模型,以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證,確保接收到的數據符合預期格 ...