Jquery 控制元素上下移动

最新推荐文章于 2021-06-30 11:52:35 发布

weixin_33809981

最新推荐文章于 2021-06-30 11:52:35 发布

阅读量219

点赞数

文章标签： php javascript xhtml ViewUI

原文链接：http://www.cnblogs.com/qiuyang1/p/4283950.html

版权

<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 οnclick="up(this)">上移</span>  <span οnclick="down(this)">下移</span></li>
    <li><i>2</i> <input type="text" name="name" value="222222222" /><input type="hidden" name="sort" value="2"><span οnclick="up(this)">上移</span>  <span οnclick="down(this)">下移</span></li>
    <li><i>3</i> <input type="text" name="name" value="333333333" /><input type="hidden" name="sort" value="3"><span οnclick="up(this)">上移</span>  <span οnclick="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="测试" οnclick="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="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>  
<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>

转载于:https://www.cnblogs.com/qiuyang1/p/4283950.html

weixin_33809981

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
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/j...
复制链接

扫一扫