《鋒利的jQuery》心得筆記--Two Sections

来源:http://www.cnblogs.com/qzccl/archive/2016/03/30/5338879.html
-Advertisement-
Play Games

第三章 1、 DOM操作（節點） 1) 查找節點可以查找元素節點和屬性節點 2) 創建節點： (1) 創建元素節點 var addLi = $(“<li></li>”);或者var addLi = $(“</li>”)不可以是var addLi = $(“<li>”); $(“ul”).append ...


第三章

1、    DOM操作（節點）

1)         查找節點可以查找元素節點和屬性節點

2)         創建節點：

(1)       創建元素節點

var addLi = $(“<li></li>”);或者var addLi = $(“</li>”)不可以是var addLi = $(“<li>”);

$(“ul”).append(addLi);

(2)       創建文本節點：var addLi = $(“<li>文本節點</li>”);

(3)       創建屬性節點：var addLi = $(“<li class=””>屬性節點</li>”);

3)         插入節點：

var add = $(“<b>插入節點</b>”);

(1)       $(“p”).append(add)和add.appendTo(“p”);添加到內部

(2)       $(“p”).prepend(add)和add. prependTo(“p”); 添加到內部

(3)       $(“p”).after(add)和add.insertAfter (“p”);添加到外部

(4)       $(“p”).before(add)和add. insertBefore (“p”); 添加到外部

4)         刪除節點

(1)       remove()//可以帶屬性

(2)       detach()//與remove()不同的是：所綁定的事件和附加的數據等都會保留下來

(3)       empty()//清空節點

5)         複製節點

(1)       clone()

(2)       clone(true)是讓複製元素的同時也複製元素所綁定的事件，同時也具備複製的功能

6)         替換節點

(1)       replaceWith();比如：$(“p”). replaceWith (add)

(2)       replaceAll;比如：add. replaceAll (“p”)

7)         包裹節點

(1)       wrap();比如：$(“p”). wrap (“<b></b>”)把p標簽用b標簽包裹起來

(2)       wrapAll()比如$(“p”). wrapAll (“<b></b>”)把所有匹配的每個p標簽用b標簽包裹起來

(3)       wrapInner()比如$(“p”). wrapAll (“<b></b>”)把所有匹配的所有p標簽用b標簽包裹起來

2、    DOM操作（屬性）

1)         屬性

(1)       獲取屬性：$(“p”).attr(“title”)

(2)       設置屬性：$(“p”).attr({“title”:”myTitle”,”class”:”pItem”})

(3)       既能獲取屬性也能設置屬性的還有：html()、text()、height()、width()、val()、css()

(4)       刪除屬性：$(“p”).removeAttr(“title”)

2)         樣式

(1)       獲取樣式：$(“p”).attr(“class”)

(2)       設置樣式：$(“p”).attr(“class”,”main”)

(3)       追加樣式：$(“p”).addClass(“other”)

(4)       移除樣式：

(1st) 刪除一個：$(“p”). removeClass(“other”)

(2nd)    刪除多個：$(“p”). removeClass(“other”) . removeClass(“main”)或者

           $(“p”). removeClass(“other  main”)

(5)       切換樣式

(1st) toggle(function(){},function(){})

(2nd)    $(“p”). toggleClass(“other”)//如果類名存在則刪除，不存在則添加

(6)       $(“p”). hasClass(“other”)判斷是否含有某個樣式

3)         html():

(1)       獲取html()

$(“p”). html() 獲取p裡面的html內容

(2)       設置html()

$(“p”). html(“<b>設置html()</b>”)設置p裡面的html內容

4)         text()

(1)       獲取text ()

$(“p”). text () 獲取p裡面的文本內容

(2)       設置text ()

$(“p”). text (“設置html()”)設置p裡面的文本內容

5)         val()【相當於js的value屬性】

(1)       能獲取屬性也能設置屬性

(2)       能使select()、checkbox()、radio()相應的選項被選中

3、    DOM操作(遍歷節點)

1)         childer() 子元素集合

2)         next() 匹配元素後面緊鄰的同輩元素

3)         prev() 匹配元素前面緊鄰的同輩元素

4)         silbings() 匹配元素前後緊鄰的同輩元素

5)         closest(“xx”) 取得最近的匹配元素

6)         parent()、parents()

4、    DOM操作(CSS)

1)         單個樣式：$("p”).css(“color”,”red”);

2)         多個樣式：$("p”).css({“color”:”red”,” opacity”:”0.5”});

3)         offset()；獲取元素在當前視窗的相對位移

4)         position()；

5)         scrollTop()、scrollLeft()

第四章

1、    事件綁定：bind(“click”, fn);有三個參數，但是第二個參數一般作為event.data屬性傳遞給對象的額外數據對象，一般沒用它。

2、    合成事件：hover()【替代的是mouseenter、mouseout】、toggle()

3、    事件冒泡

1)         事件對象【單擊p標簽時，事件對象就會被創建，事件對象只有事件處理函數能訪問到，事件處理完畢，事件對象就會被銷毀】：$("p”).bind(“click”,function(event){})

2)         防止事件冒泡：加上event.stopPropagation()

3)         阻止預設行為：event.preventDefault();【比如有時候提交按鈕時，檢查到表單不合法，阻止表單提交】

4)         阻止事件冒泡和預設行為可以直接簡寫成：return  false;

5)         jQuery不支持事件捕獲

4、    事件對象的屬性：

1)         event.type 獲取事件類型

2)         event. preventDefault()

3)         event. stopPropagation()

4)         event.target

5)         event.relatedTarget

6)         event.pageX和event.pageY

7)         event.which滑鼠單擊時，獲取滑鼠的左（1）、中（2）、右（3）鍵

8)         event.metaKey

5、    移除事件

1)         unbind(【事件類型】，【要移除的函數】)

(1)       $("p”).unbind(“click”);

(2)       $("p”).unbind(“click”,function(){});

(3)       如果前面的$("p”).bind(“click”,mgFn=function(){});

這樣的話：$("p”).unbind(“click”, mgFn);

2)         one(【事件類型】，【數據，可不傳】,【函數】)//處理函數只執行一次

6、    模擬操作

1)         當用戶一進入頁面後就觸發事件：$("p”).trigger(“click”)或者$("p”). click()

2)         觸發自定義事件：$("p”).trigger(“myclick”)

3)         傳遞數據：trigger (【事件類型】，【要傳遞的附加數據】)

eg: $("p”).trigger(“myclick”,function(event,msg1,msg2){})

4)         執行預設操作

(1)       trigger()觸發事件後，會執行瀏覽器預設操作$("input”).trigger(“focus”)

(2)       不執行瀏覽器預設操作$("input”).triggerHandler(“focus”)

7、    其他方法：

1)         綁定多個事件bind(“mouseover mouseout ”, fn);

2)         添加事件命名空間(可以多個事件用同一個命名空間)

bind(“mouseover.plugin ”, fn);

3)         元素綁定相同事件，以不同命名空間進行調用

bind(“mouseover ”, fn);

bind(“mouseover.plugin ”, fn);

 

8、    動畫

1)         show()和hide()-----------------------toggle()

2)         fadeIn()和fadeOut()-----------------fadeToggle()

3)         slideUp()和slideDown()-----------------slideToggle()

4)         animate(【樣式屬性與值】，【速度參數可選】，【動畫完成時的函數，可選】)

(1)       $("p”). animate({left:”+=50px”,opacity:”0.5”},3000)

(2)   

   $("p”). animate({left:”+=50px”,opacity:”0.5”},3000,function(){

$(this).css(“border”:”1px solid blue”);//最後一步執行

})

 

5)         停止動畫：stop(【是否清空為執行完的動畫隊列，（true/false）,可選】，【是否直接將正在執行的動畫跳轉到末狀態，（true/false）,可選】)

PS：如果直接使用stop()就會立即停止正在執行的動畫

6)         判斷是否處於動畫狀態：is(“:    ”)

eg:$("p”).is(“:animate”)

7)         延遲動畫：delay(1000)

8)         其他動畫方法：

(1)       toggle(speed，[callback])

(2)       fadeToggle(speed，[easing] ,[callback])

(3)       fadeTo(speed,opacity ,[callback])

(4)       slideToggle(speed，[easing] ,[callback])

第五章

1、    IE6不支持除超鏈接元素之外的:hover偽類選擇符，可以使用css中設置樣式，然後再腳本中使用addClass

2、    覆選框

1)         反選操作：

$(‘[name=item]:checkbox’).each(function(){

         this.checked = !this.checked;

})

 

2)         全選/全不選用同一個覆選框：

$(‘[name=item]:checkbox’).attr(“checked”,this.checked);

 

3、    表格的索引$(“tr:【odd/even】”)從0開始，所以第1行是偶數,

不過當$(“tbody>tr:【odd/even】”)時1是奇數

4、    end()可以讓一個事件從回$(this)對象

5、    表格：

1)         帶有覆選框：

 

 $("tbody>tr").click(function(){

       //判斷當前是否選中

       var hasSelected = $(this).hasClass("selected");

       //如果選中，則移出selected類，反之

       $(this)[hasSelected?"removeClass":"addClass"]("selected");

       //查找內部的checkbox，設置對應的屬性

       $(this).find(":checkbox").attr("checked",!hasSelected);

    })

 

2)         表格的展開和關閉

通過控制tr的class和id

(1)       比如父行的class=”parent”和id=”row_01/02……”

子行的class=”child_ row_01/02……”

(2)       jQuery代碼為：

     

  $(“tr.parent”).click(function(){

$(this).toggleClass(“selected”).sibling(“.child_”+this.id).toggle();

})

 

(3)       當有父行是預設展開的話，當用戶進入頁面時，預設需要收起來，只要在上面那個代碼後面再加上.click()

3)         表格內容篩選：搜索框裡面輸入變數值

$(“#filterName”).keyup(function(){

    $(“table tbody tr”).hide().filter(“:contains(‘”+(  $(this).val()  )+”’)”).show();

}). keyup ();//DOM載入完了之後，綁定事件完成時候觸發

 


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

-Advertisement-
Play Games
更多相關文章
  • GET,POST — 簡述
    本文主要對GET與POST基本區別進行彙總並掌握,如有錯誤與遺漏之處,請指出。 文章出處:http://www.cnblogs.com/useryangtao/ 1. HTTP HTTP(即超文本傳輸協議)是現代網路中最常見和常用的協議之一,設計它的目的是保證客戶機和伺服器之間的通信。 HTTP 的 ...
  • 5天揭秘js高級技術-第一天
    一、基礎雜記 1. document.write() 1 <script type="text/javascript"> 2 document.write('<h2>我愛你</h2>'); 3 </script> 2. 變數必須聲明才能使用： 使用var聲明：局部變數； 沒有使用var聲明：全局變數 ...
  • JavaScript之自我總結篇
    最近在看湯姆大叔的"深入理解JavaScript系列"，寫得真的不錯，對於我而言特別是12章到19章，因為大叔研究的點，就主要是從底層來研究JavaScript為什麼會出現鐘種特有的語言現象，所以學習了大叔的文章後，自己對JavaScript的認知也更明白了，以前好多地方是知其然而不知其所以然，你要 ...
  • 戰五渣前端，面試第一天總結
    面試第一天，總結下碰到的不熟練的問題，備查： $state.go(to [, toParams] [, options]) Returns a Promise representing the state of the transition. Convenience method for trans ...
  • 贈書《JavaScript高級程式設計（第三版）》5本
    本站微博上正在送書《JavaScript高級程式設計》走過路過的不要錯過，參與方式，關註本站及簡尋網+轉發微博：http://weibo.com/1748018491/DoCtp6B8r 本站聯合簡尋網#尋找千里碼# 正在送書《javascript高級程式設計》第三版 5本，對這本書期待的朋友可以去 ...
  • 原生js實現Ajax
    一般來說，大家可能都會習慣用JQuery提供的Ajax方法，但是用原生的js怎麼去實現Ajax方法呢？ JQuery提供的Ajax方法： 原生js實現Ajax方法： 註釋： 1,open() 方法需要三個參數: 第一個參數定義發送請求所使用的方法（GET 還是 POST）。與 POST 相比，GET ...
  • html中的水平居中和垂直居中的問題。(固定高度與高度不定)
    在佈局的過程中，我們要對某些元素進行居中定位，相信，大家對水平居中都沒有問題，就是利用 margin：0 auto；以及文本居中 text-align：center。 下麵我想給大家說的是關於整體居中（水平居中和垂直居中）， 在這裡，我首先告訴大家我利用了絕對定位的辦法， 我現在先給大家製作一個框來 ...
  • javascript驗證代碼總結
    1:js 字元串長度限制、判斷字元長度 、js限制輸入、限制不能輸入、textarea 長度限制 2.:js判斷漢字、判斷是否漢字 、只能輸入漢字3:js判斷是否輸入英文、只能輸入英文4:js只能輸入數字,判斷數字、驗證數字、檢測數字、判斷是否為數字、只能輸入數字5:只能輸入英文字元和數字6: js ...
一周排行
    -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.數據驗證 在伺服器端進行嚴格的數據驗證，確保接收到的數據符合預期格 ...
所有分類