JQuery --- 第五期 (JQuery节点操作)
学习笔记
1.JQuery添加节点相关方法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JQuery添加节点相关方法</title>
<script src="../jquery-1.12.4.js"></script>
<script>
$(function () {
//**************************************************************内部插入
var $li = $("<li>我是新增的li</li>");
/**
* 1.append:将A元素添加到指定元素B内部的最后
* B作为方法调用者
* A作为方法参数
*/
$("button").click(function () {
$("ul").append($li);
});
/**
* 2.appendTo:将A元素添加到指定元素B内部的最后
* A作为方法调用者
* B作为方法参数
*/
$("button").click(function () {
$li.appendTo("ul");
});
/**
* 3.prepend:将A元素添加到指定元素B内部的最前面
* B作为方法调用者
* A作为方法参数
*/
$("button").click(function () {
$("ul").prepend($li);
});
/**
* 4.prependTo:将A元素添加到指定元素B内部的最前面
* A作为方法调用者
* B作为方法参数
*/
$("button").click(function () {
$li.prependTo("ul");
});
//**************************************************************外部插入
/**
* 1.after:将A元素添加到指定元素B外部的后面
* B作为方法调用者
* A作为方法参数
*/
$("button").click(function () {
$("ul").after($li);
});
/**
* 2.insertAfter:将A元素添加到指定元素B外部的后面
* A作为方法调用者
* B作为方法参数
*/
$("button").click(function () {
$li.insertAfter("ul");
});
/**
* 3.before:将A元素添加到指定元素B外部的前面
* B作为方法调用者
* A作为方法参数
*/
$("button").click(function () {
$("ul").before($li);
});
/**
* 4.insertBefore:将A元素添加到指定元素B外部的前面
* A作为方法调用者
* B作为方法参数
*/
$("button").click(function () {
$li.insertBefore("ul");
});
});
</script>
</head>
<body>
<button>添加节点</button>
<ul>
<li>我是第1个li</li>
<li>我是第2个li</li>
<li>我是第3个li</li>
</ul>
</body>
</html>
2.JQuery删除节点
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JQuery删除节点</title>
<script src="../jquery-1.12.4.js"></script>
<script>
$(function () {
//删除节点
/**
* 1.remove方法:删除整个元素
*/
$("button").click(function () {
$("li").remove(".item");
$(".one").remove();
});
/**
* 2.empty方法:清空元素的内容和子元素
*/
$("button").click(function () {
$(".two").empty();
});
/**
* detach方法:和remove方法一模一样
*/
});
</script>
</head>
<body>
<button>删除节点</button>
<button>清空节点</button>
<ul>
<li class="item">我是第1个li</li>
<li>我是第2个li</li>
<li class="item">我是第3个li</li>
<li>我是第4个li</li>
<li class="item">我是第5个li</li>
</ul>
<div class="one">我是div1</div>
<div class="two">我是div2
<span>我是span</span>
</div>
</body>
</html>
3.JQuery替换节点
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jQuery替换元素</title>
<script src="../jquery-1.12.4.js"></script>
<script>
$(function () {
//替换元素
var $h6 = $("<h6>我是标题6</h6>")
/**
* 1.replaceWith方法:替换所有匹配的元素A为指定元素B
* A为方法调用者,B为方法参数
*/
$("button").click(function () {
$("h1").replaceWith($h6);
});
/**
* 2.replaceAll方法:替换所有匹配的元素A为指定元素B
* A为方法参数,B为方法调用者
*/
$("button").click(function () {
$h6.replaceAll("h1");
});
});
</script>
</head>
<body>
<button>替换元素</button>
<h1>我是标题1</h1>
<h1>我是标题1</h1>
<h1>我是标题1</h1>
<h1>我是标题1</h1>
<h1>我是标题1</h1>
</body>
</html>
4.JQuery节点的复制
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JQuery节点的复制</title>
<script src="../jquery-1.12.4.js"></script>
<script>
$(function () {
/**
* clone(false):浅复制,只复制节点,不能复制事件
* clone(true):深复制,复制节点同时复制事件
*/
$("button").eq(0).click(function () {
var $li = $("li:first").clone(false);
$("ul").append($li);
});
$("button").eq(1).click(function () {
var $li = $("li:first").clone(true);
$("ul").append($li);
});
$("li").click(function () {
alert($(this).html());
});
});
</script>
</head>
<body>
<button>浅复制</button>
<button>深复制</button>
<ul>
<li>我是第1个li</li>
<li>我是第2个li</li>
<li>我是第3个li</li>
<li>我是第4个li</li>
<li>我是第5个li</li>
</ul>
</body>
</html>
JQuery --- 第五期 (JQuery节点操作)的更多相关文章
- 前端笔记之jQuery（下）事件&节点操作&净位置&拖拽&页面卷动值&遍历JSON
一.监听事件大全 1.1 JavaScript事件 onblur 元素失去焦点 onchange 用户改变域的内容 onclick 鼠标点击某个对象 ondblclick 鼠标双击某个对象 onfoc ...
- jQuery（七）：节点操作
jQuery中节点操作主要分为以下几种: 查找节点. 创建节点. 插入节点. 替换节点. 复制节点. 删除节点. 一.查找节点 示例: <!DOCTYPE html> <html l ...
- jQuery --- 第四期 (jQuery动效)
学习笔记 1.jQuery动画的淡入淡出 <!doctype html> <html> <head> <meta charset="utf-8&qu ...
- jQuery（五）：文本操作
text()可以获取或设置元素的文本内容.例如: 示例: <!DOCTYPE html> <html lang="en"> <head> < ...
- jquery 第五章 jQuery操作表单与表格
1.回顾 对象.bind("事件名称",function(){ // }) 阻止冒泡事件 return false, event stopProapagation() 模拟事件 ...
- 事件冒泡、事件委托、jQuery元素节点操作、滚轮事件与函数节流
一.事件冒泡定义 事件冒泡是指在一个对象触发某类事件(比如单击onclick事件),如果此对象定义了此事件的处理程序,那么此事件就会调用这个处理程序,如果没有定义此事件处理程序或者事件返回true,那 ...
- jQuery each、节点操作、动画演示、尺寸操作、扩展方法
一.each 1.方式一:$.each(数组或者自定义对象,function(i,j){console.log(i,j)}) $.each(li,function(i,j){ console.log( ...
- 深入学习jQuery节点操作
× 目录 [1]创建节点 [2]插入节点 [3]删除节点[4]复制节点[5]替换节点[6]包裹节点 前面的话 DOM节点操作包括创建节点.插入节点.移除节点.替换节点和复制节点.jQuery也有类似的 ...
- Query节点操作，jQuery插入节点，jQuery删除节点，jQuery Dom操作
一．创建节点 var box = $('<div>节点</div>'); //创建一个节点,或者var box = "<div>节点</div> ...
随机推荐
- Regenerate Script 重置脚本
1.Regenerate Script 重置回录制后的第一次脚本,当修改设定后点击这个按钮,新的设置也会录制到 如:开始没有录到下载的文件,添加下载文件的个时候,再次点击重置,就录制到了 如:如开始是 ...
- [html][LigerUI]使用示例
<link href="Source/lib/ligerUI/skins/Aqua/css/ligerui-all.css" rel="stylesheet&quo ...
- Vue 安装环境创建项目
vue 是一个单页面框架,基于模块化组件化的开发模式. 搭建开发环境之前必须要安装node.js,然后安装vue的脚手架工具(命令行工具)win + R 输入npm install --global ...
- 方便好使的java.util.Properties类
今天偶然碰到这个类,发现jdk中这些平时不大用到的类还挺好玩儿的,用起来也特别实在方便,随便写点记录下. java.util.Properties是对properties这类配置文件的映射.支持key ...
- 字符串转码 将文本转为PDF
@Test public void testBasic64Code() throws Exception { String strdata = new String("how are you ...
- Rhythmk 一步一步学 JAVA (19): 注解 annotation
在编写注解的时候需要了解的四种注解: @Target 表示该注解可以用于什么地方,可能的ElementType参数有: CONSTRUCTOR:构造器的声明 FIELD:域声明(包括enum实例) L ...
- Java里的堆(heap)栈(stack)和方法区(method)
基础数据类型直接在栈空间分配, 方法的形式参数,直接在栈空间分配,当方法调用完成后从栈空间回收. 引用数据类型,需要用new来创建,既在栈空间分配一个地址空间,又在堆空间分配对象的类变量 . 方法 ...
- 有单例模式 Singleton 涉及的一些防止类被继承的东西
c#中 : ------------------------------- 当对一个类应用 sealed 修饰符时,此修饰符会阻止其他类从该类继承. java中: ------------------ ...
- 用JDK自带的包来解析XML文件（DOM＋xpath）
DOM编程不要其它的依赖包,因为JDK里自带的JDK里含有的上面提到的org.w3c.dom.org.xml.sax 和javax.xml.parsers包就可以满意条件了.(1)org.w3c.do ...
- 图片上传 纯js编码
ie8测试始终不支持,非ie方法一.二都正常 <!DOCTYPE html> <html lang="zh"> <head> <meta ...