Tôi luôn đánh giá cao những công cụ này:
Expresso và
XPath Builder. Chúng giúp thiết kế biểu thức thông thường và bộ chọn XPath gần như đầy đủ. Có khả năng dán/tải văn bản và sau đó tương tác tìm kiếm tốt hơn nhiều theo vòng đời code/compile/run/test. Nó nhanh hơn và cảm giác tốt hơn nhiều khi thực hiện các expression.
Dưới đây là hình ảnh minh họa:
Lưu ý: Có một số công cụ hiện tại bạn có thể thích:
http://www.woods.iki.fi/interactive-jquery-tester.html
http://www.w3schools.com/jquery/trysel.asp?filename=trysel_basic&jqsel=p.intro,%23choose
Công cụ của tôi khác ở chỗ:
Đây là trang. Bạn có thể lưu nó và chạy nó tại máy mà không cần đến máy chủ Web.
Nó cho thấy các kết quả như danh sách các đối tượng lặp thay vì đánh dấu html.
Một cheat sheet trên cùng trang sử dụng để thử nghiệm là tiện dụng.
Tôi không thể tải lên tập tin .htm hoặc .html đến trang web này vì vậy tôi tổ chức nó trên trang web cá nhân của tôi ở đây:
jQuery Selector Tester .
Thiết kế nổi bật:
Để thực hiện công tác tìm kiếm tương tác, tôi đã thêm một div ẩn đến trang:
<!--Hidden div holds DOM elements for jQuery to search-->
<div id="HiddenDiv" style="display: none">
</div>
Khi đã sẵn sàng để tìm kiếm, tìm kiếm văn bản html được sao chép vào div ẩn ... gây ra cây DOM trong div ẩn:
// get the html to search, insert it to the hidden div
var Html = $("#TextAreaHTML").val();
$("#HiddenDiv").html(Html);
Khi làm tìm kiếm, tôi sửa đổi tìm kiếm pattern để chỉ tìm trong HiddenDiv. Để làm điều đó, tôi đặt khoảng trống giữa các pattern.
// modify search string to only search in our
// hidden div and do the search
var SearchString = "#HiddenDiv " + SearchPattern;
try
{
var $FoundItems = $(SearchString);
}
Có một số lưu ý:
Tôi đã sử dụng outerHTML để hiển thị các thành phần được chọn. Vấn đề là Mozilla FireFox không thực hiện outerHTML.
Tôi thay thế:
// encode the html markup
var OuterHtml = $('<div/>').text(this.outerHTML).html();
thành:
// encode the html markup
var Html = $('<div>').append(this).html();
var OuterHtml = $('<div>').text(Html).html();
Một vấn đề khác là Mozilla FireFox không thực hiện srcElement.
Tôi thay thế:
var Row = e.srcElement.parentNode;
thành:
var Row = e.target.parentNode;
Một vấn đề khác là việc lập chỉ mục. Các trình duyệt có nhiều cách khác nhau lập chỉ mục.
Tôi thay thế:
// this cell has the search pattern
var Cell = Row.childNodes[1];
// put the pattern in the search box and search
$("#TextSearchPattern").val(Cell.innerText);
thành:
// get the correct cell and the text in the cell
// place the text in the seach box and serach
var Cell = $(Row).find("TD:nth-child(2)");
var CellText = Cell.text();
$("#TextSearchPattern").val(CellText);