jquery实例之感悟：

最新推荐文章于 2024-04-07 10:54:08 发布

shamusoft

最新推荐文章于 2024-04-07 10:54:08 发布

阅读量107

点赞数

分类专栏： javascript 文章标签： jQuery CSS JavaScript 体育 HTML ViewUI

本文链接：https://blog.csdn.net/shamusoft/article/details/83943970

版权

javascript 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

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

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,

可以防止激活超链接的路径。

shamusoft

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jquery实例之感悟：

$(“”)此标记里面可以直接放入标签元素each()是个遍历集合的函数，里面接收一个函数function(index,domEle)，index表示遍历的索引，domEle 表示遍历的对象，其形式为dom格式eq() 是个过滤函数里面直接接收整数类型$(“ table tr”) 选择某一元素下的元素，可以类似这样写&lt;!DOCTYPE HTML PUBLIC "-//W3C...
复制链接

扫一扫

专栏目录