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 ...
随机推荐
- git clone 出现 RPC failed 错误的解决方案
今天使用git clone一个大型项目的时候出现了如下错误:
- delphi中nil、null、UnAssigned区别
nil:空指针,空地址,对象也是指针,所以可以object := nil;null:null是一个未定义值的变量,既不是0也不代表空字符串,它是未定义的.http://www.delphibasics ...
- 第二次冲刺spring会议（第四次会议）
[例会时间]2014/5/7 21:15 [例会地点]9#446 [例会形式]轮流发言 [例会主持]马翔 [例会记录]兰梦 小组成员:兰梦 ,马翔,李金吉,赵天,胡佳奇
- Openjudge-计算概论（A）-奇数单增序列
描述: 给定一个长度为N(不大于500)的正整数序列,请将其中的所有奇数取出,并按升序输出. 输入共2行:第1行为 N:第2行为 N 个正整数,其间用空格间隔.输出增序输出的奇数序列,数据之间以逗号间 ...
- ubuntu12.04安装openjdk-7
编译androidL需要使用openjdk-7:使用sudo apt-get install openjdk-7-jdk会出现错误信息. 网上差了一些方法,可以通过更新软件源的方法解决,这里使用了 # ...
- C++模板之类型与数据绑定
有时候我们需要将类型与一些数据进行绑定,例如我们一般通过单例,将字符串与一个函数关联(一般称之为注册),之后通过字符串创建相关联的对象 class A { public: static A* Crea ...
- 关于C#文件复制（递归）
using System;using System.Collections.Generic;using System.ComponentModel;using System.Data;using Sy ...
- Slice到C++映射
按:本文是DPWI第6章的笔记. 客户端Slice到C++映射定义的是:怎样把Slice数据类型翻译成C++类型,客户怎样调用操作.传递参数.处理错误.C++映射线程安全,不存在内存管理问题.不建议查 ...
- IoC容器Autofac正篇之类型关联（服务暴露）(八)
类型关联 类型关联就是将类挂载到接口(一个或多个)上去,以方便外部以统一的方式进行调用(看下例). 一.As关联 我们在进行手动关联时,基本都是使用As进行关联的. 1 2 3 4 5 6 7 8 ...
- 运维必备：Oracle自备份精简教程（linux及win）
Oracle在linux环境下的自动备份 1.自动导出及历史文件删除脚本 su - oracle<<EOF cd /db_backup/databak mv orabak*.* /db_b ...