插入节点

内部插入

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

  • 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. WPF里DataGrid分页控件

    1.主要代码: using System; using System.Collections.ObjectModel; using System.Windows; using System.Windo ...

  2. C# 开机自动启动

    if (ConfigurationManager.AppSettings["IsBoot"].ToString().Trim().ToUpper() == "TRUE&q ...

  3. 一个技术人,最重要的是:极客精神(好奇心 + 探索欲)(新de代码)

    一个技术人,最重要的是:极客精神(好奇心 + 探索欲) 初到社会,面对众多的IT企业,我们是陌生与好奇的,认为所有企业都是管理一流并且高大上等的.然而工作多年以后你会发现,国内的IT企业环境良莠不齐, ...

  4. shell转义符

    转义是一种引用单个字符的方法. 一个前面放上转义符 (\)的字符就是告诉shell这个字符按照字面的意思进行解释, 换句话说, 就是这个字符失去了它的特殊含义. 在某些特定的命令和工具中, 比如ech ...

  5. 论文阅读计划1(Benchmarking Streaming Computation Engines: Storm, Flink and Spark Streaming & An Enforcement of Real Time Scheduling in Spark Streaming & StyleBank: An Explicit Representation for Neural Ima)

    Benchmarking Streaming Computation Engines: Storm, Flink and Spark Streaming[1] 简介:雅虎发布的一份各种流处理引擎的基准 ...

  6. 栈内存不是只有2M吗?为什么不溢出?

    #include <stdio.h> #include <wchar.h> #include <stdlib.h> #define MAX_PATH 1024 FI ...

  7. ChartDirector应用笔记(可同时为Web和Qt MFC提供图表)

    ChartDirector介绍 ChartDirector是一款小巧精细的商业图表库.其适用的语言范围非常广泛,包括.Net, Java, Asp, VB, PHP, Python, Ruby, C+ ...

  8. 教你做一个牛逼的DBA(在大数据下)

    一.基本概念 大数据量下,搞mysql,以下概念需要先达成一致 1)单库,不多说了,就是一个库 2)分片(sharding),水平拆分,用于解决扩展性问题,按天拆分表 3)复制(replication ...

  9. Python|网页转PDF,PDF转图片爬取校园课表~

    import pdfkit import requests from bs4 import BeautifulSoup from PIL import Image from pdf2image imp ...

  10. PWN菜鸡入门之函数调用栈与栈溢出的联系

    一.函数调用栈过程总结 Fig 1. 函数调用发生和结束时调用栈的变化 Fig 2. 将被调用函数的参数压入栈内 Fig 3. 将被调用函数的返回地址压入栈内 Fig 4. 将调用函数的基地址(ebp ...