ホームページ > ウェブフロントエンド > jsチュートリアル > jQuery XML 文字列の解析、読み取り、検索 Methods_jquery

jQuery XML 文字列の解析、読み取り、検索 Methods_jquery

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB
リリース: 2016-05-16 15:12:53
オリジナル
1924 人が閲覧しました

この記事の例では、jQuery xml 文字列の解析、読み取り、検索の方法について説明します。参考のために皆さんと共有してください。詳細は次のとおりです:

XML 文字列の解析

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

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<script src="jquery.min.js" type="text/javascript"></script>

<script type="text/javascript">

  $(function () {

    var xml = '<markers>';

    xml += '<marker carId="1" carName="SHANGHAI" gpsTime="2011-08-26 21:21:11.0" lat="31.230393" lng="121.473704" direction="222" speed="22" />';

    xml += '<marker carId="7" carName="XIAMEN" gpsTime="2011-08-26 21:21:11.0" lat="24.479836" lng="118.089421" direction="222" speed="22" />';

    xml += '</markers>';

    var xmlDoc = $.parseXML(xml);

    var result="";

    $(xmlDoc).find("markers marker").each(function () {

      result += "carId = " + $(this).attr("carId")

        + " ;carName =" + $(this).attr("carName")

        + " ;gpsTime =" + $(this).attr("gpsTime") + "\n";

    });

    alert(result);

  });

</script>

</head>

<body>

</body>

</html>

ログイン後にコピー

リクエスト

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

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<title>无标题页</title>

<script src="jquery.js" type="text/javascript"></script>

<script type="text/javascript">

function search() {

  var searchStrLow = $("#txtTitle").val().toLowerCase();

  $.post("1.xml", function(data) {

    var html = "";

    $(data).find('book').each(function() {

      var titleLow = $(this).find("title").text().toLowerCase();

      if (titleLow.indexOf(searchStrLow)!=-1) {

        html += "<tr><td>" + $(this).find("title").text() + "</td>";

        html += "<td>" + $(this).find("author").text() + "</td>";

        html += "<td>" + $(this).find("year").text() + "</td></tr>";

        $("#tbody1").html(html);

      }

    });

  });

}

</script>

</head>

<body>

  <span>输入标题:</span><input id="txtTitle" type="text" />

  <input id="Button1" type="button" value="搜索" onclick="search()" />

  <table style="width: 100%;">

    <thead><tr><td>Title</td><td>Author</td><td>Year</td></tr></thead>

    <tbody id="tbody1">

    </tbody>

  </table>

</body>

</html>

ログイン後にコピー

xml:

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

<&#63;xml version="1.0" encoding="utf-8" &#63;>

<bookstore>

  <book id="No1">

    <title>An Introduction to XML</title>

    <author>Chunbin</author>

    <year>2010</year>

    <price>98.0</price>

  </book>

  <book id="No2">

    <title>The Performance of DataBase</title>

    <author>John</author>

    <year>1996</year>

    <price>56.0</price>

  </book>

</bookstore>

ログイン後にコピー

さらに jQuery 関連のコンテンツに興味がある読者は、このサイトの特別トピック「jQuery 操作 XML スキルの概要」、「jQuery ドラッグ効果とスキルの概要」を参照してください。 🎜>"、" JQuery 拡張スキルまとめ"、"jQuery よくある定番特殊効果まとめ"、"jQuery アニメーションと特殊効果の使い方まとめ"、jQuery セレクターの使用法の概要 " および "一般的な jQuery プラグインと使用法の概要"

この記事が jQuery プログラミングのすべての人に役立つことを願っています。

関連ラベル:
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
最新の問題
jQueryファイルをインポートする
から 1970-01-01 08:00:00
0
0
0
jQueryのプロトタイプチェーン
から 1970-01-01 08:00:00
0
0
0
Nuxt.js に jQuery をインストールする手順
から 1970-01-01 08:00:00
0
0
0
php+jqueryの問題
から 1970-01-01 08:00:00
0
0
0
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート