风之力科技
股票代码:781340
400-718-5885或13605745691
service@nwpit.com

技术资讯

04Jun2016
点击

服务器端的HTML处理使用phpQuery

在我们每天的web开发的日常任务,有必要我们可以和客户端和服务器端代码工作。 我们写使用PHP业务逻辑和生成要显示在用户的浏览器的HTML。 然后,我们使用的框架如jQuery或原型,以提供客户端交互。

现在想想你可以如何使用服务器端PHP代码改变和操作生成的HTML。 phpQuery是将来到你的头脑的最终解决方案。 如果你还没有听说过phpQuery,你可能有兴趣在这篇文章中,因为我想给你一个简单的介绍phpQuery,并解释如何在实际项目中使用它。

什么是phpQuery

phpQuery是基于jQuery JavaScript库服务器端,可链,CSS3选择器驱动的文档对象模型(DOM)API。

这是官方给出的定义phpQuery项目页面 。 如果你已经使用了jQuery,那么你将有它如何简化需要DOM操作多任务的想法。 phpQuery正好提供了在您的服务器端PHP代码中所用的相同的功能。 您可以使用echo语句和类似的方法说再见凌乱的HTML代码生成。

你将有机会获得大多数在phpQuery,大致可分为以下提及的4个任务所提供的jQuery的功能:

  • 创建DOM元素
  • 选择和操作元素
  • 通过DOM遍历
  • 打印输出到浏览器

“移植的jQuery节”,你可以使用它被称为由phpQuery提供的功能执行的任务让我们首先看到的功能:

  • 选择 -找到根据给定条件的元素。
  • 属性 -操作DOM元素的属性。
  • 穿越 -出差经过选择的元素的列表。
  • 操作 -添加和选定的元素删除内容。
  • 阿贾克斯 -创 建服务器端的Ajax请求。
  • 活动 -在选定的元素绑定DOM事件。
  • 实用工具 -通用功能,以支持其他功能。

您可以从项目页面中下载phpQuery库code.google.com / P / phpquery 。 将文件夹复制到你的web服务器,你准备去。 安装很简单,你可以执行demo.php文件上手。

如何使用phpQuery

我将告诉你如何创建一个两列的无序列表,标题和不同行的颜色为奇数和偶数行,如下图所示的图像:


首先,让我们创建一个使用phpQuery一个HTML文档:

1
2
3
<?php
require("phpQuery/phpQuery.php");
$doc= phpQuery::newDocument("<div/>");

上面的代码将创建一个基本的HTML文档用div标签。 该库提供了创建文档的各种方法,我用最简单的一个,但你可以找到其他人在demo.php和文档。

现在,我们需要创建一个无序列表,并把它添加到我们的HTML文件。

1
2
3
4
5
6
7
8
9
10
11
12
<?php
...
$doc["div"]->append("<ul><li>Product Name</li><li>Price</li></ul>");
$products=array(
    array("Product 1","$30"),
    array("Product 2","$50"),
    array("Product 3","$20"));
 
foreach($productsas$key=>$product) {
    $doc["div ul"]->append("<li>$product[0]</li><li>$product[1]</li>");
}
print$doc;

你可以看到,我们有无序列表现在。 但是,所有的元素都在一个单一的列,它是默认的。 我们要移动清单的偶数元素到第二列。

1
2
3
4
5
<?php
...
$doc["div ul"]->attr("style","width:420px;");
$doc["div ul"]->find("li:even")->attr("style","width:200px; float:left; padding:5px; list-style:none;");
$doc["div ul"]->find("li:odd")->attr("style","width:200px; float:left; padding:5px; list-style:none“);

我使用的样式属性来定义这里为我们的示例所需的CSS样式,但它不推荐使用内联样式,除非它真正需要的。始终使用CSS类来添加样式。

现在,让我们来突出标题,并使用phpQuery方法偶数行。

1
2
3
4
5
<?php
...
$doc["div ul"]->find("li:nth-child(4n)")->attr("style","background:#EEE; width:200px; float:left; padding:5px; list-style:none;");
$doc["div ul"]->find("li:nth-child(4n-1)")->attr("style","background:#EEE; width:200px; float:left; padding:5px; list-style:none;");
$doc["div ul"]->find("li:lt(1)")->attr("style","background:#CFCFCF; width:200px; float:left; padding:5px; list-style:none;");

我们已经完成了我们的简单的例子,你现在应该有phpQuery如何可以用来简化HTML生成服务器端的一个想法。 我们所做的一切,几乎是将使用jQuery来完成相同的,除了我们做对了所有的动作$doc对象。

phpQuery的重要性

虽然我解释phpQuery的功能,你一定想知道为什么我们需要库时,我们有对jQuery的客户端。 我将展示使用实际情况下phpQuery的重要性。

考虑下面的情况:假设我们有一个如下所示,其中有所有关于谁去采访Web开发人员的信息表。

现在,这里有我们在这种情况下,发展的要求列表:

  • 谁得到了一个标志超过60考试申请人应以蓝色突出显示。
  • 申请人具有3年以上工作经验,应该在前面的链接标有“申请高级软件工程师”和其他申请者应具备的链接“申请软件工程师”。
  • 公司拥有基于经验的薪酬结构:
    • 1年 - $ 5,000
    • 2年 - $ 10,000
    • 3年 - $ 20,000
    • 超过3年 - $ 50,000

    salary列应以绿色为申请谁符合条件加以强调。

这是输出的外观:


开发人员可以提供以下解决方案来满足使用纯PHP代码的要求。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
<?php
// retrieve applicants from database
//...
 
echo<<<ENDHTML
<div id="main">
 <divclass="row_head">
  <div>Name</div>
  <div>Marks</div>
  <div>Experience</div>
  <div>Position</div>
  <div>Expected Salary</div>
 </div>
ENDHTML;
foreach($applicantsas$applicant) {
    echo'<div class="row">';
    echo"<div>".$applicant["name"] ."</div>";
    echo'<div class="'. marksClass($applicant["marks"]) . '">' .$applicant["marks"] ."</div>";
    echo"<div>".$applicant["experience"] ."</div>";
    echo"<div>". positionLink($applicant["experience"]) ."</div>";
    echo'<div class="'. salaryClass($applicant["experience"], $applicant["salary"]) . '">' .$applicant["salary"] ."</div>";
    echo"</div>";
}
echo"</div>";
 
functionmarksClass($info) {
    return($info> 60) ?"pass":"fail";
}
 
functionpositionLink($experience) {
    return($experience> 3)
        ?'<a href="http://www.php1.cn/">
        :'<a href="http://www.php1.cn/">
}
 
functionsalaryClass($experience,$salary) {
    switch($experience) {
        case1:
            return($salary< 5000) ?"accept":"reject";
        case2:
            return($salary< 10000) ?"accept":"reject";
        case3:
            return($salary< 20000) ?"accept":"reject";
        default:
            return($salary< 50000) ?"accept":"reject";
    }
}
现在,让我们使用phpQuery做,比较代码和优势。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
<?php
require("phpQuery/phpQuery.php");
$doc= phpQuery::newDocument('<div id="main"></div>');
phpQuery::selectDocument($doc);
 
// retrieve applicants from database
//...
 
$doc["#main"]->append('
<div id="main">
 <divclass="row_head">
  <div>Name</div>
  <div>Marks</div>
  <div>Experience</div>
  <div>Position</div>
  <div>Expected Salary</div>
 </div>');
 
foreach($applicantsas$key=>$applicant) {
    $doc["#main"]->append('<div class="row" id="app_'.$key.'"></div>');
    foreach($applicantas$field=>$info) {
        $doc["#main"]->find("#app_".$key)->append('<div class="_'.$field.'">'.$info."</div>");
        if($field=="experience") {
            $doc["#main"]->find("#app_".$key)->append('<div style="width:400px" class="_position">-</div>');
        }
    }
}
 
addMarksClass($doc);
addSalaryClass($doc);
addPositionLink($doc);
 
print$doc;
 
functionaddMarksClass(&$doc) {
    $marks= pq("._marks");
    foreach($marksas$appMark) {
        if(pq($appMark)->html() > 60) {
            pq($appMark)->addClass("pass");
        }
        else{
            pq($appMark)->addClass("fail");
        }
    }
}
 
functionaddSalaryClass(&$doc) {
    $marks= pq("._salary");
    foreach($marksas$appMark) {
        $experience= pq($appMark)->parent()->find("._experience")->html();
        $salary= pq($appMark)->html();
 
        switch($experience) {
            case1:
                pq($appMark)->addClass(
                    ($salary< 5000) ?"accept":"reject"
                );
                break;
            case2:
                pq($appMark)->addClass(
                    ($salary< 10000) ?"accept":"reject"
                );
                break;
            case3:
                pq($appMark)->addClass(
                    ($salary< 20000) ?"accept":"reject"
                );
                break;
            default:
服务器端的HTML处理使用phpQuery