前端--再遇jQuery

来源:https://www.cnblogs.com/zycorn/archive/2018/09/13/9641838.html
-Advertisement-
Play Games

一.屬性 屬性(如果你的選擇器選出了多個對象,那麼預設只會返回第一個屬性) attr(屬性名|屬性值) --一個參數是獲取屬性的值,兩個參數是設置屬性值 --點擊圖片載入示例 removeAttr(屬性名) --刪除屬性的值 prop(屬性名|屬性值) --屬性的返回值是布爾類型 --單選,反選,取 ...


一.屬性

屬性(如果你的選擇器選出了多個對象,那麼預設只會返回第一個屬性)

　　attr(屬性名|屬性值)

　　　　--一個參數是獲取屬性的值,兩個參數是設置屬性值

　　　　--點擊圖片載入示例

　　removeAttr(屬性名)

　　　　--刪除屬性的值

　　prop(屬性名|屬性值)

　　　　--屬性的返回值是布爾類型

　　　　--單選,反選,取消的慄子

　　removeProp(屬性名)

　　　　--刪除屬性的值

迴圈:each(兩種迴圈示例)

　　--$.each(數組/對象,function(i,v){ })

　　--$("div").each(function( ){ })

CSS類

　　--addClass    添加類屬性

　　--removeClass    移除類屬性

　　--toggleClass    開關|切換(有就移除,沒有就添加)

HTML代碼相關/文本/值

　　沒有參數就是獲取對應的值

　　有參數就是設置對應的值

　　--.html()    添加html標簽        .html("<span>哈哈哈</span>")

　　--.text()    添加文本        .text("哈哈哈")

　　--.val()

　　　　input:一個參數,獲取的是input框里的值

　　　　checkbox:一個參數,獲取的是value的值

　　　　select:

　　　　　　單選:獲取值

　　　　　　多選:得到的是一個數組,設置的時候也要是數組

二,示例圖片

1.attr

　　(1).得到屬性和設置屬性的值

　　(2).設置自定義屬性值

　　

2.removeAttr

3.prop

4.removeProp

三.jQuery中迴圈的兩種方式

//    方式一
    li = [11,22,33];
    $.each(li,function (i,v) {
        console.log(i,v)// 0 11
                         // 1 22
                         // 2 33
    })
//    方式二
    $(".c1").each(function (i,v) {
        console.log(i,v)  //這裡的v拿到的是標簽
//         0 <div class="c1">hah</div>
//         1 <div class="c1">年</div>
//         2 <div class="c1">娃的</div>
        console.log(v.innerText)  //拿到文本
    })
</script>

退出迴圈=================

四.文檔操作

內部插入:

　　A.append(B)                           把B添加到A的後面

　　A.appendTo(B)                       把A添加到B的後面

　　A.prepend(B)                          把B添加到A的前面

　　A.prependTo(B)                      把A添加到B的前面　

外部插入:

　　A.after(B)                                把B添加到A的後面

　　A.insertAfter(B)　　                把A添加到B的後面

　　A.before(B)                             把B添加到A的前面

　　A.insertBefore(B)                    把A添加到B的前面

包裹:

　　wrap(html|ele|fn)

　　　　A.wrap(B) -->  B包A

　　unwarp()       不包

　　　　--不要加參數

　　wrapAll(html|ele)　　都包(作為整體包),只包你選中的那個

　　wrapInner(html|ele|fn)    裡面包

替換:

　　replaceWith(content|fn)

　　　　A.replaceWith(B)    -->  B替換A

　　replaceAll(selector)

　　　　A.replaceAll(B)       -->  A替換B　

刪除和清空

　　empty

　　　　--清空,內部清空

　　remove([expr])

　　　　--剪切　　多保存在變數中,方便再次使用

　　clone([Event[,deepEvent]])

　　　　--克隆

五.動畫

基本

　　show([s,[e],[fn]])

　　hide([s,[e],[fn]])

　　toggle([s],[e],[fn])

滑動

　　slideDown([s],[e],[fn])

　　slideUp(s,[e],[fn])

　　slideToggle([s],[e],[fn])

淡入淡出

　　fadeIn([s],[e],[fn])

　　fadeOut([s],[e],[fn])

　　fadeTo([[s],[e],[fn]])

　　fadeToggle([[s],[e],[fn])

六.事件處理

　　之前綁定事件的方法:

　　　　1.onclick=clickMe(); function clickMe() {}

　　　　2.ele.onclick = function(){}

　　　　3.ele.addEventListener("click", function(){}) js事件委托

　　jQuery綁定事件的方式:

　　　　1.$(ele).on("click",function(){})

七.具體代碼示例

1.返迴首頁

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>返迴首頁</title>
</head>
<style>
    .c1{
        height: 100px;
    }
    button{
        position: fixed;
        right: 15px;
        bottom: 15px;
        background-color: #336699;
    }
    .hide{
        display: none;
    }
</style>

<body>
<div class="c1">1</div>
<div class="c1">2</div>
<div class="c1">3</div>
<div class="c1">4</div>
<div class="c1">5</div>
<div class="c1">6</div>
<div class="c1">7</div>
<div class="c1">8</div>
<div class="c1">9</div>
<div class="c1">10</div>
<div class="c1">11</div>
<div class="c1">12</div>
<div class="c1">13</div>
<div class="c1">14</div>
<div class="c1">15</div>
<div class="c1">16</div>
<div class="c1">17</div>
<div class="c1">18</div>
<div class="c1">19</div>
<div class="c1">20</div>
<div class="c1">21</div>
<div class="c1">22</div>
<div class="c1">23</div>
<div class="c1">24</div>
<div class="c1">25</div>
<div class="c1">26</div>
<div class="c1">27</div>
<div class="c1">28</div>
<div class="c1">29</div>
<div class="c1">30</div>
<div class="c1">31</div>
<div class="c1">32</div>
<div class="c1">33</div>
<div class="c1">34</div>
<div class="c1">35</div>
<div class="c1">36</div>
<div class="c1">37</div>
<div class="c1">38</div>
<div class="c1">39</div>
<div class="c1">40</div>
<div class="c1">41</div>
<div class="c1">42</div>
<div class="c1">43</div>
<div class="c1">44</div>
<div class="c1">45</div>
<div class="c1">46</div>
<div class="c1">47</div>
<div class="c1">48</div>
<div class="c1">49</div>
<div class="c1">50</div>
<div class="c1">51</div>
<div class="c1">52</div>
<div class="c1">53</div>
<div class="c1">54</div>
<div class="c1">55</div>
<div class="c1">56</div>
<div class="c1">57</div>
<div class="c1">58</div>
<div class="c1">59</div>
<div class="c1">60</div>
<div class="c1">61</div>
<div class="c1">62</div>
<div class="c1">63</div>
<div class="c1">64</div>
<div class="c1">65</div>
<div class="c1">66</div>
<div class="c1">67</div>
<div class="c1">68</div>
<div class="c1">69</div>
<div class="c1">70</div>
<div class="c1">71</div>
<div class="c1">72</div>
<div class="c1">73</div>
<div class="c1">74</div>
<div class="c1">75</div>
<div class="c1">76</div>
<div class="c1">77</div>
<div class="c1">78</div>
<div class="c1">79</div>
<div class="c1">80</div>
<div class="c1">81</div>
<div class="c1">82</div>
<div class="c1">83</div>
<div class="c1">84</div>
<div class="c1">85</div>
<div class="c1">86</div>
<div class="c1">87</div>
<div class="c1">88</div>
<div class="c1">89</div>
<div class="c1">90</div>
<div class="c1">91</div>
<div class="c1">92</div>
<div class="c1">93</div>
<div class="c1">94</div>
<div class="c1">95</div>
<div class="c1">96</div>
<div class="c1">97</div>
<div class="c1">98</div>
<div class="c1">99</div>
<div class="c1">100</div>
<button class="hide">返回頂部</button>
<button class="cc hide">返回底部</button>
<script src="jquery-3.2.1.min.js"></script>
<script>
    $(":button").on("click",function () {
        $(window).scrollTop(0);// 給一個滾動條位置
//        $(window).scrollTop(500)
    });
    $(window).scroll(function () {
        //滾動的時候做的操作
        if ($(window).scrollTop()>100){
            $(":button").removeClass("hide")
        }
        else{
            $(":button").addClass("hide")
        }
    });

</script>
</body>
</html>
返迴首頁示例

2.查看尺寸

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>尺寸</title>
    <style>
        .c1{
            height: 100px;
            width: 80px;
            background-color: red;
        }
    </style>
</head>
<body>
<div class="c1"></div>
<script src="jquery-3.2.1.min.js"></script>
<script>
//  沒設置前
    console.log($(".c1").height);
    console.log($(".c1").width);
    console.log($(".c1").innerHeight()); //100
//  設置後   innerHeight()
    $(".c1").css("padding","20px");
    console.log($(".c1").innerHeight()); //140(自己的高度+padding(內邊距)
    console.log($(".c1").innerWidth()); //120(自己的高度+padding(內邊距)

//  測試margin
     $(".c1").css("margin","20px"); //和外邊距沒有關係，高度還是140
     console.log($(".c1").innerHeight());

//  outerHeight()
    console.log($(".c1").outerHeight()); //140(自己的高度+padding(內邊距)
    $(".c1").css("border","10px solid yellow")//120(自己的高度+padding(內邊距)
    console.log($(".c1").outerHeight()); //160(自己的高度+padding(內邊距)+border的寬度

//  測試margin
     $(".c1").css("margin","30px"); //和外邊距沒有關係，高度還是160
     console.log($(
您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • PoPo數據可視化周刊第2期
    PoPo數據可視化 聚焦於Web數據可視化領域, 發現前端可視化領域有意思的內容. 涵蓋前端可視化領域最新資訊, 開源可視化庫的發佈更新消息, 可視化案例分析與講解, 可視化技術文章, 可視化大神的日常, 可視化八卦等等...不想錯過前端可視化領域的精彩內容, 就快快搜索公眾號popodv_com關 ...
  • 一統江湖的大前端（4）shell.js——穿上馬甲我照樣認識你
    《一統江湖的大前端》系列是自己的前端學習筆記，旨在介紹javascript在非網頁開發領域的應用案例和發現各類好玩的js庫，不定期更新。如果你對前端的理解還是寫寫頁面綁綁事件，那你真的是有點OUT了，前端能做的事情已經太多了, , , , , , 甚至 ，什麼火就搞什麼,活脫脫一個 蹭熱點小能手 。 ...
  • JavaScript事件
    JavaScript 事件 JavaScript事件 事件是可以被JavaScript偵測到的行為。 HTML事件是發生在HTML元素上的事情。 當在HTML頁面中使用JavaScript時，JavaScript可以出發這些事件。 HTML事件 HTML事件可以是瀏覽器行為，也可以是用戶行為。 HT ...
  • CSS的進一步深入（更新中···）
    在之前我們學了6種選擇器和三種CSS樣式的引入，學習選擇器就是為了更好的選擇文本，學習CSS的引入是為了使文本增加各種樣式和屬性， 下麵我們簡單來學習一下為文本加樣式和一些屬性和屬性值： 1.文本的樣式 text （1）顏色 color：red/blue/pink/···； （2）文本對齊方式 te ...
  • 從零開始的全棧工程師——html篇1.5
    列表與邊距探討和行塊 一、列表 1.無序列表（UL） 1）內部必須有子標簽<li></li>2）天生自帶內外邊距 p也是自帶 大家會發現用UL的時候內容前面會出現一個像這樣的一個實心圓 可以用屬性list-style 去掉也可以更換（list-style:none;）circle空心圓 disc實心 ...
  • 如何在vue項目中引用Iview
    iview 安裝 引入iview ...
  • 【問題與解決】showModalDialog is not defined 的解決方案
    背景： showModalDialog 是比較老的方法了，有些瀏覽器不再支持彈出模態視窗了。 比如說谷歌瀏覽就不再支持了，有文章說明如下： Chrome’s Lack of Support for showModalDialog Breaks Some Enterprise Web Apps 彈出窗 ...
  • html常用小知識
    請求重定向：載入頁面之後，除了用js做重定向之外，我們還可以直接用<meta>標簽做重定向。 1 <meta http-equiv="refresh" content="5;url=http://www.baidu.com" /> 5秒後跳轉 超鏈接：在當前的iframe中打開新的頁面 超鏈接發送郵 ...
一周排行
    -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.數據驗證 在伺服器端進行嚴格的數據驗證，確保接收到的數據符合預期格 ...
所有分類