通过JQuery对页面表单操作

来源：互联网发布：js获取json的key 编辑：程序博客网时间：2024/05/21 10:23

1、改变表单属性

$("#noteId").attr("value", noteId);

$("#tijiaobiji").attr("style", "display : none");

$("#gengxinbiji").attr("style", "display : block");

2、jquery的键盘按键监视keydown:

记得引入一个jquery.js。可以到其官网下载免费的，http://jquery.com/download都已经更新到3.0了;

http://jquery.cuishifeng.cn/keydown.html这个网址里有比较详细的中文教程。

<html>
<head>
<meta charset="UTF-8"/>
<title></title>
<script src="js/jquery-2.0.0.min.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
$(window).keydown(function(event) {
switch(event.keyCode) {
// ...
// 不同的按键可以做不同的事情
// 不同的浏览器的keycode不同
// 更多详细信息: http://unixpapa.com/js/key.html
// 常用keyCode：空格 32 Enter 13 ESC 27
case 13:
alert("回车");
break;
case 32:
alert("空格");
case 27:
alert("退出");
break;
default:
alert("未知");
}
});
</script>
</head>
<body>
</body>
</html>

3、jquery的拖拽功能：

用到的jquery.dragsort-0.5.2.min.js可以到jquery官网下载

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>jqery的拖拽测试</title>
<meta name="description" content="">
<meta name="keywords" content="">
<script src="js/jquery.min.js"></script>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script type="text/javascript" src="jquery.dragsort-0.5.2.min.js"></script>
</head>

<style type="text/css">
.testdiv {
width: 100px;
height: 50px;
border: 1px solid #F00
}
</style>

<body style="text-align: center;">
<ul id="list1">
<li>

<div class="testdiv" id="1">
模块1
</div>
</li>
<li>
<div class="testdiv" id="2">
模块2
</div>
</li>
<li>
<div class="testdiv" id="3">
模块3
</div>
</li>
</ul>

<ul id="list2">
<li>

<div class="testdiv" id="4">
模块4
</div>
</li>
<li>
<div class="testdiv" id="5">
模块5
</div>
</li>
<li>
<div class="testdiv" id="6">
模块6
</div>
</li>
</ul>
<script type="text/javascript">
$("#list1, #list2").dragsort({

// 要进行拖动的模块标签
dragSelector: "li",

// 要拖动个的两个list之间是否允许拖动：true允许，false不允许
dragBetween: false,

// 每次拖动之后触发的动作
dragEnd: saveOrder,

//拖动之后的占位符
placeHolderTemplate: "<li><div></div></li>"
});

// 获取到拖动之后的排序
function saveOrder() {

// 获取到id为list1，list2的对象的li标签的子节点的id

var data = $("#list1 li, #list2 li").map(function() {
return $(this).children().attr("id");
}).get();
alert(data);
};
</script>
</body>
</html>

0 0