AJXA 入门前端界面操作（例题）

ＪＱ对象与ＤＯＭ　对象之间转换

什么是jQuery对象？

---就是通过jQuery包装DOM对象后产生的对象。jQuery对象是jQuery独有的，其可以使用jQuery里的方法。

比如：

$("#test").html()   意思是指：获取ID为test的元素内的html代码。其中html()是jQuery里的方法

这段代码等同于用DOM实现代码：

document.getElementById("id").innerHTML;

虽然jQuery对象是包装DOM对象后产生的，但是jQuery无法使用DOM对象的任何方法，同理DOM对象也不能使用jQuery里的方法.乱使用会报错。比如：$("#test").innerHTML、document.getElementById("id").html()之类的写法都是错误的。

还有一个要注意的是：用#id作为选择符取得的是jQuery对象与document.getElementById("id")得到的DOM对象，这两者并不等价。请参看如下说的两者间的转换。

既然jQuery有区别但也有联系，那么jQuery对象与DOM对象也可以相互转换。在再两者转换前首先我们给一个约定：如果一个获取的是jQuery对象，那么我们在变量前面加上$，如：var $variab = jQuery对象；如果获取的是DOM对象，则与习惯普通一样：var variab = DOM对象；这么约定只是便于讲解与区别，实际使用中并不规定。

jQuery对象转成DOM对象：

两种转换方式将一个jQuery对象转换成DOM对象：[index]和.get(index);

()jQuery对象是一个数据对象，可以通过[index]的方法，来得到相应的DOM对象。

如：var $v =$("#v") ; //jQuery对象

var v=$v[];    //DOM对象

alert(v.checked)   //检测这个checkbox是否被选中

()jQuery本身提供，通过.get(index)方法，得到相应的DOM对象

如：var $v=$("#v");  //jQuery对象

var v=$v.get();   //DOM对象

alert(v.checked)  //检测这个checkbox是否被选中

DOM对象转成jQuery对象:

对于已经是一个DOM对象，只需要用$()把DOM对象包装起来，就可以获得一个jQuery对象了。$(DOM对象)

如：var v=document.getElementById("v");  //DOM对象

var $v=$(v);    //jQuery对象

转换后，就可以任意使用jQuery的方法了。

通过以上方法，可以任意的相互转换jQuery对象和DOM对象。需要再强调注意的是：DOM对象才能使用DOM中的方法，jQuery对象是不可以用DOM中的方法。

JQ 对象与dom转化

AJXA 处理界面与之前的嵌入 PHP 相比不用频繁的刷新界面

ＰＨＰ截取字符串　

<?php

echo substr('abcdef', 1);      //输出 bcdef

echo substr('abcdef', 1, 2);   //输出 bc

echo substr('abcdef', -3, 2);  //输出 de

echo substr('abcdef', 1, -2);  //输出 bcd

?>

mysql 链接数据库封装类

 <?php

 class DBDA

 {

     public $host="localhost";

     public $uid = "root";

     public $pwd = "";

     public $dbname = "mydb";

     //成员方法

     public function Query($sql,$type=)

     {

         $db = new MySQLi($this->host,$this->uid,$this->pwd,$this->dbname);

         $r = $db->query($sql);

         if($type==)

         {

             return $r->fetch_all();

         }

         else

         {

             return $r;

         }

     }

     //返回字符串的方法

     public function StrQuery($sql,$type=)

     {

         $db = new MySQLi($this->host,$this->uid,$this->pwd,$this->dbname);

         $r = $db->query($sql);

         if($type==)

         {

             $attr = $r->fetch_all();

             $str = "";

             foreach($attr as $v)

             {

                 $str .= implode("^",$v)."|";

             }

             return substr($str,,strlen($str)-);

         }

         else

         {

             return $r;

         }

     }

 }

DBDA.class.php

1.登录

 <!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>无标题文档</title>

 <script src="jquery-1.11.2.min.js"></script>

 </head>

 <body>

 <div>账号：<input type="text" id="uid" /></div>

 <div>密码：<input type="password" id="pwd" /></div>

 <input type="button" value="登录" id="btn" />

 </body>

 <script type="text/javascript">

 $("#btn").click(function(){

         //取用户名和密码

         var uid = $("#uid").val();

         var pwd = $("#pwd").val();

         //调AJAX

         $.ajax({

                 "url":"logincl.php",

                 "data":{u:uid,p:pwd},

                 "type":"POST",

                 "dataType":"TEXT",

                 success: function(data){

                         if(data.trim()=="OK")

                         {

                         /*    window.location.href="test.php";*/

                         alert("用户名或密zhengque");

                         }

                         else

                         {

                             alert("用户名或密码错误");

                         }

                     }

             });

     })

 </script>

 </html>

登录处理

<?php

class DBDA

{

 public $dizhi="localhost";

 public $usename="root";

 public $mima="";

 public $dbname="aload";

 public function Query($str,$y=)

 {

     $lianjie=new MySQLi($this->dizhi,$this->usename,$this->mima,$this->dbname);

     $jieguoji=$lianjie->query($str);

     if($y==)

     {

         return $jieguoji;

        }

     else

     {

      return $jieguoji->fetch_all();

    }

}    

}

?>

logincl.php

2.注册账号时界面显示该账户已经使用

 <!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>无标题文档</title>

 <script src="../Jquery/jquery-1.11.2.min.js"></script>

 </head>

 <body>

 <input type="text" id="uid" />

 <span id="tishi"></span>

 </body>

 <script type="text/javascript">

 $("#uid").blur(function(){

         //取用户名

         var uid = $(this).val();

         //查数据库,调ajax

         $.ajax({

                 url: "testchuli.php",//处理页面的地址

                 data:{u:uid}, //要传递的数据（提交）

                 type:"POST", //提交方式

                 dataType:"TEXT", //返回数据格式

                 success:function(data){ //回调函数

                         var str = "";

                         if(data.trim()=="OK")

                         {

                             str = "该用户名可用";

                             $("#tishi").css("color","green");

                         }

                         else

                         {

                             str = "该用户名已存在";

                             $("#tishi").css("color","red");

                         }

                         $("#tishi").text(str);

                     }

             });

     })

 </script>

 </html>

text.php

 <?php

include("../fengzhuang/DBDA.class.php");

$db = new DBDA();

$uid = $_POST["u"];

$sql = "select count(*) from users where uid='{$uid}'";

$attr = $db->Query($sql);

if($attr[][]>)

{

    echo "NO";

}

else

{

    echo "OK";

}

textchuli.php

3.页面加载与删除（不刷新页面）注意字符串的处理 数组转化为字符串字符串转化为数组

加载界面

 <!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>无标题文档</title>

 <script src="../Jquery/jquery-1.11.2.min.js"></script>

 </head>

 <body>

 <h1>显示数据</h1>

 <table width="100%" border="" cellpadding="" cellspacing="">

     <tr>

         <td>代号</td>

         <td>姓名</td>

         <td>性别</td>

         <td>民族</td>

         <td>生日</td>

         <td>操作</td>

     </tr>

     <tbody id="bg">

     </tbody>

 </table>

 </body>

 <script type="text/javascript">

 $(document).ready(function(e) {

      jiazai();

 });

 //加载数据的方法

 function jiazai()

 {

     //异步

     $.ajax({

             url:"jiazai.php",

             dataType:"TEXT",

             success: function(data){

                     var hang = data.split("|");

                     var str = "";

                     for(var i=;i<hang.length;i++)

                     {

                         var lie = hang[i].split("^");

                         str += "<tr><td>"+lie[]+"</td><td>"+lie[]+"</td><td>"+lie[]+"</td><td>"+lie[]+"</td><td>"+lie[]+"</td><td><input type='button' value='删除' class='shanchu' code='"+lie[]+"' /></td></tr>";

                     }

                     $("#bg").html(str);

                     $(".shanchu").click(function(){

                         var code = $(this).attr("code");

                         $.ajax({

                             url:"shanchu.php",

                             data:{c:code},

                             type:"POST",

                             dataType:"TEXT",

                             success: function(d){

                                     if(d.trim()=="OK")

                                     {

                                         //重新加载

                                         jiazai();

                                     }

                                     else

                                     {

                                         alert("删除失败");

                                     }

                                 }

                             });

                     })

                 }

         });

 }

 </script>

 </html>

lizi.php

删除处理页面

 <?php

 include("DBDA.class.php");

 $db = new DBDA();

 $code = $_POST["c"];

 $sql = "delete from info where code='{$code}'";

 if($db->Query($sql,))

 {

     echo "OK";

 }

 else

 {

     echo "NO";

 }

shanchu.php

巴特西

AJXA 入门前端界面操作（例题）

最新文章

热门文章

巴特西

AJXA 入门 前端界面操作（例题）

最新文章

热门文章

AJXA 入门前端界面操作（例题）