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>

jQuery.ajax的简单应用实例

<?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()" />

  &nbsp;&nbsp;<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="" /><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>

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())+)

        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 ...

随机推荐

deepin2014.1快捷键
初试deepin2014.1,发现windows很多快捷键在deepin中也完美支持,举例如下: ctrl+shift+n : 新建文件夹窗口键+E:打开文件系统窗口键+TAB:3D切换桌面 al ...
C# Monads的实现（二）
再谈continuation monad 上一篇中我们已经介绍了continuation monad,但是这个monad与Identity,Maybe,IEnumerable monads稍微难于理解 ...
Leetcode015 3Sum
public class S015 { public List<List<Integer>> threeSum(int[] nums) { Arrays.sort(nums); ...
获取table表格的一些不为人知的属性
JS获取表格的简便方法:获取tbody:tBodies 获取thead:tHead 获取tfoot:tFoot 获取行tr:rows 获取列td:cells 使用实例: oTable. ...
LINQ的Any() 方法
Enumerable.Any 方法确定序列中的任何元素是否存在或满足条件.
SpringMVC的视图解析器
ViewResolver和View介绍 SpringMVC用于处理视图最重要的两个接口是ViewResolver和View.ViewResolver的主要作用是把一个逻辑上的视图名称解析为一个真正的视 ...
ecos 问题答疑(转)
1.为什么我购买的是源码版,但是我的base/ego.php(或者base/ego/目录下文件)却是加密的? 答:ego 源码商业授权文件仅用于和商派软件签订源码协议的商业用户按照甲乙的源码保护约定 ...
【Machine Learning in Action --5】逻辑回归（LogisticRegression）
1.概述 Logistic regression(逻辑回归)是当前业界比较常用的机器学习方法,用于估计某种事物的可能性. 在经典之作<数学之美>中也看到了它用于广告预测,也就是根据某广告被 ...
解决curl中errno为51和60的错误
今天使用curl调用https接口的时候,发现接收不了数据然后打印出curl_errno和curl_error发现是60错误,而生产环境是51错误查了相关资料加上两个参数就可以了 curl_se ...
网络模块(net, http)小解
net模块可用来创建TCP服务器来接收网络请求,它提供了创建客户端以及服务端的方法服务端: 创建服务器: net.createServer([,options], connectionListene ...

Jquery 控制元素 上 下 移动

Jquery 控制元素 上 下 移动的更多相关文章

随机推荐

热门专题

Jquery 控制元素上下移动

Jquery 控制元素上下移动的更多相关文章