Jquery 控制元素 上 下 移动
2017-01-23 11:06
435 查看
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="jquery.js" type="text/javascript"></script>
<script type="text/javascript" >
function up(obj) {
var parenttr=$(obj).parent();//找到该li
var zhi = parenttr.find("input:hidden").val();
var zhi1 = parseFloat(zhi) - 1;
var parentpre=parenttr.prev();//获得匹配元素中每个元素紧邻的前一个同胞元素
if (parentpre.length > 0) {
parenttr.find("input:hidden").val(zhi1);//赋值自己
parenttr.prev().find("input:hidden").val(zhi);
parentpre.insertAfter(parenttr);//在被选元素之后插入 HTML 标记或已有的元素
}
}
function down(obj) {
var parenttr=$(obj).parent();//找到该li
var zhi = $(obj).parent().find("input:hidden").val();
var zhi1 = parseFloat(zhi) + 1;
var parentpre=parenttr.next();//查找每个段落的下一个同胞元素
if (parentpre.length > 0) {
parenttr.find("input:hidden").val(zhi1);//赋值自己
parenttr.next().find("input:hidden").val(zhi);
parentpre.insertBefore(parenttr);//被选元素之前插入 HTML 标记或已有的元素
// $.post('/Text/common.ashx', { }, function(d) {})//这里可以触发ajax更新数据库中的排序号
}
}
</script>
</head>
<body>
<ul>
<li><i>1</i> <input type="text" name="name" value="111111111" /><input type="hidden" name="sort" value="1"><span onclick="up(this)">上移</span> <span onclick="down(this)">下移</span></li>
<li><i>2</i> <input type="text" name="name" value="222222222" /><input type="hidden" name="sort" value="2"><span onclick="up(this)">上移</span> <span onclick="down(this)">下移</span></li>
<li><i>3</i> <input type="text" name="name" value="333333333" /><input type="hidden" name="sort" value="3"><span onclick="up(this)">上移</span> <span onclick="down(this)">下移</span></li>
</ul>
</body>
</html>jQuery.ajax的简单应用实例
<?php
if($_POST){
$a = $_POST['a'];
$b = $_POST['b'];
$c = $a + $b;
sleep(3);//延时3秒
echo json_encode($c);
exit;
}
?>
<!DOCTYPE html PUBLIC "-//WAPFORUM//DTD XHTML Mobile 1.0//EN" "http://www.wapforum.org/DTD/xhtml-mobile10.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>商会圈</title>
<script src="jquery.js" type="text/javascript"></script>
<script type="text/javascript">
function FunAjax()
{
$.ajax({
type: "POST",
url: "arr.php",
data: "a=1&b=9",
beforeSend: function(){
$("#span_content").html("数据处理中...");
},
success: function(msg){
$("#span_content").html("两个数的和为： " + msg);
}
});
}
</script>
</head>
<body>
<div style="font-size:12px; padding-left:15px; padding-top:15px;">
<input type="button" id="btn_ok" value="测试" onclick="FunAjax()" />
<span id="span_content">显示结果</span> </div>
</body>
</html>jQuery--checkbox全选/取消全选
<html>
<head>
<script src="jquery-1.3.2.min.js" type="text/javascript"></script>
</head>
<body>
<input type="checkbox" name="chk_list" id="chk_list_1" value="1" />1<br />
<input type="checkbox" name="chk_list" id="chk_list_2" value="2" />2<br />
<input type="checkbox" name="chk_list" id="chk_list_3" value="3" />3<br />
<input type="checkbox" name="chk_list" id="chk_list_4" value="4" />4<br />
<input type="checkbox" name="chk_all" id="chk_all" />全选/取消全选
<script type="text/javascript">
$("#chk_all").click(function(){
$("input[name='chk_list']").attr("checked",$(this).attr("checked"));
});
</script>
</body>
</html>
jQuery.attr 获取/设置对象的属性值,如：
$("input[name='chk_list']").attr("checked"); //读取所有name为'chk_list'对象的状态（是否选中）
$("input[name='chk_list']").attr("checked",true); //设置所有name为'chk_list'对象的checked为true
再如：
$("#img_1").attr("src","test.jpg"); //设置ID为img_1的<img>src的值为'test.jpg'
$("#img_1").attr("src"); //读取ID为img_1的<img>src值
<script type="text/javascript">
//获取到所有name为'chk_list'并选中的checkbox(集合)
var arrChk=$("input[name='chk_list]:checked");
//遍历得到每个checkbox的value值
for (var i=0;i<arrChk.length;i++)
{
alert(arrChk[i].value);
}
</script>
下面是用$.each()遍历的代码：
<script type="text/javascript">
var arrChk=$("input[name='chk_list']:checked");
$(arrChk).each(function(){
window.alert(this.value);
});
});
</script>手机滚屏页面下拉自动加载内容
<!DOCTYPE=html>
<
d6f9
html>
<head>
<script src="js/jquery.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function(){
var range = 50; //距下边界长度/单位px
var elemt = 500; //插入元素高度/单位px
var maxnum = 20; //设置加载最多次数
var num = 1;
var totalheight = 0;
var main = $("#content"); //主体元素
$(window).scroll(function(){
var srollPos = $(window).scrollTop(); //滚动条距顶部距离(页面超出窗口的高度)
//console.log("滚动条到顶部的垂直高度: "+$(document).scrollTop());
//console.log("页面的文档高度 ："+$(document).height());
//console.log('浏览器的高度：'+$(window).height());
totalheight = parseFloat($(window).height()) + parseFloat(srollPos);
if(($(document).height()-range) <= totalheight && num != maxnum) {
main.append("<div style='border:1px solid tomato;margin-top:20px;color:#ac"+(num%20)+(num%20)+";height:"+elemt+"' >hello world"+srollPos+"---"+num+"</div>");
num++;
}
});
});
</script>
</head>
<body>
<div id="content" style="height:960px">
<div id="follow">this is a scroll test;<br/> 页面下拉自动加载内容</div>
<div style='border:1px solid tomato;margin-top:20px;color:#ac1;height:800' >hello world test DIV</div>
</div>
</body>
</html>Jquery 文本框输入内容，自动匹配select 下拉框内容
<?php
include('config.inc.php');
header('Content-Type: text/html; charset=utf-8');
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>CPWEB</title>
<script type="text/javascript" src="jquery-1.8.js"></script>
<script>
$(document).ready(function(){
$("#username").change(function(){
var username=$(this).val();
$("#sidSpan").load("city.php?username="+username);
});
})
</script>
</head>
<body>
<form name="myform" id="myform" action="" method="post">
<input type="text" name="username" id="username" />
<span id="sidSpan">
<select id="sid" name="sid" style=" height:30px;">
</select>
</span>
</form>
</div>
</body>
</html>
city.php 代码如下：
<?php
include('conn.php');
header('Content-Type: text/html; charset=utf-8');
$username = getParam('username', 'GET');
$sql="select * from `member` where username like '%$username%' order by id asc";
$query=mysql_query($sql);
while($row=mysql_fetch_array($query)){
$fid[]=$row;
}
?>
<select id="sid" name="sid">
<?php
foreach($fid as $k=>$v){
?>
<option value='<?php echo $v['id']?>'><?php echo $v['username']?></option>
<?php
}
?>
</select>jQuery实现购物车物品数量的加减
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jQuery实现购物车物品数量的加减</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<script>
$(function(){
var t = $("#text_box");
$("#add").click(function(){
t.val(parseInt(t.val())+1)
setTotal();
})
$("#min").click(function(){
t.val(parseInt(t.val())-1)
setTotal();
})
function setTotal(){
$("#total").html((parseInt(t.val())*3.95).toFixed(2));
}
setTotal();
})
</script>
</head>
<body>
<p>单价：3.95</p>
<input id="min" name="" type="button" value="-" />
<input id="text_box" name="" type="text" value="4" />
<input id="add" name="" type="button" value="+" />
<p>总价：<label id="total"></label></p>
</body>
</html>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- Jquery 控制元素 上 下 移动
- Jquery 控制元素 上 下 移动
- jquery使用animate方法实现控制元素移动
- 帮助你在移动设备上生成倾斜控制（重力控制）的旋转效果jQuery插件 - lenticular.js
- 使用jQuery和CSS控制元素对齐
- jquery控制listbox中项的移动并排序的实现代码
- jquery 控制radio元素
- jquery控制listbox中项的移动并排序
- jQuery实现可移动(draggable)和可缩放(sizable)网页元素
- jquery控制css的display(控制元素的显示与隐藏)
- 自己用jQuery实现的元素移动（待调试）
- 转：使用jQuery和CSS控制元素对齐
- 用jquery控制listbox中项的移动，并排序
- jQuery中移动元素的一些理解
- jquery控制css的display(控制元素的显示与隐藏)
- jquery 元素控制
- jQuery slider Content(左右控制移动)
- jQuery slider Content(左右控制移动)
- jquery之设置元素内容(移动和复制元素,使用append(),appendTo()方法)
- jQuery控制元素显示、隐藏、切换、滑动的方法