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. LateX的简单字体设置(颜色，居中，大小等)

    \(\color{red}{Ⅰ.文本单行居中}\) $$\text{我是蒟蒻}$$ \[\text{我是蒟蒻} \] \(\color{Black}{Ⅱ.设置字体颜色}\) $$\color{Purp ...

  2. Spring官网阅读 | 总结篇

    接近用了4个多月的时间,完成了整个<Spring官网阅读>系列的文章,本文主要对本系列所有的文章做一个总结,同时也将所有的目录汇总成一篇文章方便各位读者来阅读. 下面这张图是我整个的写作大 ...

  3. 微信小程序下拉刷新时有部分区域不随着下拉移动

    问题 区域元素使用(position: fixed),小程序页面下拉刷新时,这部分区域不会随页面下拉移动. 如何解决 删除设置的top属性

  4. 王颖奇 201771010129 第三周 Java基本程序设计总结

    实验三 Java基本程序设计 实验时间 2018-9-13 201771010129 王颖奇 1.实验目的与要求 (1)进一步掌握Eclipse集成开发环境下java程序开发基本步骤: (2)熟悉PT ...

  5. Vular开发手记#1：设计并实现一个拼插式应用程序框架

    可视化编(rxeditor)辑告一段落,在知乎上发了一个问题,询问前景,虽然看好的不多,但是关注度还是有的,目前为止积累了21w流量,因为这个事,开心了好长一段时间.这一个月的时间,主要在设计制作Vu ...

  6. failed parsing overlays.

    clearn + rebuild + 重新运行: 删掉模拟器进程 + 重新运行:

  7. jar包名修改工具

    jar包名修改工具 软件传送门:链接: https://pan.baidu.com/s/12StRdEkYGmMn1DuNSquXSw   提取码: i9w1 闲暇之余,利用jarjar.jar写了一 ...

  8. urldecode二次编码

    0x01 <?php if(eregi("hackerDJ",$_GET[id])) { echo("not allowed!"); exit(); } ...

  9. POI 导入excel数据自动封装成model对象--介绍

    1.项目开发中,导入输入应该是常用的基本功能.我们经常会使用excel将数据导入到数据库,在导入之前必须得将excel数据转换成javaBean对象 2.由于此功能经常使用,所以开发此工具类方便日后轻 ...

  10. ScheduleMaster新特性之延时任务初体验

    ScheduleMaster在上个月底更新到了2.0版本,在功能和代码以及文档上都往前跨了很大一步,详细信息可以参考这篇文章:https://www.cnblogs.com/hohoa/p/12772 ...