🚀 go-pugleaf

RetroBBS NetNews Server

Inspired by RockSolid Light RIP Retro Guy

Article View: cn.bbs.comp.xml
Article #213

XPath��jQuery����XML�ĵ��ĶԱ�(ת��)

#213
From: <Test/>
Date: Tue, 27 Apr 2010 15:18
305 lines
23406 bytes
��飺 ��������� XML Ӧ�ó�����ʹ�� XPath������ȴ��Ҫ�� Web Ӧ�ó���ʹ�� jQuery���ǻ���ô���أ������֪�� jQuery��ȴ��Ҫ��Ӧ�ó�����ʹ�� XPath���ֻ�����أ�ʹ���������ļ����ֲᣨphrase book������֪����ת����Ҫ֪���ġ��ڱ����У�ѧϰʹ�� XPath 1.0 �� jQuery 1.4 �������Ƶ����������ܹ��ڱ�Ҫ��ʱ�������һ������ת����һ����


���
XML ��һ���ܵ�����֧�ֵ� Internet ��׼��ʹ�������Ľṹ����ݺ����ױ������κα�����Խ��룬�����ܹ��������Ķ����д��ֻҪ����ʹ�ñ�׼�ı��༭�����ɡ��ܶ�Ӧ�ó����������ִ�ı�׼���ݵ� Web �������������ֱ�Ӵ��� XML ��ݡ�
�������
Ajax���첽 JavaScript + XML
API��Ӧ�ó����̽ӿ�
DOM���ĵ�����ģ��
W3C����������
XHTML������չ���ı��������
XML������չ�������
XSLT������չ��ʽ������ת��
XPath��XML Path ���ԣ���һ��ǿ��IJ�ѯ���ԣ�����ѡ�� XML �ĵ��еĽڵ㡣XPath ��׼�� 1.0 �汾�㷺ʵ���ڸ������ԣ����� Java��C# �� JavaScript��
jQuery ��һ����ʵ�ϱ�׼�Ŀ������ JavaScript �⣬����ѡ��Ͳ��� XHTML �ĵ����Լ�ͨ�� Ajax ���ص� XML �ĵ����еĽڵ㡣���Ѿ����ܶ��˾������ Google��IBM��Microsoft �� Twitter�����á�����д������ʱ����������ĵ�ǰ�汾 1.4�����������Ͻ������������������ŵ�ĸ���ٶȡ�ע�⣬�����е� jQuery ����Ӧ��δ���޸ĵ�ʹ��ǰһ�汾���� jQuery 1.3.2��
��ҳ��
Ϊ���� XPath ������ JavaScript ��ʱʹ�� jQuery��
��� XPath �� W3C ��׼������ʵ���� JavaScript �У���ôΪʲô��Ҫ�鷳��ʹ�� jQuery �أ�
XPath ��һ����ͨ�� XML ��׼���� jQuery ��һ���������Ŀ⣬������ڴ��������������Է�������⣬ʹ��ص����û����е�����������������㹻��������ʹ�ñ�׼ JavaScript �ʻ������� DOM �й��������ṩһЩ���� Web Ӧ�ó��򿪷��ĸ������ԣ�����ǿ��� Ajax �Ͷ���֧�֡�
���ǣ�Ӧ�����Ƕ��ֱߵĹ���ʹ���ʵ��Ĺ��ߣ������˽�����������������������Ϊ��һ����Ŀ��ѡ�ʵ��ļ�����
��ҳ��
����
��ƪ�����У�����ع�ͷ���ο�һ����������� XML �ĵ����μ� �嵥 1�����鼮�б����������Ϣ���������ߡ�������ȫ�鹹�ļ۸������

�嵥 1. ���� XML �ĵ� (book.xml)
                                
<?xml version="1.0" encoding="utf-8"?>
<catalog>
    <book format="trade">
        <name>Jennifer Government</name>
        <author>Max Barry</author>
        <price curr="CAD">15.00</price>
        <price curr="USD">12.00</price>
    </book>

    <book format="textbook">
        <name>Unity Game Development Essentials</name>
        <author>Will Goldstone</author>
        <price curr="CAD">52.00</price>
        <price curr="USD">45.00</price>
    </book>

    <book format="textbook">
        <name>UNIX Visual QuickPro</name>
        <author>Chris Herborth</author>
        <price curr="CAD">15.00</price>
        <price curr="USD">10.00</price>
    </book>
</catalog>

ע�⣬�Ҹ������г������ߺͷ�����û���κ���ϵ��ֻ������Ǹ����Եij��⡣�۸���ȫ��Ϲ��ģ�����ʵ�ʵĶ��ۣ���Ӧ��ѯ���Լ�ϲ������ꡣ
��ҳ��
XPath �ٶ�
���ڱ����е� XPath ���룬��Ҫ�����¼ٶ���
�Ѿ��� book.xml �ļ����μ� �嵥 1�����ص���� XPath ʵ�ֿ���ʹ�õĸ�ʽ��
��һ����ʾ�ĵ���Ķ���ʼ������������ <catalog> Ԫ����Ϊ��Ԫ�ص��Ǹ��������֮Ϊ root����Ϊ���� XML �ĵ���νṹ�ĸ�
������̫�಻ͬ��ƽ̨����̫��� XPath ʵ�֣������������ǽ��ص���� XPath ��䱾���ϣ���ʹ��һ�������� JavaScript ��α����������������չʾ��Щ��䣻��鿴��ϲ���Ŀ���ƽ̨����⣬�˽��йؼ��� XML �ĵ�������õ��ض� XML �ڵ�������Ϣ��
��ҳ��
jQuery �ٶ�
�����е� jQuery ���������¼ٶ���
ʹ�õ������£��汾 1.4.0��jQuery ���루�μ� �ο����� �е����ӣ���
�Ѿ�ͨ�� jQuery.get() �� jQuery.post() ���������� book.xml �ļ��������Ѿ������յ� XML �ĵ��洢��һ����Ϊ root �ı����У��� XPath ������ͬ����
����������µ�һЩ��������� �嵥 2 �С�

�嵥 2. ���� jQuery ���� XML ����
                                
<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
               "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
<title>Book Catalog</title>
<script type="text/javascript"
src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.0/jquery.min.js"></script>
<script type="text/javascript">// <![CDATA[
var root = null;

$(document).ready( function(){
    $.get( "http://localhost/~chrish/books.xml", 
        function( data ) {
            root = data;

            $("p#status").text( "Loaded." );
        } );
} );
// ]]></script>
</head>

<body>
<p id="status">
Loading book.xml...
</p>
</body>
</html>

�� $(document).ready() �����У�ʹ�� jQuery get() �����ӱ��� Web ���������� books.xml�������յ��ĵ�����洢�� root �����У����� status ID ���ö�����ı����Ա��� XML ����ɼ��ء��й� jQuery �ĸ����Ϣ����鿴����ĩβ �ο����� �е���������б?
��ҳ��
ѡ��ڵ�
XPath �� jQuery �Ļ�Ŀ�Ķ��Ǵ��ĵ�ѡ��ڵ㡣һ��ѡ����һ���ڵ㣨��һ���ڵ㼯�ϣ����Ϳ����ҵ�������Ѱ�ҵ�����Լ�����Ҫʱ�����ĵ���
XPath �������ȷ�з�������Ѱ�ҵĽڵ㣻��һ��dz��ض�����һ���棬jQuery ��ʹ�ò������ͽڵ㼯�Ϸdz����ף�������ʱ��������ڿ�ʼ����ڵ�֮ǰС�ĵ���Сƥ�䷶Χ��
�����ѡ��ڵ�
�������ض��ڵ�ʱ����ͨ��֪�������ƣ�����֪���丸Ԫ�ص���ơ�
Ҫ�ҵ�һ���ض���Ԫ�أ����ʹ�������ƣ��� �嵥 3 ��ʾ��

�嵥 3. �����ѡ��ڵ�
                                
/* Find all <book> elements through XPath: */
var result = root.find( "//book" );

/* Find all <book> elements through jQuery: */
var result = $(root).find( "book" );

����ѡ������ <book> Ԫ�ص� XPath ��䣨//book��ʹ������б�� (//)����ָ���ӵ�ǰ�ڵ㣨�������� root����ʼ������ƥ��Ľڵ㶼�ᱻ�ҵ������� jQuery ��Ĭ����Ϊ����������Ҫ���κ��������ݡ�����������£������ �嵥 1 �е�������� <book> Ԫ�ء�
ͨ������ͨ��ָ��Ԫ��·������С�������������·��ĩβ��ƥ��ڵ㣨�μ� �嵥 4����

�嵥 4. ��·��ѡ��ڵ㡪������Ϊ��ͬ
                                
/* Be more specific (XPath): */
var result = root.find( "/catalog//book" );

/* Be more specific (jQuery): */
var result = $(root).find( "catalog book" );

�Ӹ�Ԫ�� (/) ��ʼ����� XPath ��佫Ѱ�ҵ�һ�� <catalog> Ԫ�أ�Ȼ�󷵻����һ�� <catalog> Ԫ���µ����� <book> Ԫ�ء�jQuery ������Ϊ���в�ͬ��������� <catalog> Ԫ���µ����� <book> Ԫ�أ��μ� �嵥 5������������ book.xml �ļ����������ͬ�Ľڵ㼯�������������Ҫ�õ� <book> Ԫ���µ����� <author> Ԫ�أ��ǻ���ô���أ��� �嵥 3 ��һ��Ӧ��������б�� (//) ��ʼ XPath ���ʽ��

�嵥 5. ��·���ҳ��ں��Ľڵ㡪�������ӵ���Ϊһ��
                                
/* Get all authors from all books (XPath): */
var result = root.find( "//book//author" );

/* Get all authors from all books (jQuery): */
var result = $(root).find( "book author" );

Ҫ�� jQuery �� �嵥 4 �е� XPath ����һ��ص�һ�� <catalog> �е� <book> Ԫ�أ������ָ����ʹ�����ҵ��ĵ�һ�� <catalog>���μ� �嵥 6����

�嵥 6. ƥ���һ�� catalog �е� book����Щ���ӵ���Ϊһ��
                                
/* All books from the first catalog (XPath): */
var result = root.find( "/catalog//book" );

/* All books from the first catalog (jQuery): */
var result = $(root).find( "catalog:first book" );

�ҵ�Ԫ�ص����һ�γ��֣�������Ŀ�б��е����һ���б������ѡ���б��е����һ��ѡ�Ҳ��һ�����������Ҫ��ȷ�ؽ�һЩ�������ӵ��б�ĩβ����Ҫ֪����ĩβ��λ�ã��μ� �嵥 7����

�嵥 7. �ҵ� catalog �е����һ�� book
                                
/* The last book from the first catalog (XPath): */
var result = root.find( "/catalog/book[last()]" );

/* The last book from the first catalog (jQuery): */
var result = $(root).find( "catalog:first book:last" );

����������£���õ���һ�� <catalog> Ԫ���е����һ�� <book> Ԫ�أ�����������Ѱ�ҵġ��� XPath �����У�last() ��������ƥ��Ԫ�ص��������ڷ������У���
��ҳ��
ѡ������ڵ�
��ʱ����֪������Ѱ�ҵ�Ԫ�ص���ƣ�������Ҫ�ҵ�һ�������ڼ�����ͬԪ���е�Ԫ�ء��� XPath �� jQuery �У�������ʹ���Ǻ� (*) ��ƥ������Ԫ�أ��μ� �嵥 8����

�嵥 8. any Ԫ��
                                
/* Find all authors in all elements inside of <catalog> (XPath): */
var result = root.find( "/catalog//*//author" );

/* Find all authors in all elements inside of <catalog> (jQuery): */
var result = $(root).find( "catalog:first * author" );

ע�⣬���� jQuery ������ʹ���� :first����ʹ�����Ϊ��ȫ�� XPath �汾һ��
��ҳ��
������ѡ��ڵ�
���Ƶ�Ԫ��ͨ�����ж��ص����ԣ����� XHTML Ԫ����ʹ�õ� id ���ԣ���Ϊ�˸� XHTML Ԫ��һ��Ωһ������ ID���μ� �嵥 9������ʱ����̫�����ض���Ԫ�أ����ǹ���һ������Ϊ�ض�ֵ��Ԫ�ء�

�嵥 9. �ҵ���Щ����Ľ̿���
                                
/* Find all books that are textbooks (XPath): */
var result = root.find( "//book[@format='textbook']" );

/* Find all books that are textbooks (jQuery): */
var result = $(root).find( "book[format='textbook']" );

�������Ӷ����������о��� format ����������ֵ����Ϊ textbook �� <book> Ԫ�أ��嵥 1 �е� book.xml �ļ��������������Ԫ�أ���XPath ���﷨ʹ��һ�� @ �����ƥ�����ԣ�jQuery ֻ�ǽ��������ڷ������У�������Ҫ������б�� (//) ��ƥ������ <book> Ԫ�أ�����������ѯ�dz����ƣ�����ֱ�ۡ�
��� XHTML ����������ƥ�����ԣ�id �� class����jQuery ����������ݷ�ʽ���� XPath �У��������ʽ��д�����ǣ��μ� �嵥 10����

�嵥 10. ���� id �� class ����ƥ�� XHTML
                                
/* Find the "status" <p>, then the highlighted elements (XPath) */
var result1 = xhtml_root.find( "//p[@id='status']" );
var result2 = xhtml_root.find( "//*[@class='highlight']" );

/* Find the "status" <p>, then the highlighted elements (jQuery) */
var result1 = $( "p#status" );
var result2 = $( ".highlight" );

������� XHTML �ĵ�����Ч�ģ�ȷʵ�ǵģ��԰ɣ�����ID ƥ���ѯ��ֻ����һ��Ԫ�أ���Ϊ����Ч�� XML �ĵ��У�ID ������Ωһ�ġ�
������Dz����ʽ�?Cascading Style Sheets��CSS���ķ�˿������ע�⵽�ˣ�jQuery ѡ���������� CSS ѡ������ȫ��ͬ����ܷ��㣬��Ϊ��ֻ��Ҫ��סһ�����ͨ�� jQuery �ҵ���Ҫ��Ԫ�غ����� CSS ΪԪ�ض�����ʽ�ı�׼��
���ѡ����
XPath �� jQuery ����������϶��ѡ����������ÿ��ƥ�������ѯ�Ľڵ㣨����˵�����õ����IJ��������� XPath �У������� (|) �ַ������䣬���� jQuery ����ʹ�ö��� (,)���μ� �嵥 11����

�嵥 11. �ҵ����ѡ�����Ľ��
                                
/* Find all book names and all authors (XPath) */
var result = root.find("//name|//author" );

/* Find all book names and all authors (jQuery) */
var result = $(root).find( "name,author" );

����������£�������ĵ��κεط����� <name> �� <author> Ԫ�ص��б?�� ͼ 1 �У�ʹ�� AquaPath �鿴 XPath ���AquaPath ��һ������ Mac OS X Tiger �Ĺ��ߣ��й���ĸ����Ϣ����μ� �ο����ϣ���

ͼ 1. XPath ���book.xml �ļ������� book �� name �� author ��Ƕ���ͻ����ʾ
 
��ҳ��
����ڵ�
����ѡ��ڵ�֮�⣬ͨ������Ҫ�����ĵ��ṹ���Ա��ҵ���ص���ݻ���ִ�и��ӵIJ�����XPath �� jQuery �����԰���������ĵ���
���ǰ��ѧϰ�����ݣ������ʹ����Щ�����������ҵ����ȣ�����ǰԪ�ص�Ԫ�أ����������ǰԪ�ذ��Ԫ�أ���
���磬�嵥 12 �����ҵ������ҵ������һ�� <book> �� <catalog>��

�嵥 12. �ĸ� catalog �г����һ�� book��
                                
/* Find the catalog for the last book you know about (XPath) */
var result = root.find( "//book[last()]/ancestor::catalog" );

/* Find the catalog for the last book you know about (jQuery) */
var result = $(root).find( "book:last" ).closest( "catalog" );

ͼ 2 ��ʾ�˽��

ͼ 2. ���һ�� book �� catalog ����
 
��һ����Ҫע�⣬jQuery closest() ��������Ϊ���� XPath �� ancestor-or-self�����ƥ��Ļ������ǰ�ڵ㡣�ڱ��������ǰ�ڵ㣬������������Ƕ�������ͬ��Ԫ�ػ�������ƥ�����ԣ���ôӦ���μ�����¡�
�����Ҫ����һ�������ߣ��ҵ�Ƕ�������Ѿ��ҵ���Ԫ���е�Ԫ�أ�Ҳ�ǿ��������ģ��μ� �嵥 13����

�嵥 13. �ҵ��г��� catalog �е� price
                                
/* Find the prices of everything in the catalog. (XPath) */
var result = root.find( "//catalog/descendant::price" );

/* Find the prices of everything in the catalog. (jQuery) */
var result = $(root).find( "catalog price" );

������Щ�����������ѡ��Ľڵ����ƥ��������Ѱ�ҵ�Ԫ�أ���ô�� XPath �е�����һ������Ҳ���� descendant-or-self���μ� ͼ 3����

ͼ 3. ���� price����ѡ��
 
��ҳ��
ģ��߼� XPath ����
XPath ָ���˺ܶ��� jQuery �в���Ҫ���������ԣ��Ͼ���jQuery ������������У����Գ������ JavaScript �����ƣ��� XPath ͨ�����ڱȽ����޵Ļ����У����� XSLT ���?
��Ȼ��ֻҪ�����ã��Ⲣ������ֹ���� JavaScript ʵ����Щ���ԡ�
�����������ѯ���ĸ���μ� �嵥 14����

�嵥 14. ���ٽڵ�ƥ��ѡ������
                                
/* How many price entries do you have? (XPath) */
var result = root.find( "count(//price)" );

/* How many price entries do you have? (jQuery) */
var result = $(root).find( "price" ).length;

��ʱֻ��Ҫ֪���ڵ��Ƿ��ij���ַ��μ� �嵥 15����

�嵥 15. ����� <author> �а� Chris ��
                                
/* Does the third <author> have "Chris" in its contents? (XPath) */
var result = root.find( "contains(//book[3]/author,'Chris')" );

/* Does the third <author> have "Chris" in its contents? (jQuery) */
var result = $(root).find( "book:eq(2) author:contains('Chris')" ).length > 0

�嵥 15 ����һ���dz���Ҫ�������Ҫע�⣬XPath ������� 1 ��ʼ�����Ǵ� 0 ��ʼ���� jQuery �У�����ʹ�� :eq(2) ���õ���������
XPath Ҳ��һ�� sum() ��������ƥ��ڵ��������Ϊ������Щ����ת������ֵ����������Щֵ�ĺ͡���ʹ�� jQuery ʱ�������дһ����̵ĺ�����ģ��ú���μ� �嵥 16����

�嵥 16. ����һЩ�ڵ����ݵĺ�
                                
/* Sum the Canadian prices (XPath) */
var result = root.find( "sum(//price[@curr='CAD'])" );

/* Sum the Canadian prices (jQuery) */
function sum( root, selector ) {
    var x = 0;
    $(root).find( selector ).map( function() {
        if( this.text ) {
            // Internet Explorer-only
            return x += ( this.text * 1 );
        }

        // Firefox and W3C-compliant browsers
        return x += ( this.textContent * 1 );
    } );
    return x;
}

var result = sum( root, "price[curr='CAD']" );

jQuery �е� map() ����Ϊÿ�����ڵ�����ָ���ĺ���ע�⣬Ҫ�õ����ڵ�����ݣ�Ҳ������΢�ѵ��¡�ȷ����������ϲ����������ϲ������� JavaScript��
������Ӧ�ñȽ�������ʱ�Լ���ν� XPath 1.0 �� jQuery 1.4 �������Ƶ������ˡ�
��ҳ��
������
���ڴӸ�ʽ���õ� XML �ĵ������� XHTML ҳ�棩ѡ��ڵ㣬XPath �� jQuery ����ǿ��IJ�ѯ���塣�������ǵ��﷨��ͬ����������ʹ����һ��������Ԫ���������ֵ���ĵ�ѡ����Ҫ�Ļ����Ȥ�Ľڵ㣬���൱���ס�
����ƥ���뵱ǰƥ���Ԫ����ص�Ԫ�ؽڵ㣬XPath �� jQuery ��֧��ֱ�۵ı������塣���⣬���� jQuery ��������ȫ�� JavaScript �������У�����������������Ĵ���ģ�� XPath ��һЩ�߼����ԡ�
-----------------------------------------------
ת�ԣ�http://www.ibm.com/developerworks/cn/xml/x-xpathjquery/index.html?ca=drs-cn-0419
--
Happy XMLing


�� ��Դ:��ˮľ���� newsmth.net��[FROM: 114.249.210.*]
Technical Details
Message-ID: <4lX8gR$B5T@newsmth.net>
Path: arc1-ca.pugleaf.net!g2news2.google.com!news2.google.com!news.glorb.com!news.neu.edu.cn!news.byr.edu.cn!news.newsmth.net!NEWSMTH

Show Full Headers
Complete Article Headers
X-Google-Thread: 115571,23512abaf3104827,start
X-Google-NewGroupId: yes
X-Google-Attributes: gidf7ebf7e2af,domainid0,public,usenet
X-Google-Language: Chinese,GB
Path: arc1-ca.pugleaf.net!g2news2.google.com!news2.google.com!news.glorb.com!news.neu.edu.cn!news.byr.edu.cn!news.newsmth.net!NEWSMTH
From: thinkhy@newsmth.net-SPAM.no (<Test/>)
Newsgroups: cn.bbs.comp.xml
Subject: XPath��jQuery����XML�ĵ��ĶԱ�(ת��)
Date: 27 Apr 2010 15:18:29 GMT
Organization: ˮľ����
Message-ID: <4lX8gR$B5T@newsmth.net>
Mime-Version: 1.0
Content-Type: text/plain; charset="gb2312"
Content-Transfer-Encoding: 8bit
X-Filename: XML/N/M.1272381435.80