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> ...
随机推荐
- gradle windows上面安装配置
本文转载自: http://blog.csdn.net/u011546806/article/details/44806513 前提条件 安装jvm,并配置好了java环境变量 安装步骤 1.下载gr ...
- mac下搭建appium记录
要安装的东西: jdk(要配置环境) , sdk(要配置环境) ,node(要配置环境), python(要配置环境) ,appium(要配置环境),appium-python-client ,xco ...
- WPF 实现指定UI控件截图
using System.Windows.Media.Imaging; using System.IO; private void SaveToImage(FrameworkElement ui, s ...
- Apache Sqoop 结构化、非结构化数据转换工具
简介: Apache Sqoop 是一种用于 Apache Hadoop 与关系型数据库之间结构化.非结构化数据转换的工具. 一.安装 MySQL.导入测试数据 1.文档链接:http://www.c ...
- 值类型 struct
由于值类型存在装箱和拆箱的过程,所有导致在修改值类型对象内部数据时,有可能会出现一些与预想不同的结果. 比如 Point p = , ); Console.WriteLine(p); p.Change ...
- abd启动不了
解决办法: 杀死 db.exe或者tadb.exe
- 107. Binary Tree Level Order Traversal II(Tree, WFS)
Given a binary tree, return the bottom-up level order traversal of its nodes' values. (ie, from left ...
- torque
torque - 必应词典 美[tɔrk]英[tɔː(r)k] n.(使机器等旋转的)转矩 网络扭矩:扭力:力矩 变形过去分词:torqued:现在分词:torquing:第三人称单数:torques ...
- 11. Container With Most Water 装水最多的容器
［抄题］: Given n non-negative integers a1, a2, ..., an, where each represents a point at coordinate (i, ...
- jdeveloper12.1.3的安装与卸载
jdeveloper12.1.3的安装步骤:1>安装jdk7.0 2>在命令行中输入:cd C:\Program Files\Java\jdk1.7.0_60\bin 3>命令行安装 ...