hi
周一完全的不在狀態。。。中午還去觀戰，沒有睡覺的我，晚上的smarty不知道能不能做完，加油吧
1、jQuery
---過濾性選擇器（二）---
--[attribute=value]屬性選擇器
屬性作為DOM元素的一個重要特征，也可以用於選擇器中，從本節開始將介紹通過元素屬性獲取元素的選擇器，[attribute=value]屬性選擇器的功能是獲取與屬性名和屬性值完全相同的全部元素，其中[]是專用於屬性選擇器的括號符，參數attribute表示屬性名稱，value參數表示屬性值。
<h3>改變"title"屬性值為"蔬菜"的背景色</h3>
<ul>
<li title="蔬菜">茄子</li>
<li title="水果">香蕉</li>
<li title="蔬菜">芹菜</li>
<li title="水果">蘋果</li>
<li title="水果">西瓜</li>
</ul>
<script type="text/javascript">
$("li[title='蔬菜']").css("background-color", "green");
與[attribute=value]屬性選擇器正好相反，[attribute!=value]屬性選擇器的功能是獲取不包含屬性名，或者與屬性名和屬性值不相同的全部元素，其中[]是專用於屬性選擇器的括號符，參數attribute表示屬性名稱，value參數表示屬性值。
--[attribute*=value]屬性選擇器
介紹一個功能更為強大的屬性選擇器[attribute*=value]，它可以獲取屬性值中包含指定內容的全部元素，其中[]是專用於屬性選擇器的括號符，參數attribute表示屬性名稱，value參數表示對應的屬性值。
<h3>改變"title"屬性值包含"果"的背景色</h3>
<ul>
<li title="蔬菜">茄子</li>
<li title="水果">香蕉</li>
<li title="蔬菜">芹菜</li>
<li title="人參果">小西紅柿</li>
<li title="水果">西瓜</li>
</ul>
<script type="text/javascript">
$("li[title*='果']").css("background-color", "green");
--:first-child子元素過濾選擇器
通過上面章節的學習，我們知道使用:first過濾選擇器可以獲取指定父元素中的首個子元素，但該選擇器返回的只有一個元素，並不是一個集合，而使用:first-child子元素過濾選擇器則可以獲取每個父元素中返回的首個子元素，它是一個集合，常用多個集合數據的選擇處理。
<h3>改變每個"蔬菜水果"中第一行的背景色</h3>
<ol>
<li>芹菜</li>
<li>茄子</li>
<li>蘿卜</li>
<li>大白菜</li>
<li>西紅柿</li>
</ol>
<ol>
<li>橘子</li>
<li>香蕉</li>
<li>葡萄</li>
<li>蘋果</li>
<li>西瓜</li>
</ol>
<script type="text/javascript">
$("li:first-child").css("background-color", "green");
$("li:last-child").css("background-color", "blue");
與:first-child子元素過濾選擇器功能相反，:last-child子元素過濾選擇器的功能是獲取每個父元素中返回的最後一個子元素，它也是一個集合，常用多個集合數據的選擇處理。
---表單選擇器---
--:input表單選擇器
如何獲取表單全部元素？:input表單選擇器可以實現，它的功能是返回全部的表單元素，不僅包括所有<input>標記的表單元素，而且還包括<textarea>、<select> 和 <button>標記的表單元素，因此，它選擇的表單元素是最廣的。
<h3>修改全部表單元素的背景色</h3>
<form id="frmTest" action="#">
<input type="button" value="Input Button" /><br />
<select>
<option>Option</option>
</select><br />
<textarea rows="3" cols="8"></textarea><br />
<button>
Button</button><br />
</form>
<script type="text/javascript">
$("#frmTest:input").addClass("bg_blue");
</script>
--:text表單文本選擇器
:text表單文本選擇器可以獲取表單中全部單行的文本輸入框元素，單行的文本輸入框就像一個不換行的字條工具，使用非常廣泛。
<h3>修改多個單行輸入框元素的背景色</h3>
<form id="frmTest" action="#">
<input type="text" id="Text1" value="我是小紙條"/><br />
<textarea rows="3" cols="8"></textarea><br />
<input type="text" id="Text2" value="我也是小紙條"/><br />
<button>
Button</button><br />
</form>
<script type="text/javascript">
$("#frmTest :text").addClass("bg_blue");
</script>
--:password表單密碼選擇器
如果想要獲取密碼輸入文本框，可以使用:password選擇器，它的功能是獲取表單中全部的密碼輸入文本框元素。
<h3>修改多個密碼輸入框元素的背景色</h3>
<form id="frmTest" action="#">
<input type="text" id="Text1" value="單行文本輸入框"/><br />
<input type="password" id="Text2" value="密碼文本輸入框"/><br />
<textarea rows="3" cols="8">區域文本輸入框</textarea><br />
<input type="password" id="Text3" value="密碼文本輸入框"/><br />
<button>
Button</button><br />
</form>
<script type="text/javascript">
$("#frmTest :password").addClass("bg_red");
</script>
</body>
--:radio單選按鈕選擇器
表單中的單選按鈕常用於多項數據中僅選擇其一，而使用:radio選擇器可輕松獲取表單中的全部單選按鈕元素。
<h3>將表單中單選按鈕設為不可用</h3>
<form id="frmTest" action="#">
<input type="button" value="Input Button" /><br />
<input id="Radio1" type="radio" />
<label for="Radio1">
男</label>
<input id="Radio2" type="radio" />
<label for="Radio2">
女</label><br />
<button>
Button</button><br />
</form>
<script type="text/javascript">
$("#frmTest :radio").attr("disabled","true");
</script>
--:checkbox復選框選擇器
表單中的復選框常用於多項數據的選擇，使用:checkbox選擇器可以快速定位並獲取表單中的復選框元素。
<h3>將表單的全部復選框設為不可用</h3>
<form id="frmTest" action="#">
<input type="button" value="Input Button" /><br />
<input id="Checkbox1" type="checkbox" />
<label for="Checkbox1">
西紅柿</label><br />
<input id="Checkbox2" type="checkbox" />
<label for="Checkbox2">
茄子</label><br />
<input id="Checkbox3" type="checkbox" />
<label for="Checkbox3">
黃瓜</label><br />
<button>
Button</button><br />
</form>
<script type="text/javascript">
$("#frmTest :checkbox").attr("disabled","true");
</script>
--:submit提交按鈕選擇器
通常情況下，一個表單中只允許有一個“type”屬性值為“submit”的提交按鈕，使用:submit選擇器可獲取表單中的這個提交按鈕元素。
<h3>修改表單中提交按鈕的背景色</h3>
<form id="frmTest" action="#">
<input type="button" value="Input Button" /><br />
<input type="submit" value="點我就提交了" /><br />
<button>
Button</button><br />
</form>
<script type="text/javascript">
$("#frmTest input:submit").addClass("bg_red");
</script>
--:image圖像域選擇器
當一個<input>元素的“type”屬性值設為“image”時，該元素就是一個圖像域，使用:image選擇器可以快速獲取該類全部元素。
<h3>修改表單中圖像元素的背景色</h3>
<form id="frmTest" action="#">
<input type="image" src="http://www.bkjia.com/uploads/allimg/151103/1A3245302-0.jpg" /><br />
<br />
<img alt="" src="http://www.bkjia.com/uploads/allimg/151103/1A3245302-0.jpg" /><br />
</form>
<script type="text/javascript">
$("#frmTest :image").addClass("bg_red");
</script>
--:button表單按鈕選擇器
表單中包含許多類型的按鈕，而使用:button選擇器能獲取且只能獲取“type”屬性值為“button”的<input>和<button>這兩類普通按鈕元素。
<h3>修改表單中按鈕元素的背景色</h3>
<form id="frmTest" action="#">
<input id="Button1" type="button" value="我是普通按鈕" /><br />
<input id="Submit1" type="submit" value="點我就提交" /><br />
<button> 我也是普通按鈕 </button><br />
</form>
<script type="text/javascript">
$("#frmTest :button").addClass("bg_blue");
</script>
--:checked選中狀態選擇器
有一些元素存在選中狀態，如復選框、單選按鈕元素，選中時“checked”屬性值為“checked”，調用:checked可以獲取處於選中狀態的全部元素。
<h3>將處於選中狀態的元素設為不可用</h3>
<form id="frmTest" action="#">
<input id="Radio1" type="radio" checked="checked" />
<label id="Label1" for="Radio1">
蘋果</label><br />
<input id="Radio2" type="radio" />
<label id="Label2" for="Radio2">
桔子</label><br />
<input id="Checkbox1" type="checkbox" checked="checked" />
<label id="Label3" for="Checkbox1">
荔枝</label><br />
<input id="Checkbox2" type="checkbox" />
<label id="Label4" for="Checkbox2">
葡萄</label><br />
<input id="Checkbox3" type="checkbox" checked="checked" />
<label id="Label5" for="Checkbox3">
香蕉</label><br />
</form>
<script type="text/javascript">
$("#frmTest :checked").attr("disabled", true);
</script>
--:selected選中狀態選擇器
與:checked選擇器相比，:selected選擇器只能獲取<select>下拉列表框中全部處於選中狀態的<option>選項元素。
<h3>獲取處於選中狀態元素的內容</h3>
<form id="frmTest" action="#">
<select id="Select1" multiple="multiple">
<option value="0">蘋果</option>
<option value="1" selected="selected">桔子</option>
<option value="2">荔枝</option>
<option value="3" selected="selected">葡萄</option>
<option value="4">香蕉</option>
</select><br /><br />
<div id="tip"></div>
</form>
<script type="text/javascript">
var $txtOpt = $("#frmTest :selected").text();
$("#tip").html("選中內容為:" + $txtOpt);
</script>
----------------------------------------------------------------
2、正則表達式
這裡要做的引擎模板的作用是，替換變量輸出。
需要的是模板文件.class，編譯源文件.php
--template.class.php
<?php
/*
* 描述：仿smarty模板引擎類文件
*
*/
class template{
private $templateDir; //用來存儲源文件所在目錄
private $compileDir; //用來存放編譯後的文件目錄
private $leftTag='{#'; //要替換的對象的標記,smarty默認是{
private $rightTag='#}';
private $currentTemp=''; //用來存儲當前正在編譯的模板文件名
private $outputHtml; //用來存放currentTemp的HTML代碼
private $varpool=array(); //變量池；模板編譯時存放變量
public function __construct($templateDir,$compileDir,$leftTag=null,$rightTag=null){
$this->templateDir=$templateDir;
$this->compileDir=$compileDir;
if (!empty($leftTag)) $this->leftTag=$leftTag; //傳遞左右標記的時候，需要做一下非空的判斷
if (!empty($rightTag)) $this->rightTag=$rightTag;
}
//assign函數——把模板中需要用到的變量，放到地址池中，並給定標記
public function assign($tag,$var){
$this->varpool[$tag]=$var;
}
//與上面的assign對應，從地址池中取出變量
public function getVar($tag){
return $this->varpool[$tag];
}
//getSourceTemplate：獲取編譯的源文件_需要知道文件名，和完整的路徑（所以要有拓展名
public function getSourceTemplate($templateName,$ext='.html'){
$this->currentTemp=$templateName;
$sourceFilename=$this->templateDir.$this->currentTemp.$ext;
$this->outputHtml=file_get_contents($sourceFilename);
}
//compileTemplate:編譯方法
public function compileTemplate($templateName=null,$ext='.html'){
$templateName=empty($templateName)? $this->currentTemp:$templateName;
//核心代碼，正則編譯
//\{#\$(\w+)#\}
$pattern='/\{#\$(\w+)#\}/';
//更加清晰的寫法$pattern='/'.preg_quote($this->leftTag).' *\$([a-zA-Z_]\w*) *'.preg_quote($this->rightTag).'/';
//核心代碼要做的就是找到標記內的東西，然後替換為php可以識別的內容
$this->outputHtml=preg_replace($pattern, '<?php echo $this->getVar(\'$1\')?>', $this->outputHtml);
//注意這裡的preg_replace的用法，$1表示匹配的子模式
//下面生成目標文件，同樣也需要完整的目標路徑
$compiledFilename=$this->compileDir.md5($templateName).$ext;
file_put_contents($compiledFilename,$this->outputHtml);
}
public function display($templateName = null, $ext = '.html') {
$templateName = empty($templateName) ? $this->currentTemp : $templateName;
include_once $this->compileDir.md5($templateName).$ext;
}
}
--index.php
<?php
/*
* 山寨模板引擎測試文件
*/
//包含文件
require_once 'template.class.php';
//獲取路徑,basedir根目錄
$baseDir=str_replace('\\', '/',dirname(__FILE__));
$temp=new template($baseDir.'/source/', $baseDir.'/compliled/');
//變量池
$temp->assign('pagetitle', '山寨版smarty');
$temp->assign('test','imooc女神');
//
$temp->getSourceTemplate('index');
$temp->compileTemplate();
$temp->display();
--幾個要注意的是
按照屬性+方法，流水線一樣編譯就好
然後，一些服務要開，否則像我一樣，還要調試。。。
祝大家好運。
