描述：

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

说明：

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

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

<!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. GPU Memory Usage占满而GPU-Util却为0的调试

    最近使用github上的一个开源项目训练基于CNN的翻译模型,使用THEANO_FLAGS='floatX=float32,device=gpu2,lib.cnmem=1' python run_nn ...

  2. Jmeter-Logic Controllers（逻辑控制器）

    Critical Section Controller(临界区控制器) 参考:http://www.cnblogs.com/yanzhe/p/7729984.html ForEach Controll ...

  3. Java 权限框架 Shiro 实战一：理论基础

    Apache Shiro 官网地址:http://shiro.apache.org/ Apache Shiro is a powerful and easy-to-use Java security ...

  4. ThinkJava-输入和输出

    1/0流的典型使用方式   1.缓冲输入文件 package com.java.io; import java.io.BufferedReader; import java.io.File; impo ...

  5. 三大运营商2G/3G/4G频率分配和网络制式

    经过二十多年长期的发展,我国的通信业逐渐形成了2G/3G/4G并存的局面,手机通讯信号传输都是通过一定频率传输的,而三大运营商所拥有的频率和网络制式不尽相同,这就造成同一部手机在三大运营商之间可能不通 ...

  6. django2.0实现数据详情页展示的流程

    思路整理 1 先在urls.py中,定义路由获取的格式 url(r'^detail/(\d+)/$', views.blog_detail), 2 然后在views.py,定义数据获取的方法 def ...

  7. mybatis 学习五 二级缓存不推荐使用

    mybatis 二级缓存不推荐使用 一 mybatis的缓存使用. 大体就是首先根据你的sqlid,参数的信息自己算出一个key值,然后你查询的时候,会先把这个key值去缓存中找看有没有value,如 ...

  8. Git 知识总结

    版本控制git之一 - 仓库管理 版本控制git之二-分支 git https://mp.weixin.qq.com/s/96FS12DTzbjAJQ1ynRNqdg git init 初始化目录 g ...

  9. angularjs之$ajax请求

    AngularJS不仅仅只有双向绑定等等功能,还有发送Ajax请求的Api. 效果图: 请求的文件(data.php): <?php $data = [ '股市下跌', '清明小长假结束', ' ...

  10. Sql语句在线转java bean https://www.bejson.com/othertools/sql2pojo/

    https://www.bejson.com/othertools/sql2pojo/