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. tp5中提示错误A non well formed numeric value encountered

    问题因为自动完成时间导致的 原来我的数据库是这样的 修改成下面这样就好了

  2. Scrapy - Request 中的回调函数callback不执行

    回调函数callback不执行 大概率是被过滤了 两种方法: 在 allowed_domains 中加入目标url 在 scrapy.Request() 函数中将参数 dont_filter=True ...

  3. python语法学习第三天--列表

    列表:python中不用定义类型,类似工厂 列表的创建: ①创建普通列表:[1,2],用逗号隔开 ②创建一个混合列表:[1,‘zyf',3.14,[1,2,3]] ③创建空列表:empty=[] 常用 ...

  4. JS理论：编码习惯

    1.声明变量,你只会var吗?那你真的是JS小鲜肉 如果要声明3个变量,你要var 三下吗? 不用: let [a,b,c] = ['name',18,'ddd'] console.log(a,b,c ...

  5. 非系统盘根目录出现msdia80.dll文件，能否删除？

    出现此问题的原因:计算机上安装了 Microsoft Visual C++ 2005 可再发行组件时,Msdia80.dll文件被错误安装在其他驱动器的根文件夹中. 它的正确路径应该是"C: ...

  6. 00001- layui 表格的默认工具栏添加自定义按钮

    首先定义table: var tableIns = table.render({ elem:'#businessUserListTable' ,url: ctx+'/business/business ...

  7. 11.3 Go 开发博客

    11.2 Go 开发博客 1.1. MVC模式 MVC分层简化了分组开发.不同的开发人员可同时开发视图,控制器逻辑和业务逻辑. 耦合性低:视图层和业务逻辑层分离.相互独立,不受影响 重用性高:业务逻辑 ...

  8. 对比Memcached和Redis，谁才是适合你的缓存？

    Memcached vs Redis 近期公司采购软件,评估时,某软件谈到使用了 Memcached 和 Redis 缓存.在本文中,将研究这两个流行的缓存的异同,方便理解和记忆. 1. Memcac ...

  9. JMM_Java内存模型

    一.什么是 JMM JMM : Java 内存模型,它并不实际存在,是一种概念,一种约定! 作用 :主要是定义了 线程 与 主内存 之间存取数据的一些规则,进行一定的约束. 二.关于 JMM 的约定 ...

  10. zoj3995 fail树

    //给n个串 求两个串的(最长)公共后缀, 如果这个后缀是1个串的前缀 ,那么++ans,求ans/* 对所有串建立AC自动机,那么若前缀ii 是前缀jj 的后缀,说明ii 是Fail树上jj 的祖先 ...