日本免费高清视频-国产福利视频导航-黄色在线播放国产-天天操天天操天天操天天操|www.shdianci.com

學(xué)無先后，達(dá)者為師

網(wǎng)站首頁 編程語言 正文

jQuery 核心函數(shù)和動態(tài)更新員工表

作者：1900's 88 keys 更新時間： 2022-01-16 編程語言

元素的尺寸

HTML

<body>
    <div>
    </div>
</body>

CSS

    div{
        width: 100px;
        height: 100px;
        border: 3px solid black;
        padding: 10px;
        margin: 20px;
    }

內(nèi)容尺寸

內(nèi)容尺寸，盒子模型中content的尺寸

  1. height([val])取得匹配元素當(dāng)前計算的高度值（px）
// 獲取div元素的高
$("div").height();//100
// 把所有p段落的高設(shè)為200px
$("div").height(200);
  1. width([val])取得第一個匹配元素當(dāng)前計算的寬度值（px）
// 獲取div元素的寬
$("div").width();//100
// 把所有p段落的寬設(shè)為200px
$("div").width(200);

內(nèi)部尺寸

內(nèi)部尺寸，盒子模型中content + padding的尺寸

  1. innerHeight()獲取第一個匹配元素內(nèi)部區(qū)域高度（包括補(bǔ)白、不包括邊框）
// 獲取div內(nèi)部區(qū)域高度
$("div").innerHeight()//120
  1. innerWidth()獲取第一個匹配元素內(nèi)部區(qū)域?qū)挾龋òㄑa(bǔ)白、不包括邊框）
// 獲取div內(nèi)部區(qū)域?qū)挾?/span>
$("div").innerWidth()//120

外部尺寸

外部尺寸，盒子模型中content + padding+border的尺寸(如果參數(shù)是true，則，加上margin)

  1. outerHeight([false\true])獲取第一個匹配元素外部高度（默認(rèn)包括補(bǔ)白和邊框）
// 獲取div外部尺寸區(qū)域高度，默認(rèn)不包括margin
$("div").outerHeight()//126
// 獲取div外部尺寸區(qū)域高度,包括margin
$("div").outerHeight(true)//166
  1. outerWidth([false\true])獲取第一個匹配元素外部寬度（默認(rèn)包括補(bǔ)白和邊框）
// 獲取div外部尺寸區(qū)域?qū)挾?，默認(rèn)不包括margin
$("div").outerWidth()//126
// 獲取div外部尺寸區(qū)域?qū)挾?包括margin
$("div").outerWidth(true)//166

篩選

過濾

  1. eq(index)獲取第N個元素
    index 從0 開始計數(shù)
    如果 index為負(fù)數(shù)，則從最后一個元素開始倒數(shù)
// 獲取匹配的第二個li元素
$("li").eq(1)
// 獲取匹配的倒數(shù)第三個li元素
$("li").eq(-3)
  1. first()獲取第一個元素
// 獲取匹配的第一個li元素
$('li').first()
  1. last()獲取最后一個元素
// 獲取匹配的第一個li元素
$('li').last()
  1. hasClass(class)檢查當(dāng)前的元素是否含有某個特定的類，如果有，則返回true,否則返回false 
// 檢查div中class屬性是否有box
$("div").hasClass("box")
  1. filter(expr|obj|ele|fn)篩選出與指定表達(dá)式匹配的元素集合
// 保留帶有類class = select的p元素
$("p").filter(".selected")

// 保留第一個帶有類class = select的p元素
$("p").filter(".selected, :first")
  1. is(expr|obj|ele|fn)根據(jù)選擇器、DOM元素或 jQuery 對象來檢測匹配元素集合，如果其中至少有一個元素符合這個給定的表達(dá)式就返回true
    如果沒有元素符合，或者表達(dá)式無效，都返回false 
<form><input type="checkbox" /></form>

// 由于input元素的父元素是一個表單元素，所以返回true
$("input[type='checkbox']").parent().is("form")
  1. map(callback)將一組元素轉(zhuǎn)換成其他數(shù)組（不論是否是元素數(shù)組）
<form>
  <input type="text" name="name" value="John"/>
  <input type="text" name="password" value="password"/>
  <input type="text" name="url" value="http://www.baidu.com/"/>
</form>

// 把form中的每個input元素的值建立一個列表
$("p").append( $("input").map(function(){
  return $(this).val();
}).get().join(", ") );
  1. has(expr|ele)保留包含特定后代的元素，去掉那些不含有指定后代的元素
// 給含有ul的li加上背景紅色
$('li').has('ul').css('background-color', 'red');
  1. not(expr|ele|fn)刪除與指定表達(dá)式匹配的元素
// 從p元素中刪除帶有 select 的ID的元素
$("p").not( $("#selected")[0])
  1. slice(start, [end])選取一個匹配的子集
// 選擇第一個p元素
$("p").slice(0, 1);

查找

  1. children([expr])取得一個包含匹配的元素集合中每一個元素的所有子元素的元素集合
// 查找DIV中的每個子元素
$("div").children()
  1. closest(expr|object|element)jQuery 1.3新增。從元素本身開始，逐級向上級元素匹配，并返回最先匹配的元素
<ul><li></li><li></li></ul>

// 展示如何使用closest查找多個元素
$("li:first").closest(["ul", "body"]);
  1. find(expr|obj|ele)搜索所有與指定表達(dá)式匹配的元素
// 從所有的p段落開始，進(jìn)一步搜索下面的span元素。與$("p span")相同
$("p").find("span")
  1. next([expr])取得一個包含匹配的元素集合中每一個元素緊鄰的后面同輩元素的元素集合
// 找到每個段落的后面緊鄰的同輩元素
$("p").next()
  1. nextAll([expr])查找當(dāng)前元素之后所有的同輩元素
// 給第一個div之后的所有元素
$("div:first").nextAll()
  1. nextUntil([exp|ele][,fil])查找當(dāng)前元素之后所有的同輩元素，直到遇到匹配的那個元素為止
// 給#term-2后面直到dt前的元素加上紅色背景
$('#term-2').nextUntil('dt').css('background-color', 'red');
  1. offsetParent()返回第一個匹配元素用于定位的父節(jié)點(diǎn)
    即返回父元素中第一個其position設(shè)為relative或者absolute的元素
// 設(shè)置最近的祖先定位元素的背景顏色
 $("p").offsetParent().css("background-color","red");
  1. parent([expr])取得一個包含著所有匹配元素的唯一父元素的元素集合
// 查找每個段落的父元素
$("p").parent()
  1. parents([expr])取得一個包含著所有匹配元素的祖先元素的元素集合（不包含根元素）?？梢酝ㄟ^一個可選的表達(dá)式進(jìn)行篩選。
// 找到每個span元素的所有祖先元素
$("span").parents()
  1. prev([expr])取得一個包含匹配的元素集合中每一個元素緊鄰的前一個同輩元素的元素集合
// 找到每個p段落緊鄰的前一個同輩元素
$("p").prev()
  1. prevAll([expr])查找當(dāng)前元素之前所有的同輩元素
// 給最后一個之前的所有div
$("div:last").prevAll()
  1. siblings([expr])取得一個包含匹配的元素集合中每一個元素的所有唯一同輩元素的元素集合。可以用可選的表達(dá)式進(jìn)行篩選。
// 找到每個div的所有同輩元素
$("div").siblings()
  1. add(expr|ele|html|obj[,con])把與表達(dá)式匹配的元素添加到j(luò)Query對象中
// 添加一個新元素到一組匹配的元素中
$("p").add("span")

文檔處理

內(nèi)部插入

  1. append(content|fn)向每個匹配的元素內(nèi)部追加內(nèi)容
// HTML 代碼:
<p>I would like to say: </p>

// 向所有p段落中追加一些HTML標(biāo)記
$("p").append("<b>Hello</b>");

// 結(jié)果：
<p>I would like to say: <b>Hello</b></p>
  1. appendTo(content)把所有匹配的元素追加到另一個指定的元素元素集合中
// HTML 代碼:
<p>I would like to say: </p>
<div></div>
<div></div>

// 把匹配打的所有段落追加到ID值為foo的元素中
$("p").appendTo("div");

//結(jié)果：
<div><p>I would like to say: </p></div>
<div><p>I would like to say: </p></div>
  1. prepend(content)向每個匹配的元素內(nèi)部前置內(nèi)容
// HTML 代碼:
<p>I would like to say: </p>

// 向所有段落中前置一些HTML標(biāo)記代碼
$("p").prepend("<b>Hello</b>");

// 結(jié)果：
 <p><b>Hello</b>I would like to say: </p>
  1. prependTo(content)把所有匹配的元素前置到另一個、指定的元素元素集合中
// HTML 代碼:
<p>I would like to say: </p>
<div id="foo"></div>

// 把所有匹配搭配的p段落追加到ID值為foo的元素中
$("p").prependTo("#foo");

// 結(jié)果：
<div id="foo">
	<p>I would like to say: </p>
</div>
  1. after(content|fn)在每個匹配的元素之后插入內(nèi)容
// HTML 代碼:
<p>I would like to say: </p>

// 在所有段落之后插入一些HTML標(biāo)記代碼
$("p").after("<b>Hello</b>");

// 結(jié)果：
<p>I would like to say: </p><b>Hello</b>
  1. before(content|fn)在每個匹配的元素之前插入內(nèi)容
// HTML 代碼:
<p>I would like to say: </p>

// 在所有段落之后插入一些HTML標(biāo)記代碼
$("p").before("<b>Hello</b>");

// 結(jié)果：
<b>Hello</b><p>I would like to say: </p>
  1. insertAfter(content)把所有匹配的元素插入到另一個、指定的元素元素集合的后面
// HTML 代碼:
<p>I would like to say: </p>
<div id="foo">Hello</div>

// 把所有段落插入到一個元素之后。與 $("#foo").after("p")相同
$("p").insertAfter("#foo");

// 結(jié)果：
<div id="foo">Hello</div>
<p>I would like to say: </p>
  1. insertBefore(content)把所有匹配的元素插入到另一個、指定的元素元素集合的前面
// HTML 代碼:
<div id="foo">Hello</div>
<p>I would like to say: </p>

// 把所有段落插入到一個元素之后。與 $("#foo").after("p")相同
$("p").insertBefore("#foo");

// 結(jié)果：
<p>I would like to say: </p>
<div id="foo">Hello</div>
  1. wrap(html|element|fn)把所有匹配的元素用其他元素的結(jié)構(gòu)化標(biāo)記包裹起來
// 把所有的段落用一個新創(chuàng)建的div包裹起來
$("p").wrap("<div class='wrap'></div>");
  1. unwrap()這個方法將移出元素的父元素
// 把所有的段落用一個新創(chuàng)建的div包裹起來
 $("p").unwrap()
  1. replaceWith(content|fn)將所有匹配的元素替換成指定的HTML或DOM元素。
// HTML 代碼:
<p>Hello</p>
<p>cruel</p>
<p>World</p>

// 把所有的段落標(biāo)記替換成加粗的標(biāo)記
$("p").replaceWith("<b>Paragraph. </b>");

// 結(jié)果：
<b>Paragraph. </b>
<b>Paragraph. </b>
<b>Paragraph. </b>
  1. replaceAll(selector)用匹配的元素替換掉所有 selector匹配到的元素
// HTML 代碼:
<p>Hello</p>
<p>cruel</p>
<p>World</p>

// 把所有的段落標(biāo)記替換成加粗的標(biāo)記
$("<b>Paragraph. </b>").replaceAll("p");

// 結(jié)果：
<b>Paragraph. </b>
<b>Paragraph. </b>
<b>Paragraph. </b>
  1. empty()刪除匹配的元素集合中所有的子節(jié)點(diǎn)
// HTML 代碼:
<p>Hello, <span>Person</span> <a href="#">and person</a></p>

// 把所有段落的子元素（包括文本節(jié)點(diǎn)）刪除
$("p").empty();

// 結(jié)果：
<p></p>>
  1. remove([expr])從DOM中刪除所有匹配的元素
    除了這個元素本身得以保留之外，其他的比如綁定的事件，附加的數(shù)據(jù)等都會被移除
// HTML 代碼:
<p>Hello</p> 
how are 
<p>you?</p>

// 從DOM中把所有段落刪除
$("p").remove();

// 結(jié)果：
how are
  1. detach([expr])從DOM中刪除所有匹配的元素
    與remove()不同的是，所有綁定的事件、附加的數(shù)據(jù)等都會保留下來
// HTML 代碼:
<p>Hello</p> 
how are 
<p>you?</p>

// 從DOM中把所有段落刪除
$("p").detach();

// 結(jié)果：
how are
  1. clone([Even[,deepEven]])克隆匹配的DOM元素并且選中這些克隆的副本
// HTML 代碼:
<b>Hello</b>
<p>, how are you?</p>

// 克隆所有b元素（并選中這些克隆的副本），然后將它們前置到所有段落中
$("b").clone().prependTo("p");

// 結(jié)果：
<b>Hello</b>
<p><b>Hello</b>, how are you?</p>

動態(tài)更新員工表

效果：
在這里插入圖片描述
代碼

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #formDiv0 {
            width: 50%;
            box-sizing: border-box;
            float: left;
        }

        table {
            margin: 0 auto;
            width: 80%;
            border: 1px solid #ddd;
            background-color: antiquewhite;
        }

        #formDiv1 {
            width: 50%;
            box-sizing: border-box;
            margin-left: 50%;
            text-align: center;
        }
    </style>
    <script type="text/javascript" src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>

    <script>
        $(function () {
            // 動態(tài)添加
            $("#addEmpButton").click(function () {
                // 獲取信息
                let $empName = $('#empName');
                let $email = $('#email');
                let $salary = $('#salary');
                let name = $empName.val();
                let email = $email.val();
                let salary = $salary.val();

                let $tr = $('<tr></tr>')
                    .append('<td>' + name + '</td>')
                    .append('<td>' + email + '</td>')
                    .append('<td>' + salary + '</td>')
                    .append('<td><a href="deldteEmp?id=' + Date.now() + '"">Delete</a></td>')
                    .appendTo("#employeeTable>tbody")
                    .find('a')
                    .click(deleteA)
                $empName.val('')
                $email.val('')
                $salary.val('')
            })
            // 刪除
            $("#employeeTable a").click(deleteA)
            function deleteA() {
                let $tr = $(this).parent().parent();
                let name1 = $tr.children(":first").html();
                console.log(name1);
                if (confirm(`您確定要刪除${name1}`)) {
                    $tr.remove();
                }
                return false;
            }
        })
    </script>
</head>

<body>
    <div id="formDiv0">
        <table id="employeeTable" border="1">
            <tr>
                <th>Name</th>
                <th>Email</th>
                <th>Salary</th>
                <th>&nbsp;</th>
            </tr>
            <tr>
                <td>Tom</td>
                <td>Tom@tom.com</td>
                <td>5000</td>
                <td><a href="deldteEmp?id=001">Delete</a></td>
            </tr>
            <tr>
                <td>Jerry</td>
                <td>Jerry@sohu.com</td>
                <td>8000</td>
                <td><a href="deldteEmp?id=002">Delete</a></td>
            </tr>
            <tr>
                <td>Bob</td>
                <td>bob@sohu.com</td>
                <td>1000</td>
                <td><a href="deldteEmp?id=003">Delete</a></td>
            </tr>
        </table>
    </div>
    <div id="formDiv1">
        <table border="1">
            <thead>
                <th colspan="2">
                    添加新員工
                </th>
            </thead>
            <tr>
                <td class="word">name: </td>
                <td class="inp">
                    <input type="text" name="empName" id="empName">
                </td>
            </tr>
            <tr>
                <td class="word">email: </td>
                <td class="inp">
                    <input type="text" name="email" id="email">
                </td>
            </tr>
            <tr>
                <td class="word">salary: </td>
                <td class="inp">
                    <input type="text" name="salary" id="salary">
                </td>
            </tr>
            <tr>
                <td colspan="2" align="center">
                    <button id="addEmpButton" value="abc">Submit</button>
                </td>

            </tr>
        </table>
    </div>
</body>

</html>

原文鏈接：https://blog.csdn.net/weixin_45660621/article/details/122246446

欄目分類
最近更新