描述：

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

说明：

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

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

<!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. Leetcode 1021. Remove Outermost Parentheses

    括号匹配想到用栈来做: class Solution: def removeOuterParentheses(self, S: str) -> str: size=len(S) if size= ...

  2. JS数组中级+高级技巧

    本文介绍JS数组一些比较进阶的方法: reverse:数组反转: join:(参数)以参数为连接符将数组拼接为字符串: 实例: var arr=[]; arr[3]="haha"; ...

  3. 第三方插件Vue-Lazyload

    使图片懒加载

  4. ASP.NET Word转为PDF

    1.首先安装 Microsoft Office 2007加载项:Microsoft Save as PDF-简体中文版:下载地址: http://download.microsoft.com/down ...

  5. 《DSP using MATLAB》示例Example 9.9

    代码: %% ------------------------------------------------------------------------ %% Output Info about ...

  6. 华为OJ:2199 推断输入字符串中的括号匹配

    依据不同的括号有个计数器.在遍历时.当计数器小于0则返回false或者当遍历完后,计数器仍旧不为零,也返回false. import java.util.Scanner; public class b ...

  7. Python3 机器学习

    Python 3 生成手写体数字数据集 Python 3 利用 Dlib 19.7 和 sklearn机器学习模型 实现人脸笑脸检测 Python 3 利用 Dlib 19.7 实现人脸检测和剪切 P ...

  8. string学习

    来自:http://www.cnblogs.com/kkgreen/archive/2011/08/24/2151450.html 0,new是创了两个对象,一个在堆,一个在常量池 1,变量+字符串= ...

  9. emacs之配置speedbar

    安装sr-speedbar,这样的话,speedbar就内嵌到emacs里面了 emacsConfig/speedbar-setting.el (require 'sr-speedbar) (setq ...

  10. java scanner工具类

    import java.util.Scanner; public class ScannerTest { public static void main(String[] args) { Scanne ...