描述：

要求用户选择一个自己不喜欢的商品

说明：

左边是商品列表，右面显示用户不喜欢的商品。

首先用选择器获得用户点击的元素，然后替换右面用户选择的不喜欢的商品。

<!doctype html>

<html>

<head>

<meta charset="utf-8">

<title>jquery test</title>

<script src="jquery-1.11.1.min.js"></script>

<style type="text/css">

	.left

	{

		float: left;

		width: 500px;

		height: 500px;

		background-color:green;

		padding-left:50px;

		padding-top: 50px;

	}

	.right

	{

		float: left;

		width: 500px;

		height: 500px;

		background-color:yellow;

		padding-left:50px;

		padding-top: 50px;

	}

</style>

</head>

<body>

<div class="left">

	<p>香蕉</p>

	<p>苹果</p>

	<p>橘子</p>

	<p>草莓</p>

</div>

<div class="right">

	<p>没有不喜欢的东西</p>

</div>

</body>

<script type="text/javascript">

	var $left  = $("div.left p");

	var $right = $("div.right p");

	$left.click(function(){

		var $right = $("div.right p");

		$(this).clone().replaceAll($right);

	})

</script>

</html>

jquery 替换节点实例的更多相关文章

  1. jQuery实现节点克隆、替换和互换

    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/ ...

  2. jQuery之替换节点

    如果要替换节点,jQuery提供了两个方法:replaceWith()和replaceAll(). 两个方法的作用相同,只是操作颠倒了. 作用:将所有匹配的元素都替换成指定的HTML或者DOM元素.( ...

  3. jQuery中的查找节点、创建节点、插入节点、删除节点、替换节点、复制节点操作方法

    jQuery操作节点我们可以分六点来讲,查找节点.创建节点.插入节点.删除节点.替换节点.复制节点. 一.查找节点 text() - 设置或返回所选元素的文本内容   ,html() - 设置或返回所 ...

  4. jQuery的节点添加、删除、替换等操作

    //几种添加节点的方法 //$("p").append("<b>你好吗?</b>");//向p元素中追加<b> //$(&q ...

  5. Query节点操作，jQuery插入节点，jQuery删除节点，jQuery Dom操作

    一．创建节点 var box = $('<div>节点</div>'); //创建一个节点,或者var box = "<div>节点</div> ...

  6. jQuery -- DOM节点的操作

    DOM 操作的分类: dom core: getElementById() getElementsByTagName() getAttribute() setAttribute() html-dom ...

  7. jquery 添加节点的几种方法介绍

    <html> <head> <meta http-equiv="Content-Type" content="text/html; char ...

  8. jQuery包裹节点用法完整示例

    本文实例讲述了jQuery包裹节点用法.分享给大家供大家参考,具体如下: <html> <head> <meta http-equiv="Content-Typ ...

  9. jQuery节点操作，jQuery插入节点，jQuery删除节点，jQuery Dom操作

    一．创建节点 1 var box = $('<div>节点</div>'); //创建一个节点,或者var box = "<div>节点</div& ...

随机推荐

  1. New Concept English Two 18 46

    $课文44  穿过森林 451. Mrs. Anne Sterling did not think of the risk she was taking when she ran through a ...

  2. js enter键激发事件

    document.onkeydown = function (e) {            if (!e) e = window.event;            if ((e.keyCode | ...

  3. 移动端H5调用摄像头(选择上传图片)

    <label>照相机</label> <input type="file" id='image' accept="image/*" ...

  4. 每日一条 git 命令行：git clone https://xxxxx.git -b 12.0 --depth 1

    每日一条 git 命令行:git clone https://xxxxx.git -b 12.0 --depth 1 -b 12.0:分支 12.0 --depth 1:depth 克隆深度,1 为最 ...

  5. Web自动化测试框架Watir(基于Ruby) - 第1章 Windows下安装与部署

    一.前言 Web自动化测试一直是一个比较迫切的问题,对于现在web开发的敏捷开发,却没有相对应的敏捷测试,故开此主题,一边研究,一边将Web自动化测试应用于工作中,进而形成能够独立成章的博文,希望能够 ...

  6. 【python】 使用 setuptools

    不会安装python的egg文件,在网上搜索了一下,被“蟒蛇蛋”这个词雷到了,记录下. 随着对python的逐渐使用,发现一些python组件是用一个包管理器发布的,今天搞了快一个小时,终于搞定了,这 ...

  7. vs2015 去除 git 源代码 绑定

    第一次碰到这个问题,想将源代码签入TFS管理.添加到源码管理后,默认添加到Git源码管理. 研究过后,发现: 1)删除框内文件 2)Vs2015->工具->选项->源代码管理-> ...

  8. 【转】java中创建对象的方法

    有4种显式地创建对象的方式: 1.用); System.out.println("call default constructor"); } public Customer(Str ...

  9. HDU 4438 Hunters

    Hunters Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others)Total Sub ...

  10. [Nlog]使用经验

    <?xml version="1.0" ?> <nlog xmlns="http://www.nlog-project.org/schemas/NLog ...