ex-7.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Untitled Document</title>
<script type="text/javascript" src="scripts/jquery-1.4.2.js"></script>
<script type="text/javascript">
function replaceElement(ele1, ele2) {
var $ele1Temp = $(ele1).clone(true) ;
var $ele2Temp = $(ele2).clone(true) ;
$(ele1).replaceWith($ele2Temp) ;
$(ele2).replaceWith($ele1Temp) ;
}
//需求: 点击 city 节点的任何 li 节点都能完成如下功能: 替换为 game 相应索引的节点; 反之亦然
$(function(){
//为每一个 li 节点增加 index 属性
/**
* $("li") 这里返回的是一个数组!,那么问题就来了!
* 为什么在$("li").click(...)增加方法的时候,没有使用each()这个方法呢?
* 这是因为给每一个 li 节点增加的是相同的方法(看清楚是相同的),是不需要用each()这个方法的
* 可是这里是在给每一个 li 节点类型的增加一个索引, 从而使每一个 li 节点与其他的不同!(看清楚这个说的是不同!)
* 所以就使用了each()这个方法
*
*/
$("li").each(function(i){
//这里的 i 是each()方法默认自带的!可以理解是这个标签数组的索引
//alert("0000") ;
$(this).attr('index', i) ;
//alert('111') ;
$(this).click(function() {
//获取 index 属性值
var index = $(this).attr('index') ;
//设置与 index 相交换的那个对象的 索引
var targetIndex = 0 ;
if(index < 4) {
targetIndex = parseInt(index) + 4 ;
}else {
targetIndex = parseInt(index) - 4 ;
}
var target = $("li").get(targetIndex) ;
//alert($(this).attr('index')) ;
/*
这里应该注意一个小小的问题!仔细的看一下下面两行代码!
说白了就是-->在元素还没有交换之间先将 index 的属性值交换了!
为什么要在没有交换属性之前先将 index 的属性值交换呢?
这是因为属性值的交换和元素整体的交换是不一样的!前者是部分交换而后者是整体交换
在这里首先先交换属性值是为了为后面整体交换做准备!
并且也为任意两个节点相互交互(这里说的是相互交换而不是单向交换)做准备!
*/
$(this).attr('index', targetIndex) ;
$(target).attr('index', index) ;
//这里就是元素的整体交换
replaceElement(this, target) ;
}) ;
}) ;
}) ;
</script>
</head>
<body>
<p>
你喜欢哪个城市?
</p>
<ul id="city">
<li id="bj" name="BeiJing">
北京
</li>
<li>
上海
</li>
<li>
东京
</li>
<li>
首尔
</li>
</ul>
<br>
<br>
<p>
你喜欢哪款单机游戏?
</p>
<ul id="game">
<li id="rl">
红警
</li>
<li>
实况
</li>
<li>
极品飞车
</li>
<li>
魔兽
</li>
</ul>
</body>
</html>
分享到:
相关推荐
jquery练习
jQuery案例有4个即1、手风琴显示图片效果2、方块旋转变色3、表格数据渲染删除操作 4、jquery写轮播图,也含有原生js轮播图案例,每个案例中代码注解很详细 通过案例练习熟悉jquery相关知识点
自己练习的jquery ui 一些基本的用法
jQuery练习题1
里面有几个jquery的实例,还有一部分方法
新人,最近练习的一些jquery实现的前端效果
js练习,jquery练习一个小程序js练习,jquery练习一个小程序js练习,jquery练习一个小程序
本文件是一个小的工程,关于ajax框架的jquery的一些小的练习,与大家分享。
jquery练习的例子,仿真google suggestjquery练习的例子,仿真google suggestjquery练习的例子,仿真google suggestjquery练习的例子,仿真google suggestjquery练习的例子,仿真google suggestjquery练习的例子,...
其中包括jQuery手册;jQuery示例;共同学习~
本练习简单涉及到了JQuery选择器、事件、文档处理、函数、属性的使用
1:导航菜单弹出二级菜单 博文链接:https://justsee.iteye.com/blog/798405
Jquery练习1:制作简易的当当购物车页面.zip
JQuery练习集合 包括:节点遍历、节点替换、链式编程、链式each、选择过滤器、相对选择器、球队选择、属性选择器等等例子
一个jquery的属性节点的训练,在这个小练习里面可以巩固对jquery知识的掌握,适合jquery的初学者,是一个很好的练习案例。我实在编不下去了呀呀呀呀呀呀呀呀呀呀呀呀呀呀呀
Jquery练习2:制作QQ简易聊天框.zip
jQuery的练习题,含有答案,可以进行学习。
js 小项目练习,jQuery 小例子。 使用jquery写的一些小例子,比如菜单,星级评分,轮播图,拖拽上传等效果源码。 jquery小项目
锋利的jquery(练习)