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>
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 入门 前端界面操作（例题）的更多相关文章
- 【第一篇】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的前端界面
世界上唯一不变的东西就是变化,我们通过总结变化的规律,以规律来应付变化,一切事情处理起来事半功倍.我们在开发后端服务代码,前端界面代码的时候,界面都是依照一定的规律进行变化的,我们通过抽取数据库信息, ...
随机推荐
- 使用视 meta 标签来控制手机浏览器布局
移动浏览器的Fennec一样呈现在一个虚拟的"窗口"页面(视),通常比屏幕宽.所以他们不需要去挤每个页面布局到一个小窗口(这会破坏许多非移动优化的网站) .用户可以平移和缩放才能看 ...
- 5806 NanoApe Loves Sequence Ⅱ（尺取法）
传送门 NanoApe Loves Sequence Ⅱ Time Limit: 4000/2000 MS (Java/Others) Memory Limit: 262144/131072 K ...
- 【技巧】为ComboBox添加自动提示
一.需求来源 最近有个项目用到了ComboBox控件,在演示的时候,要对Word文档中选中部分添加符合DocBook标准的标签,这些标签是DocBook中元素的集合,数据量不多,大概170多个吧,但是 ...
- JavaWeb学习笔记——过滤器
JSP可以完成的功能Servlet都可以完成,但是Servlet具备的很多功能是JSP所不具备的. 从使用上来看,Servlet可以分成简单Servlet.过滤Servlet(过滤器)和监听Servl ...
- Excel，2010，可以独立打开窗口
HKEY_CLASSES_ROOT \ Excel.Sheet.12和HKEY_CLASSES_ROOT\Excel.Sheet.8 首先更改HKEY_CLASSES_ROOT \ Excel.She ...
- html5中画布和SVG的比较
SVG是基于XML的图形语言,在DOM解析中其每个元素都是可以用的,这样就可以为SCG元素附加JavaScript事件处理器,实现更加丰富的效果. 在SVG中,每个被绘制的图形均被视为对象,如果SVG ...
- window 使用vagrant搭建开发开发环境
# -*- mode: ruby -*-# vi: set ft=ruby : # All Vagrant configuration is done below. The "2" ...
- CocoaPod 使用方法
huangyichengdeMacBook-Pro:~ Jack$ pod search AFNetworking/Library/Ruby/Site/2.0.0/rubygems.rb:250:in ...
- Linux系统启动过程
1. 从BIOS到KERNEL BIOS自检->MBR(GRUB)->KERNEL->KERNEL自解压->内核初始化->内核启动 BIOS自检 当电脑开机的时候,电脑会 ...
- WPF这样的界面应该如何编写呢？
如上图: 外围是一个Border,内部填充一个Grid,Grid分成两行,第一行有一个按钮可以进行操作(主要是操作ListBox的数据源:增加和删除对象),第二行填充一个ListBox,绑定数据源并根 ...