`

jquery实例之感悟:

阅读更多

$(“”)此标记里面可以直接放入标签元素

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全部移动到右边

                获取按钮的单击事件à把左边的selectoption被选中的移动到右边  选中的optionjquery的过滤来实现

               获取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的核心概念和常见应用。 1. **DOM操作**:jQuery提供了简洁的...

    ajax +NodeJS 实现图片上传实例

    前台用jquery的ajax发请求,后台用NodeJS 的multer模块实现图片上传。这个demo给我的感悟是一定要自己能实现出来,而不是看了别人写好就直接“拿来”用 note(注意) 大家先在public目录下创建一个名为uploads的...

    web笔记心得

    6. jQuery:jQuery是一个简洁、高效的JavaScript库,简化了DOM操作、事件处理、动画和Ajax交互。 7. Bootstrap:Bootstrap是流行的设计框架,提供了预设的CSS样式和组件,帮助开发者快速创建美观的响应式网站。 8....

    PHP的面试题PHP

    #### 上一家公司的工作感悟 此类问题通常用于考察应聘者的学习能力、解决问题的能力以及个人成长经历。可以从团队合作、项目管理等方面分享自己的心得。 #### 对程序员工作的理解和认识 可以从编程的本质、软件开发...

    blogsite:“茉莉花游记”的博客网站

    "茉莉花游记"的博客网站就是一个这样的实例,它可能包含了一系列关于旅行、摄影、生活感悟等内容,通过精致的布局和丰富的媒体资源,为访客提供了愉悦的阅读体验。 【描述】:“blogsite:“茉莉花游记”的博客网站...

    rob2468.github.io:博客

    这通常意味着博客的内容、样式以及交互都由该用户设计和维护,可能包含了其技术分享、生活感悟或者专业领域的见解。 【标签】:"HTML" HTML(HyperText Markup Language)是用于创建网页的标准标记语言。这里的...

    blog

    博客是互联网上一种常见的内容发布平台,用于分享个人见解、技术知识、生活感悟等多样化信息。在本案例中,我们关注的是与JavaScript相关的博客内容,这涵盖了前端开发、后端开发以及JavaScript在现代Web开发中的...

    梦想日记

    但从这个简洁的名字我们可以猜测,这可能是一款用于记录个人梦想、目标或者生活感悟的应用。在IT行业中,创建这样的应用通常涉及到数据存储、用户界面设计以及可能的个性化功能实现。 标签 "Ruby" 指出这个项目或...

Global site tag (gtag.js) - Google Analytics