这篇博客介绍了PHP的基础知识，包括简单和复杂语法、字符串操作、数组、函数、PHP与HTML的结合、ThinkPHP框架的使用，以及JavaScript的基础和DOM操作。文章强调了PHP代码在服务器端运行的特性，解释了表单处理和变量类型，还探讨了数据库连接和AJAX交互。此外，还涉及到了模板渲染、URL路由、数据库操作和安全问题，如防止表单重复提交。
客户端的 JavaScript 不同的是，PHP 代码是运行在服务端的。如果在服务器上建立了如上例类似的代码，则在运行该脚本后，客户端就能接收到其结果，但他们无法得知其背后的代码是如何运作的。甚至可以将 web 服务器设置成让 PHP 来处理所有的 HTML 文件，这么一来，用户就无法得知服务端到底做了什么。
PHP 一个很有用的特点体现在它处理 PHP 表单的方式。您需要理解的非常重要的原理，是表单的任何元素都在您的 PHP 脚本中自动生效。请参阅本手册“PHP之外的变量”以获取关于在 PHP 中使用表单的详细信息及范例。
PHP 支持八种原始类型。
四种标量类型：
- 布尔型（boolean）
- 整型（integer）
- 浮点型（float）（浮点数，也作“double”）
- 字符串（string）
两种复合类型：
- 数组（array）
- 对象（object）
最后是两种特殊类型：
- 资源（resource）
- NULL
实际上 double 和 float 是相同的，由于一些历史的原因，这两个名称同时存在。
-1 和其它非零值（不论正负）一样，被认为是 TRUE！
整数溢出（32位浮点 64位）
如果你指定一个数超出了 integer 的范围，将会被解释为 float。同样如果你执行的运算结果超出了 integer 范围，也会返回 float。
PHP 中没有整除的运算符。1/2 产生出浮点数 0.5。您可以总是舍弃小数部分，或者使用 round() 函数。
决不要将未知的分数强制转换为 integer，这样有时会导致意外的结果。
目前只有，定义浮点转换为整形，没有定义从其它类型转换为整型的行为。
如果您希望了解有关何时和如何将字符串转换成浮点数的信息，请查阅标题为“将字符串转换为数字”的有关章节。对于其它类型的值，其情况类似于先将值转换成整型，然后再转换成浮点。
字符串可以用三种字面上的方法定义。
· 单引号
· 双引号
· 定界符
另一种给字符串定界的方法使用定界符语法（“<<<”）。应该在 <<< 之后提供一个标识符，然后是字符串，然后是同样的标识符结束字符串。
简单语法
如果遇到美元符号（$），解析器会尽可能多地取得后面的字符以组成一个合法的变量名。
复杂（花括号）语法
不是因为语法复杂而称其为复杂，而是因为用此方法可以包含复杂的表达式。
事实上，用此语法你可以在字符串中包含任何在名字空间的值。仅仅用和在字符串之外同样的方法写一个表达式，然后用 { 和 } 把它包含进来。因为不能转义“{”，此语法仅在 $ 紧跟在 { 后面时被识别（用“{\$”或者“\{$”来得到一个字面上的“{$”）。
访问字符串中的字符
字符串中的字符可以通过在字符串之后用花括号指定所要字符从零开始的偏移量来访问。
注: 为了向下兼容，仍然可以用方括号。不过此语法在 PHP 4 中不赞成使用
字符串运算符
有两个字符串运算符。第一个是连接运算符（“.”），它返回其左右参数连接后的字符串。第二个是连接赋值运算符（“.=”），它将右边参数附加到左边的参数后。更多信息见赋值运算符。
|
|
字符串转换为数值
当一个字符串被当作数字来求值时，根据以下规则来决定结果的类型和值。
如果包括“.”，“e”或“E”其中任何一个字符的话，字符串被当作 float 来求值。否则就被当作整数。
该值由字符串最前面的部分决定。如果字符串以合法的数字数据开始，就用该数字作为其值，否则其值为 0（零）。合法数字数据由可选的正负号开始，后面跟着一个或多个数字（可选地包括十进制分数），后面跟着可选的指数。指数是一个“e”或者“E”后面跟着一个或多个数字。
数组
key 可以是 integer 或者 string。如果键名是一个 integer 的标准表达方法，则被解释为整数（例如 "8" 将被解释为 8，而 "08" 将被解释为 "08"）。PHP 中数组下标的变量类型不会对数组造成影响，数组的类型只有一种，它可以同时包含整型和字符串型的下标。
PHP函数
html自动跳转
<meta http-equiv="refresh" content="5;url=02view.html">
</head>
Php从html语言当中分离：
用来标记 PHP 代码块的标记共有四套，其中只有两套总是有效
<?php. . .?> 和 <scriptlanguage="php">. . .</script>
应该是xx.php?id=291 这样的吧
问号是一个标识符 后面是参数！翻译为 访问XX.php页面的时候传递问号参数 id ，id的值为291
可使用$_get['id'] 或者$_request['id']来接受此参数 用于查询等操作！
thinkphp
MVC
全名是ModelView Controller，是模型(model)－视图(view)－控制器(controller)的缩写
thinkphp路由
就是访问控制器的路径。thinkphp的访问不是根据文件来的，而是有一个统一的入口，要访问不同的控制器，就得知道thinkphp路由。
参考：
http://www.cnblogs.com/analyzer/articles/1581943.html
控制器
一般来说，ThinkPHP的控制器是一个类，而操作则是控制器类的一个公共方法。
访问控制器负责外部交互响应，通过URL请求响应，例如 http://serverName/Home/User/index,而事件控制器负责内部的事件响应，并且只能在内部调用，所以是和外部隔离的。
Action参数绑定
参数绑定是通过直接绑定URL地址中的变量作为操作方法的参数，可以简化方法的定义甚至路由的解析。
模型：
模型里写你的数据库表的字段验证等涉及到数据库操作的一系列方法，对应自己的数据库表写那个经典的“三大自动”。
模板：
对于一些有共同属性的页面（如页脚），可以单独制作成一个模板，再利用 ThinkPHP提供的模板包含功能包含进来。这样，当要修改这些公共页面时，只需修改对应的模板即可而不必修改每一个页面。
http://blog.sina.com.cn/s/blog_827ddd950100uyw4.html
工作根目录自动生成：
系统默认为application
修改：在根目录下修改
define('APP_PATH','./application/');
为
define('APP_PATH','./app/');
访问192.168.1.xxx
自动生成模块文件：
根目录下修改：
define('BIND_MODULE','Admin');
// 定义应用目录
define('APP_PATH','./app/');
浏览器当中访问:
http://192.168.1.249/index.php
在app应用目录下自动生成Admin模块文件
注意生成之后要将添加语句注释掉。
url路径：
http://serverName/index.php/模块/控制器/操作
文件入口：
thinkphp支持单个入口文件：
模块Home （前台）
http://192.168.1.249/index.php/admin/Index/index
模块Admin: （后台）
http://192.168.1.249/index.php/Admin/Index/index
模板：
模板的作用就是控制php当中的变量等，使用html文件输出
在thinkphp3.2.2当中模板位于模块文件夹view文件夹当中，例如admin模块index控制器index方法的模板位于F:\web\App\Admin\View\Index当中的index.html
使用模板时要在控制器方法中进行模板渲染输出操作，以admin 模块index 控制器index方法为例
IndexController.class.php文件内容
<?php
namespace Admin\Controller;
use Think\Controller;
class IndexControllerextends Controller {
public function index(){
$this->name = 'thinkphp'; // 进行模板变量赋值
$this->display();
}
}
F:\web\App\Admin\View\Index\index.html文件内容
<html>
<head>
<title>hello {$name}</title>
</head>
<body>
hello, {$name}!
</body>
</html>
访问http://192.168.1.249/index.php/admin/Index/index
输出hello,thinkphp 可见变量正常传递至html文件
http://www.thinkphp.cn/info/60.html
解释：使用thinkphp模板是控制器方法通过使用模板变量（$this->name=$a），然后使用$this->display()就是把操作与模板联系起来。使得php文件当中的模板变量传递至html模板，然后html模板通过使用{name}将变量解析出来。这样做的好处是可以简单的实现php与html的隔离。
url传入参数：
控制器中函数：
<?php
namespace Home\Controller;
use Think\Controller;
class UnivControllerextends Controller {
public function read($id) {
echo 'id='. $id;
}
}
访问地址：
http://192.168.1.249/index.php/home/Univ/read/id/5
输出id=5
M方法实例化时提示：
Host '6XORIEMQBVF6MY2' is notallowed to connect to this MySQL server
这是由于数据库不允许远程访问，使用phpmyadmin或者命令修改
Access denied for user'root'@'6XORIEMQBVF6MY2' (using password: YES)
仔细查看 配置文件密码是否正确
'DB_DSN' => 'mysql://root:881234@192.168.1.249:3306/thinkphp'
'DB_DSN' => 'mysql://用户名:密码@192.168.1.249:3306/数据库'
前台大学页面生成：
F:\web\App\Home\Controller\IndexController.class.php内容
<?php
namespace Home\Controller;
use Think\Controller;
class IndexControllerextends Controller {
public function index(){
$this->show('xxxx');
}
publicfunction univpage($id){
$picpath='/images/'.$id.'.jpg';//图片路径
$this->picpath = $picpath;// 进行模板变量赋值
$this->display();
}
}
html模板 F:\web\App\Home\View\Index\ univpage.html
<html>
<head>
<title>hello {$name}</title>
</head>
<body>
hello, {$picpath}!
<imgsrc={$picpath}height="200"width="288">
</body>
</html>
访问时URL http://192.168.1.249/index.php/home/Index/univpage/id/10001
数据库创建
查看数据库是否存在，不存在创建：
create database if not existstest2;
mysql_query("CREATEDATABASE myun",$con)
提示：
Resource id #3Error creating database: Accessdenied for user 'root'@'%' to database 'myun'
这是因为root用户没有远程床
错误的原因是root用户在远程连接的MYSQL上面，没有这个新数据库的授权。在本地使用mysql应该不存在这个问题。
解决方法，执行授权：
grant all PRIVILEGES on myun.*to root@'%' identified by '881234' with grantoption;
xxxx为创建的数据库，password为root的密码。
自动验证
用户自定义模型，执行D()函数实例化时，可以在使用create创建数据对象的时候自动进行数据验证。默认情况下，create方法是对表单提交的POST数据进行自动验证。
http://www.thinkphp.cn/info/171.html
自动完成
自动完成是ThinkPHP提供用来完成数据自动处理和过滤的方法，使用create方法创建数据对象的时候会自动完成数据处理。因此，在ThinkPHP使用create方法来创建数据对象是更加安全的方式，而不是直接通过add或者save方法实现数据写入。
http://www.thinkphp.cn/info/173.html
表单令牌
ThinkPHP内置了表单令牌验证功能，可以有效防止表单的重复提交等安全防护。验证用户登录状态，http://zhidao.baidu.com/link?url=-642Hfhi9KAk1z_jwe6Qxwpx1udujDpt4WpITSBLbqNsE8-inBxdTHbORvKSYxTuLqlhCZoUd-BlKLUhZXl9b_
远程创建数据库是提示
Error creating database: Access denied for user 'root'@'%' to database'univinfo'
原因是由于远程创建没有权限，在phpmyadmin首页，点击权限
点击编辑权限，修改root用户权限
向mysql数据库写入中文乱码问题
在my.ini中底部mysqld部分添加
[mysqld]
port=3306
#向mysql中文输出乱码解决
character-set-server = utf8
从mysql读取数据库之后显示乱码问题
在从数据库读取数据库之前插入控制字符输出语句
mysql_query ("SET NAMES gbk");
注意网上好多资料提示使用mysql_query ("SETNAMES utf8");但是不知为何使用该句仍然是乱码。
$result = mysql_query ( "SELECT * FROM univ_basic_info");
模型数据库连接：
每个项目有一个连接的数据库配置文件，执行CURD命令时调用连接数据库。
每个项目的数据库连接配置都是在每个项目的/common/conf/config.php文件当中，如F:\web\App\Common\Conf\config.php，连接数据库是使用D和M时自动到config.php当中找到相关配置连接数据库。
'DB_DSN' => 'mysql://root:881234@192.168.1.249:3306/univinfo'
例如进行一下实例化操作：
$Data = M('think_data'); // 实例化Data数据模型
系统会自动使用/common/conf/config.php当中的数据库连接文件连接数据库，然后选择其中的think_data表。
thinkphp提交表单：
注意提交表单要，使用M()和D()时，一定要注意提交的表单的参数名要和数据库表当中的字段完全一致才能够执行自动匹配。
控制器当中方法所对应的html模板的表单提交部分
<formname="input"action="__URL__/register_submit"method="post">
邮箱: <inputtype="text"name="user_email"/> // user_email为数据表字段
用户名: <inputtype="text"name="user_name"/>
密码: <inputtype="text"name="user_password"/>
<inputtype="submit"value="注册"/>>
action="__URL__/register_submit " 系统默认执行该html对应控制器当中的register_submit方法。
如果提交的表单有对应的数据库表格，例如think_userinfo，当中包括两项参数(与提交的表单对应的参数)
则在login_submit方法中
public function register_submit() {
echo "register_submit()";
$User = M('univ_user_basic_info');//实例化模型
$User->create(); //获取post提交过来的表单（注意可能只是post可以）
echo $User->user_name;
//dump($User); //展示数据库状况
$User->add(); //写入数据库
//查找相关符合条件字段，使用数组默认为and关系，可添加'_logic'=>'or'改为或
$result = $User->where ( array(
'user_name' => $username,
'user_password' => $pw
) )->find (); //如果为读出某一参数则是getField('user_id');
如果getField方法传入多个字段名称的话，默认返回一个关联数组，以第一个字段的值为索引（所以第一个字段要尽量选择不会重复的）。
如果需要添加自动验证信息等要自己创建模型，然后实例化模型D()方法，然后创建对象实现自动验证。
数据库模型解释参考：
session使用：
public function login() {
$name = $_GET ["name"];
$password = $_GET ["password"];
session ( 'name', $name );
echo session ('name' );
}
model模型使用：
模型主要是用于数据库当中的表操作。
模型类创建在项目model文件夹下，
php 从表单获取数据的注意事项：
从表单获取的变量通过php写入数据库的时候一定要确保mysql_query()的纯字符串格式
$qu = mysql_query ( "INSERT INTO univ_user_basic_info(user_name,user_password,
user_age,user_email,user_telephone_No,user_city,user_register_time)
VALUES ('".$username."',3,4,5,6,7,8)")
or die ( 'Could notconnect: ' . mysql_error () );
thinkphp模板导入外部样式css以及js
注意必须使用绝对路径而不是能使用相对路径，当然使用（load\import另说）
<linkrel="stylesheet"type="text/css"href="/App/Home/View/Index/11.css">
js使用html当中的数据
在html<script>标签当中给变量赋值
<script>
var univ_id = {$univ_id};/* alert(univ_id); 可以直接在相关的js以及ajax调用*/
</script>
赋值之后js便可以直接使用该变量
<scriptsrc="/App/Home/View/Index/univpage.js"></script>(注意thinkphp当中必须使用绝对路径)
当中语句
alert(univ_id);
js 向数据库当中写入数据
var url ="/App/Home/View/Index/review.php?score=" + score;
xmlhttp.open("GET", url, true);
xmlhttp.send();
php mysql进行操作
对于变量直接写入sql语句就可以，不需要“”、{}等界定
mysql_select_db ( "univinfo", $con );
$sql="UPDATE univ_basic_info SET review_num =review_num+1 WHERE univ_id=univ_id";
判断mysql当中是否有符合条件的记录
$sql = "SELECT count(*) as count FROM univ_user_interest
WHERE univ_id ='" . $univ_id ."'anduser_id='" . $user_id . "'";
$result = mysql_query ( $sql );
$row =mysql_fetch_array($result);
$ifexist=$row['count'];
echo $ifexist;
mysql_query 对于 SELECT，SHOW，EXPLAIN 或 DESCRIBE 语句返回一个资源标识符，打印出来是类似于 “Resource id #3" 的一个字符串，所以就为真了。 这个 “Resource id #3" 就好比是一个指示牌，连接着你要操作的数据，用函数操作他时，例如：mysql_fetch_array($insert), 他就把从数据库调出来的结果带到函数里做参数了。
session()
只要涉及到session的程序语句，不论使用的是php 还是thinkphp，都要在执行在程序最开始处添加session_start ();注册session
在一个控制方法html模板当中调用另一个控制器的方法
当在一个控制器模板当中调用同一个控制器方法模板时直接使用__URL__/方法 即可，系统会自动从对应的控制器中查询该方法，如下：
<formaction="__URL__/login_submit"method="get">
Name: <inputtype="text"name="user_name"/>
Password: <inputtype="text"name="user_password"/>
<inputtype="submit"/>
当调用另一个控制器方法时，无法使用__URL__作为默认路径控制器，在模板中的调用格式需要采用 {:U('控制器/方法','参数'…)} 的方式：
<formaction={:U('Userinfo/login_submit')}method="get">
Name: <inputtype="text"name="user_name"/>
Password: <inputtype="text"name="user_password"/>
<inputtype="submit"/>
参考自：http://www.thinkphp.cn/info/132.html
html模板引入另一个模板include
<include file="Public/header " />
解释
<include file="控制器/方法" />
若里面没有涉及到变量，或逻辑方面的需求，则控制器里是可以无需定义的。
e.g.
User控制其中定义login()方法
public function login() {
$this->display ();
}
对应的模板
<formaction={$login_url}method="get">
Username:
<inputclass="field"type="text"name="user_name"
onfocus="select();"/>
Password:
<inputclass="field"type="password"
name="user_password"onfocus="select();"/>
<inputclass="btn"type="submit"value="Submit"/>
</form>
其它模板文件调用时在调用位置插入：
<includefile="Index/login" />
js当中ajax调用控制器方法：
$(document).ready(function() {
$("#interest_btn").click(function() {
if (user_state == 0) {
// alert("请先登录");
//调用login_box.js当中的方法统一页面直接调用
popup_show();
}
url = '/index.php/home/Index/interest' +'/univ_id/' + univ_id;
htmlobj = $.ajax({
url : url,
async : false
});
$("#myDiv").html(htmlobj.responseText);
});
});
js
js基础
调用js函数
<divclass="interest_button"id="interest_button">
<inputtype="button"onclick="popup_show()"value='登录'/>
</div>
当点击登录按钮时，调用引入的js当中的popup_show()方法
一个js使用另一个js的方法
同一个页面当中的不同的js方法可以直接调用：
如1.js调用2.js当中的popup_show();
如下：前提是1.js和2.js在同一个页面中引入。
function loadXMLDoc()
{
if (user_state==0)
{
alert("请先登录");
//调用login_box.js当中的方法统一页面直接调用
popup_show();
}
}
js改变页面内容：
<p id="demo">JavaScript 能改变 HTML 元素的内容。</p>
<script>
function myFunction()
{
x=document.getElementById("demo"); // 找到元素
x.innerHTML="HelloJavaScript!"; // 改变内容
}
</script>
<button type="button"οnclick="myFunction()">点击这里</button>
js改变图片
<script>
function changeImage()
{
element=document.getElementById('myimage')
if (element.src.match("bulbon"))
{
element.src="/i/eg_bulboff.gif";
}
else
{
element.src="/i/eg_bulbon.gif";
}
}
</script>
<img id="myimage"οnclick="changeImage()" src="/i/eg_bulboff.gif">
点击改变显示图片。
输入前端验证
<input id="demo"type="text">
<script>
function myFunction()
{
varx=document.getElementById("demo").value;
if(x==""||isNaN(x))
{
alert("NotNumeric");
}
}
</script>
<button type="button"οnclick="myFunction()">点击这里</button>
对表单提交内容进行验证
javascript调用html变量
在html script 标签当中生命变量之后，js可以直接调用
<script>
var univ_id = {$univ_id};
/*alert(univ_id); 可以直接在相关的js及ajax调用*/
//用户登录状态参数 js判断此参数弹出登陆界面
var user_state={$user_state};
</script>
如需从 JavaScript访问某个 HTML元素，您可以使用 document.getElementById(id)方法。
document.write()注意
请使用 document.write() 仅仅向文档输出写内容。
如果在文档已完成加载后执行 document.write，整个 HTML 页面将被覆盖：
JavaScript 拥有动态类型
JavaScript 拥有动态类型。这意味着相同的变量可用作不同的类型：
如果把数字与字符串相加，结果将成为字符串。
JavaScript 函数
函数是由事件驱动的或者当它被调用时执行的可重复使用的代码块。
带参数函数实例：
<button οnclick="myFunction('Bill Gates','CEO')">点击这里</button>
<script>
function myFunction(name,job)
{
alert("Welcome " + name + ",the " + job);
}
</script>
返回参数js函数
<p id="demo"></p>
<script>
function myFunction(a,b)
{
return a*b;
}
document.getElementById("demo").innerHTML=myFunction(4,3);
</script>
JavaScript 表单验证
JavaScript 可用来在数据被送往服务器前对 HTML 表单中的这些输入数据进行验证。
被 JavaScript 验证的这些典型的表单数据有：
用户是否已填写表单中的必填项目？
用户输入的邮件地址是否合法？
用户是否已输入合法的日期？
用户是否在数据域 (numeric field) 中输入了文本？
email验证举例：
<html>
<head>
<script type="text/javascript">
function validate_email(field,alerttxt){with (field){apos=value.indexOf("@")dotpos=value.lastIndexOf(".")if (apos<1||dotpos-apos<2) {alert(alerttxt);return false}else {return true}}} function validate_form(thisform){with (thisform){if (validate_email(email,"Not a valid e-mail address!")==false) {email.focus();return false}}}</script>
</head>
<body>
<form action="submitpage.htm"οnsubmit="return validate_form(this);" method="post">
Email: <input type="text" name="email" size="30">
<input type="submit" value="Submit">
</form>
</body>
</html>
with
语句用于设置代码在特定对象中的作用域。
DOM
当网页被加载时，浏览器会创建页面的文档对象模型（Document Object Model）。
· JavaScript 能够改变页面中的所有 HTML 元素
· JavaScript 能够改变页面中的所有 HTML 属性
· JavaScript 能够改变页面中的所有 CSS 样式
· JavaScript 能够对页面中的所有事件做出反应
通过标签名查找 HTML元素
本例查找id="main" 的元素，然后查找 "main" 中的所有 <p> 元素：
var x=document.getElementById("main");
var y=x.getElementsByTagName("p");
onmouseover 和 onmouseout事件
onmouseover 和 onmouseout 事件可用于在用户的鼠标移至 HTML 元素上方或移出元素时触发函数。
举例：
鼠标放在文字上面，文字自动变化：
<html>
<body>
<div οnmοuseοver="mOver(this)"οnmοuseοut="mOut(this)" style="background-color:green;width:120px;height:20px;padding:40px;color:#ffffff;">把鼠标移到上面</div>
<script>
function mOver(obj)
{
obj.innerHTML="谢谢"
}
function mOut(obj)
{
obj.innerHTML="把鼠标移到上面"
}
</script>
</body>
</html>
用户左键按下、抬起操作
当鼠标左键点下时改变颜色、内容，抬起时同样改变。
<html>
<body>
<div οnmοusedοwn="mDown(this)"οnmοuseup="mUp(this)"style="background-color:green;color:#ffffff;width:90px;height:20px;padding:40px;font-size:12px;">请点击这里</div>
<script>
function mDown(obj)
{
obj.style.backgroundColor="#1ec5e5";
obj.innerHTML="请释放鼠标按钮"
}
function mUp(obj)
{
obj.style.backgroundColor="green";
obj.innerHTML="请按下鼠标按钮"
}
</script>
</body>
</html>
所有JavaScript数字均为 64位
JavaScript 不是类型语言。与许多其他编程语言不同，JavaScript 不定义不同类型的数字，比如整数、短、长、浮点等等。
JavaScript 中的所有数字都存储为根为 10 的 64 位（8 比特），浮点数。
查找字符串长度
<html>
<body>
<script type="text/javascript">
var txt="Hello World!"
document.write(txt.length)
</script>
</body>
</html>
生成随机数字
<script type="text/javascript">
aa=Math.random()
</script>
window
window.location对象用于获得当前页面的地址 (URL)，并把浏览器重定向到新的页面。
<!DOCTYPEhtml>
<html>
<head>
<script>
functionnewDoc()
{
alert(location.href);
window.location.assign("http://www.w3school.com.cn")
}
</script>
</head>
<body>
<inputtype="button" value="加载新文档" οnclick="newDoc()">
</body>
</html>
前一页后一页
window.history.back()window.history.forward()示例：
<html>
<head>
<script>
functiongoBack()
{
window.history.back()
//window.history.forward()
}
</script>
</head>
<body>
<inputtype="button" value="Back" οnclick="goBack()">
</body>
</html>
jQuery
jQuery 是一个 JavaScript 函数库。
jQuery 库包含以下特性：
· HTML 元素选取
· HTML 元素操作
· CSS 操作
· HTML 事件函数
· JavaScript 特效和动画
· HTML DOM 遍历和修改
· AJAX
· Utilities
1. 首先下载jQuery库
ie浏览器下载靠谱。
2. 使用时导入既可以
<scripttype="text/javascript"src="/jquery-1.11.1.min.js"></script>
3.
document ready
所有 jQuery 函数位于一个 document ready 函数中：
$(document).ready(function(){
---jQuery functions go here ----
});
这是为了防止文档在完全加载（就绪）之前运行 jQuery 代码。
如果在文档没有完全加载之前就运行函数，操作可能失败。
$(this).hide()
演示 jQuery hide() 函数，隐藏当前的 HTML 元素。
$("#test").hide()
演示 jQuery hide() 函数，隐藏 id="test" 的元素。
$("p").hide()
演示 jQuery hide() 函数，隐藏所有 <p> 元素。
$(".test").hide()
演示 jQuery hide() 函数，隐藏所有 class="test" 的元素。
jQuery 事件函数
jQuery 事件处理方法是 jQuery 中的核心函数。
事件处理程序指的是当 HTML 中发生某些事件时所调用的方法。术语由事件“触发”（或“激发”）经常会被使用。
通常会把 jQuery 代码放到 <head>部分的事件处理方法中：
jQuery编码规则
由于 jQuery 是为处理 HTML 事件而特别设计的，那么当您遵循以下原则时，您的代码会更恰当且更易维护：
· 把所有 jQuery 代码置于事件处理函数中
· 把所有事件处理函数置于文档就绪事件处理器中
· 把 jQuery 代码置于单独的 .js 文件中
· 如果存在名称冲突，则重命名 jQuery 库
显示和隐藏
隐藏、显示、切换，滑动，淡入淡出，以及动画
<html>
<head>
<scriptsrc="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$("p").click(function(){
$(this).hide();//hide("slow")
});
});
</script>
</head>
<body>
<p>如果您点击我，我会消失。</p>
<p>点击我，我会消失。</p>
<p>也要点击我哦。</p>
</body>
</html>
点击隐藏或者展示（网页当中的折叠展开操作）
<html>
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<scripttype="text/javascript">
$(document).ready(function(){
$("button").click(function(){
$("p").toggle("show");
});
});
</script>
</head>
<body>
<button type="button">隐藏/展开</button>
<p>这是一个段落。</p>
<p>这是另一个段落。</p>
</body>
</html>
jQuery实现元素的淡入淡出效果
jQuery 拥有下面四种 fade 方法：
· fadeIn()
· fadeOut()
· fadeToggle()
· fadeTo()
动画：
jQueryanimate() 方法用于创建自定义动画。
语法：
$(selector).animate({params},speed,callback);
必需的 params 参数定义形成动画的 CSS 属性。
可选的 speed 参数规定效果的时长。它可以取以下值："slow"、"fast" 或毫秒。
可选的 callback 参数是动画完成后所执行的函数名称。
http://www.w3school.com.cn/tiy/t.asp?f=jquery_animation2
<!DOCTYPE html>
<html>
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
var div=$("div");
div.animate({left:'100px'},"slow");
div.animate({fontSize:'3em'},"slow");
});
});
</script>
</head>
<body>
<button>开始动画</button>
<p>默认情况下，所有 HTML 元素的位置都是静态的，并且无法移动。如需对位置进行操作，记得首先把元素的 CSS position 属性设置为 relative、fixed 或 absolute。</p>
<divstyle="background:#98bf21;height:100px;width:200px;position:absolute;">HELLO</div>
</body>
</html>
动作执行完成之后调用callback
<html>
<head>
<scripttype="text/javascript"src="/jquery/jquery.js"></script>
<scripttype="text/javascript">
$(document).ready(function(){
$("button").click(function(){
$("p").hide(1000,function(){
alert("The paragraph is now hidden");
});
});
});
</script>
</head>
<body>
<buttontype="button">Hide</button>
<p>This is a paragraph with littlecontent.</p>
</body>
</html>
获取html变量
<html>
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
alert("Value: " + $("#test").val());
});
});
</script>
</head>
<body>
<p>姓名：<inputtype="text" id="test" value="米老鼠"></p>
<button>显示值</button>
</body>
</html>
弹出对话框：
技术实现：页面当中本来就有隐藏的对话框，点击弹出对话框是将原先的隐藏的对话框展示
<html>
<head>
<metahttp-equiv="Content-Type"content="text/html; charset=utf-8">
<!-- 引入弹出登录对话框相关js和css -->
<!-- <linkrel="stylesheet" type="text/css"href="/App/Home/View/Index/login_box.css"> -->
<scriptlanguage="javascript"type="text/javascript"
src="/App/Home/View/Index/login_box.js"></script>
<scriptsrc="jquery-1.11.1.min.js"></script>
<script>
$(document).ready(function() {
$("#button1").click(function() {
$("#popup").css({
"visibility" : "visible",
"display" : "block",
"position" : "absolute",
"top" : "100px"
});
alert
});
$("#button2").click(function() {
$("#popup").css({
"visibility" : "hiden",
"display" : "none"
});
});
});
</script>
</head>
<body>
<p>弹出对话框</p>
<buttonid="button1"type="button">弹出loginbox</button>
<buttonid="button2"type="button">退出loginbox</button>
<p>演示带有不同参数的 fadeToggle() 方法。</p>
<br>
<br>
<divclass="sample_popup"id="popup"
style="visibility:hidden; display:none;">
<divclass="menu_form_header"id="popup_drag">您好，请先登录：</div>
<divclass="menu_form_body">
<formaction={$login_url}method="get">
Username:<inputclass="field"type="text"name="user_name"
onfocus="select();"/>
Password:<inputclass="field"type="password"name="user_password"
onfocus="select();"/>
<inputclass="btn"type="submit"value="Submit"/>
</form>
</div>
</div>
</body>
</body>
</html>
jQuery ajax
jQueryload() 方法
jQueryload() 方法是简单但强大的 AJAX 方法。
load()方法从服务器加载数据，并把返回的数据放入被选元素中。
读入外部文件写入到标签当中
<html>
<head>
<scriptsrc="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$("#btn1").click(function(){
$('#test').load('/example/jquery/demo_test.txt');
})
})
</script>
</head>
<body>
<h3id="test">请点击下面的按钮，通过 jQuery AJAX 改变这段文本。</h3>
<buttonid="btn1" type="button">获得外部的内容</button>
</body>
</html>
HTTP 请求：GET POST
两种在客户端和服务器端进行请求-响应的常用方法是：GET 和 POST。
· GET - 从指定的资源请求数据
· POST - 向指定的资源提交要处理的数据
GET 基本上用于从服务器获得（取回）数据。注释：GET 方法可能返回缓存数据。
POST 也可用于从服务器获取数据。不过，POST 方法不会缓存数据，并且常用于连同请求一起发送数据。
$.get(URL,callback);
callback为回调函数，当执行完成后调用，
$.get("demo_test.asp",function(data,status){}
· data – 返回结果
· status 包含调用的状态
获得返回值
<!DOCTYPEhtml>
<html>
<head>
<metahttp-equiv="Content-Type"content="text/html; charset=utf-8">
<scriptsrc="jquery-1.11.1.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
$.get("test.php",function(data,status){
if (data<2){
alert("数据：" + data +"\n状态：" + status);
}
});
});
});
</script>
</head>
<body>
<button>向页面发送 HTTP GET 请求，然后获得返回的结果</button>
</body>
</html>
test.php
<?php
echo 1;
ajax
AJAX 是与服务器交换数据并更新部分网页的艺术，在不重新加载整个页面的情况下。
XMLHttpRequest 是 AJAX的基础。
XMLHttpRequest 用于在后台与服务器交换数据。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。
为了应对所有的现代浏览器，包括 IE5 和 IE6，请检查浏览器是否支持 XMLHttpRequest 对象。如果支持，则创建 XMLHttpRequest 对象。如果不支持，则创建 ActiveXObject ：
var xmlhttp;
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else
{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
向服务器发送请求
ajax向服务器发送请求是通过使用url地址传递参数实现的
xmlhttp = new XMLHttpRequest();
var url ="/App/Home/View/Index/review.php?id=10";
alert(url);// 检验js传值是否成功
xmlhttp.open("GET", url, true);
xmlhttp.send();
当url直接为一个txt文件，则该txt文件直接输出。
获得服务器响应
responseText属性返回字符串形式的响应，因此您可以这样使用：
document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
<html>
<head>
<scripttype="text/javascript">
function loadXMLDoc()
{
var xmlhttp;
//浏览器版本适应
if (window.XMLHttpRequest)
{// codefor IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else
{// codefor IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
//页面状态改变就绪函数
xmlhttp.onreadystatechange=function()
{
//当 readyState等于 4 且状态为 200 时，表示响应已就绪，进行响应
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
//"myDiv"为html标签位置 该处页面获得服务器响应
document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
}
}
xmlhttp.open("GET","/ajax/test1.txt",true);
xmlhttp.send();
}
</script>
</head>
<body>
<divid="myDiv"><h2>Let AJAX change thistext</h2></div>
//点击按钮调用<head>标签内的loadXMLDoc()函数，在页面不刷新的情况下进行页面修改
<buttontype="button"onclick="loadXMLDoc()">通过 AJAX 改变内容</button>
</body>
</html>
/ajax/test1.txt内容
123456789
数据库
DBMS数据库管理系统(Database Management System)是一种操纵和管理数据库的大型软件，用于建立、使用和维护数据库，简称DBMS。
html
列表
无序列表
无序列表是一个项目的列表，此列项目使用粗体圆点（典型的小黑圆圈）进行标记。
无序列表始于 <ul> 标签。每个列表项始于 <li>。
有序列表
同样，有序列表也是一列项目，列表项目使用数字进行标记。
有序列表始于 <ol> 标签。每个列表项始于 <li> 标签。
css
页面（标签）覆盖是使用z-index，只有标签指定position才可以；
例如标签1：
position: fixed; opacity: 0.1; z-index:1000;
例如标签2：
position: absolute; opacity: 0.1; z-index: 2000;
例如标签3：
position: absolute; opacity: 0.1; z-index:3000;
则标签3覆盖标签2，标签2覆盖标签1.
http://www.cnblogs.com/gisdream/archive/2010/06/10/1755891.html
扫一扫
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
