描述：

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

说明：

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

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

<!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. 浅谈Http1.0/Http1.1/Http2.0/Https

    HTTP 1.0 → HTTP 1.1 长连接 HTTP 1.1默认支持长连接,减少了TCP连接次数,节约开销. HTTP 1.0所保持的TCP每次只能处理一个请求,最典型的就是pipline管线化模 ...

  2. java面试题8

    java面试题08 1.short s1 = 1; s1 = s1 + 1;有什么错? short s1 = 1; s1 += 1;有什么错? short s1 = 1; s1 = s1 + 1;编译 ...

  3. 设计模式(Python)-策略模式

    本系列文章是希望将软件项目中最常见的设计模式用通俗易懂的语言来讲解清楚,并通过Python来实现,每个设计模式都是围绕如下三个问题: 为什么?即为什么要使用这个设计模式,在使用这个模式之前存在什么样的 ...

  4. INET_ADDRSTRLEN 和 INET6_ADDRSTRLEN 长度

    在<netinet/in.h>中有这两个宏的定义 #define INET_ADDRSTRLEN 16 #define INET6_ADDRSTRLEN 46 INET_ADDRSTRLE ...

  5. graphcool-framework 一个基于graphql的后端开发框架

    特性 GraphQL database 启动便捷的数据迁移数据演变 Flexible auth 基于jwt 的认证 Realtime API 基于graphql 的Subscriptions High ...

  6. 关于Android应用开发的一些安全注意事项

    原文地址: http://www.javacodegeeks.com/2014/05/simple-tips-to-secure-android-app.html                   ...

  7. 阿里云OSS linux使用备忘录

    ossutil config example: accessKeyId = "AccessKeyId"; accessKeySecret = "AccessKeySecr ...

  8. Air test 基于屏幕比例实现滑动的方法

    # -*- encoding=utf8 -*- __author__ = "chenshanju" __docs__ = "基于iOS类实现滑动" from a ...

  9. Docker系列05:docker镜像制作 &Docker file

    1 什么是Dockerfile? Dockerfile是一个包含用于组合映像的命令的文本文档.可以使用在命令行中调用任何命令. Docker通过读取Dockerfile中的指令自动生成映像. dock ...

  10. JMS消息模型

    消息机制: 系统之间通信的中介,作为一台单独的服务器部署,大多数使用多个系统之间协作,是系统解耦的常见解决方案. 基于CS架构 作用:多个系统之间解耦,项目可以分开开发,满足显示的高可用(也可以说是异 ...