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. 数据结构与算法：栈(Stack)的实现

    栈在程序设计当中是一个十分常见的数据结构,它就相当于一个瓶子,可以往里面装入各种元素,最先装进这个瓶子里的元素,要把后装进这个瓶子里的全部元素拿出来完之后才能够把他给拿出来.假设这个瓶子在桌上平放,左 ...

  2. 从零开始学习docker之在docker中搭建redis(集群)

    docker搭建redis集群 docker-compose是以多容器的方式启动,非常适合用来启动集群 一.环境准备 云环境:CentOS 7.6 64位 二.安装docker-compose #需要 ...

  3. CC2530定时器

    一.定时/技术器的基本原理 定时/计数器,是一种能够对内部时钟信号或外部输入信号进行计数,当计数值达到设定要求时,向CPU提出中断处理请求,从而实现定时或者计数功能的外设.         定时/计数 ...

  4. ASP.NET Core Blazor 初探之 Blazor WebAssembly

    最近Blazor热度很高,传说马上就要发布正式版了,做为微软脑残粉,赶紧也来凑个热闹,学习一下. Blazor Blazor是微软在ASP.NET Core框架下开发的一种全新的Web开发框架.Bla ...

  5. 记一次jackson序列化Boolean的坑

    @Data public class CouponTemplateDto { /** * 优惠券类型id */ private Long couponTypeId; /** * 优惠券模板id */ ...

  6. NEON中的L可以避免溢出

    在做加法时,比如两个255x255的数值相加,那么正确结果将是130050,对一个最大值为65565的unsigned short是会溢出的,但是如果使用L命令时,则不会产生溢出.这说明L命令,不是先 ...

  7. JUC之CountDownLatch源码分析

    CountDownLatch是AbstractQueuedSynchronizer中共享锁模式的一个的实现,是一个同步工具类,用来协调多个线程之间的同步.CountDownLatch能够使一个或多个线 ...

  8. 力扣题解-LCP 06. 拿硬币

    题目描述 桌上有 n 堆力扣币,每堆的数量保存在数组 coins 中.我们每次可以选择任意一堆,拿走其中的一枚或者两枚,求拿完所有力扣币的最少次数. 示例 1: 输入:[4,2,1] 输出:4 解释: ...

  9. CQengine高性能内存数据缓存查找框架

    CQengine可实现高性能内存数据缓存查找 CQEngine 需要设置字段对应的属性以方便访问与查询 主要有属性链接 SimpleAttribute(不能为空) SimpleNullableAttr ...

  10. 王艳 201771010127《面向对象程序设计（java）》第八周学习总结

    一:理论部分. 1.接口:Java为了克服单继承的缺点,Java使用了接口,一个类可以实现一个或多接口.(接口不是类,而是对类的一组需求描述,它由常量和一组抽象方法组成) 1)通常,接口名称以able ...