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 入门前端界面操作（例题）的更多相关文章

【第一篇】ASP.NET MVC快速入门之数据库操作（MVC5+EF6）
目录 [第一篇]ASP.NET MVC快速入门之数据库操作(MVC5+EF6) [第二篇]ASP.NET MVC快速入门之数据注解(MVC5+EF6) [第三篇]ASP.NET MVC快速入门之安全策 ...
selenium2支持无界面操作(HtmlUnit和PhantomJs)
selenium2支持无界面操作(HtmlUnit和PhantomJs) selenium2支持通过各种driver(FirfoxDriver,IternetExplorerDriver,OperaD ...
谨慎能捕千秋蝉（三）——界面操作劫持与HTML5安全
一.界面操作劫持 1)ClickJacking ClickJacking点击劫持,这是一种视觉上的欺骗. 攻击者使用一个透明的.不可见的iframe,覆盖在网页的某个位置上,诱使用户点击iframe. ...
从前端界面开发谈微信小程序体验
本文由云+社区发表作者介绍:练小习,2011年加入搜狐,负责搜狐相册的产品策划与前端开发.2015年后加入腾讯 ISUX (社交用户体验设计部),目前主要负责腾讯云的UI开发工作,专注于人机交互,有 ...
Android基础-系统架构分析，环境搭建，下载Android Studio，AndroidDevTools，Git使用教程，Github入门，界面设计介绍
系统架构分析 Android体系结构安卓结构有四大层,五个部分,Android分四层为: 应用层(Applications),应用框架层(Application Framework),系统运行层(L ...
【连载】Bootstrap开发漂亮的前端界面之插件开发
相关文章: 1.<教你用Bootstrap开发漂亮的前端界面> 2.<Bootstrap开发漂亮的前端界面之实现原理> 3.<Bootstrap开发漂亮的前端界面之自定义 ...
【转载】SELENIUM2支持无界面操作(HTMLUNIT和PHANTOMJS)
SELENIUM2支持无界面操作(HTMLUNIT和PHANTOMJS) selenium2支持通过各种driver(FirfoxDriver,IternetExplorerDriver,OperaD ...
循序渐进VUE+Element 前端应用开发(14）--- 根据ABP后端接口实现前端界面展示
在前面随笔<循序渐进VUE+Element 前端应用开发(12)--- 整合ABP框架的前端登录处理>简单的介绍了一个结合ABP后端的登陆接口实现前端系统登陆的功能,本篇随笔继续深化这一主 ...
使用代码生成工具快速生成基于ABP框架的Vue+Element的前端界面
世界上唯一不变的东西就是变化,我们通过总结变化的规律,以规律来应付变化,一切事情处理起来事半功倍.我们在开发后端服务代码,前端界面代码的时候,界面都是依照一定的规律进行变化的,我们通过抽取数据库信息, ...

随机推荐

com.panie 项目开发随笔_前后端框架考虑（2016.12.8）
(一) 近日和一同学联系,说了我想要做一个网站的打算.她很感兴趣.于是我们协商了下,便觉得一起合作.她写前端,我写后台.因为我对于前端样式设计并不怎么熟悉. (二) 我们决定先做一个个人博客. 网上 ...
c++中的lambda特性
来源: http://www.jb51.net/article/56147.htm cocos2dx3.0测试: 1.有参数a,b printf("lambda=%lf", []( ...
h5手机端下拉选择城市
<!doctype html><html> <head> <meta http-equiv="Content-Type& ...
iOS中常用的宏定义
转自http://www.jianshu.com/p/be00c3f3cafd //字符串是否为空 #define kStringIsEmpty(str) ([str isKindOfClass:[N ...
iOS 安装应用
1.itool 安装不是本文重点 2.fruitstrap安装 2.1 前往 https://github.com/ghughes/fruitstrap 下载源代码 (git clone 即可) 2 ...
2.7我们的第一个Java程序
最后,让我们正式编一个程序(注释⑤).它能打印出与当前运行的系统有关的资料,并利用了来自Java标准库的System对象的多种方法.注意这里引入了一种额外的注释样式:“//”.它表示到本行结束前的所有 ...
WKWebView与JavaScript交互基础
login.html 代码 <!DOCTYPE html> <html> <head> <title>使用JavaScript</title> ...
UML大战需求与分析--阅读笔记4
今天阅读了UML大战需求与分析第五.六章. 第五章,状态机图(State Machine Diagram),状态机图是通过描述某事物状态的改变来展现流程的.一般适用于流程围绕某个事物展开,例如请假的流 ...
webpack踩坑之路——构建基本的React+ES6项目
转自:http://www.cnblogs.com/ghost-xyx/p/5483464.html webpack是最近比较火的构建工具,搭配上同样比较火的ReacJS与ES6(ES2015)一定是 ...
Eclipse中.calsspath文件解析
来自帅气的Sublime Text

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

AJXA 入门 前端界面操作（例题）的更多相关文章

随机推荐

热门专题

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

AJXA 入门前端界面操作（例题）的更多相关文章