描述：

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

说明：

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

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

<!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. springboot---没有配置数据库启动报错

    If you want an embedded database please put a supported one on the classpath. If you have database s ...

  2. ubuntu修改分辨率

    ubuntu分辨率真是坑爹,不知什么原因,ubuntu分辨率一下子变了,通过,显示->分辨率,都改不过来... 无奈,有重装系统的冲动,从网上找了很多方法,都不管用,有一次,在这里 sudo g ...

  3. Bootstrap文件上传组件

    前言:之前的三篇介绍了下bootstrap table的一些常见用法,发现博主对这种扁平化的风格有点着迷了.前两天做一个excel导入的功能,前端使用原始的input type='file'这种标签, ...

  4. ECUST 12级 Practise

    http://acm.hust.edu.cn/vjudge/contest/view.action?cid=26399#overview 果断开小号水过 CodeForces 58A #include ...

  5. Redis学习笔记-常用命令篇（Centos7）

    redis提供了丰富的命令,这些命令可以在linux终端使用.在各类语言中,这些命令都有对应的方法. 一.键值相关 1.keys 返回满足给定pattern的所有key 127.0.0.1:6379& ...

  6. Tomcat调优总结（Tomcat自身优化、Linux内核优化、JVM优化）

    Tomcat自身的调优是针对conf/server.xml中的几个参数的调优设置.首先是对这几个参数的含义要有深刻而清楚的理解.以tomcat8.5为例,讲解参数. 同时也得认识到一点,tomcat调 ...

  7. 发发牢骚，觉得走c#这条路，不该太浮躁。

    发发牢骚,觉得走c#这条路,不该太浮躁.校园招聘结束了,腾讯,华为,百度,完美时空,网易,阿里,让我觉得.NET很受歧视.清一色的C/C++,JAVA,只有网易有一点.Net的,但是都是非核心的运维工 ...

  8. cratedb 基本试用

    安装 docker run -d -p 4200:4200 crate UI访问 http://localhost:4200/#!/ 创建数据 tweets 是默认导入的,点击帮助导航可以操作 登陆 ...

  9. ambassador 学习四 grpc 处理

    实际上都是envoy 的功劳 基本环境安装参考相关文档即可 参考demo proto code syntax = "proto3"; option java_multiple_fi ...

  10. p/Invoke工具

    开源的工具 下面这个链接来下载这个工具: http://download.microsoft.com/download/f/2/7/f279e71e-efb0-4155-873d-5554a06085 ...