1、jQuery的克隆节点
2、代码
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>jQuery的克隆节点</title>
<script type="text/javascript" src="jquery-1.7.2.js"></script>
<script type="text/javascript">
//测试使用 jQuery clone 方法: 复制节点
$(function(){
//需求：复制 #bj 节点, 并添加到 #rl 节点的后面
/*
1. clone 节点时需要注意克隆后的节点的 id 属性. 若原节点有 id
属性, 则克隆后, 会出现在一个文档中有两个 id 相同的节点的情况.
2. clone(true): 在克隆节点的同时, 克隆节点包含的事件.
*/
$("#bj").clone(true)
.attr("id", "bj2")
.insertAfter($("#rl"));
})
</script>
</head>
<body>
<p>你喜欢哪个城市?</p>
<ul id="city">
<li id="bj" name="BeiJing">北京</li>
<li>上海</li>
<li id="dj">东京</li>
<li id="se">首尔</li>
</ul>
<br><br>
<p>你喜欢哪款单机游戏?</p>
<ul id="game">
<li id="rl">红警</li>
<li>实况</li>
<li>极品飞车</li>
<li>魔兽</li>
</ul>
<br><br>
gender:
<input type="radio" name="gender" value="male"/>Male
<input type="radio" name="gender" value="female"/>Female
<br><br>
name: <input type="text" name="username" value="atguigu"/>
</body>
</html>
3、原始界面
4、案例
相关推荐
教程名称：尚硅谷jQuery视频教程（25集）课程目录：【】1.尚硅谷_佟刚_jQuery_HelloWorld【】10....尚硅谷_佟刚_jQuery_创建节点及插入节点【】14.尚硅谷_ 资源太大，传百度网盘了，链接在附件中，有需要的同学自取。
"尚硅谷"的这个jQuery教学课件提供了深入学习和理解jQuery的宝贵资源。 **jQuery 的核心特性** 1. **简洁的语法**：jQuery通过其特有的链式调用和选择器机制，使得编写DOM操作的代码变得简洁易读。 2. **高效的DOM...
尚硅谷JQuery视频教程尚硅谷JQuery视频教程尚硅谷JQuery视频教程尚硅谷JQuery视频教程
4. 克隆节点：`.clone()`方法可以复制一个或多个元素，并可以选择性地包含其事件和数据。 二、jQuery特殊属性操作 1. CSS属性：使用`.css("property", "value")`可以设置CSS样式，如`.css("color", "red")`。`.css...
jQuery 是继 Prototype 之后又一个优秀的 JavaScript 库 jQuery 理念: 写得少, 做得多. 优势如下: 轻量级 强大的选择器 出色的 DOM 操作的封装 可靠的事件处理机制 完善的 Ajax 出色的浏览器兼容性 链式操作方式 ...
在本节课程“04_尚硅谷_jQuery_王振国 - 课堂笔记1”中，主要讲解了jQuery中的一些核心操作，包括属性操作、练习、CSS样式操作、动画操作和事件操作。以下是对这些知识点的详细说明： 1. jQuery 的属性操作： - `...
标题中的"jQuery + 节点+ 猫鼬"提到了三个重要的技术：jQuery、Node.js和Mongoose。这三者在IT行业中都扮演着关键角色，尤其在Web开发领域。 jQuery是一款广泛使用的JavaScript库，它简化了JavaScript的DOM操作、...
本文将详细讲解jQuery中的节点插入方法，帮助你更好地理解和应用这一强大的功能。 首先，我们需要理解什么是DOM（Document Object Model）。DOM是HTML和XML文档的一种结构化表示，它将网页内容组织成一棵树形结构，...
jQuery 是一个广泛使用的 JavaScript 库，它极大地简化了 JavaScript 的 DOM 操作、事件处理和动画设计。这个"jQuery 实例 经典呀"的压缩包很可能是包含了一系列经典的 jQuery 使用示例，帮助开发者更好地理解和应用...
在"jQuery DOM节点操作源码"中，我们可以深入理解jQuery是如何优雅地处理DOM（Document Object Model）节点的。以下是关于jQuery DOM操作的一些关键知识点： 1. **选择器**：jQuery 的核心功能之一就是强大的选择器...
在"尚硅谷_佟刚_jQuery_PPT课件及源码.zip"这个压缩包中，包含的资源主要围绕jQuery的学习展开，由专业讲师佟刚提供。我们可以期待从这些材料中学到以下关键知识点： 1. **jQuery基础**：了解jQuery的基本语法，...
注意：克隆时要处理克隆后节点的 id，防止有两个相同的 id 出现。 替换节点 替换节点是指将某个节点替换为另外一个节点。 jQuery 提供了 `replaceWith()` 和 `replaceAll()` 两个方法来替换节点。 * `replaceWith...
DateTimePicker是jQuery的一个强大插件，它为网页表单提供了日期和时间选择功能。这个插件使得用户在输入日期和时间时能有一个直观且易于操作的界面，提升了用户体验。以下是对DateTimePicker插件的详细说明： 1. *...
37:特殊符号 38:创建节点 39:追加节点1 40:追加节点2 41:插入节点1 42:插入节点2 43:删除节点1 44:删除节点2 45:参数删除 46:清空节点 47:克隆节点 48:替换节点1 49:替换节点2 50:包裹节点1 51:包裹节点2 52:...
# 克隆项目 git clone https://github.com/pezihan/Pet-Mall.git # 进入项目目录 cd Pet-Mall # 安装依赖 npm install # 本地开发 启动项目 node ./app.js # 启动mongodb数据库 mongod 目录结构说明 public 静态页面...
jQuery带节点步骤进度条插件是一款专为网页设计者打造的高效工具，它主要用于呈现具有节点的步骤进度样式。在创建交互式用户界面时，这种插件尤其有用，例如在线表单提交、购物车结账流程或者任何需要按顺序进行多...
jQuery的Cookie插件 cookies cookies 是一个强大的 jQuery 用来操作 Cookie 的插件。除了常见的操作 $.cookies.set( 'sessid', 'dh3tr62fghe' ); var sessid = $.cookies.get( 'sessid' ); $.cookies.del( 'sessid...
在本篇文章中，我们将深入探讨jQuery中的包裹节点方法及其应用。 首先，jQuery提供了三种主要的包裹节点的方法： 1. `.wrap()`：这个方法将每个匹配的元素都包裹在一个指定的HTML结构内。例如，如果你有一个`<p>`...
"jQuery步骤节点进度条代码"是一个基于jQuery实现的动态展示步骤流程的示例，常用于诸如注册、购物车结账或募捐等多步骤过程的用户界面。这个例子使用了jQuery 1.10.2版本，一个稳定且广泛使用的jQuery库。 首先，...
本资源“jQuery动态添加节点循环流程图表代码.zip”提供了一个使用jQuery实现动态添加节点并构建循环流程图的实例。下面将详细阐述相关知识点。 1. **jQuery选择器**：jQuery的核心功能之一就是选择器，它允许...