【JQuery】jQuery中的常用方法小結

来源:http://www.cnblogs.com/HDK2016/archive/2017/06/15/7020203.html
-Advertisement-
Play Games

1.層級選擇器 後代選擇器 "父元素 後代元素" 比如:$("div p") 選取div元素下所有的p元素 子元素選擇器 "父元素 > 子元素" 比如:$("div>p") 選取div的子元素中的p元素 第一個向後兄弟元素 "元素名+兄弟元素" 比如:$("div+p") 選取div元素後的第一個p ...


1.層級選擇器  
   後代選擇器     "父元素  後代元素"

比如:$("div p") 選取div元素下所有的p元素


   子元素選擇器   "父元素 > 子元素"

比如:$("div>p") 選取div的子元素中的p元素


   第一個向後兄弟元素  "元素名+兄弟元素"

比如:$("div+p") 選取div元素後的第一個p元素


   向後所有的兄弟元素  "元素名~兄弟元素"

比如:$("div~p") 選取div元素後的所有p元素


2.篩選選擇器 
    :first            $("p:first")        第一個<p>元素    
    :last            $("p:last");        最後一個<p>元素
    :gt              $("p:gt(1)");      編號大於1的所有<p>元素
    :eq             $("p:eq(1)");      編號等於1的<p>元素
    :odd           $("td:odd");       編號是奇數的所有<td>元素
    :even         $("td:even");      編號是偶數的所有<td>元素
    :not           $("p:not(.notr)")  選取不帶有類名為notr的所有<p>元素
    
    根據內容來篩選
    :contains(內容)
    :empty()


    根據顯示來篩選
    :hidden   選出隱藏的元素(display:none 或 type="hidden" 或 隱藏父元素 或 長度和寬度為 0的 ,這些元素是隱藏元素 )
    :visible


 3.表單選擇器
    :input
    :text
    :button
    :file
    :radio
    :submit

 4.屬性--篩選選擇器
    [屬性名]           選擇到帶這個屬性的元素
    [屬性名='值']     選擇到屬性等於某個值的元素
    [屬性名!='值']    選擇到屬性不等於某個值的元素

    比如:$("input[name='newlatter']");   選取name屬性為newlatter的input元素

 5.表單屬性選擇器
    利用 :checked  :selected  :enabled  :disabled 來對元素進行篩選
    對屬性篩選選擇器的簡化  
    比如:  $(":radio:checked")                選中所有的已經選中的radio元素

            $("select option:selected")        選中的所有的已經選中的select下的option元素
 
  6.屬性方法

     attr("屬性名")              獲取屬性           

    attr("屬性名",屬性值)            設置屬性 

    removeAttr("屬性名")             移除屬性


   7.獲取和設置value屬性的方法
     val()  和 val("值")

   8. html()   html("值")    
      html()對應innerHTML
      html("值")對應innnerHTML="值"

      text()   text("值")
      text()對應innerText()
      text("值")對應innerText="值"


   9.樣式函數
      css("樣式的名字")             獲取樣式對應的值
      css("樣式的名字","樣式的值")               設置對應的樣式   一次設置一個
      css({"樣式的名字":"樣式的值","樣式的名字":"樣式的值"})        一次設置多個樣式
     
      addClass("class名")                     增加一個class屬性對應的值
      removeClass("class名")                刪除class屬性對應的值
      toggleClass("class名")                 切換
 
      width()     獲取寬度
      height()    獲取高度
      innerWidth() 獲取寬度(包括內邊距)
      outerWidth() 獲取寬度 (包括 內邊距 和 邊框 )
      outerWidth(true) 獲取寬度 (包括 內邊距 和 邊框  和 外邊距)
 

   10.顯示和隱藏函數
        show()   顯示
        hide()     隱藏
        toggle() 切換
        show(speed)  在規定的時間內顯示
        hide(speed)  在規定的時間內隱藏
        toggle(speed)  在規定的時間內切換

        slideUp(speed)  在規定的時間內向上收縮
        slideDown(speed)  在規定的時間內向下展開  
        slideToggle(speed)  在規定的時間內切換上面的兩種狀態

         fadeIn(speed)  在規定的時間內淡入
        fadeOut(speed)  在規定的時間內淡出  
        fadeToggle(speed)  切換上面的兩種狀態  

  11.自定義動畫
       選擇器.animate({"參數"},[時間],[動畫回調函數]);
       
  $(document).ready(function(){
    $("button").click(function(){
      $("div").animate({
        left:'250px',
        opacity:'0.5',
        height:'150px',
        width:'150px'
      },2000);
    });
  });


  12.綁定事件  
       選擇器.bind("事件",事件處理函數);    元素的事件 關聯上對應的事件處理函數        推薦使用on
       選擇器.unbind("事件");      斷開元素的事件 和 對應處理函數的關聯         推薦使用off
       選擇器.trigger("事件");     觸發事件調用
 
      創建常用的事件函數:
            click(fn)/click()
            dblclick(fn)/dblclick()
            blur(fn)/blur()
            focus(fn)/focus()
            change(fn)/change()
            keydown(fn)/keydown()
            keyup(fn)/keyup()
            mouseover(fn)/mouseover()
            mouseout(fn)/mouseout()
            submit(fn)/submit()
            load(fn)/unload(fn)

       比如:$("div").click(function(e){});//e是事件對象


               $("div").bind("click",function(){});


 13.event事件對象常用的屬性和方法
       target 事件源
       pageX  滑鼠點擊的X坐標
       pageY  滑鼠點擊的Y坐標
       stopPropagation() 取消事件冒泡

       比如:$(":button").click(function(e){
                  alert(e.pageX+":"+e.pageY);
             });

 14.組合事件函數
       hover(over,out)
          滑鼠移上去觸發over函數,移開觸發out函數

 
 15.動態事件函數
        on(事件類型,選擇器,處理函數)
            可以給某元素中現有和未來與選擇器匹配的元素綁定事件
      
        比如:$("table").on("click","tr",function(){
                   //事件處理邏輯
              });

 16.文檔處理函數
        $(html);    創建元素
        append()    向每個匹配的元素內部追加內容
        prepend()   向每個匹配的元素內部前置內容
        after()     在每個匹配的元素之後插入內容
        before()    在每個匹配的元素之前插入內容
        remove()    刪除節點
        empty()     清空節點
        clone()     複製節點元素
        clone(true)   複製節點元素以及綁定的事件處理
        children()   查找子元素
        next()      查找後面的兄弟元素
        prev()      查找前面的兄弟元素
        siblings()    查找兄弟元素
        find(selector)   查找子元素以及後代元素
        parent()    查找父元素
        parent(selector)    查找祖先元素
        eq(index)    返回index+1位置處的jQuery對象
        first()     獲取第一個元素
        last()    獲取最後一個元素
        is(expr)      判斷元素是否滿足expr條件
        not(expr)     返回不符合一定條件的元素
        get(index)    取得其中一個匹配的DOM元素

 17.工具函數
        $.each(object,[callback])
           遍歷方法,用於遍曆數組和對象
        $.unique(array)
           刪除數組中重覆的元素,註意:只能刪除DOM元素數組、字元串或數字數組
        $.merge(first,second)
           合併兩個數組,合併兩個數組到第一個數組上
        $.trim(str)
           去掉字元串起始和結尾的空格


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

-Advertisement-
Play Games
更多相關文章
  • BootStrap: * 響應式的HTML,CSS,JS的框架. * 響應式設計: * 設計一套頁面,適配不同的設備,在手機,PAD,PC端都能夠正常瀏覽. * 響應式原理: * 使用CSS3的媒體查詢,根據屏幕的解析度匹配不用的樣式. * BootStrap: * 全局CSS: * 柵格: * 表 ...
  • <!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Document</title><style type="text/css">nav { height: 50px;}nav span { margin: 0 5px; ...
  • 這個學期一直在忙著考駕照的事情,眼看就要期末了。我的大學生活的最後一個大的作業也要來臨了。說實話這個學期真的是沒有之前的兩個學期努力了。不知道是快要畢業的緣故還是真的是把心思用在了駕照上,想著在這次放暑假之前把駕照拿到手,就在今天真的實現了,終於可以心無牽掛的離開學校去找實習的工作了。這幾天家裡面也 ...
  • 緊接著上面寫的... 給div加一個邊框,border:1px solid black window.onload = function(){ var div = document.getElementById('div1'); div.onclick = function(){ setInterv ...
  • 微信的圖像有3種JSSDK的API,可以做一些簡單的需求,本節講解一個讓用戶在手機中選擇照片然後分享的項目。 ...
  • 用CSS和jQuery來實現它,儘量看起來和原效果一樣。 最終效果圖 最終效果圖 本教程里,我將使用CSS,HTML和jQuery來創建一個近似Apple TV視差效果,如果你正在閱讀,我假設你對上述三種技術都有基本的瞭解。 廢話不多說,開始第一部分。 HTML頁面 我們的頁面結構像下麵這樣: 首先 ...
  • 1.index.Android.js 2.在項目的 index.android.js同一目錄下 創建json文件 這樣方便圖片的訪問,資源圖片放在項目名稱\android\app\src\main\res\drawable 下麵 這裡的BadgeData.json 如下: 3.主要的文件 scrol ...
  • 我們在瀏覽淘寶京東等大型購物網頁時會經常出現許多圖片而圖片需要花費我們非常多的流量問題。 我們在寫網頁的時候怎麼解決這個問題呢?這時候就要用到我們圖片懶載入的問題,這樣不僅可以 解決流量問題,也提高了性能等等。 下麵我們就來看一下圖片的懶載入怎麼問題。 ...
一周排行
    -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.數據驗證 在伺服器端進行嚴格的數據驗證,確保接收到的數據符合預期格 ...