数据的随机抽取 及 jQuery补充效果（菜单、移动）
一、数据的随机抽取
都见过那种考试题从很多题中随机抽取几道的试卷吧，现在就要做这样的一个例子：从数据库中随机抽取几条数据出来显示（例如：一百中随机挑选50条）
随机挑选是要有提交数据的，所以肯定是要有可视化界面和后台处理页面
（1）提交界面
a.使用表单提交（做出一个表单来，这都是页面布局的程序了，在这不多说肯定都会使用from表单）如下：
<form action="nt.php" method="post">
<div class="net_title">选择题：<input id="net_xuan" type="text" style="width:50px" name="net_xuan"/></div>
<div class="net_title"><input type="submit" value="出题" /></div>
</form>
b.提交的处理页面
<?php
include("../../js/DBDA.class.php"); //封装的数据库类
$db = new DBDA();
$nx = $_POST["net_xuan"]; //前面传过来的选择题数目
//查询代号值并且执行
$sqln = "select title from subject where code='11'";
echo $db->StrQuery($sqln);
//选择题判断是否为空
if($nx == "" && $nd == "" && $ns == "" && $nm == "")
{
return false; //返回false
}
else
{
$sql = "select title from subject where code='1101'"; //选择代号是1101的题目
$attrx = $db->Query($sql); //执行语句
foreach($attrx as $vxt) //循环显示
{
echo "<p>一、{$vxt[0]}</p>"; //大题题目
}
$sqlx = " select title,xiang from subject where fcode='1101' order by rand(code) limit 0,$nx"; //随机抽取题目根据代号（order by rand(code) limit 0,$nx）
$attr = $db->Query($sqlx); //执行语句
foreach($attr as $v) //循环显示
{
for($i=1;$i<count($v);$i++)
{
echo "<div>$i{$v[0]}</div><br><div>{$v[1]}</div><br>"; //显示的题目
}
}
}
这里需要主要的是：随机抽取的题目怎么写，其实就是先排序在抽取数目，用到了rand()随机数（order by rand(code) limit 0,3）
这样的话抽取随机数就出来~~~想要不重复的随机的话，可以在查询的语句中添加不重复distinct
二、零碎的知识点
（1）jq菜单
效果：鼠标移动上有颜色的差别，单击选中显示，鼠标移出菜单后只显示选中的效果，其他的没有，鼠标移上显示移上的颜色
a.显示样式不多说，怎么布局也是会的，直接看代码和效果，如下：
<ul>
<li class="xiang">项目一</li><!--都添加一个名字，后面使用名字进行操作-->
<li class="xiang">项目二</li>
<li class="xiang">项目三</li>
<li class="xiang">项目四</li>
</ul>
b.进行jq逻辑编写，如下：
//鼠标单击选中
$(".xiang").click(function(){
//所有元素背景色变成原来的
$(".xiang").removeAttr("xz");
$(".xiang").css("background-image","url(../img/lift_li_bj_02.gif)");
//找到点击了谁
$(this).attr("xz","1");
$(this).css("background-image","url(../img/lift_li_02_02.gif)");
})
//鼠标移上
$(".xiang").mousemove(function(){
//所有元素背景色变成原来的
$(".xiang").css("background-image","url(../img/lift_li_bj_02.gif)");
//找到点击了谁
$(this).css("background-image","url(../img/lift_li_02_02.gif)");
$("[xz='1']").css("background-image","url(../img/lift_li_02_02.gif)");
})
//鼠标移出
$(".xiang").mouseout(function(){
//所有元素背景色变成原来的
$(".xiang").css("background-image","url(../img/lift_li_bj_02.gif)");
//找到点击了谁
$("[xz='1']").css("background-image","url(../img/lift_li_02_02.gif)");
})
（2）jq鼠标单击框后，框随鼠标移动
a.显示框的样式，这里就是一个普通的框，如下：
（1）div显示
<div class="aa">
<p>鼠标摁下就可以拖着我移动哦~</p>
<p>鼠标松开我就不动了哦~</p>
</div>
（2）style样式（样式效果不多说，都是写简单的样式）如下：
<style>
.aa{
height: 100px; /*宽、高*/
width:300px;
position: absolute; /*定位*/
border:6px solid #90F; /*边框*/
text-align:center; /*里面内容位置*/
vertical-align:middle;
line-height:25px;
}
</style>
效果图如下：
b.jq移动效果逻辑编写
//找到框的名字，添加事件
$(".aa").mousedown(function(e){ //鼠标摁下
$(document).bind("mousemove",function(e){ //bind()事件挂起：绑定事件（事件名称，执行代码）
$(".aa").css("left",e.pageX).css("top",e.pageY) //pageX和pageY可以获取鼠标移动的坐标位置
});
})
$(".aa").mouseup(function(){ //鼠标松开
$(document).unbind("mousemove") //移除事件：解绑（事件名称）
})
该逻辑的整体效果如下：
a.鼠标没有拖动的效果：
b.鼠标摁下后拖动的效果：
pageX和pageY可是获取这个鼠标的横轴和纵轴的值
<p>鼠标指针位于： <span></span></p> <!--这是一个显示鼠标横纵值的数-->
$(document).ready(function(){
$(document).mousemove(function(e){ //鼠标移动
$("span").text("X: " + e.pageX + ", Y: " + e.pageY); //添加内容到span中，这就是鼠标移动到哪就会在span中显示数值
});
});
随时补充知识点~~
学习和分享并不是冲突滴~~~
