描述：

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

说明：

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

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

<!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. Django 之 富文本编辑器-tinymce

    这里的富文本编辑器以 tinymce 为例. 环境:ubuntu 16.04 + django 1.10 + python 2.7 ubuntu安装tinymce: python 2.7 $ sudo ...

  2. 二叉树的前序、中序、后序遍历 python

    话不多说,直接上代码 class TreeNode: def __init__(self, x): self.val = x self.left = None self.right = None cl ...

  3. BZOJ3296：Learning Languages（简单并查集）

    3296: [USACO2011 Open] Learning Languages Time Limit: 5 Sec  Memory Limit: 128 MBSubmit: 436  Solved ...

  4. HDU1501 dfs

    像这样有维度的一定要记忆化啊........... #include<cstdio> #include<cstdlib> #include<iostream> #i ...

  5. 谷歌浏览器怎么调试js 谷歌浏览器调试javascript教程

    谷歌浏览器是一款由谷歌公司开发的浏览器.谷歌浏览器是一款基于其他开源软件所撰写的.下面小编为大家分享一篇谷歌浏览器调试javascript的教程,希望帮助大家 首先我们打开开发者工具,你可以直接在页面 ...

  6. Linux的发行版之间的联系和区别

    转载:https://blog.csdn.net/suixin788/article/details/52555558 联系 Linux的内核源代码和Linux的应用程序都可以自由获得,因此很多公司组 ...

  7. 20145237 Exp9 Web安全基础实践

    基础问题回答 SQL注入攻击原理,如何防御: 部分程序员在编写代码的时候,没有对用户输入数据的合法性进行判断,黑客利用这个bug在数据输入区恶意填入脚本,当数据被传回后台,黑客所填入的脚本语句被运行, ...

  8. C#访问加密的SQLite数据库

    前提:一个项目需要存储各种密码数据,使用的嵌入式的SQLite数据库.默认的SQLite数据库是没有加密的,这样相当不安全.找呀找呀找方法... 方法: 1.使用SQLite管理器加密. 部分SQLi ...

  9. 6-1 Deque（25 分）Data Structures and Algorithms (English)

    A "deque" is a data structure consisting of a list of items, on which the following operat ...

  10. java中读取配置文件

    若是Javaweb项目,项目运行于tomcat或其他容器时,可以使用下面方式来获取文件的输入流 1.当属性文件放在src下面时 InputStream is = Thread.currentThrea ...