插入节点

内部插入

所谓的内部插入,就是指在节点里面的插入,而外部插入,则是在节点外面插入。

  • append()
  • prepend()
  • appendTo()
  • prependTo()

append和prepend是相反的

后面以To结尾的,参数为被插入内容的节点

append可以理解为尾部插入,prepend为头部插入

//在div里面的内容,末尾再追加一个p标签,插入的p标签在div所有子元素的末尾
$("#mydiv").append($("<p>末尾插入</p>")); //在div里面的内容,头部追加一个p标签,插入的p标签位于div的所有子元素的首位
$("#mydiv").prepend($("<p>头部插入</p>")); //下面两种鱼上面的效果是一样的,只是调用的对象和参数这两者换了位置
$("<p>末尾插入</p>").appendTo($("#mydiv")); $("<p>头部插入</p>").prependTo($("#mydiv"));

外部插入

  • after()
  • before()
  • insertAfter()
  • insertBefore()

这里,使用方法与之前的内部插入类似

//div之后插入一个p标签,p标签和div是同级关系
$("#mydiv").after($("<p>末尾插入</p>"));
//div之前插入一个p标签,p标签和div是同级关系
$("#mydiv").before($("<p>头部插入</p>"));
//把p标签插入到div之后,同级
$("<p>末尾插入</p>").insertAfter($("#mydiv"));
//把p标签插入到div之前,同级
$("<p>末尾插入</p>").insertBefore($("#mydiv"));

替换节点

下面的两个方法,效果一样,只是调用对象和目标相反

  • replaceWith(content|fn)
$('div.second').replaceWith('<h2>New heading</h2>');
  • replaceAll(selector)
$('<h2>New heading</h2>').replaceAll('.inner');

删除节点 克隆节点

删除节点

  • empty()

    删除节点下面的所有元素,只保留节点
  • remove([selector])

    删除节点,包括节点本身,可以添加选择器进行过滤
  • detach([selector])

    删除节点,但保留节点属性,可以添加选择器进行过滤

克隆节点

clone()

var btn = $('#mybutton').clone();
//在添加到某个节点之前可以修改属性
btn.css({background:red});
btn.appendTo($('#mydiv'));

查找节点

我们获得一个节点,想要获取它的子节点或者父节点,都是属于查找节点

下列的方法,未标明返回类型的,都是返回一个JQuery对象

过滤

  • first() 获得第一个节点
  • last() 获得最后一个节点
  • boolean hasClass() 获得包含有某个样式的节点
<div id="mydiv" class="foo bar"></div>

上面的div有两个样式,使用hasClass,参数为两个的样式中的一个,都会返回true

$('#mydiv').hasClass('foo') 返回true
$('#mydiv').hasClass('bar') 返回true
  • has(selector) 获得包含某个元素的节点
<ul>
<li></li>
</ul>
<ul></ul> $('ul').has('li').css(); ul中包含有li的ul的css会被修改

查找

  • find(selector) 查找后代元素
  • children(selector) 只查找子元素
  • eq(index) 获得节点里指定索引的子元素(调用的jQuery对象包含多个元素)
$('tbody').eq(2)  //0开始,索引为
$('tbody').eq(-1) //倒数第一个

JQuery学习笔记(3)——节点操作 节点查找的更多相关文章

  1. jQuery学习笔记之DOM操作、事件绑定(2)

    jQuery学习笔记之DOM操作.事件绑定(2) --------------------学习目录------------------------ 4.DOM操作 5.事件绑定 源码地址: https ...

  2. jQuery学习笔记(DOM操作)

    DOM操作的分类 一般来说,DOM操作分为3个方面,即DOM Core.HTML-DOM和CSS-DOM. 1. DOM Core DOM Core并不专属于JavaScript,任何一种支持DOM的 ...

  3. jQuery学习笔记--JqGrid相关操作 方法列表(上)

    1.获得当前列表行数:$("#gridid").getGridParam("reccount"); 2.获取选中行数据(json):$("#gridi ...

  4. jQuery学习笔记 - 基础知识扫盲入门篇

    jQuery学习笔记 - 基础知识扫盲入门篇 2013-06-16 18:42 by 全新时代, 11 阅读, 0 评论, 收藏, 编辑 1.为什么要使用jQuery? 提供了强大的功能函数解决浏览器 ...

  5. jQuery 学习笔记

    jQuery 学习笔记   一.jQuery概述    宗旨: Write Less, Do More.    基础知识:        1.符号$代替document.getElementById( ...

  6. jQuery学习笔记(一):入门

      jQuery学习笔记(一):入门 一.JQuery是什么 JQuery是什么?始终是萦绕在我心中的一个问题: 借鉴网上同学们的总结,可以从以下几个方面观察. 不使用JQuery时获取DOM文本的操 ...

  7. tensorflow学习笔记——使用TensorFlow操作MNIST数据(2)

    tensorflow学习笔记——使用TensorFlow操作MNIST数据(1) 一:神经网络知识点整理 1.1,多层:使用多层权重,例如多层全连接方式 以下定义了三个隐藏层的全连接方式的神经网络样例 ...

  8. IOS学习笔记25—HTTP操作之ASIHTTPRequest

    IOS学习笔记25—HTTP操作之ASIHTTPRequest 分类: iOS2012-08-12 10:04 7734人阅读 评论(3) 收藏 举报 iosios5网络wrapper框架新浪微博 A ...

  9. jQuery 学习笔记:jQuery 代码结构

    jQuery 学习笔记:jQuery 代码结构 这是我学习 jQuery 过程中整理的笔记,这一部分主要包括 jQuery 的代码最外层的结构,写出来整理自己的学习成果,有错误欢迎指出. jQuery ...

随机推荐

  1. BAT-把当前用户以管理员权限运行(用户帐户控制:用于内置管理员帐户的管理员批准模式)

    相关资料: http://jingyan.baidu.com/article/72ee561a5dc24fe16138df95.html 网友求助:联想Y400,Win8系统 怎样获得管理员身份 要求 ...

  2. DataTable,DataView 排序和使用

    我们都知道在Sql Server可以用order by来排序,所以很多朋友在DataTable中排序也想到了用order by关键字.但这样实现是比较困难的,下面,我们讲解一种比较简单的方法: 控制台 ...

  3. SVN更新报错问题(Please execute the 'Cleanup' command)

    SVN更新报错问题(Please execute the 'Cleanup' command) https://segmentfault.com/a/1190000012571289 svn: E20 ...

  4. 专访Rust——由Mozilla开发的系统编程语言(目标人群就是那些纠结的C++程序员,甚至也是他们自己)

    Rust是由Mozilla开发的专门用来编写高性能应用程序的系统编程语言.以下是对Rust的创始人——Graydon Hoare的采访. Graydon Hoare,自称为职业编程语言工程师,从200 ...

  5. LOG4NET图文教程

    LOG4NET教程 一:简介 从操作系统到大多数的大型软件,都会有自己的程序运行时的日志跟踪API.因为一旦程序被部署以后,就不太可能再利用专门的调试工具了.然而软件开发人员需要一套强大的日志系统来记 ...

  6. [Java] 父类和子类拥有同名的成员变量(fields)的情况

    首先,需要明确的是,无论是通过casting,还是通过将子类对象的reference赋值给父类变量,都无法改变该reference所指对象的真实类型.但当该reference的类型是父类时,将无法调用 ...

  7. 代码审计之seacms v6.45 前台Getshell 复现分析

    1.环境: php5.5.38+apache+seacms v6.45 seacms目录结构: │─admin //后台管理目录 │ │─coplugins //已停用目录 │ │─ebak //帝国 ...

  8. 错误处理之try、catch、finally中的return、throw执行顺序。

    今天遇到一个让人无语的代码块 try { bilSheetService.syncUser(bilWebseviceLog, userId, optType); }catch (Exception e ...

  9. vue结合Ant Design实现后台系统的权限分配(支持无限子级嵌套)

    最近公司的业务需要,要做一个后台管理系统的管理系统类似于这样子 功能需求如下: 左边是权限菜单,右边对应的是具体权限. 1.父级权限菜单选中,父级权限菜单的权限包括其中所有子级权限菜单的权限也要选中, ...

  10. win10安装docker

    配置首先需要Hyper-v和容器,这样就可以运行Linux的镜像了 如果是win10home版或者是其他版本就需要安装visulbox了, 然后去官网https://www.docker.com/pr ...