1.绑定事件

  • $().事件名(function(){功能})
  • 事件名：鼠标事件 键盘事件 表单事件
  • 事件委托：$().on('事件名',#####'target',function(){功能})
  • 额外：one():绑定的事件只会执行一次

2.DOM的增删查改

增

创建元素：$('标签')

    如:$("<li><div><p class='title'>"+new.title+"<img src="+new.url+"></div></li>)

添加到页面：

    尾部添加：父级.append(子级)

            子级.appendTo(父级)

    指定位置添加：父级.prepend(子级)

                子级：prependTo(父级)

删除

empty():元素.empty()删除指定元素中所有子级元素

remove():元素.remove()指定的元素被删除

改

replaceWith()

replaceAll()

查

父级关系：parent()

祖先级关系：parents(val)

子级关系：children()

后代关系：find(val)这个里面必须有参数

兄弟关系：

    上一个兄弟：prev()

    上面所有的兄弟：prevall()

    下一个兄弟：next()

    下面所有的兄弟：nextall()

    所有兄弟：siblings()

筛选：

    eq()

    first() 第一个

    last() 最后一个

    is() 验证作用

3.代码如下

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>增删查改</title>

</head>

<body>

    <div id="box">

        <ul>

            <li><span>1</span></li>

            <li><span>2</span></li>

            <li><span>3</span></li>

            <li><span>4</span></li>

        </ul>

    </div>

    <script src=" https://cdn.bootcss.com/jquery/3.5.0/jquery.min.js"></script>

    <script>

        //创建li标签，添加到ul

        $("<li><span>5</span></li>").appendTo('ul')

            //删除

            // $('ul').empty()

            // $('ul').remove()

            //查询

        var list = $('#list')

        console.log(list.parent().parent().parent())

        console.log(list.parents())

        console.log(list.children('div'))

        console.log(list.find('span')) //必须加参数

        console1.log(list.siblings())

    </script>

</body>

</html>

jQuery-DOM增删查改的更多相关文章

  1. Dom的增删查改以及常用事件

    dom的增删查改 // 查 var _input = document.getElementById('_input'); var _div = document.getElementsByClass ...

  2. 一套手写ajax加一般处理程序的增删查改

    倾述下感受:8天16次驳回.这个惨不忍睹. 好了不说了,说多了都是泪. 直接上代码 : 这个里面的字段我是用动软生成的,感觉自己手写哪些字段太浪费时间了,说多了都是泪 ajax.model层的代码: ...

  3. 极极极极极简的的增删查改（CRUD）解决方案

    去年这个时候写过一篇全自动数据表格的文章http://www.cnblogs.com/liuyh/p/5747331.html.文章对自己写的一个js组件做了个概述,很多人把它当作了一款功能相似的纯前 ...

  4. 3.EF 6.0 Code-First实现增删查改

    原文链接:http://www.c-sharpcorner.com/UploadFile/3d39b4/crud-operations-using-entity-framework-5-0-code- ...

  5. 5.在MVC中使用泛型仓储模式和工作单元来进行增删查改

    原文链接:http://www.c-sharpcorner.com/UploadFile/3d39b4/crud-operations-using-the-generic-repository-pat ...

  6. backbonejs mvc框架的增删查改实例

    一:开发环境 coffeescript和nodejs需要先安装,没装网上自己查安装步骤. 代码编写环境及esp框架下载: esp框架下载地址:https://github.com/nonocast/e ...

  7. EasyUI的增删查改(后台ASP.NET)

    转自:http://www.cnblogs.com/dedeyi/archive/2013/04/22/3035057.html 某某人曾经跟我说,你们做系统不就是增删查改吗. 是啊,很多时候我们就是 ...

  8. 在MVC中使用泛型仓储模式和工作单元来进行增删查改

    原文链接:http://www.c-sharpcorner.com/UploadFile/3d39b4/crud-operations-using-the-generic-repository-pat ...

  9. 学习记录——使用PHP实现数据增删查改等基本功能（前后端分离）

    萌新初次学习服务器端语言,分享学习经验 实现功能:1.显示数据表    2.对数据进行分页    3.对数据进行增删查改 由于本萌新采用前后端完全分离方案,所以数据传输用的ajax,为了提高代码的复用 ...

随机推荐

  1. A - ACM Computer Factory POJ - 3436 网络流

    A - ACM Computer Factory POJ - 3436 As you know, all the computers used for ACM contests must be ide ...

  2. CSS中的间距设置与盒子模型

    CSS间距 内补白 外补白 盒子模型 CSS间距 很多时候我们为了美观,需要对内容进行留白设置,这时候就需要设置间距了. 内补白 设置元素的内间距 padding: 检索或设置对象四边的内部边距 pa ...

  3. spring学习笔记（四）我对spring中bean生命周期的理解

    我相信大部分同学对spring中bean的生命周期都不陌生,但是如果要详细的说出每一个步骤,可能能说出来的也不多,我之前也是这样,前几天调了一下spring的源码,看了一点书,突然一下明朗了,理解了s ...

  4. 【华为云技术分享】MongoDB经典故障系列五：sharding集群执行sh.stopBalancer()命令被卡住怎么办？

    [摘要] MongoDB sharding集群执行sh.stopBalancer()命令时被卡住怎么办?别慌,华为云数据库来给您支招,收下这份方案指南,让您分分钟远离被自建MongoDB数据库支配的恐 ...

  5. HDU 3874 Necklace 区间查询的离线操作

    题目: http://acm.hdu.edu.cn/showproblem.php?pid=3874 对需要查询的区间按右端点排序,然后从左到右依次加入序列中的元素,同时更新,更新的方法是,把上一次出 ...

  6. 【Leetcode】1340. Jump Game V 【动态规划/记忆性搜索】

    Given an array of integers arr and an integer d. In one step you can jump from index i to index: i + ...

  7. Spring初学笔记(一)：Spring IOC的理解

    关于依赖注入.控制反转 Ioc—Inversion of Control,即“控制反转”,不是什么技术,而是一种设计思想.在Java开发中,Ioc意味着将你设计好的对象交给容器控制,而不是传统的在你的 ...

  8. vim命令备份

    vim命令 vim键盘位置说明 在命令状态下对当前行用 == (连按=两次), 或对多行用 n==(n是自然数)表示自动缩进从当前行起的下面n行. 可以试试把代码缩进任意打乱再用 n== 排版,相当于 ...

  9. React实践debug：JSX输出的限制（存疑）

    今天在练习React构建组件的时候遇到一个问题. 由于文档中反复提倡将组件尽可能按功能单位分解复用.在练习用React做一个todolist时候,我把todolist分解成两部分: class Tod ...

  10. vue组件试错

    [Vue warn]: Property or method "child1" is not defined on the instance but referenced duri ...