Ajax星期天干点儿啥

  hi

又到礼拜五,结果这周没有电影去看,没有衣裳去买,没有妹子…当我没说

1、正则表明式-完结篇

—工具类开发—

 

<?php
/*
* PHP 正则表明式工具类
*
描述:举办正则表明式匹配,有常用的正则表达式以及允许用户自定义正则表明式举办匹配
*/

class regexTool{
//定义常用正则表明式,并用数组对的法门存储
private $validate=array(
‘require’ => ‘/.+/’,
’email’ =>
‘/^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/’,
‘url’ =>
‘/^http(s?):\/\/(?:[A-za-z0-9-]+\.)+[A-za-z]{2,4}(?:[\/\?#][\/=\?%\-&~`@[\]\’:+!\.#\w]*)?$/’,
‘currency’ => ‘/^\d+(\.\d+)?$/’,
‘number’ => ‘/^\d+$/’,
‘zip’ => ‘/^\d{6}$/’,
‘integer’ => ‘/^[-\+]?\d+$/’,
‘double’ => ‘/^[-\+]?\d+(\.\d+)?$/’,
‘english’ => ‘/^[A-Za-z]+$/’,
‘qq’ => ‘/^\d{5,11}$/’,
‘mobile’ => ‘/^1(3|4|5|7|8)\d{9}$/’,
);
//定义其他性能
private $returnMatchResult=false; //重返类型判断
private $fixMode=null; //修正格局
private $matches=array(); //存放匹配结果
private $isMatch=false;

//构造函数,实例化后传出默认的五个参数
public function __construct($returnMatchResult=false,$fixMode=null){
$this->returnMatchResult=$returnMatchResult;
$this->fixMode=$fixMode;
}

//判断再次来到结果类型,为匹配结果matches依旧配合成功与否isMatch,并调用再次回到方法
private function regex($pattern,$subject){
if(array_key_exists(strtolower($pattern), $this->validate))
$pattern=$this->validate[$pattern].$this->fixMode;
//判断后再连接上修正形式作为匹配的正则表明式
$this->returnMatchResult ?
preg_match_all($pattern, $subject,$this->matches):
$this->isMatch=preg_match($pattern, $subject)===1;
return $this->getRegexResult();
}

//再次来到方法
private function getRegexResult(){
if($this->returnMatchResult){
return $this->matches;
}else{
return $this->isMatch;
}
}

//允许用户自定义切换再次来到类型
public function toggleReturnType($bool=null){
if(empty($bool)){
$this->returnMatchResult=!$this->returnMatchResult;
}else{
$this->returnMatchResult=is_bool($bool) ? $bool : (bool)$bool;
}
}

//下边则是数码表明办法
public function setFixMode($fixMode) {
$this->fixMode = $fixMode;
}

public function noEmpty($str) {
return $this->regex(‘require’, $str);
}

public function isEmail($email) {
return $this->regex(’email’, $email);
}

public function isMobile($mobile) {
return $this->regex(‘mobile’, $mobile);
}

public function check($pattern, $subject) {
return $this->regex($pattern, $subject);
}
}

实例化举办验证

<?php
/*
* PHP 正则表达式验证文件
*/
//包含类定义文件
require_once ‘regexTool.class.php’;

$regex=new regexTool();
$regex->setFixMode(‘U’); //设定修正形式为懒惰形式U
$r=$regex->isEmail(‘asdfads@qq.com’);
show($r);

//使用往日学过的show函数来拓展验证
/*
* Description:PHP 正则表达式函数
*
* @name:show
* @description:output debug
* @param $var:input data
* @return void
*
*/

function show($var=null){
if(empty($var)){
echo ‘null’;
}elseif(is_array($var)||is_object($var)){
//array,object
echo ‘<pre>’;
print_r($var);
echo ‘</pre>’;
}else{
//string,int,float…
echo $var;
}
}

—验证表单—

即利用方法之一

html写文件如下

<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN”>
<html>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=”>
<title>用户注册</title>
</head>
<body>
<form action=”regCheck.php” method=”post”>
用户名<INPUT type=”text” name=”username” id=”username” value=””
/><br/><br/>
email<INPUT type=”text” name=”email” id=”email” value=””
/><br/><br/>
手机号<INPUT type=”text” name=”mobile” id=”mobile” value=””
/><br/><br/>
<INPUT type=”submit” value=”注册” />
</form>
</body>
</html>

相对应的在regCheck.php中改

if(!$regex->noEmpty($_POST[‘username’])) exit(‘用户名为空’);

—仿(山寨版)smarty简易模板引擎—

–允许程序猿分前端后端分开开发

–模板引擎工作原理:获取模板源文件,编译模板,输出给用户(也就是关系起前后端,做“接口”一样)

–格局单元:总格局,即$pattern;子形式,即()中的东西,即一个自定义的原子,也改成情势单元

具体运用中,preg_match_all会匹配到两种格局

preg_match_all结果为二维数组,其中$matches[0][0]为总情势

任何为子情势

 

 

 

 

2、jQuery

—简介—

JQuery是继prototype将来又一个突出的Javascript库。它是轻量级的js库
,它很是CSS3,还卓绝各类浏览器(IE 6.0+, FF1.5+, Safari 2.0+, Opera 9.0+),jQuery2.0及后续版本将不再帮忙IE6/7/8浏览器。jQuery使用户能更有利于地拍卖HTML标准通用标记语言下的一个用到)、events、实现动画效果,并且有利于地为网站提供AJAX互相。jQuery还有一个相比大的优势是,它的文档表明很全,而且各样应用也说得很详细,同时还有为数不少成熟的插件可供选拔。jQuery可以使用户的html页面保持代码和html内容分别,也就是说,不用再在html里面插入一堆js来调用命令了,只需要定义id即可。

jQuery是一个匹配多浏览器的javascript库,核情绪念是write
less,do more(写得更少,做得更多)。jQuery在二〇〇六年八月由美利哥人John
Resig
在伦敦的barcamp发布,吸引了来自世界各地的众多JavaScript高手参与,由DaveMethvin指导团队进行支付。近期,jQuery已经成为最盛行的javascript库,在世界前10000个访问最多的网站中,有超过55%在使用jQuery。

jQuery是免费、开源的,使用MIT许可协议。jQuery的语法设计能够使开发者更是方便,例如操作文档对象、选择DOM要素、制作动画效果、事件处理、使用Ajax以及其他职能。除此以外,jQuery提供API让开发者编写插件。其模块化的利用方法使开发者能够很自在的支出出功用强大的静态或动态网页。

jQuery,顾名思义,也就是JavaScript和询问(Query),即是襄助JavaScript开发的库。(摘选自百度百科)

–环境搭建

下载1.9.0安居版本,保存在当地就好,然后再用javascript的时候包含进就行了

<script src=”http://libs.baidu.com/jquery/1.9.0/jquery.js
type=”text/javascript”></script>

–初体验

jQuery就是js的函数封装,形成库(私以为其更有益对付对象)

相比较于原JS,它一般的话更简便易行

<!DOCTYPE html>
<html>
<head>
<title>#id选择器</title>
<script src=”http://libs.baidu.com/jquery/1.9.0/jquery.js
type=”text/javascript”></script>
</head>

<body>
<div>div的内容</div>
<div>Hello world!</div>

<script type=”text/javascript”>
$(” div “).html(“Hello iMooc!”); //填写相应代码
</script>
</body>
</html>

此地$()表示异常一定字符内的因素

—基础选用器—

–#id选择器

<div id=”divtest”>div的内容</div>
<div id=”default”></div>
<script type=”text/javascript”>
$(“#default”).html($(“#divtest”).html());//在id号为“default”的要素中显得id号为“divtest”元素的始末。
</script>

着力使用办法是$(“#id”)

–element选择器

据悉元素的名称能够搜寻到该因素,并调用css()、attr()等主意设置对所取元素的操作。

<button id=”btntest”>点我</button>
<script type=”text/javascript”>
$(“button”).attr(“disabled”,”true”);
</script>

–.class选择器

遵照类的称呼选拔元素,其他操作看似

<div class=”red”>立正,向自己这边看齐</div>
<div class=”green”>我先歇歇脚</div>

<script type=”text/javascript”>
var $redHTML = $(“.red”).html();
$(“.green”).html($redHTML);
</script>

–*选择器

采用器中的参数就一个“*”,既没有“#”号,也尚无“.”号。 由于该接纳器的特殊性,它常与其余因素结合使用,表示收获其他因素中的全体子元素。

实践表明,由于拔取*选取器获取的是一体元素,因而,有些浏览器将会相比较缓慢,这些采用器也亟需小心翼翼采用。

<form action=”#”>
<input id=”Button1″ type=”button” value=”button” />
<input id=”Text1″ type=”text” />
<input id=”Radio1″ type=”radio” />
<input id=”Checkbox1″ type=”checkbox” />
</form>

<script type=”text/javascript”>
$(“form *”).attr(“disabled”, “true”);
</script>

–sele1,sele2,seleN选择器

突发性需要规范的挑选随机六个指定的要素,类似于从文具盒中挑选出多根自已喜欢的笔,就需要调用sele1,sele2,seleN选拔器,它的调用格式如下:

$(“sele1,sele2,seleN”)

个中参数sele1、sele2到seleN为可行采取器,每个采纳器之间用“,”号隔开,它们得以是事先提及的各种类型选用器,如$(“#id”)、$(“.class”)、$(“selector”)拔取器等。

<div class=”red”>选我吧!我是red</div>
<div class=”green”>选我吧!我是green</div>
<div class=”blue”>选我吧!我是blue</div>

<script type=”text/javascript”>
$(“.red,.green”).html(“hi,大家的楷模很美哦!”);
</script>

–ance desc选择器

本节初始,我们将介绍层次性接纳器。

在实际应用开发中,平常是四个元素嵌套在一道,形成复杂的层系关系,通过层次采用器,可以很快稳定某一层次的一个或多少个要素,ance
desc采纳器就是内部之一,它的调用格式如下:

$("ance desc")

内部ance
desc是行使空格隔开的两个参数。ance参数(ancestor祖先的简写)表示父元素;desc参数(descendant后代的简写)表示后代元素,即包括子元素、孙元素等等。多少个参数都足以通过采纳器来拿到。比如家族姓氏“div”,家族几代人里,都著名字里带“span”的,就可以用这多少个ance
desc选用器把这几人给一定出来。

<div>码农家族
<p>
<label></label>
</p>
<label></label>
</div>

<script type=”text/javascript”>
$(“div label”).css(“background-color”,”blue”);
</script>

–parent>child选择器

与上一节牵线的ance desc选用器相相比,parent > child拔取器的界定要小些,它所选拔的目标是子集元素,相当于一个家庭中的子辈们,但不包括孙辈,它的调用格式如下:

$(“parent > child”)

child参数获取的元素都是parent接纳器的子元素,它们中间通过“>”符号来代表一种层次关系。

<div>
码农家族
<p>
<label></label>
</p>
<label></label>
<label></label>
</div>
<label></label>

<script type=”text/javascript”>
$(“div>label”).css(“border”, “solid 5px red”);
</script>

–prev+next选择器

俗话说“远亲不如近邻”,而通过prev + next选用器就可以找寻与“prev”元素紧邻的下一个“next”元素,格式如下:

$(“prev + next”)

中间参数prev为任何有效的采纳器,参数“next”为此外一个有效接纳器,它们之间的“+”表示一种左右的层次关系,也就是说,“prev”元素最紧邻的下一个因素由“next”采取器再次来到的同时只回去唯的一个要素。

<div>
码农家族
<label></label>
<p></p>
<label></label>
<label></label>
</div>
<label></label>

<script type=”text/javascript”>
$(“p+label”).css(“background-color”,”red”);
</script>

小心,这里的next是要输入下一个要找的分类器标识,不是从来输入next

–prev~siblings选择器

与上一节中介绍的prev + next层次选用器相同,prev ~ siblings采纳器也是摸索prev
元素之后的隔壁元素,但前者只收获第一个相邻的要素,而后人则得到prev
元素前面所有相邻的元素,它的调用格式如下:

$(“prev ~ siblings”)

其中参数prev与siblings两者之间通过“~”符号形成一种层次相邻的涉嫌,表明siblings拔取器获取的元素都是prev元素之后的同辈元素。

<div>
码农家族
<label></label>
<p></p>
<label></label>
<label></label>
</div>
<label></label>

<script type=”text/javascript”>
$(“p~label”).css(“border”, “solid 1px red”);
$(“p~label”).html(“大家都是p先生的粉丝”);
</script>

—过滤性选取器—

–:first/:last过滤选取器

本章我们介绍过滤拔取器,该类型的拔取器是依照某过滤规则举行元素的配合,书写时以“:”号起始,平常用于查找集合元素中的某一职位的单个元素。

在jQuery中,倘使想取得一组同样标签元素中的第1个因素该咋办吗?

在底下的以身作则代码中你可能注意到我们会使用

$(“li:first”)

注意:挥洒时以“:”号起先。

<div>改变最终一行”苹果”背景颜色:</div>
<ol>
<li>葡萄</li>
<li>香蕉</li>
<li>橘子</li>
<li>西瓜</li>
<li>苹果</li>
</ol>

<script type=”text/javascript”>
$(“li:last”).css(“background-color”, “red”);
</script>

–:eq(index)过滤采取器

若是想从一组标签元素数组中,灵活采纳随机的一个标签元素,大家得以应用

:eq(index)

中间参数index表示索引号(即:一个整数),它从0起头,假如index的值为3,表示选拔的是第4个因素

<div>改变中间行”葡萄”背景颜色:</div>
<ol>
<li>橘子</li>
<li>香蕉</li>
<li>葡萄</li>
<li>苹果</li>
<li>西瓜</li>
</ol>

<script type=”text/javascript”>
$(“li:eq(2)”).css(“background-color”, “#60F”);
</script>

–:contains(text)过滤接纳器

与上一节牵线的:eq(index)采纳器按索引查找元素相比,有时候我们或许希望按照文件内容来寻找一个或六个元素,那么使用:contains(text)慎选器会更加惠及,
它的功效是选项包含指定字符串的整整元素,它一般与此外因素结合使用,获取包含“text”字符串内容的一体要素对象。其中参数text意味着页面中的文字。

<div>改变包含”jQuery”字符内容的背景象:</div>
<ol>
<li>强大的”jQuery”</li>
<li>”javascript”也很实用</li>
<li>”jQuery”前端必学</li>
<li>”java”是一种开发语言</li>
<li>前端利器——”jQuery”</li>
</ol>

<script type=”text/javascript”>
$(“li:contains(‘jQuery’)”).css(“background”, “green”);
</script>

–:has(selector)过滤采纳器

除此之外在上一小节介绍的应用带有的字符串内容过滤元素之外,仍可以够选取含有的元素名称来过滤,:has(selector)过滤选拔器的意义是拿到选用器中富含指定元素名称的百分之百元素,其中selector参数就是包含的元素名称,是被含有元素。

<div>改变包含”label”元素的背景象:</div>
<ol>
<li><p>我是P先生</p></li>
<li><label>L妹纸就是我</label></li>
<li><p>我也是P先生</p></li>
<li><label>我也是L妹纸哦</label></li>
<li><p>P先生就是自个儿啊</p></li>
</ol>

<script type=”text/javascript”>
$(“li:has(‘label’)”).css(“background-color”, “blue”);
</script>

–:hidden过滤选拔器

:hidden过滤采取器的法力是取得全体不可见的要素,这多少个不可见的要素中概括type属性值为hidden的元素。

<h3>展现隐藏元素的情节</h3>
<input id=”hidstr” type=”hidden” value=”我已隐藏起来”/>
<div></div>

<script type=”text/javascript”>
var $strHTML = $(“input:hidden”).val();
$(“div”).html($strHTML);
</script>

–:visible过滤拔取器

与上一节的:hidden过滤选拔器相反,:visible过滤采纳器获取的是整个可见的因素,也就是说,只要不将元素的display属性值设置为“none”,那么,都得以透过该接纳器获取。

<h3>修改可见“水果”的背景象</h3>
<ul>
<li style=”display:none”>橘子</li>
<li style=”display:block”>香蕉</li>
<li style=”display:”>葡萄</li>
<li>苹果</li>
<li style=”display:none”>西瓜</li>
</ul>

<script type=”text/javascript”>
$(“li:visible”).css(“background-color”,”blue”);
</script>

 

 

 

 

 

相关文章