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

什么是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>

login.php

登录处理

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

  1. 【第一篇】ASP.NET MVC快速入门之数据库操作（MVC5+EF6）

    目录 [第一篇]ASP.NET MVC快速入门之数据库操作(MVC5+EF6) [第二篇]ASP.NET MVC快速入门之数据注解(MVC5+EF6) [第三篇]ASP.NET MVC快速入门之安全策 ...

  2. selenium2支持无界面操作(HtmlUnit和PhantomJs)

    selenium2支持无界面操作(HtmlUnit和PhantomJs) selenium2支持通过各种driver(FirfoxDriver,IternetExplorerDriver,OperaD ...

  3. 谨慎能捕千秋蝉（三）——界面操作劫持与HTML5安全

    一.界面操作劫持 1)ClickJacking ClickJacking点击劫持,这是一种视觉上的欺骗. 攻击者使用一个透明的.不可见的iframe,覆盖在网页的某个位置上,诱使用户点击iframe. ...

  4. 从前端界面开发谈微信小程序体验

    本文由云+社区发表 作者介绍:练小习,2011年加入搜狐,负责搜狐相册的产品策划与前端开发.2015年后加入腾讯 ISUX (社交用户体验设计部),目前主要负责腾讯云的UI开发工作,专注于人机交互,有 ...

  5. Android基础-系统架构分析，环境搭建，下载Android Studio，AndroidDevTools，Git使用教程，Github入门，界面设计介绍

    系统架构分析 Android体系结构 安卓结构有四大层,五个部分,Android分四层为: 应用层(Applications),应用框架层(Application Framework),系统运行层(L ...

  6. 【连载】Bootstrap开发漂亮的前端界面之插件开发

    相关文章: 1.<教你用Bootstrap开发漂亮的前端界面> 2.<Bootstrap开发漂亮的前端界面之实现原理> 3.<Bootstrap开发漂亮的前端界面之自定义 ...

  7. 【转载】SELENIUM2支持无界面操作(HTMLUNIT和PHANTOMJS)

    SELENIUM2支持无界面操作(HTMLUNIT和PHANTOMJS) selenium2支持通过各种driver(FirfoxDriver,IternetExplorerDriver,OperaD ...

  8. 循序渐进VUE+Element 前端应用开发(14）--- 根据ABP后端接口实现前端界面展示

    在前面随笔<循序渐进VUE+Element 前端应用开发(12)--- 整合ABP框架的前端登录处理>简单的介绍了一个结合ABP后端的登陆接口实现前端系统登陆的功能,本篇随笔继续深化这一主 ...

  9. 使用代码生成工具快速生成基于ABP框架的Vue+Element的前端界面

    世界上唯一不变的东西就是变化,我们通过总结变化的规律,以规律来应付变化,一切事情处理起来事半功倍.我们在开发后端服务代码,前端界面代码的时候,界面都是依照一定的规律进行变化的,我们通过抽取数据库信息, ...

随机推荐

  1. C#获取本地IP地址[常用代码段]

    获得当前机器的IP代码,假设本地主机为单网卡 string strHostName = Dns.GetHostName(); //得到本机的主机名 IPHostEntry ipEntry = Dns. ...

  2. MQTT开发笔记之《安全传输-自问自答》

    Mosquito使用SSL/TLS进行安全通信时的使用方法:http://www.it165.net/pro/html/201404/12615.htmljava版mosquitto客户端使用SSL功 ...

  3. ThinkPhp 3.2 常见问题与注意事项

    1 命名空间声明必须写在脚本的最前面 如果运行PHP脚本后出现如下错误: Namespace declaration statement has to be the very first statem ...

  4. [DUBBO]Dubbo控制台查看方法

    1.dubbo控制台安装方法网上较多,例如转载http://dtbuluo.com/blog/archives/37 2.dubbo控制台查看 由于我们组是开发安装的dubbo.zookeeper等等 ...

  5. mysql 数据类型

    1.整型 MySQL数据类型 含义(有符号) tinyint(m) 1个字节  范围(-128~127) smallint(m) 2个字节  范围(-32768~32767) mediumint(m) ...

  6. jexus5.8.2 linux x64通用版[未集成mono] 配置https

    一.找到mono安装位置 sudo find / -name mono 二.首先查看"/lib"或"/usr/lib"等系统库文件夹中是否有SSL库文件的名字, ...

  7. JSP内置对象之request对象【学习笔记】

    request对象是JSP中重要的对象,每个request对象封装着一次用户的请求,并且所有的请求参数都被封装在request对象中,因此request对象是获取请求参数的重要途径. 一.获取请求头与 ...

  8. Ruby安装Scss

    Ruby安装Scss 引言 已经许久不写HTML了,今天有点以前的东西要改.但是刚装的Windows10,已经没有以前的Web开发环境了.只好重新安装. 结果Webstorm装好后配置Scss出现错误 ...

  9. Java界面设计 Swing(1)

    Java界面设计的用途 开发者可以通过Java SE开发丰富并且强大的具有图形界面的桌面应用程序.也可以设计一些提高效率的工具软件,帮助自己处理机械性工作. Java 的图形界面工具包,可以用于工具类 ...

  10. Quick Cocos 旋转子弹的实现中我学到的

    self 在lua中相当于java中的this lua中的任何变量在没有赋值前, 都可以看做是nil  lua变量有3种,成员变量: self.变量名 = 局部变量: local 变量名 = 全局变量 ...