週六乾點兒啥

時間 2019-11-18

標籤週六點兒简体版

原文原文鏈接

　　hijavascript

又到週六，結果這周沒有電影去看，沒有衣服去買，沒有妹子...當我沒說php

一、正則表達式-完結篇css

---工具類開發---html

<?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);
}
}java

實例化進行驗證jquery

<?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
*
*/數組

---驗證表單---

即便用方法之一

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]爲總模式

其餘爲子模式

二、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在2006年1月由美國人 John Resig在紐約的 barcamp發佈，吸引了來自世界各地的衆多JavaScript高手加入，由Dave Methvin率領團隊進行開發。現在，jQuery已經成爲最流行的javascript庫，在世界前10000個訪問最多的網站中，有超過55%在使用jQuery。

jQuery是免費、開源的，使用 MIT許可協議。jQuery的語法設計可使開發者更加便捷，例如操做文檔對象、選擇 DOM元素、製做動畫效果、事件處理、使用 Ajax以及其餘功能。除此之外，jQuery提供API讓開發者編寫插件。其模塊化的使用方式使開發者能夠很輕鬆的開發出功能強大的靜態或動態網頁。

jQuery，顧名思義，也就是JavaScript和查詢（Query），便是輔助JavaScript開發的庫。（摘選自百度百科）

--環境搭建

下載1.9.0穩定版本，保存在本地就好，而後再用javascript的時候包含進就好了

--初體驗

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」)

其中參數sele一、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>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。