JQuery学习笔记(3)——节点操作 节点查找
插入节点
内部插入
所谓的内部插入,就是指在节点里面的插入,而外部插入,则是在节点外面插入。
- 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)——节点操作 节点查找的更多相关文章
- jQuery学习笔记之DOM操作、事件绑定(2)
jQuery学习笔记之DOM操作.事件绑定(2) --------------------学习目录------------------------ 4.DOM操作 5.事件绑定 源码地址: https ...
- jQuery学习笔记(DOM操作)
DOM操作的分类 一般来说,DOM操作分为3个方面,即DOM Core.HTML-DOM和CSS-DOM. 1. DOM Core DOM Core并不专属于JavaScript,任何一种支持DOM的 ...
- jQuery学习笔记--JqGrid相关操作 方法列表(上)
1.获得当前列表行数:$("#gridid").getGridParam("reccount"); 2.获取选中行数据(json):$("#gridi ...
- jQuery学习笔记 - 基础知识扫盲入门篇
jQuery学习笔记 - 基础知识扫盲入门篇 2013-06-16 18:42 by 全新时代, 11 阅读, 0 评论, 收藏, 编辑 1.为什么要使用jQuery? 提供了强大的功能函数解决浏览器 ...
- jQuery 学习笔记
jQuery 学习笔记 一.jQuery概述 宗旨: Write Less, Do More. 基础知识: 1.符号$代替document.getElementById( ...
- jQuery学习笔记(一):入门
jQuery学习笔记(一):入门 一.JQuery是什么 JQuery是什么?始终是萦绕在我心中的一个问题: 借鉴网上同学们的总结,可以从以下几个方面观察. 不使用JQuery时获取DOM文本的操 ...
- tensorflow学习笔记——使用TensorFlow操作MNIST数据(2)
tensorflow学习笔记——使用TensorFlow操作MNIST数据(1) 一:神经网络知识点整理 1.1,多层:使用多层权重,例如多层全连接方式 以下定义了三个隐藏层的全连接方式的神经网络样例 ...
- IOS学习笔记25—HTTP操作之ASIHTTPRequest
IOS学习笔记25—HTTP操作之ASIHTTPRequest 分类: iOS2012-08-12 10:04 7734人阅读 评论(3) 收藏 举报 iosios5网络wrapper框架新浪微博 A ...
- jQuery 学习笔记:jQuery 代码结构
jQuery 学习笔记:jQuery 代码结构 这是我学习 jQuery 过程中整理的笔记,这一部分主要包括 jQuery 的代码最外层的结构,写出来整理自己的学习成果,有错误欢迎指出. jQuery ...
随机推荐
- WPF里DataGrid分页控件
1.主要代码: using System; using System.Collections.ObjectModel; using System.Windows; using System.Windo ...
- C# 开机自动启动
if (ConfigurationManager.AppSettings["IsBoot"].ToString().Trim().ToUpper() == "TRUE&q ...
- 一个技术人,最重要的是:极客精神(好奇心 + 探索欲)(新de代码)
一个技术人,最重要的是:极客精神(好奇心 + 探索欲) 初到社会,面对众多的IT企业,我们是陌生与好奇的,认为所有企业都是管理一流并且高大上等的.然而工作多年以后你会发现,国内的IT企业环境良莠不齐, ...
- shell转义符
转义是一种引用单个字符的方法. 一个前面放上转义符 (\)的字符就是告诉shell这个字符按照字面的意思进行解释, 换句话说, 就是这个字符失去了它的特殊含义. 在某些特定的命令和工具中, 比如ech ...
- 论文阅读计划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] 简介:雅虎发布的一份各种流处理引擎的基准 ...
- 栈内存不是只有2M吗?为什么不溢出?
#include <stdio.h> #include <wchar.h> #include <stdlib.h> #define MAX_PATH 1024 FI ...
- ChartDirector应用笔记(可同时为Web和Qt MFC提供图表)
ChartDirector介绍 ChartDirector是一款小巧精细的商业图表库.其适用的语言范围非常广泛,包括.Net, Java, Asp, VB, PHP, Python, Ruby, C+ ...
- 教你做一个牛逼的DBA(在大数据下)
一.基本概念 大数据量下,搞mysql,以下概念需要先达成一致 1)单库,不多说了,就是一个库 2)分片(sharding),水平拆分,用于解决扩展性问题,按天拆分表 3)复制(replication ...
- Python|网页转PDF,PDF转图片爬取校园课表~
import pdfkit import requests from bs4 import BeautifulSoup from PIL import Image from pdf2image imp ...
- PWN菜鸡入门之函数调用栈与栈溢出的联系
一.函数调用栈过程总结 Fig 1. 函数调用发生和结束时调用栈的变化 Fig 2. 将被调用函数的参数压入栈内 Fig 3. 将被调用函数的返回地址压入栈内 Fig 4. 将调用函数的基地址(ebp ...