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 ...
随机推荐
- POJ 2240 Arbitrage（SPFA+邻接矩阵）
(￣▽￣)" #include<iostream> #include<cstdio> #include<cmath> #include<algori ...
- Webpack入门——使用Webpack打包Angular项目的一个例子
2016.1.22,对大多数人来说,这是一个非常平常的日子,但这却是我决定在博客园写博客的日子.虽然注册博客园的博客已有4年8个月,却一直没有动手写过一篇博客,原因是觉得自己水平不行,写不出好东西,所 ...
- ubuntu 14.04 GDAL
autotools-dev comerr-dev hdf5-helpers icu-devtools krb5-multidev libarmadillo4 libarpack2 libblas3 l ...
- RocketMQ初步应用架构理论
RocketMQ初步应用架构理论 写给RocketMQ架构应用入门,内容涉及它的设计机理以及推到出来的应用注意事项,入门人员请看. 稍微涉及技术细节,留以我设计中间件时参考,将来整理深度文档时会抽取走 ...
- 垂直分割群集模型与多通道引擎 －－ ESFramework 4.0 进阶（10）
在ESFramework 4.0 进阶(09)-- ESPlatform 支持的三种群集模型一文中,我们介绍了ESPlatform支持的三种群集模型 -- 垂直分割模型.水平分割模型.交叉模型.我们看 ...
- CSS3 transform的demo1
<!DOCTYPE html> <html> <head> <title>弹出层演示</title> <meta charset=&q ...
- 【python问题系列--4】ValueError: operands could not be broadcast together with shapes (100,3) (3,1)
背景:dataMatrix是(100,3)的列表,labelMat是(1,100)的列表,weights是(3,1)的数组,属性如下代码所示: >>> import types> ...
- 证明：一个整数a若不能被6整除，则a2+24必能被24整除。（整除理论，1.1.4）
证明:一个整数a若不能被6整除,则a2+24必能被24整除. 证明: 因为,a不能被6整除 所以,a不可以同时被2和3整除 所以,a一定是一个奇数, 所以,令a=2k+1,k是整数: 又因为,a2+2 ...
- Python基础（四）-集合
补充: 数据类型分类: 1.按照数据可变不可变: 可变:列表.字典 不可变:数字.字符串.元组 x={':1} print(id(x)) x.update({':2}) print(x) print( ...
- 模拟SPI协议时序
SPI是串行外设接口总线,摩托罗拉公司开发的一种全双工,同步通信总线,有四线制和三线制. 在单片机系统应用中,单片机常常是被用来当做主机(MASTER),外围器件被当做从机(SLAVE). 所以,在以 ...