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);

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

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

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

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

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

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

var v=$v.get(0);   //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 链接数据库封装类

 1 <?php
 2 class DBDA
 3 {
 4     public $host="localhost";
 5     public $uid = "root";
 6     public $pwd = "123";
 7     public $dbname = "mydb";
 8     
 9     //成员方法
10     public function Query($sql,$type=1)
11     {
12         $db = new MySQLi($this->host,$this->uid,$this->pwd,$this->dbname);
13         $r = $db->query($sql);
14         
15         if($type==1)
16         {
17             return $r->fetch_all();
18         }
19         else
20         {
21             return $r;
22         }
23     }
24     
25     //返回字符串的方法
26     public function StrQuery($sql,$type=1)
27     {
28         $db = new MySQLi($this->host,$this->uid,$this->pwd,$this->dbname);
29         $r = $db->query($sql);
30         
31         if($type==1)
32         {
33             $attr = $r->fetch_all();
34             $str = "";
35             foreach($attr as $v)
36             {
37                 $str .= implode("^",$v)."|";
38             }
39             
40             return substr($str,0,strlen($str)-1);
41 
42         }
43         else
44         {
45             return $r;
46         }
47     }
48 }

DBDA.class.php

1.登录

 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 2 <html xmlns="http://www.w3.org/1999/xhtml">
 3 <head>
 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 5 <title>无标题文档</title>
 6 <script src="jquery-1.11.2.min.js"></script>
 7 </head>
 8 
 9 <body>
10 
11 <div>账号：<input type="text" id="uid" /></div>
12 <div>密码：<input type="password" id="pwd" /></div>
13 <input type="button" value="登录" id="btn" />
14 </body>
15 
16 <script type="text/javascript">
17 
18 $("#btn").click(function(){
19         //取用户名和密码
20         var uid = $("#uid").val();
21         var pwd = $("#pwd").val();
22         
23         //调AJAX
24         $.ajax({
25                 "url":"logincl.php",
26                 "data":{u:uid,p:pwd},
27                 "type":"POST",
28                 "dataType":"TEXT",
29                 success: function(data){
30                         if(data.trim()=="OK")
31                         {
32                         /*    window.location.href="test.php";*/
33                         alert("用户名或密zhengque");
34                         }
35                         else
36                         {
37                             alert("用户名或密码错误");
38                         }
39                     }
40             });
41     })
42 
43 </script>
44 
45 </html>

登录处理

<?php
class DBDA
{
 public $dizhi="localhost";
 public $usename="root";
 public $mima="123";
 public $dbname="aload";
 public function Query($str,$y=0)
 {
     $lianjie=new MySQLi($this->dizhi,$this->usename,$this->mima,$this->dbname);
     $jieguoji=$lianjie->query($str);
     if($y==0)
     {
         return $jieguoji;
        }
     else
     {
      return $jieguoji->fetch_all();     
    }
}    
    
}



?>

logincl.php

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

 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 2 <html xmlns="http://www.w3.org/1999/xhtml">
 3 <head>
 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 5 <title>无标题文档</title>
 6 <script src="../Jquery/jquery-1.11.2.min.js"></script>
 7 </head>
 8 
 9 <body>
10 
11 <input type="text" id="uid" />
12 <span id="tishi"></span>
13 
14 </body>
15 
16 <script type="text/javascript">
17 
18 $("#uid").blur(function(){
19         //取用户名
20         var uid = $(this).val();
21         //查数据库,调ajax
22         $.ajax({
23                 url: "testchuli.php",//处理页面的地址
24                 data:{u:uid}, //要传递的数据（提交）
25                 type:"POST", //提交方式
26                 dataType:"TEXT", //返回数据格式
27                 success:function(data){ //回调函数
28                         var str = "";
29                         if(data.trim()=="OK")
30                         {
31                             str = "该用户名可用";
32                             $("#tishi").css("color","green");
33                         }
34                         else
35                         {
36                             str = "该用户名已存在";
37                             $("#tishi").css("color","red");
38                         }
39                         $("#tishi").text(str);
40                     }
41             });
42     })
43 
44 </script>
45 
46 </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[0][0]>0)
{
    echo "NO";
}
else
{
    echo "OK";
}

textchuli.php

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

加载界面

 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 2 <html xmlns="http://www.w3.org/1999/xhtml">
 3 <head>
 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 5 <title>无标题文档</title>
 6 <script src="../Jquery/jquery-1.11.2.min.js"></script>
 7 </head>
 8 
 9 <body>
10 
11 <h1>显示数据</h1>
12 <table width="100%" border="1" cellpadding="0" cellspacing="0">
13     <tr>
14         <td>代号</td>
15         <td>姓名</td>
16         <td>性别</td>
17         <td>民族</td>
18         <td>生日</td>
19         <td>操作</td>
20     </tr>
21     
22     <tbody id="bg">
23         
24     </tbody>
25 
26 </table>
27 
28 </body>
29 <script type="text/javascript">
30 
31 $(document).ready(function(e) {
32      jiazai();
33 });
34 
35 //加载数据的方法
36 function jiazai()
37 {
38     //异步
39     $.ajax({
40             url:"jiazai.php",
41             dataType:"TEXT",
42             success: function(data){
43                     var hang = data.split("|");
44                     
45                     var str = "";
46                     
47                     for(var i=0;i<hang.length;i++)
48                     {
49                         var lie = hang[i].split("^");
50                         str += "<tr><td>"+lie[0]+"</td><td>"+lie[1]+"</td><td>"+lie[2]+"</td><td>"+lie[3]+"</td><td>"+lie[4]+"</td><td><input type='button' value='删除' class='shanchu' code='"+lie[0]+"' /></td></tr>";
51                     }
52                     
53                     $("#bg").html(str);
54                     
55                     $(".shanchu").click(function(){
56                         
57                         var code = $(this).attr("code");
58                         $.ajax({
59                             url:"shanchu.php",
60                             data:{c:code},
61                             type:"POST",
62                             dataType:"TEXT",
63                             success: function(d){
64                                     if(d.trim()=="OK")
65                                     {
66                                         //重新加载
67                                         jiazai();
68                                     }
69                                     else
70                                     {
71                                         alert("删除失败");
72                                     }
73                                 }
74                             });
75                     })
76                 }
77         });
78 }
79 
80 </script>
81 </html>

lizi.php

删除处理页面

 1 <?php
 2 include("DBDA.class.php");
 3 $db = new DBDA();
 4 $code = $_POST["c"];
 5 $sql = "delete from info where code='{$code}'";
 6 if($db->Query($sql,0))
 7 {
 8     echo "OK";
 9 }
10 else
11 {
12     echo "NO";
13 }

shanchu.php

posted @ 2017-01-05 16:32 get("新技能") 阅读(302) 评论(0) 编辑收藏举报

刷新页面返回顶部

张凯::get("新技能")

还活着，全力抢救中。==没什么好办法，拿过来试试，总有一款合适的。

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

公告

张凯::get("新技能")

还活着，全力抢救中。==没什么好办法，拿过来试试，总有一款合适的。

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

公告

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