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> ...
随机推荐
- <转--大话session>
大话Session 原文地址:http://www.cnblogs.com/shoru/archive/2010/02/19/1669395.html 结语 到这里,读者应该对session有了更多的 ...
- MySQL 数据库查询练习
-- ---------------------------- -- mysql练习sql脚本 -- ---------------------------- create database db10 ...
- [Nlog]使用经验
<?xml version="1.0" ?> <nlog xmlns="http://www.nlog-project.org/schemas/NLog ...
- CentOS 添加新硬件硬盘，扩展空间而无需重启虚拟机
运行如下命令,通过重新扫描 SCSI (注:Small Computer System Interface 小型计算机系统接口)总线并添加 SCSI 设备,系统就可以扩展操作系统的物理卷磁盘空间,而且 ...
- Oracle的操作系统身份认证（转）
oraclelogin数据库远程登录authenticationossqlnet.authentication_services=(NTS),在$ORACLE_HOME/network/admin/s ...
- django内置html模板的extends和include,模板标签{{ ex }}
base.html内容 <!DOCTYPE html> <html lang="en"> <head> <meta charset=&qu ...
- SQL中like的用法
操作符LIKE利用通配符把一个值与类似的值进行比较,通配符有两个: 1.百分号(%): 代表零个.一个或多个字符 2.下划线(_):代表一个数字或字符 下面的条件匹配任何以200开头的值 WHERE ...
- CB XE7 C11 64位编译器 成员变量初始化
看到了C++11,看到了XE7的64位,想实现下面方便的类成员初始化,失望. 一.64位用法 clang3,64位编译器,不支持中文变量名,编写代码提示没有32位快,风格简单不用写单独的赋值语句函数, ...
- java 重定向和转发 的区别
重定向方式的含义是第一个页面通知浏览器发送一个新的页面请求.因为,当你使用重定向时,浏览器中所显示的URL会变成新页面的URL, 而当使用转发时,该URL会保持不变. 重定向的速度比转发慢,因为浏览器 ...
- clr相关名词
程序集:一个或多个类型定义文件和资源文件的集合 Native Code(本机代码): 已被编译为特定于处理器的机器码的代码. 本地代码(native code)是计算机编程(代码),编译用来运行一个特 ...