Jquery 控制元素 上 下 移动
<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) - ;
var parentpre=parenttr.prev();//获得匹配元素中每个元素紧邻的前一个同胞元素
if (parentpre.length > ) {
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) + ;
var parentpre=parenttr.next();//查找每个段落的下一个同胞元素
if (parentpre.length > ) {
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></i> <input type="text" name="name" value="" /><input type="hidden" name="sort" value=""><span onclick="up(this)">上移</span> <span onclick="down(this)">下移</span></li>
<li><i></i> <input type="text" name="name" value="" /><input type="hidden" name="sort" value=""><span onclick="up(this)">上移</span> <span onclick="down(this)">下移</span></li>
<li><i></i> <input type="text" name="name" value="" /><input type="hidden" name="sort" value=""><span onclick="up(this)">上移</span> <span onclick="down(this)">下移</span></li>
</ul> </body>
</html>
<?php
if($_POST){
$a = $_POST['a'];
$b = $_POST['b'];
$c = $a + $b;
sleep();//延时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>
<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="" /><br />
<input type="checkbox" name="chk_list" id="chk_list_2" value="" /><br />
<input type="checkbox" name="chk_list" id="chk_list_3" value="" /><br />
<input type="checkbox" name="chk_list" id="chk_list_4" value="" /><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=;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>
<html>
<head>
<script src="js/jquery.js" type="text/javascript"></script> <script type="text/javascript">
$(document).ready(function(){
var range = ; //距下边界长度/单位px
var elemt = ; //插入元素高度/单位px
var maxnum = ; //设置加载最多次数
var num = ;
var totalheight = ;
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%)+(num%)+";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>
<!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())+)
setTotal();
})
$("#min").click(function(){
t.val(parseInt(t.val())-)
setTotal();
})
function setTotal(){
$("#total").html((parseInt(t.val())*3.95).toFixed());
}
setTotal();
})
</script>
</head>
<body>
<p>单价：3.95</p>
<input id="min" name="" type="button" value="-" />
<input id="text_box" name="" type="text" value="" />
<input id="add" name="" type="button" value="+" />
<p>总价：<label id="total"></label></p>
</body>
</html>
Jquery 控制元素 上 下 移动的更多相关文章
- 如何使用T-SQL备份还原数据库及c#如何调用执行？ C#中索引器的作用和实现。 jquery控制元素的隐藏和显示的几种方法。 localStorage、sessionStorage用法总结 在AspNetCore中扩展Log系列 - 介绍开源类库的使用（一） span<T>之高性能字符串操作实测
如何使用T-SQL备份还原数据库及c#如何调用执行? 准备材料:Microsoft SQL Server一部.需要还原的bak文件一只 一.备份 数据库备份语句:user master backup ...
- jQuery获取元素上一个、下一个、父元素、子元素
jQuery.parent(expr),找父亲节点,可以传入expr进行过滤,比如$("span").parent()或者$("span").parent(&q ...
- 用Jquery控制元素的上下移动 实现排序功能
在页面上,控制元素上下移动,进行排序是我们比较常用的功能,今天我用jQuery 写个 简单方便,功能齐全的实现方式. 话不多说,直接上代码,下面是基础的引入jq和html元素部分: <scrip ...
- jQuery控制元素隐藏和显示
1.jQuery隐藏和显示效果 通过 jQuery,您可以使用 hide() 和 show() 方法来隐藏和显示 HTML 元素: $("#hide").click(functio ...
- jquery控制元素的隐藏和显示的几种方法。
组织略显凌乱,请耐心看! 使用jquery控制div的显示与隐藏,一句话就能搞定,例如: 1.$("#id").show()表示为display:block, $("#i ...
- jquery控制元素的隐藏和显示的几种方法
使用jquery控制div的显示与隐藏,一句话就能搞定,例如: 方法一 显示: $("#id").show()表示为display:block, 隐藏: $("#id&q ...
- jQuery 判断元素上是否绑定了事件
我研究了一下之后发现,jQuery都将事件缓存起来了,其实也是为了防止内存溢出以及页面unload的时候的速度,也包括多函数触发,方便管理等诸多好处,具体可以参考此文. jQuery会在window. ...
- jquery控制元素的淡入淡出切换
<!doctype html> <html> <head> <meta charset="utf-8"> <title> ...
- jQuery控制元素显示、隐藏、切换、滑动的方法
jQuery 隐藏和显示 通过 hide() 和 show() 两个函数,jQuery 支持对 HTML 元素的隐藏和显示: 实例 $("#hide").click(functio ...
随机推荐
- hdu_4918_Query on the subtree(树的分治+树状数组)
题目链接:hdu_4918_Query on the subtree 题意: 给出一颗n个点的树,每个点有一个权值,有两种操作,一种是将某个点的权值修改为v,另一种是查询距离点u不超过d的点的权值和. ...
- hdu_5963_朋友(找规律)
题目链接:hdu_5963_朋友 题意: 中文,不解释 题解: 把样例拿出来看看,你会发现以x为节点是否能赢,就是与x相连的边权值的和或者异或是否为奇数. #include<bits/stdc+ ...
- wep密钥的长度
理论上,WEP可以搭配任意长度的密钥,因为RC4并未要求非得使用特定长度的密钥. 不过,大多数产品均支持一种或两种长度的密钥.唯一出现在标准中的密钥长度时64位的WEP种子(seed),其中40位是两 ...
- Qt4.8.x Linux WebKit依赖库安装
yum install "pkgconfig(gstreamer-app-0.10)"
- messagebox在最顶层写法
MessageBox(Application.Handle, 'text', 'caption', MB_TOPMOST + MB_ICONINFORMATION);) 或者 MessageBox(S ...
- input[type=number]问题
有时候对于只能输入数字的表单会有想要写成input[type=number]但是其中有一个问题 <input type="text" name="code" ...
- css3动画 9步
<!doctype html> <html> <head> <meta charset="utf-8"> <title> ...
- UIDynamic物理仿真
UIDynamic是从iOS 7开始引入的一种新技术,隶属于UIKit框架可以认为是一种物理引擎,能模拟和仿真现实生活中的物理现象, 比如重力.弹性碰撞等现象,UIKit动力具有可组合.可重用和声明式 ...
- mongoDB7--游标cursor
之前我们学习了"增删改查"四中语法和查询表达式的深入学习,我们已经掌握了一定的操作mongodb数据的能力,那么接下来我们就要考虑我们的操作的效率问题了.(1)游标介绍如果我们查询 ...
- Heap Operations（模拟题）
Heap Operations time limit per test 1 second memory limit per test 256 megabytes input standard inp ...