$(“”)此标记里面可以直接放入标签元素
each()是个遍历集合的函数，里面接收一个函数function(index,domEle)，index表示遍历的索引，domEle 表示遍历的对象，其形式为dom格式
eq() 是个过滤函数 里面直接接收整数类型
$(“ table tr”) 选择某一元素下的元素，可以类似这样写
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>demo01.html</title>
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="this is my page">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<!--<link rel="stylesheet" type="text/css" href="./styles.css">-->
<script language='JavaScript' src='../js/jquery-1.4.2.js'></script>
</head>
<body>
<p>段落1</p>
<p>段落2</p>
<p>段落3</p>
<hr>
<table border='1' width='450'>
<tr><td> id </td><td> 姓名</td><td>年龄</td><td>工作单位</td><td>出生地址</td></tr>
<tr><td> 1 </td><td>王小二</td><td>18</td><td>永丰科技</td><td>刘里屯</td></tr>
<tr><td> 2 </td><td>王小二</td><td>18</td><td>永丰科技</td><td>刘里屯</td></tr>
<tr><td> 3 </td><td>王小二</td><td>18</td><td>永丰科技</td><td>刘里屯</td></tr>
<tr><td> 4</td><td>王小二</td><td>18</td><td>永丰科技</td><td>刘里屯</td></tr>
<tr><td> 5 </td><td>王小二</td><td>18</td><td>永丰科技</td><td>刘里屯</td></tr>
<tr><td> 6 </td><td>王小二</td><td>18</td><td>永丰科技</td><td>刘里屯</td></tr>
</table><hr>
<table border='1' width='450'>
<tr><td> id </td><td> 姓名</td><td>年龄</td><td>工作单位</td><td>出生地址</td></tr>
<tr><td> 1 </td><td>王小二</td><td>18</td><td>永丰科技</td><td>刘里屯</td></tr>
<tr><td> 2 </td><td>王小二</td><td>18</td><td>永丰科技</td><td>刘里屯</td></tr>
<tr><td> 3 </td><td>王小二</td><td>18</td><td>永丰科技</td><td>刘里屯</td></tr>
<tr><td> 4</td><td>王小二</td><td>18</td><td>永丰科技</td><td>刘里屯</td></tr>
<tr><td> 5 </td><td>王小二</td><td>18</td><td>永丰科技</td><td>刘里屯</td></tr>
<tr><td> 6 </td><td>王小二</td><td>18</td><td>永丰科技</td><td>刘里屯</td></tr>
</table>
<script language='JavaScript'>
$("p").each(function(index,domEle){
$(domEle).click(function(){
alert($(domEle).text());
});
});
$("table:eq(0) tr:even").css("background","gray");
$("table:eq(1) tr:odd").css("background","red");
</script>
</body>
</html>
此模块功能用Jquery实现很简单：
首先分析功能 1.从左边全部移动到右边 2.从左边把选中的移动到右边 3.双击移动到对方
实现方法：获取按钮单击事件à把左边select 中option全部移动到右边
获取按钮的单击事件à把左边的select中option被选中的移动到右边 选中的option用jquery的过滤来实现
获取select的双击时间dblclick 注意后面有个l，把双击的option从左边移动到右边。
从右边移动到左边方法思路类似。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>demo.html</title>
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="this is my page">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<!--<link rel="stylesheet" type="text/css" href="./styles.css">-->
<script language='JavaScript' src='../js/jquery-1.4.2.js'>
</script>
<style>
body{
background-color:#64BAC1;
text-align:center;
}
select{
background-color:#CCCCCC;
width:50px;
}
input{
width:50px;
}
</style>
</head>
<body>
<table>
<tr>
<td>
<select size='10' id='first'multiple="multiple">
<option>语文</option>
<option>数学</option>
<option>物理</option>
<option>英语</option>
<option>历史</option>
<option>化学</option>
<option>美术</option>
</select>
</td>
<td>
<input type="button" value=" --> " id='one'><br>
<input type="button" value=" ==> " id='three'><br>
<input type="button" value=" <-- " id='two'><br>
<input type="button" value=" <== " id='four'><br>
</td>
<td >
<select size='10' id='second'multiple="multiple">
<option>体育</option>
</select>
</td>
</tr>
</table>
<script>
$("#three").click(function(){
$("#second").append($("#first option"));
});
$("#four").click(function(){
$("#first").append($("#second option"));
});
$('#one').click(function(){
$('#second').append($('#first option:selected'));
});
$('#two').click(function(){
$('#first').append($('#second option:selected'));
});
$('#first').dblclick(function(){
$('#second').append($("#first option:selected"));
});
$('#second').dblclick(function(){
$('#first').append($("#second option:selected"));
});
</script>
</body>
</html>
用户添加模块分析：
1. 首先获取各个字段的值 2.创建列对象 3 创建行对象 4 把列对象加入到行对象上
5 把列对象加入到table对象上 为a元素添加事件。注意：为a添加的事件函数调用必须放在添加元素事件函数内部其次，由于给a 元素设置了href属性 所以每次click事件都会激活超链接 ，为了达到演示效果，可以把a元素的click时间返回值设为false,
可以防止激活超链接的路径。
分享到：
相关推荐
教程名称：jQuery实例视频教程课程目录：【】jQuery实例-商城放大镜效果【】jQuery实例-图片放大效果【】jQuery实例-图片转动立体效果【】jQuery实例-对联广告【】jQuery实例-返回顶部(解决IE6固定定位)【】jQuery...
### JQuery实例教程基础知识点详解 #### 一、选择器 - JQuery的核心功能 JQuery通过其强大的选择器系统，简化了HTML文档的操作，使得开发者能够快速定位并操作DOM元素。以下是对给定文件中提到的选择器的详细解释...
jQuery之Cookie用法:记住用户名和密码实例，已打包为demo，欢迎大家下载（最火软件站）。 jquery中实现cookie的操作相比js要简单很多 操作步骤如下 1、引入JS文件（下载包中已包含） jquery-1.7.1.js jquery.cookie...
**jQuery实例大全** jQuery是一个广泛使用的JavaScript库，它简化了HTML文档遍历、事件处理、动画和Ajax交互等任务。这个“jQuery实例大全”集合了众多实用的jQuery特效和功能，旨在帮助开发者快速理解和应用jQuery...
还有由于容量的原因, 视频和web实例图片没有上传. 《jQuery全能权威指南：jQuery Core+jQuery Plugin+jQuery UI+jQuery Mobile》的阅读对象是具有一些HTML 、CSS和JavaScript知识的开发者，内容覆盖了jQuery知识...
本文将详细解析"jquery实例1:淡入淡出窗口"这一主题，帮助你理解如何使用jQuery实现网页元素的动态效果，如淡入淡出。 首先，淡入淡出效果是jQuery动画功能的一个经典应用，它使得网页元素可以平滑地从不可见变为...
本实例将深入探讨如何使用jQuery实现一个实用的Tooltip功能。Tooltip是一种常见且有用的UI元素，它可以在用户鼠标悬停在某个元素上时显示额外的信息。 首先，让我们了解一下jQuery的核心概念。jQuery通过选择器来...
jQuery 的强大之处在于其强大的选择器系统。例如，`$("#id")` 用于选取ID为特定值的元素，`$(".class")` 用于选取具有特定类名的所有元素，`$("tag")` 则是选取所有指定标签名的元素。通过这些选择器，你可以精确地...
《jQuery实例大全》 在网页开发中，jQuery是一款极为重要的JavaScript库，它简化了JavaScript的DOM操作、事件处理、动画设计以及Ajax交互。本资源集合，"jQuery实例大全"，正是针对这一强大工具的实践应用展示，...
这个“50个经典jQuery实例”压缩包显然包含了一系列精心挑选的示例，旨在帮助初学者快速掌握jQuery的核心功能和常用技巧。下面，我们将详细探讨这些实例可能涵盖的知识点，并解释它们在实际开发中的应用。 1. **...
这个"jQuery 实例 经典呀"的压缩包很可能是包含了一系列经典的 jQuery 使用示例，帮助开发者更好地理解和应用 jQuery。让我们深入探讨一下 jQuery 的核心概念和常见用法。 1. **选择器**: jQuery 的选择器类似于 ...
《jQuery实例集合——深入浅出jQuery编程》 jQuery，这个小巧而强大的JavaScript库，自2006年发布以来，已经成为了Web开发中不可或缺的一部分。它以其简洁的API、丰富的功能以及良好的浏览器兼容性，极大地简化了...
参照《jQuery完全攻略》亲自手打并测试的100多个实例（部分实例来自网络如消息框、tooltip、面包屑式菜单、层级菜单以及一些jQuery插件的用法）。 主要分为： jQuery操作DOM节点、数组和字符串 jQuery表单验证 ...
这个“Jquery实例(图片预览)”着重探讨的是如何利用jQuery来实现图片预览功能，这在网页设计中是常见的需求，比如在用户上传图片前进行预览，或者在鼠标悬停在图片链接上时显示大图。 首先，我们需要理解jQuery的...
这个实例展示了Jquery的强大功能，以及如何结合JavaScript（JS）来创建交互式的网页元素，提升用户体验。 首先，我们要理解Jquery是什么。Jquery是一个轻量级的JavaScript库，它简化了HTML文档遍历、事件处理、动画...
**jQuery实例教程** jQuery 是一个高效、简洁且功能丰富的JavaScript库，它极大地简化了JavaScript的DOM操作、事件处理、动画制作以及Ajax交互。本教程旨在通过一系列实例，帮助你深入理解和掌握jQuery的核心概念与...
标题中的“jQuery入门实例：使用jQuery编写简单的类tooltip的小插件”表明了本文将介绍如何使用jQuery这个流行的JavaScript库来创建一个类似tooltip的功能。jQuery是一个轻量级的库，它简化了HTML文档遍历、事件处理...
这是一个利用了Ajax技术的一个Jquery实例，动态的生成级联的下拉列表框，在中关村zol中经常可以看到。如果遇到无法显示的情况，请自己阅读代码。
在IT领域，jQuery是一个非常流行的JavaScript库，它极大地简化了JavaScript的使用，使得网页动态化和DOM操作变得简单易行。本篇文章将深入探讨jQuery的使用，...因此，学习和理解jQuery是现代Web开发者的必备技能之一。
**jQuery 实例与 API** jQuery 是一款广泛应用于Web开发中的JavaScript库，它简化了HTML文档遍历、事件处理、动画制作以及Ajax交互等任务。这个压缩包包含的是关于jQuery的实例和API文档，对于深入理解和使用jQuery...