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. C语言设计实验报告（二）

    C程序设计实验报告姓 名:赖瑾 实验地点:家 实验时间:2020年3月9日 实验项目:2.3.3 字符与ASCLL码 2.3.4 运算符与表达式的运用 2.3.5 顺序结构应用程序 3.3.1 数学函 ...

  2. 201771010113 李婷华 《面向对象程序设计（Java）》第八周总结

    一.理论知识部分 1.Java为了克服单继承的缺点,Java使用了接口,一个类可以实现一个或多个接口. 2.在Java程序设计语言中,接口不是类,而是对类的一组需求描述,由常量和一组抽象方法组成.接口 ...

  3. LRU 的C# 实现

    首先 先写点儿感悟吧: 本来计划是 晚上回家写的  后来发现还是没坚持的了  上午花了一个多小时  做了一下这个题目  应该还有提高的空间 的,这个题目是在力扣里面看到的  为什么看到这个题目 是因为 ...

  4. FreeAnchor：抛弃单一的IoU匹配，更自由的anchor匹配方法 | NIPS 2019

    论文抛弃以往根据IoU硬性指定anchor和GT匹配关系的方法,提出FreeAnchor方法来进行更自由的匹配,该方法将目标检测的训练定义为最大似然估计(MLE)过程,端到端地同时学习目标分类.目标检 ...

  5. python解析谷歌在线表格链接，转化为数组形式，图片转化为链接

    在线表格已成为趋势,传统的表格导入导出已经不能满足现在企业的发展. 必须支持在线表格的导入,只需要输入在线表格的链接,就能将数据读取出来. 而且相比相传表格,能够将图片信息一块读取.在线表格中的图片也 ...

  6. 前端面试题-WebSocket的实现和应用

    (1)什么是WebSocket? WebSocket是HTML5中的协议,支持持久连续,http协议不支持持久性连接.Http1.0和HTTP1.1都不支持持久性的链接,HTTP1.1中的keep-a ...

  7. 1026 Table Tennis (30分) 难度不高 + 逻辑复杂 +细节繁琐

    题目 A table tennis club has N tables available to the public. The tables are numbered from 1 to N. Fo ...

  8. 改进Page Object公共方法封装（base_page）

    import os from time import sleep from selenium import webdriver from selenium.webdriver.common.by im ...

  9. django 两种创建模型实例的方法

    1. 添加一个classmethod from django.db import models class Book(models.Model): title = models.CharField(m ...

  10. 【雕爷学编程】Arduino动手做（60）---WS2812直条8位模块

    37款传感器与执行器的提法,在网络上广泛流传,其实Arduino能够兼容的传感器模块肯定是不止这37种的.鉴于本人手头积累了一些传感器和执行器模块,依照实践出真知(一定要动手做)的理念,以学习和交流为 ...