jQuery元素操作

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

jQuery中創建元素及追加元素 DOM中可以動態創建元素:document.createElement(“標簽的名字”); jQuery中同樣可以創建元素標簽,並且返回的就是jQuery對象,可以直接調用方法進行使用 1.append 方法用來在元素的末尾追加元素(最後一個子節點)。增加元素末尾 ...


jQuery中創建元素及追加元素

DOM中可以動態創建元素:document.createElement(“標簽的名字”);

jQuery中同樣可以創建元素標簽,並且返回的就是jQuery對象,可以直接調用方法
進行使用

1.append 方法用來在元素的末尾追加元素(最後一個子節點)。增加元素末尾

2.prepend ,在元素的開始添加元素(第一個子節點)。增加元素開始

3.after ,在元素之後添加元素(添加兄弟)增加元素後面

4.before :在元素之前添加元素(添加兄弟)增加元素前面

案例:

許可權選擇

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <script src="jquery-1.12.2.js"></script>
    <script>
        $(function () {
            //第一個按鈕:獲取按鈕添加點擊事件,獲取第一個下拉框中被選中的option添加到第二個下拉框
            $("#toRight").click(function () {
                $("#se2").append($("#se1>option:selected"));
            });

            //第二個按鈕
            $("#toLeft").click(function () {
                $("#se1").append($("#se2>option:selected"));
            });
            //第三個按鈕
            $("#toAllRight").click(function () {
                $("#se2").append($("#se1>option"));
            });
            //第四個按鈕
            $("#toAllLeft").click(function () {
                $("#se1").append($("#se2>option"));
            });
        });


    </script>
</head>
<body>
<div style="margin-left: 500px; margin-top: 20px; background-color: #999999">
    <select multiple="multiple" style="float: left; width: 60px; height: 100px;" id="se1">
        <option>添加</option>
        <option>刪除</option>
        <option>修改</option>
        <option>查詢</option>
        <option>列印</option>
    </select>
    <div style="width: 50px; float: left;">
        <input type="button" name="name" value=">" style="width: 50px;" id="toRight" />
        <input type="button" name="name" value="<" style="width: 50px;" id="toLeft" />
        <input type="button" name="name" value=">>" style="width: 50px;" id="toAllRight" />
        <input type="button" name="name" value="<<" style="width: 50px;" id="toAllLeft" />
    </div>
    <select multiple="multiple" style="float: left; width: 60px; height: 100px;" id="se2">
    </select>
</div>

</body>
</html>

 

創建元素的方式:

1.html方法設置內容,返回的是當前的對象,如果不傳入參數,獲取的是標簽中的內容
2.html 方法可以創建元素

3.$(“html 標簽”) 可以創建元素

 

案例:點擊按鈕動態創建表格

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        * {
            padding: 0;
            margin: 0;
        }

        div {
            margin-left: 300px;
            margin-top: 100px;
        }

        table {
            border-collapse: collapse;
            border-spacing: 0;
            border: 1px solid #c0c0c0;
        }

        th,
        td {
            border: 1px solid #d0d0d0;
            color: #404060;
            padding: 10px;
        }

        th {
            background-color: #09c;
            font: bold 16px "微軟雅黑";
            color: #fff;
        }

        td {
            font: 14px "微軟雅黑";
        }

        tbody tr {
            background-color: #f0f0f0;
        }

        tbody tr:hover {
            cursor: pointer;
            background-color: #fafafa;
        }
    </style>
    <script src="jquery-1.12.2.js"></script>
    <script>
        // 模擬從後臺拿到的數據
        var datas = [
            {
                name: "傳智播客",
                url: "http://www.itcast.cn",
                type: "IT最強培訓機構"
            },
            {
                name: "黑馬程式員",
                url: "http://www.itheima.com",
                type: "大學生IT培訓機構"
            },
            {
                name: "傳智前端學院",
                url: "http://web.itcast.cn",
                type: "前端的黃埔軍校"
            }];

        $(function () {
            $("#btnCreate").click(function () {
                var arr=[];
                //遍曆數組
                for(var i=0;i<datas.length;i++){
                    var obj=datas[i];//數組中的每一個對象
                    //創建行和列,加入到tbody中
                    arr.push("<tr><td><a href="+obj.url+">"+obj.name+"</a></td>      <td>"+obj.type+"</td></tr>");
                }
                $("#tbd").html(arr);
            });
        });
    </script>
</head>

<body>
<input type="button" value="獲取數據" id="btnCreate"/>
<div>
    <table>
        <thead>
        <tr>
            <th>名稱</th>
            <th>說明</th>
        </tr>
        </thead>
        <tbody id="tbd">
        </tbody>
    </table>
</div>
</body>

</html>

 

設置和獲取表單的value

input標簽:文本框,radio,select,textarea(文本域),checkbox….常見的表單標簽都可以通過val方法獲取和設置value值

例如:

$("#txt1").val("admin");
$("#txt2").val("123456");
$("#txt3").val(" 這是一個條款");
$("#s1").val(2);// 設置 value 為 2 的選中

 

案例:設置和獲取系統屬性值或者自定義屬性

$("#btn1").click(function () {
    $("a").attr("title"," 傳智播客")
    $("a").attr("href","http://www.itcast.cn");
});
$("#btn2").click(function () {
    // 獲取屬性值
    console.log($("a").attr("title"));
});

attr()方法:可以設置屬性值,兩個參數:1.屬性名字,2,屬性值
attr()方法:可以獲取屬性值,一個參數:1.屬性名字

 

案例:全選和反選案例

設置覆選框選中:(attr設置checkbox的選中有問題)prop
prop用法和attr一樣

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="jquery-1.12.2.js"></script>
    <script>
        //兩個按鈕:1按鈕全選,2全不選
        $(function () {
            //獲取第一個按鈕,點擊---全選
            $("#btnAll").click(function () {
                $("#dv :checkbox").prop("checked",true);
            });
            //獲取第二個按鈕,點擊---全不選
            $("#btnNoAll").click(function () {
                $("#dv :checkbox").prop("checked",false);
            });
        });
    </script>
</head>
<body>
<input type="button" value="全選" id="btnAll"/>
<input type="button" value="全不選" id="btnNoAll"/>
<div id="dv">
    <input type="checkbox" value="1"/>吃飯
    <input type="checkbox" value="2"/>睡覺
    <input type="checkbox" value="3"/>打豆豆
    <input type="checkbox" value="4"/>打籃球
    <input type="checkbox" value="5"/>打足球
    <input type="checkbox" value="6"/>打鉛球
    <input type="checkbox" value="7"/>打撞球
</div>
</body>
</html>

 

設置和獲取元素的寬和高

通過.css()方法寫一個屬性可以獲取寬或者高,是字元串類型如果獲取後重新設置需要轉換,麻煩

1.width()方法獲取寬度

2.height()方法獲取高度

獲取的時候直接就是數字類型

例如:

console.log($("div").width());
console.log($("div").height());

 

位置操作

Offset()方法返回的是對象,並且,對象中有一個left和一個top,並且值是數字類型,設置的時候也可以沒有px,設置的時候元素在設置前如果沒有脫離文檔流,設置的時候會自動進行脫離文檔流,預設為relative,如果設置前有脫離文檔流,那麼設置的時候直接改變位置

例如:

// 獲取的是對象 , 並且沒有 px
console.log($("div").offset());
console.log($("div").offset().left);
console.log($("div").offset().top);

註意:如果層和層中的標簽同時定位,並且,標簽距離左上角50px.通過按鈕設置層距離左上角100px,那麼標簽此時距離左上角為150px。

 

 

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


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

-Advertisement-
Play Games
更多相關文章
  • 有一天我們的UI設計師找到我說,要把頁面中我自己用程式寫的動畫,換成他們給的json動畫,原因是有的動畫很複雜,自己寫起來達不到他們的預期效果(寫到這裡我突然想到一個問題,這麼複雜的動畫為什麼不使用gif。。。。坐我對面的安卓開發小哥答因為gif播放的時候可能質量不高不流暢,好吧我信了) 我:??? ...
  • 在理解javascript的this之前,首先先瞭解一下作用域。 作用域分為兩種: 詞法作用域和動態作用域的區別是:詞法作用域是在寫代碼或定義時確定的;動態作用域是在運行時確定的。 this的綁定規則 this是在調用時被綁定,取決於函數的調用位置。由此可以知道,一般情況下(非嚴格模式下),this ...
  • 示例代碼托管在: "http://www.github.com/dashnowords/blogs" 博客園地址: "《大史住在大前端》原創博文目錄" 華為雲社區地址: "【你要的前端打怪升級指南】" [TOC] 一. 任務說明 使用原生 繪製散點圖。(截圖以及數據來自於百度Echarts官方示例庫 ...
  • 一、函數補充 1.1 arguments類數組對象 arguments 是一個對應於傳遞給函數的參數的類數組對象。 在函數中,使用特殊對象 arguments,開發者無需明確指出參數名,就能訪問它們。 在其它編程語言中,比如java:如果一個函數被定義過兩次,每次參數個數都不同。相當於定義了兩個不同 ...
  • jQuery實現輪播圖時出現ready方法外無法調用方法(函數) 遇到的問題: 解決ready()方法外調用方法(函數)問題(修改紅色代碼即可): 方法一: 方法二: ...
  • 我們上網經常會遇到第一次需要登錄而之後不用再登錄的網站的情況,其實是運用了Cookie 存儲 web 頁面的用戶信息,Cookie 以名/值對形式存儲,當瀏覽器從伺服器上請求 web 頁面時, 屬於該頁面的 cookie 會被添加到該請求中。服務端通過這種方式來獲取用戶的信息l。 今天的這個效果:第 ...
  • 當頁面過長時,通常會在頁面下方有一個返回頂部的button,總結一下,大概三種實現方法,下麵說下各方法及優缺點。 方法一 錨點定位 ? 1 <a href="#" class="top" id="top">返回頂部</a> ? 1 <a href="#" class="top" id="top">返 ...
  • 作為前端開發人員的必修課,CSS3翻轉能帶我們完成許多基本動效,本期我們將用CSS3實現hover翻轉效果~ 第一步非常簡單,我們簡單畫1個演示方塊,為其 添加transition和transform屬性 : ? 1 2 3 4 5 6 7 8 9 10 11 // 本示例均使用Sass語法 .bl ...
一周排行
    -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.數據驗證 在伺服器端進行嚴格的數據驗證,確保接收到的數據符合預期格 ...