介紹一個(gè)功能更為強(qiáng)大的屬性選擇器[attribute*=value]，它可以獲取屬性值中包含指定內(nèi)容的全部元素，其中[]是專用于屬性選擇器的括號(hào)符，參數(shù)attribute表示屬性名稱，value參數(shù)表示對(duì)應(yīng)的屬性值。

<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子元素過(guò)濾選擇器

如果想要獲取密碼輸入文本框，可以使用:password選擇器，它的功能是獲取表單中全部的密碼輸入文本框元素。

表單中的單選按鈕常用于多項(xiàng)數(shù)據(jù)中僅選擇其一，而使用:radio選擇器可輕松獲取表單中的全部單選按鈕元素。

表單中的復(fù)選框常用于多項(xiàng)數(shù)據(jù)的選擇，使用:checkbox選擇器可以快速定位并獲取表單中的復(fù)選框元素。

通常情況下，一個(gè)表單中只允許有一個(gè)“type”屬性值為“submit”的提交按鈕，使用:submit選擇器可獲取表單中的這個(gè)提交按鈕元素。

當(dāng)一個(gè)<input>元素的“type”屬性值設(shè)為“image”時(shí)，該元素就是一個(gè)圖像域，使用:image選擇器可以快速獲取該類全部元素。

表單中包含許多類型的按鈕，而使用:button選擇器能獲取且只能獲取“type”屬性值為“button”的<input>和<button>這兩類普通按鈕元素。

有一些元素存在選中狀態(tài)，如復(fù)選框、單選按鈕元素，選中時(shí)“checked”屬性值為“checked”，調(diào)用:checked可以獲取處于選中狀態(tài)的全部元素。

<h3>將處于選中狀態(tài)的元素設(shè)為不可用</h3>
<form id="frmTest" action="#">
<input id="Radio1" type="radio" checked="checked" />
<label id="Label1" for="Radio1">
蘋(píng)果</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選中狀態(tài)選擇器

<h3>獲取處于選中狀態(tài)元素的內(nèi)容</h3>
<form id="frmTest" action="#">
<select id="Select1" multiple="multiple">
<option value="0">蘋(píng)果</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("選中內(nèi)容為:" + $txtOpt);
</script>

----------------------------------------------------------------

2、正則表達(dá)式

 這里要做的引擎模板的作用是，替換變量輸出。

需要的是模板文件.class，編譯源文件.php

--template.class.php

<?php
/*
* 描述：仿smarty模板引擎類文件
*
*/

class template{
PRivate $templateDir; //用來(lái)存儲(chǔ)源文件所在目錄
private $compileDir; //用來(lái)存放編譯后的文件目錄
private $leftTag='{#'; //要替換的對(duì)象的標(biāo)記,smarty默認(rèn)是{
private $rightTag='#}';
private $currentTemp=''; //用來(lái)存儲(chǔ)當(dāng)前正在編譯的模板文件名
private $outputHtml; //用來(lái)存放currentTemp的HTML代碼
private $varpool=array(); //變量池；模板編譯時(shí)存放變量

public function __construct($templateDir,$compileDir,$leftTag=null,$rightTag=null){
$this->templateDir=$templateDir;
$this->compileDir=$compileDir;
if (!empty($leftTag)) $this->leftTag=$leftTag; //傳遞左右標(biāo)記的時(shí)候，需要做一下非空的判斷
if (!empty($rightTag)) $this->rightTag=$rightTag;
}

//assign函數(shù)——把模板中需要用到的變量，放到地址池中，并給定標(biāo)記
public function assign($tag,$var){
$this->varpool[$tag]=$var;
}

//與上面的assign對(duì)應(yīng)，從地址池中取出變量
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+)#/}/';
//更加清晰的寫(xiě)法$pattern='/'.preg_quote($this->leftTag).' */$([a-zA-Z_]/w*) *'.preg_quote($this->rightTag).'/';
//核心代碼要做的就是找到標(biāo)記內(nèi)的東西，然后替換為php可以識(shí)別的內(nèi)容
$this->outputHtml=preg_replace($pattern, '<?php echo $this->getVar(/'$1/')?>', $this->outputHtml);
//注意這里的preg_replace的用法，$1表示匹配的子模式

//下面生成目標(biāo)文件，同樣也需要完整的目標(biāo)路徑
$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
/*
* 山寨模板引擎測(cè)試文件
*/

//包含文件
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();

 --幾個(gè)要注意的是

按照屬性+方法，流水線一樣編譯就好

然后，一些服務(wù)要開(kāi)，否則像我一樣，還要調(diào)試。。。

祝大家好運(yùn)。