描述：

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

说明：

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

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

<!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. AI产业将更凸显个人英雄主义 周志华老师的观点是如此的有深度

    今天无意间在网上看的了一则推送,<周志华:AI产业将更凸显个人英雄主义> http://tech.163.com/18/0601/13/DJ7J39US00098IEO.html 摘录一些 ...

  2. [CF125E]MST Company

    codeforces description 给出一张\(n\)点\(m\)条边的无向图,求一棵满足\(1\)号点度数恰好为\(k\)的最小生成树,并输出方案. \(1\le k\le n\le500 ...

  3. pandas dataframe 读取 xlsx 文件

    refer to: https://medium.com/@kasiarachuta/reading-and-writingexcel-files-in-python-pandas-8f0da449c ...

  4. 用ASP.Net(C#)连接Oracle数据库的方法及实例

    今天看了一下asp.net连接oracle数据库的方法,得到了如下代码.这段代码打开了MyTable表,并把操作员的名字列出.字段类型是OracleString.读取的时候用的是字段编号,我不知道怎么 ...

  5. Fiddler显示响应时间 显示服务器IP

    在主界面菜单上 Rules->CustomRules 在class Handlers{}里添加class 如: 显示响应时间 class Handlers { …… ) function Tim ...

  6. php 自定义函数大全

    1. call_user_func和call_user_func_array 以上两个函数以不同的参数形式调用函数.见如下示例: <?php class demo{ public static ...

  7. Apache Commons Codec 与消息摘要算法(hash算法)

    首先我们要明白 Codec 是什么含义.它是 Coder + decoder = Codec,也就是编码器解码器.即是编码器,也是解码器. 官网地址:http://commons.apache.org ...

  8. 总是有人问我，那你能造出你自己都搬不动的石头吗？ 我说不能，但我能写出个我自己都无法 fix 的 bug。

    总是有人问我,那你能造出你自己都搬不动的石头吗? 我说不能,但我能写出个我自己都无法 fix 的 bug.

  9. Java里的集合--主要区别

    Collection 集合接口,指的是 java.util.Collection接口,是 Set.List 和 Queue 接口的超类接口. List: List是关注事物索引的列表. List中可以 ...

  10. [转]MVC 经验总结_EF

    && o.Name != "") .OrderByDescending(o => o.ID) .OrderBy(o => o.Name) .Select ...