`

jQuery练习七

阅读更多
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案例练习.rar

    jQuery案例有4个即1、手风琴显示图片效果2、方块旋转变色3、表格数据渲染删除操作 4、jquery写轮播图,也含有原生js轮播图案例,每个案例中代码注解很详细 通过案例练习熟悉jquery相关知识点

    jquery练习实例

    在“jQuery练习实例”这个压缩包中,我们可以期待找到一系列的示例代码和讲解,帮助我们深入理解jQuery的核心功能和常见用法。 1. **DOM操作**:jQuery的核心在于其对DOM(Document Object Model)的操作。通过简洁...

    jquery练习

    通过练习,加深对jQuery的理解,提高编写高效、简洁代码的能力。 总结来说,jQuery作为一款强大的JavaScript库,它简化了许多前端开发中的常见任务,提高了开发效率。通过学习和实践jQuery,开发者可以更好地驾驭...

    JQuery第七章上机练习和课后作业

    **jQuery第七章上机练习与课后作业详解** 在学习jQuery的过程中,第七章通常涵盖了更高级和实用的技术,包括DOM操作、事件处理、动画效果以及AJAX交互等。本篇文章将详细探讨这些知识点,旨在帮助前端开发者提升...

    jQuery练习

    本篇文章将深入探讨“jQuery练习”这一主题,特别关注如何使用jQuery实现导航菜单弹出二级菜单的功能。 首先,让我们理解导航菜单的基本结构。在网页设计中,导航菜单通常包含一级菜单项,当用户悬停在这些项上时,...

    Jquery部分效果练习

    本篇文章将围绕"Jquery部分效果练习"这一主题,详细阐述jQuery中的核心概念和常见效果的实现。 首先,jQuery的核心在于它的选择器。选择器类似于CSS,用于选取HTML文档中的元素。例如,`$("#id")`用于选取ID为"id...

    jQuery学习手册及实例练习

    7. **插件扩展**:jQuery社区开发了大量的插件,如用于轮播图的`owl.carousel.js`,表单验证的`validate.js`,以及模态框`bootstrap-modal.js`等,它们极大地扩展了jQuery的功能。 8. **实例分析**:`jQ_NO1.rar`和...

    JS/JQuery-第7章上机练习.zip

    在"JS/JQuery-第7章上机练习.zip"这个压缩包中,我们可以推测这是一份关于JavaScript和JQuery实践训练的资料,尤其聚焦于第七章的内容。通常,这样的练习会帮助开发者巩固和提升在实际项目中的应用能力。 1. **选择...

    jQuery基础选择器练习题

    通过上述的练习题,你可以实践并巩固这些选择器的用法。记住,熟练掌握jQuery选择器将极大地提升你的前端开发效率,让你编写出更加简洁高效的代码。在学习过程中,不断实践和应用这些知识点,你将会成为一个jQuery的...

    JQuery使用练习

    本练习旨在帮助你熟悉并掌握jQuery的基本用法,包括选择器、事件、文档处理、函数以及属性的运用。 首先,让我们详细探讨jQuery的选择器。jQuery的选择器基于CSS选择器,允许你高效地选取DOM元素。例如,`$("#id")`...

    jQuery练习题.docx

    jQuery 练习题 本资源为 jQuery 练习题,包含答案,可以进行学习。下面是从该资源中生成的相关知识点: 一、 jQuery 基础知识 1. jQuery 显示隐藏的元素用 show() 方法实现。 2. jQuery 中,$.ajaxSetup() 用于...

    jquery的相关练习

    本文件是一个小的工程,关于ajax框架的jquery的一些小的练习,与大家分享。

    jquery练习的例子,仿真google suggest

    jquery练习的例子,仿真google suggestjquery练习的例子,仿真google suggestjquery练习的例子,仿真google suggestjquery练习的例子,仿真google suggestjquery练习的例子,仿真google suggestjquery练习的例子,...

    Jquery练习2:制作QQ简易聊天框.zip

    在本项目"Jquery练习2:制作QQ简易聊天框.zip"中,我们将探索如何使用jQuery这一流行的JavaScript库来创建一个类似QQ的简单聊天界面。这个练习旨在帮助开发者掌握jQuery的基本用法,以及如何利用它来增强网页的交互...

    JQuery练习题1

    7. **插件使用**: jQuery有丰富的插件生态系统,如Bootstrap、jQuery UI等,它们提供了更多的组件和特效。使用时,需引入插件的JS和CSS文件,然后按照文档说明调用相关方法。 8. **遍历和操作集合**: `$.each()`...

    前端jquery练习网页

    这个“前端jQuery练习网页”项目是您在学习阶段完成的一个作品,虽然存在一些bug,但它仍然是一个很好的学习和回顾jQuery核心概念的起点。** 在项目中,`js` 文件夹可能包含你编写的所有 JavaScript 代码,这些代码...

    js练习,jquery练习 购物车.zip

    在"js练习,jquery练习 购物车.zip"这个压缩包中,我们可以期待找到一个基于 JavaScript 和 jQuery 的购物车应用的源代码。购物车功能是电商网站的核心部分,它涉及到商品的添加、删除、数量增减以及总价计算等多个...

    Jquery练习-包含JQUERY1.4.2的js库

    标题中的“Jquery练习-包含JQUERY1.4.2的js库”指向的是一个学习资源,特别关注于jQuery 1.4.2版本的实践应用。这个版本在2010年发布,虽然不是最新版,但对于初学者来说,它仍然是理解jQuery核心概念的好起点。** ...

    jquery练习狂拍灰太狼.zip

    在本练习中,你将运用jQuery处理一系列与属性节点相关的任务,例如: - 灰太狼的图片显示与隐藏,通过控制`style.display`属性来实现。 - 灰太狼的位置移动,利用`data-*`自定义属性记录坐标,通过修改这些属性值并...

    jQuery选择器上机练习题及答案.rar

    在chrome的控制台中输入jQuery代码并执行,完成以下选择动作: (1)查找id号为tigerLily的元素 (2)查找拥有类myList的元素 (3)查找所有的input元素 (4)查找所有img元素和tr元素 (5)查找id号为...

Global site tag (gtag.js) - Google Analytics