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> ...
随机推荐
- Hibernate SQL 查询
本文转载自:https://www.cnblogs.com/li3807/p/6358386.html Hibernate 支持使用原生的SQL查询,使用原生SQL查询可以利用某些数据库特性,原生SQ ...
- (转)powerdesigner 生成sql脚本使用的设置
本文转载自:http://blog.163.com/lizhihaoo@126/blog/static/103121661201036171115/ 1. 生成sql脚本的时候,提示"con ...
- 5_bootstrap之响应式布局|列表|按钮
5.响应式工具 为针对性地在移动页面上展示和隐藏不同的内容,bootStrap提供响应式工具. 可以让开发人员通过该工具决定,在何种屏幕尺寸下,隐藏或者显示某些元素 帮助手册位置:全局CSS样式--- ...
- Mathtype 公式显示方框
公式编辑器mathtype中一些符号显示方框,如何解决呢?出现这个问题的原因是这是因为windows中的mtextra.ttf(显示为MT Extra (TrueType))字体文件不存在或版本太低, ...
- mybatis 3 -枚举
定义枚举: public static enum AppStateEnum { Valid("有效"), Virtual("虚拟"), Hide("隐 ...
- 10-SSH综合案例：前台用户模块：邮箱服务器配置
之前发邮件是自己发到服务器还是?是自己搭建一个还是注册一个163啊?自己可以搭建一个邮箱的服务器然后去发送邮件.就是你必须得在这上面有了账户才能发,你也可以往网络上发.你的主机就是一台邮箱服务器了.你 ...
- 【poj3254】Corn Fields 状态压缩dp
AC通道:http://vjudge.net/problem/POJ-3254 [题目大意] 农夫约翰购买了一处肥沃的矩形牧场,分成M*N(1<=M<=12; 1<=N<=12 ...
- 133. Clone Graph (Graph, Map; DFS)
Clone an undirected graph. Each node in the graph contains a label and a list of its neighbors. OJ's ...
- 784. Letter Case Permutation 字符串中字母的大小写组合
［抄题］: Given a string S, we can transform every letter individually to be lowercase or uppercase to c ...
- 在线编辑器CKeditor，CKfinder
在线编辑器的分类: 常见的在线编辑器有很多,比较常用的有FCKeditor(在线编辑器——Ajax 浏览器 端服务器文件管理器),CKeditor(在线编辑器与服务器端文件管理器的分离,) 其中CKe ...