Cấp bậc tác giả:

HTML

jQuery Selector Tester và Cheat Sheet

Được viết bởi QuangIT ngày 10/06/2014 lúc 07:16 PM
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.
  • 0
  • 1379

jQuery Selector Tester và Cheat Sheet


Tôi luôn đánh giá cao những công cụ này: Expresso 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.

Vì vậy, tôi quyết định làm công cụ tương tác để kiểm tra jQuery Selectors:  jQuery Selector Tester .   

Dưới đây là hình ảnh minh họa:

search-pattern.jpg

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);

Nguồn bài viết: DOTNET.VN

BÌNH LUẬN BÀI VIẾT

Bài viết mới nhất

LIKE BOX

Bài viết được xem nhiều nhất

HỌC HTML