jQuery的操作方式以及動畫效果

来源:https://www.cnblogs.com/ivanlee717/archive/2022/05/31/16330313.html
-Advertisement-
Play Games

jQuery的操作標簽 文本操作 $("選擇符").html() // 讀取指定元素的內容,如果$()函數獲取了有多個元素,則提取第一個元素 $("選擇符").html(內容) // 修改內容,如果$()函數獲取了多個元素, 則批量修改內容 $("選擇符").text() // 效果同上,但是獲取的 ...


jQuery的操作標簽

文本操作

$("選擇符").html()     // 讀取指定元素的內容,如果$()函數獲取了有多個元素,則提取第一個元素
$("選擇符").html(內容) // 修改內容,如果$()函數獲取了多個元素, 則批量修改內容

$("選擇符").text()     // 效果同上,但是獲取的內容是純文本,不包含html代碼
$("選擇符").text(內容)  // 效果同上,但是修改的內容中如果有html文本,在直接轉成實體字元,而不是html代碼

<div class="c1"><a href="http://www.baidu.com">文本操作</a></div>
console.log($(".c1").html());

image-20220529172016250

$(".c1").html('<a href="http://www.jd.com">html操作</a>');
console.log($(".c1").html());

image-20220529172114776

console.log($(".c1").text());

image-20220529172200077

value操作

$(function () {
            $("#i1").blur(function () {

                // 獲取jquery對象的value屬性值
                console.log(this.value);
                console.log($(this).val());

                // 設置value屬性值
                $(this).val("hello world")

            });


            $("#i3").change(function () {
                console.log(this.value);
                console.log($(this).val());

                $(this).val("guangdong");

            });

            console.log($("#i2").val());
            console.log($("#i2").val("hello pig!"))
        })
    </script>
</head>

<body>
<div class="background">
    <input type="text" id="i1">

    <select  id="i3">
        <option value="hebei">河北省</option>
        <option value="hubei">湖北省</option>
        <option value="guangdong">廣東省</option>
    </select>

    <p> <textarea name="" id="i2" cols="30" rows="10">123</textarea></p>

屬性操作

讀取屬性值
	$("選擇符").attr("屬性名");   // 獲取非表單元素的屬性值,只會提取第一個元素的屬性值
	$("選擇符").prop("屬性名");   // 表單元素的屬性,只會提取第一個元素的屬性值

//操作屬性
  $("選擇符").attr("屬性名","屬性值");  // 修改非表單元素的屬性值,如果元素有多個,則全部修改
  $("選擇符").prop("屬性名","屬性值");  // 修改表單元素的屬性值,如果元素有多個,則全部修改
  
  $("選擇符").attr({'屬性名1':'屬性值1','屬性名2':'屬性值2',.....})
  $("選擇符").prop({'屬性名1':'屬性值1','屬性名2':'屬性值2',.....})

<button class="select_all">全選</button>
<button class="cancel">取消</button>
<button class="reverse">反選</button>
<hr>
<table border="1">
    <tr>
        <td>選擇</td>
        <td>姓名</td>
        <td>年齡</td>
    </tr>
    
    <tr>
        <td><input type="checkbox"></td>
        <td>張三</td>
        <td>23</td>
    </tr>
    <tr>
        <td><input type="checkbox"></td>
        <td>李四</td>
        <td>23</td>
    </tr>
    <tr>
        <td><input type="checkbox"></td>
        <td>王五</td>
        <td>23</td>
    </tr>
</table>

image-20220529172758163

  • 實現全選功能

    $(function () {
    $(".select_all").click(function () {
        $("table input:checkbox").prop("checked",true);
    })
})

  • 實現取消功能

    $(".cancel").click(function () {
    $("table input:checkbox").prop("checked",false);
})

  • 實現反選功能

    $(".reverse").click(function () {
    $("table input:checkbox").each(function () {
        $(this).prop("checked",!$(this).prop("checked"));
     })
 })

css樣式操作

獲取樣式
$().css("樣式屬性");   // 獲取元素的指定樣式屬性的值,如果有多個元素,只得到第一個元素的值

操作樣式
$().css("樣式屬性","樣式值").css("樣式屬性","樣式值");
$().css({"樣式屬性1":"樣式值1","樣式屬性2":"樣式值2",....})

$().css("樣式屬性":function(){
  
  // 其他代碼操作 
  return "樣式值";
});

class屬性操作

$().addClass("class1  class2 ... ...")   // 給獲取到的所有元素添加指定class樣式
$().removeClass() // 給獲取到的所有元素刪除指定class樣式
$().toggleClass() // 給獲取到的所有元素進行判斷,如果擁有指定class樣式的則刪除,如果沒有指定樣式則添加

切換tab樣例：

<style>
        *{
            margin: 0;
            padding: 0;
        }

        .tab{
            width: 800px;
            height: 300px;
            /*border: 1px solid rebeccapurple;*/
            margin: 200px auto;
        }

        .tab ul{
            list-style: none;
        }

        .tab ul li{
            display: inline-block;
        }

        .tab_title {
            background-color: #f7f7f7;
            border: 1px solid #eee;
            border-bottom: 1px solid #e4393c;
        }

        .tab .tab_title li{
            padding: 10px 25px;
            font-size: 14px;
        }

        .current{
            background-color: #e4393c;
            color: #fff;
            cursor: default;
        }

        .tab_con .hide{
            display: none;
        }

    </style>

</head>

<body>
<div class="background">
    <div class="tab">
        <ul class="tab_title">
            <li class="current">商品介紹</li>
            <li>規格與包裝</li>
            <li>售後保障</li>
            <li>商品評論</li>
        </ul>

        <ul class="tab_con">
            <li>商品介紹...</li>
            <li class="hide">規格與包裝...</li>
            <li class="hide">售後保障...</li>
            <li class="hide">商品評論...</li>
        </ul>
    </div>
</div>
<script>
    $(".tab_title li ").click(function () {
        $(this).addClass("current").siblings().removeClass("current");

        $(".tab_con li").eq($(this).index()).removeClass("hide").siblings().addClass("hide");
    })
</script>

image-20220529180433852

image-20220529180447957

節點操作

創建一個jquery標簽對象
    $("<p>")

內部插入

    $("").append(content|fn)      // $("p").append("<b>Hello</b>");
    $("").appendTo(content)       // $("p").appendTo("div");
    $("").prepend(content|fn)     // $("p").prepend("<b>Hello</b>");
    $("").prependTo(content)      // $("p").prependTo("#foo");

外部插入

    $("").after(content|fn)       // ("p").after("<b>Hello</b>");
    $("").before(content|fn)      // $("p").before("<b>Hello</b>");
    $("").insertAfter(content)    // $("p").insertAfter("#foo");
    $("").insertBefore(content)   // $("p").insertBefore("#foo");

替換
    $("").replaceWith(content|fn) // $("p").replaceWith("<b>Paragraph. </b>");

刪除

    $("").empty()
    $("").remove([expr])

複製
$("").clone([Even[,deepEven]])

<button className="add_btn">添加節點</button>
<button className="del_btn">刪除節點</button>
<button className="replace_btn">替換節點</button>
<div className="c1">
    <h3>hello JS!</h3>
    <h3 className="c2">hello world</h3>
</div>

image-20220529190909316

  • 創建節點

    $(".add_btn").click(function () {
    var $img = $("<img>");
    $img.attr("src","https://img2.baidu.com/it/u=3312360479,315254076&fm=253&fmt=auto&app=138&f=JPEG?w=600&h=400");
    // 節點添加

    // $(".c1").append($img);  在c1節點最後面添加
    // $img.appendTo(".c1");   在c1節點最後面添加

    // $(".c1").prepend($img);  在c1節點最開始添加
    // $(".c2").before($img);   在c2前面的一個位置添加
    // 支持字元串操作
    // $(".c1").append("<img src ='https://img1.baidu.com/it/u=3210260546,3888404253&fm=26&fmt=auto&gp=0.jpg'>")

})

    image-20220529193944432

  • 刪除節點

    $(".del_btn").click(function () {
    $(".c1 img").remove(); 可刪除標簽
    $(".c2").empty();   只能刪除一整個
})

  • 替換節點

    $(".replace_btn").click(function () {
    var $img = $("<img>");
    $img.attr("src","https://img1.baidu.com/it/u=2686292473,1689539589&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=749");
    $(".c2").replaceWith($img);
})

    image-20220529194854085

each迴圈

<ul>
    <li>23</li>
    <li>45</li>
    <li>78</li>
    <li>32</li>
</ul>
// 類方法：each
var arr = [111, 222, 333];

$.each(arr, function (i, j) {
    // 迴圈體
    console.log(i, j)
});

var obj = {name: "alvin", age: 18};

$.each(obj, function (k, v) {
    console.log(k, v);
});

// 實例方法each

// $("ul li").css("color","red");

$("ul li").each(function () {
    // console.log("OK");
    // 迴圈函數中this:代指的是每一次迴圈的dom對象
    console.log(this);
    var v = $(this).html();
    if (parseInt(v) > 40) {
        $(this).css("color", "red")
    }
})

image-20220530113045975

事件委派

一、什麼是事件的委派？

    事件的委派也叫事件代理，簡單理解就是：原本是某個元素需要綁定的事件，現在將這個事件交給別的元素去做，正常我們把它交給父級元素，比如：原本是給li綁定點擊事件，現在交給它父級ul綁定，利用冒泡原理，點擊li的時候會觸發ul的事件；

二、事件委派有什麼好處？

    1.提升性能： 比如要給100個li安裝點擊事件，正常我們會用for迴圈去個每個li安裝，這樣與訪問dom的次數就多了，性能也就比較低；利用冒泡原理，我們給ul安裝點擊事件（就是委派ul代理這個事件），點擊li的事件由ul去執行，這樣我們就只訪問一次dom，性能就提升了；

    2.能綁定新添加標簽的事件：什麼意思？ 比如用for給10個li綁定了事件，然後現在又添加了新的li，這樣新添加的li就沒有綁定到了；此時我們委派ul去綁定事件，點擊新添加li也是會觸發這個事件的；

<ul>
    <li>123</li>
    <li>234</li>
    <li>345</li>
</ul>


<script>

    /*$("ul li").click(function () {

        console.log($(this).html());
    });*/


    $("ul").on("click", "li", function () {
        console.log($(this).html())
    });


    $(".add").click(function () {
        $("ul").append("<li>456</li>")
    })

</script>

clone案例

<div class="outer">

    <div class="item">
        <input type="button" value="+" class="add_btn">
        <input type="text">
    </div>

</div>
$(".add_btn").click(function () {

         var $clone = $(this).parent().clone();
         $clone.children(".add_btn").val("-").attr("class","remove_btn");
         $(".outer").append($clone);

    });

    $(".outer").on("click",".remove_btn",function () {
        $(this).parent().remove();
    })

image-20220530143944554

image-20220530144710402

css尺寸


$("").height([val|fn])
$("").width([val|fn])
$("").innerHeight()
$("").innerWidth()
$("").outerHeight([soptions])
$("").outerWidth([options])

css位置

 $("").offset([coordinates])  // 獲取匹配元素在當前視口的相對偏移。
$("").position()             // 獲取匹配元素相對父元素的偏移，position()函數無法用於設置操作。
$("").scrollTop([val])       // 獲取匹配元素相對滾動條頂部的偏移。

返回頂部案例

<body>
<!--<div class="background">-->
    <div class="content">
        <h3>文章...</h3>
    </div>

    <div class="return_top hide">返回頂部</div>
</div>
<script>
    console.log($(window).scrollTop());
    $(".return_top").click(function () {

        $(window).scrollTop(0)

    });

    $(window).scroll(function () {
        console.log($(this).scrollTop());
        var v =$(this).scrollTop();
        if (v > 100){
            $(".return_top").removeClass("hide");
        }else {
            $(".return_top").addClass("hide");
        }

    })
</script>

image-20220530145043617

image-20220530145057053

位置偏移案例


<button class="btn1">offset</button>
<div class="parent_box">
    <div class="box"></div>
</div>

var $offset=$(".box").offset();
var $left=$offset.left;
var $top=$offset.top;

console.log("$offset","top:"+$top+" left:"+$left)

var $position=$(".box").position();
var $left=$position.left;
var $top=$position.top;

console.log("$position","top:"+$top+" left:"+$left);


$(".btn1").click(function () {
  $(".box").offset({left:50,top:50})
});

image-20220531113132519

image-20220531113301304

image-20220531113314177

jQuery動畫效果

基本方法

//基本
	show([s,[e],[fn]])   顯示元素
	hide([s,[e],[fn]])   隱藏元素

//滑動
	slideDown([s],[e],[fn])  向下滑動 
	slideUp([s,[e],[fn]])    向上滑動

//淡入淡出
	fadeIn([s],[e],[fn])     淡入
	fadeOut([s],[e],[fn])    淡出
	fadeTo([[s],opacity,[e],[fn]])  讓元素的透明度調整到指定數值

//自定義
	animate(p,[s],[e],[fn])   自定義動畫 
	stop([c],[j])             暫停上一個動畫效果,開始當前觸發的動畫效果

show和hide方法

 <p>
        <button class="show01">顯示</button>
        <button class="hide01">隱藏</button>
    </p>
    <div class="c1"></div>

</div>
<script>
    $(".show01").click(function () {

        $(".c1").show(1000,function () {
            alert("顯示成功")
        });

    });
    $(".hide01").click(function () {

        $(".c1").hide(1000, function () {
            alert("隱藏成功")
        })
    })
</script>

image-20220531121304743

image-20220531121333539

整體的效果是收縮和展開

slidedown和slideup

 $(".show01").click(function () {

        $(".c1").slideDown(1000,function () {
            alert("顯示成功")
        });

    });
    $(".hide01").click(function () {

        $(".c1").slideUp(1000, function () {
            alert("隱藏成功")
        })
    })

效果和捲簾門一樣收上去，放下來

還有一個是slideToggle方法，是上述兩個方法的集成

fadein和fadeout方法

$(".show01").click(function () {

        $(".c1").fadeIn(1000,function () {
            alert("顯示成功")
        });

    });
    $(".hide01").click(function () {

        $(".c1").fadeOut(1000, function () {
            alert("隱藏成功")
        })
    })

整體的效果是淡入和淡出

自定義動畫

$(".box").animate(動畫最終效果,動畫完成的時間,動畫完成以後的回調函數) 
 $(".animate").click(function () {

        $(".c1").animate({
            "border-radius":"50%",
            "top":340,
            "left":200
        },1000,function () {
            $(".c1").animate({
                "border-radius":"0",
                "top":240,
                "left":120
            },1000,function () {

                $(".animate").trigger("click")
            })
        })
        
    })

這個動畫的過程就是首先執行動畫的最終效果，變成一個圓之後執行動畫完成以後的回調函數，回調函數又會還原成原來的樣子，再出發click事件，保證了動畫一直在動

擴展方法

jQuery.extend(object)

擴展jQuery對象本身。

用來在jQuery命名空間上增加新函數。 

在jQuery命名空間上增加兩個函數:


<script>
    jQuery.extend({
      min: function(a, b) { return a < b ? a : b; },
      max: function(a, b) { return a > b ? a : b; }
});

    jQuery.min(2,3); // => 2
    jQuery.max(4,5); // => 5
</script>

jQuery.fn.extend(object)

擴展 jQuery 元素集來提供新的方法（通常用來製作插件）

增加兩個插件方法：

<body>

<input type="checkbox">
<input type="checkbox">
<input type="checkbox">

<script src="jquery.min.js"></script>
<script>
    jQuery.fn.extend({
      check: function() {
         $(this).attr("checked",true);
      },
      uncheck: function() {
         $(this).attr("checked",false);
      }
    });

    $(":checkbox").check()
</script>

</body>

本文來自博客園，作者：ivanlee717，轉載請註明原文鏈接：https://www.cnblogs.com/ivanlee717/p/16330313.html


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

-Advertisement-
Play Games
更多相關文章
  • Cannot retrieve repository metadata (repomd.xml) for repository: base. Please verify its path and tr
    鏡像下載、功能變數名稱解析、時間同步請點擊 阿裡雲開源鏡像站 錯誤：Cannot retrieve repository metadata (repomd.xml) for repository: base. Please verify its path and try again 通過yum -y ins ...
  • DML數據操作語言
    有時候部署伺服器正式版與測試版資料庫的時候 總會有忘記某些欄位同步更新的問題 不管是欄位類型 或是欄位名稱. 然後等待著的就是一堆的錯誤日誌. 所以一直想找一款可以查找資料庫差異性的腳本或軟體 運行以下SQL語句，查看資料庫差異性 -- u表，p存儲過程,v視圖 -- INTFSIMSNEW新庫，I ...
  • SQL語言DDL
    一、PL/SQL簡介 1）SQL是一種標準化的結構化查詢語言，在資料庫領域有著廣泛的應用和重大影響。但是SQL並不能完成一個過程所能完成的任務，如某一個條件成立進行數據插入，否則不進行數據插入。 2）PL/SQL是Oracle公司對SQL語言的擴展，全面支持所有的SQL操作與數據類型。 3）PL/S ...
  • HMS Core分析服務6.5.0版本更新啦
    卸載用戶價值的合理評估對制定相應的用戶召回策略具有重要意義。 HMS Core分析服務新版本支持查看用戶卸載前使用次數、崩潰次數等指標。通過這些數據，您可以更直觀地判斷已卸載人群粘性以及崩潰問題對用戶留存的直接影響，及時調優，減少用戶流失。 瞭解更多詳情>> 訪問華為開發者聯盟官網 獲取開髮指導文檔 ...
  • Android 實現開機自啟APP
    原文地址：Android 實現開機自啟APP - Stars-One的雜貨小窩 公司有個項目，需要實現自啟動的功能，本來想著是設置桌面啟動器的方式去實現，但是設備是華為平板（EMUI系統），不允許設置第三方桌面 且監聽開機廣播也無效，本來以為沒法實現了，沒想到公司的另一款APP確實支持，於是便是研究 ...
  • 如何用HMS Core位置和地圖服務實現附近地點路徑規劃功能
    日常出行中，路徑規劃是很重要的部分。用戶想要去往某個地點，獲取到該地點的所有路徑，再根據預估出行時間自行選擇合適的路線，極大方便出行。平時生活中也存在大量使用場景，在出行類App中，根據乘客的目的地可以為用戶規劃合適出行路線和預計到達時間；便捷生活類App中，用戶可以搜索指定範圍內的周邊服務，查看去 ...
  • ECharts 引入中國地圖和區域地圖
    一，引入中國地圖 <div id="chinaMap"></div> import china from 'echarts/map/js/china.js' export default { data() { return { myChart: {}, echarts:echarts, }; }, ...
  • bootstrap的基礎使用
    Bootstrap Bootstrap是Twitter推出的一個用於前端開發的開源工具包。它由Twitter的設計師Mark Otto和Jacob Thornton合作開發，是一個CSS/HTML框架。目前，Bootstrap最新版本為4.4。 註意，Bootstrap有三個大版本分別是 v2、v3 ...
一周排行
    -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.數據驗證 在伺服器端進行嚴格的數據驗證，確保接收到的數據符合預期格 ...
所有分類