$(“”)此标记里面可以直接放入标签元素
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的核心概念和常见应用。 1. **DOM操作**:jQuery提供了简洁的...
前台用jquery的ajax发请求,后台用NodeJS 的multer模块实现图片上传。这个demo给我的感悟是一定要自己能实现出来,而不是看了别人写好就直接“拿来”用 note(注意) 大家先在public目录下创建一个名为uploads的...
6. jQuery:jQuery是一个简洁、高效的JavaScript库,简化了DOM操作、事件处理、动画和Ajax交互。 7. Bootstrap:Bootstrap是流行的设计框架,提供了预设的CSS样式和组件,帮助开发者快速创建美观的响应式网站。 8....
#### 上一家公司的工作感悟 此类问题通常用于考察应聘者的学习能力、解决问题的能力以及个人成长经历。可以从团队合作、项目管理等方面分享自己的心得。 #### 对程序员工作的理解和认识 可以从编程的本质、软件开发...
"茉莉花游记"的博客网站就是一个这样的实例,它可能包含了一系列关于旅行、摄影、生活感悟等内容,通过精致的布局和丰富的媒体资源,为访客提供了愉悦的阅读体验。 【描述】:“blogsite:“茉莉花游记”的博客网站...
这通常意味着博客的内容、样式以及交互都由该用户设计和维护,可能包含了其技术分享、生活感悟或者专业领域的见解。 【标签】:"HTML" HTML(HyperText Markup Language)是用于创建网页的标准标记语言。这里的...
博客是互联网上一种常见的内容发布平台,用于分享个人见解、技术知识、生活感悟等多样化信息。在本案例中,我们关注的是与JavaScript相关的博客内容,这涵盖了前端开发、后端开发以及JavaScript在现代Web开发中的...
但从这个简洁的名字我们可以猜测,这可能是一款用于记录个人梦想、目标或者生活感悟的应用。在IT行业中,创建这样的应用通常涉及到数据存储、用户界面设计以及可能的个性化功能实现。 标签 "Ruby" 指出这个项目或...