Jquery-Dom操作

最新推荐文章于 2024-07-05 14:21:58 发布

Select星，却没有你

最新推荐文章于 2024-07-05 14:21:58 发布

阅读量90

点赞数

文章标签： jquery

本文链接：https://blog.csdn.net/qq_39260138/article/details/107215376

版权

Jquery-Dom操作

1.文档处理

内部插入
外部插入

2.删除

empty：删除当前元素下集合中所有的子节点
remove：从DOM中删除所有匹配的元素，只保留元素本身，所有的绑定事件、附加的数据都会被删除
detach：从DOM中删除所有匹配的元素，保留元素本身。所有的绑定事件、附加的数据都会被保留

3.替换与克隆

clone：克隆匹配的DOM元素，并选中这些克隆的副本。[一个布尔值 true：同时复制事件函数，false：默认，不复制事件函数] （第一个参数值代表是否复制事件函数，第二个参数值代表子元素的事件函数是否被复制【第二参数前提：【第一参数为true】）
repalceWith：将所有匹配的元素替换成指定的HTML或DOM元素$("p").replaceWith("<b>Paragraph. </b>");
replaceAll：用匹配元素替换掉所有Selector匹配到的元素

$("<b>Paragraph. </b>").replaceAll("p");

综合练习

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
<script src="web/JS/jquery.js"></script>
<script>
    $(function () {
        $("#but").click(function () {
        //1.创建一个tr
        var tr = $("<tr></tr>");
        //2.创建4个td,并向内添加值
        var td1 = $("<td></td>");
        td1.append($("#username").val());
        var td2 = $("<td></td>");
        td2.append($("#phone").val());
        var td3 = $("<td></td>");
        td3.append($("#email").val());
        var td4 = $("<td></td>");
        var a = $("<a href='javascript:void(0)'> 删除 </a>");
        $("a").click(function () {
            $(this).parents("tr").remove();
        })
        td4.append(a);
        //3.将td添加到tr中
        tr.append(td1).append(td2).append(td3).append(td4);
        //4.将tr添加到table中
        $("#tab").append(tr);
    });

    })

</script>
</head>

<body>
<div align="center">
    <table id="tab" border="1">
        <tr>
            <td>姓名</td>
            <td>电话</td>
            <td>邮箱</td>
            <td>删除</td>
        </tr>
    </table>
    <hr>
    姓名：<input type="text" id="username">
    电话：<input type="text" id="phone">
    邮箱：<input type="email" id="email">
    <input type="button" value="Add" id="but">
</div>

</body>
</html>

4. 筛选操作

过滤：相当于选择器，比如eq根据序号来获取元素frist，last
查找：通过当前元素获取祖先元素，父元素，子元素···
- find方法可以直接查找指定元素

5.事件机制

Jquery中的事件允许绑定多个函数，而JavaScript中一个事件只能绑定一个函数
事件绑定机制
- 常规 $("#btn").click(function(){});
- bind $("#btn").bind("click",function(){});
- unbind 用于解除bind事件绑定 $("#btn").unbind("click");
- live $("#btn").live("click",function(){});
- die 解除live绑定 $("#btn").die("click");
  - live 和bind的区别：bind只能为已经存在的元素进行事件绑定。live可以为没有存在，后续通过代码新添加的元素进行事件绑定。
一次性事件 $("p").one("click", function(){}) 常用于表单提交，防止重复提交表单
事件触发：在每一个匹配的元素上触发某类事件。$("form:first").trigger("submit")
事件切换：
hover一个模仿悬停事件（鼠标移动到一个对象上面及移出这个对象）的方法。
toggle：可以绑定两个或多个事件处理函数，以响应
事件切换：
hover一个模仿悬停事件（鼠标移动到一个对象上面及移出这个对象）的方法。

[外链图片转存中…(img-76rBugVA-1594214039903)]
toggle：可以绑定两个或多个事件处理函数，以响应

Select星，却没有你

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Jquery-Dom操作

Jquery-Dom操作1.文档处理内部插入外部插入2.删除empty：删除当前元素下集合中所有的子节点remove：从DOM中删除所有匹配的元素，只保留元素本身，所有的绑定事件、附加的数据都会被删除detach：从DOM中删除所有匹配的元素，保留元素本身。所有的绑定事件、附加的数据都会被保留3.替换与克隆clone：克隆匹配的DOM元素，并选中这些克隆的副本。[一个布尔值 true：同时复制事件函数，false：默认，不复制事件函数] （第一个参数值代表是否
复制链接

扫一扫