开发: C++知识库 Java知识库 JavaScript Python PHP知识库人工智能区块链大数据移动开发嵌入式开发工具数据结构与算法开发测试游戏开发网络协议系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑笔记本显卡显示器固态硬盘硬盘耳机手机 iphone vivo oppo 小米华为单反装机图拉丁

-> JavaScript知识库 -> jQuery 核心函数和动态更新员工表 -> 正文阅读

[JavaScript知识库]jQuery 核心函数和动态更新员工表

元素的尺寸

HTML

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

CSS

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

内容尺寸

内容尺寸，盒子模型中content的尺寸

height([val])取得匹配元素当前计算的高度值（px）

// 获取div元素的高
$("div").height();//100
// 把所有p段落的高设为200px
$("div").height(200);

width([val])取得第一个匹配元素当前计算的宽度值（px）

// 获取div元素的宽
$("div").width();//100
// 把所有p段落的宽设为200px
$("div").width(200);

内部尺寸

内部尺寸，盒子模型中content + padding的尺寸

innerHeight()获取第一个匹配元素内部区域高度（包括补白、不包括边框）

// 获取div内部区域高度
$("div").innerHeight()//120

innerWidth()获取第一个匹配元素内部区域宽度（包括补白、不包括边框）

// 获取div内部区域宽度
$("div").innerWidth()//120

外部尺寸

外部尺寸，盒子模型中content + padding+border的尺寸(如果参数是true，则，加上margin)

outerHeight([false\true])获取第一个匹配元素外部高度（默认包括补白和边框）

// 获取div外部尺寸区域高度，默认不包括margin
$("div").outerHeight()//126
// 获取div外部尺寸区域高度,包括margin
$("div").outerHeight(true)//166

outerWidth([false\true])获取第一个匹配元素外部宽度（默认包括补白和边框）

// 获取div外部尺寸区域宽度，默认不包括margin
$("div").outerWidth()//126
// 获取div外部尺寸区域宽度,包括margin
$("div").outerWidth(true)//166

筛选

过滤

eq(index)获取第N个元素
index 从0 开始计数
如果 index为负数，则从最后一个元素开始倒数

// 获取匹配的第二个li元素
$("li").eq(1)
// 获取匹配的倒数第三个li元素
$("li").eq(-3)

first()获取第一个元素

// 获取匹配的第一个li元素
$('li').first()

last()获取最后一个元素

// 获取匹配的第一个li元素
$('li').last()

hasClass(class)检查当前的元素是否含有某个特定的类，如果有，则返回true,否则返回false

// 检查div中class属性是否有box
$("div").hasClass("box")

filter(expr|obj|ele|fn)筛选出与指定表达式匹配的元素集合

// 保留带有类class = select的p元素
$("p").filter(".selected")

// 保留第一个带有类class = select的p元素
$("p").filter(".selected, :first")

is(expr|obj|ele|fn)根据选择器、DOM元素或 jQuery 对象来检测匹配元素集合，如果其中至少有一个元素符合这个给定的表达式就返回true
如果没有元素符合，或者表达式无效，都返回false

<form><input type="checkbox" /></form>

// 由于input元素的父元素是一个表单元素，所以返回true
$("input[type='checkbox']").parent().is("form")

map(callback)将一组元素转换成其他数组（不论是否是元素数组）

<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(", ") );

has(expr|ele)保留包含特定后代的元素，去掉那些不含有指定后代的元素

// 给含有ul的li加上背景红色
$('li').has('ul').css('background-color', 'red');

not(expr|ele|fn)删除与指定表达式匹配的元素

// 从p元素中删除带有 select 的ID的元素
$("p").not( $("#selected")[0])

slice(start, [end])选取一个匹配的子集

// 选择第一个p元素
$("p").slice(0, 1);

查找

children([expr])取得一个包含匹配的元素集合中每一个元素的所有子元素的元素集合

// 查找DIV中的每个子元素
$("div").children()

closest(expr|object|element)jQuery 1.3新增。从元素本身开始，逐级向上级元素匹配，并返回最先匹配的元素

<ul><li></li><li></li></ul>

// 展示如何使用closest查找多个元素
$("li:first").closest(["ul", "body"]);

find(expr|obj|ele)搜索所有与指定表达式匹配的元素

// 从所有的p段落开始，进一步搜索下面的span元素。与$("p span")相同
$("p").find("span")

next([expr])取得一个包含匹配的元素集合中每一个元素紧邻的后面同辈元素的元素集合

// 找到每个段落的后面紧邻的同辈元素
$("p").next()

nextAll([expr])查找当前元素之后所有的同辈元素

// 给第一个div之后的所有元素
$("div:first").nextAll()

nextUntil([exp|ele][,fil])查找当前元素之后所有的同辈元素，直到遇到匹配的那个元素为止

// 给#term-2后面直到dt前的元素加上红色背景
$('#term-2').nextUntil('dt').css('background-color', 'red');

offsetParent()返回第一个匹配元素用于定位的父节点
即返回父元素中第一个其position设为relative或者absolute的元素

// 设置最近的祖先定位元素的背景颜色
 $("p").offsetParent().css("background-color","red");

parent([expr])取得一个包含着所有匹配元素的唯一父元素的元素集合

// 查找每个段落的父元素
$("p").parent()

parents([expr])取得一个包含着所有匹配元素的祖先元素的元素集合（不包含根元素）。可以通过一个可选的表达式进行筛选。

// 找到每个span元素的所有祖先元素
$("span").parents()

prev([expr])取得一个包含匹配的元素集合中每一个元素紧邻的前一个同辈元素的元素集合

// 找到每个p段落紧邻的前一个同辈元素
$("p").prev()

prevAll([expr])查找当前元素之前所有的同辈元素

// 给最后一个之前的所有div
$("div:last").prevAll()

siblings([expr])取得一个包含匹配的元素集合中每一个元素的所有唯一同辈元素的元素集合。可以用可选的表达式进行筛选。

// 找到每个div的所有同辈元素
$("div").siblings()

add(expr|ele|html|obj[,con])把与表达式匹配的元素添加到jQuery对象中

// 添加一个新元素到一组匹配的元素中
$("p").add("span")

文档处理

内部插入

append(content|fn)向每个匹配的元素内部追加内容

// HTML 代码:
<p>I would like to say: </p>

// 向所有p段落中追加一些HTML标记
$("p").append("<b>Hello</b>");

// 结果：
<p>I would like to say: <b>Hello</b></p>

appendTo(content)把所有匹配的元素追加到另一个指定的元素元素集合中

// HTML 代码:
<p>I would like to say: </p>
<div></div>
<div></div>

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

//结果：
<div><p>I would like to say: </p></div>
<div><p>I would like to say: </p></div>

prepend(content)向每个匹配的元素内部前置内容

// HTML 代码:
<p>I would like to say: </p>

// 向所有段落中前置一些HTML标记代码
$("p").prepend("<b>Hello</b>");

// 结果：
 <p><b>Hello</b>I would like to say: </p>

prependTo(content)把所有匹配的元素前置到另一个、指定的元素元素集合中

// HTML 代码:
<p>I would like to say: </p>
<div id="foo"></div>

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

// 结果：
<div id="foo">
	<p>I would like to say: </p>
</div>

after(content|fn)在每个匹配的元素之后插入内容

// HTML 代码:
<p>I would like to say: </p>

// 在所有段落之后插入一些HTML标记代码
$("p").after("<b>Hello</b>");

// 结果：
<p>I would like to say: </p><b>Hello</b>

before(content|fn)在每个匹配的元素之前插入内容

// HTML 代码:
<p>I would like to say: </p>

// 在所有段落之后插入一些HTML标记代码
$("p").before("<b>Hello</b>");

// 结果：
<b>Hello</b><p>I would like to say: </p>

insertAfter(content)把所有匹配的元素插入到另一个、指定的元素元素集合的后面

// HTML 代码:
<p>I would like to say: </p>
<div id="foo">Hello</div>

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

// 结果：
<div id="foo">Hello</div>
<p>I would like to say: </p>

insertBefore(content)把所有匹配的元素插入到另一个、指定的元素元素集合的前面

// HTML 代码:
<div id="foo">Hello</div>
<p>I would like to say: </p>

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

// 结果：
<p>I would like to say: </p>
<div id="foo">Hello</div>

wrap(html|element|fn)把所有匹配的元素用其他元素的结构化标记包裹起来

// 把所有的段落用一个新创建的div包裹起来
$("p").wrap("<div class='wrap'></div>");

unwrap()这个方法将移出元素的父元素

// 把所有的段落用一个新创建的div包裹起来
 $("p").unwrap()

replaceWith(content|fn)将所有匹配的元素替换成指定的HTML或DOM元素。

// HTML 代码:
<p>Hello</p>
<p>cruel</p>
<p>World</p>

// 把所有的段落标记替换成加粗的标记
$("p").replaceWith("<b>Paragraph. </b>");

// 结果：
<b>Paragraph. </b>
<b>Paragraph. </b>
<b>Paragraph. </b>

replaceAll(selector)用匹配的元素替换掉所有 selector匹配到的元素

// HTML 代码:
<p>Hello</p>
<p>cruel</p>
<p>World</p>

// 把所有的段落标记替换成加粗的标记
$("<b>Paragraph. </b>").replaceAll("p");

// 结果：
<b>Paragraph. </b>
<b>Paragraph. </b>
<b>Paragraph. </b>

empty()删除匹配的元素集合中所有的子节点

// HTML 代码:
<p>Hello, <span>Person</span> <a href="#">and person</a></p>

// 把所有段落的子元素（包括文本节点）删除
$("p").empty();

// 结果：
<p></p>>

remove([expr])从DOM中删除所有匹配的元素
除了这个元素本身得以保留之外，其他的比如绑定的事件，附加的数据等都会被移除

// HTML 代码:
<p>Hello</p> 
how are 
<p>you?</p>

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

// 结果：
how are

detach([expr])从DOM中删除所有匹配的元素
与remove()不同的是，所有绑定的事件、附加的数据等都会保留下来

// HTML 代码:
<p>Hello</p> 
how are 
<p>you?</p>

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

// 结果：
how are

clone([Even[,deepEven]])克隆匹配的DOM元素并且选中这些克隆的副本

// HTML 代码:
<b>Hello</b>
<p>, how are you?</p>

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

// 结果：
<b>Hello</b>
<p><b>Hello</b>, how are you?</p>

动态更新员工表

效果：
在这里插入图片描述
代码

<!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 () {
            // 动态添加
            $("#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>