Làm cách nào để tìm một phần tử theo văn bản bằng jQuery? – jquery chọn bằng văn bản

Cổng thông tin Khoa học Máy tính dành cho những người yêu thích máy tính. Nó bao gồm các bài báo về khoa học máy tính và lập trình được viết tốt, được tư duy tốt và được giải thích tốt, các câu đố và thực hành / lập trình cạnh tranh / các câu hỏi phỏng vấn công ty.

Bạn đang xem : jquery chọn theo văn bản

Làm cách nào để tìm một phần tử theo văn bản bằng jQuery?

Chúng ta sẽ học cách tìm phần tử sử dụng API của jQuery. Bài viết này yêu cầu một số kiến ​​thức về HTML , CSS , JavaScript , Bootstrap jQuery. Các phần tử có thể được chọn dựa trên việc chúng có chứa chuỗi chúng ta muốn tìm hay không. Điều này có thể được thực hiện bằng cách sử dụng công cụ chọn jQuery chứa để chọn các phần tử có chứa chuỗi.

Giới thiệu về bộ chọn chứa

Tùy thuộc vào phần tử, văn bản phù hợp có thể xuất hiện trực tiếp trong hoặc bên trong phần tử con của phần tử đã chọn. Bộ chọn : chứa () trong jQuery được sử dụng để chọn các phần tử chứa chuỗi được chỉ định. Văn bản phải có một trường hợp phù hợp để được chọn.

Cú pháp: Một chuỗi văn bản cần tìm. Phân biệt chữ hoa chữ thường.

 jQuery (": contains (text)") 

Phương pháp tiếp cận:

< ul>

  • Tạo tệp HTML “trong hệ thống cục bộ của bạn.
  • Làm theo mẫu và hai đoạn văn bản HTML cơ bản bằng cách thêm văn bản vào bên trong & lt; p & gt; .
  • Chọn thẻ & lt; p & gt; thẻ với công cụ chọn chứa và chuyển từ khóa bạn muốn chọn làm thông số trong phương thức công cụ chọn chứa .
  • Sau khi bạn thực hiện thành công các bước trên thì đính kèm thuộc tính CSS vào đoạn đã chọn chứa từ khóa mà bạn chuyển làm đối số trong phương thức.
  • Ví dụ: Trong trường hợp này, chúng tôi đang tìm kiếm phần tử có chứa từ “Gfg”. Chúng tôi thay đổi màu của đoạn cụ thể có chứa từ “Gfg” sau khi chọn phần tử.

    Xem Thêm  Hàm array.indexOf() trong javascript - chỉ mục mảng trong javascript

    HTML

    < / p>

    & lt;! DOCTYPE html & gt;

    & lt; < code class = "keyword"> html & gt;

    & lt; head & gt;

    & lt; liên kết href =

    " https: //cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css"

    rel = " stylesheet " < code class = "color1"> toàn vẹn =

    "sha384 -EVSTQN3 / azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC "

    crossori color1 = "nặc danh" & gt;

    & lt; script src =

    " https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js " & gt;

    & lt; / script & gt;

    & lt; style & gt;

    < code class = "trơn"> body {

    border: 2px solid green;

    min-height: 240px;

    }

    . center {

    display: flex;

    justify-content: center;

    }

    h1 {

    color: green;

    text-align: center;

    }

    & lt; / style & gt;

    < code class = "trơn"> & lt; / head & gt;

    & lt; body & gt;

    & lt ; h1 & gt; GeeksforGeeks & lt; / h1 & gt;

    & lt; div class = " row container " & gt;

    & lt; div class = "col" & gt;

    & lt; p & gt;

    < p class = "line number39 index38 alt2"> Phát triển web đề cập đến tòa nhà,

    tạo và duy trì trang web.

    Gfg bao gồm các khía cạnh như thiết kế web,

    xuất bản web, lập trình web và

    < code class = "undefined space"> quản lý cơ sở dữ liệu . Đây là việc tạo ra

    của một ứng dụng hoạt động

    trang web internet. < / p>

    & lt; / p & gt;

    & lt; / div & gt;

    & lt; div class = "col" & gt;

    & lt; p & gt;

    Phát triển web đề cập đến việc xây dựng,

    tạo, và duy trì các trang web.

    Nó bao gồm các khía cạnh như thiết kế web,

    xuất bản web, lập trình web và

    quản lý cơ sở dữ liệu. Đây là việc tạo ra

    của một ứng dụng hoạt động

    trang web internet. < / p>

    & lt; / p & gt;

    & lt; / div & gt;

    & lt; / div & gt;

    & lt; script & gt;

    $ ('p: chứa ( "Gfg") '). Css ({' color ':' green '});

    & lt; / script & gt;

    & lt; / body & gt;

    & lt; / html & gt;

     
     

    Đầu ra:

    < / p>

    Ghi chú cá nhân của tôi


    Xem thêm những thông tin liên quan đến chủ đề jquery chọn bằng văn bản

    jQuery #id selector

    alt

    • Tác giả: kudvenkat
    • Ngày đăng: 2015-03-22
    • Đánh giá: 4 ⭐ ( 4311 lượt đánh giá )
    • Khớp với kết quả tìm kiếm: Link for all dot net and sql server video tutorial playlists
      http://www.youtube.com/user/kudvenkat/playlists

      Link for slides, code samples and text version of the video
      http://csharp-video-tutorials.blogspot.com/2015/03/jquery-id-selector.html

      Healthy diet is very important both for the body and mind. If you like Aarvi Kitchen recipes, please support by sharing, subscribing and liking our YouTube channel. Hope you can help.
      https://www.youtube.com/channel/UC7sEwIXM_YfAMyonQCrGfWA/?sub_confirmation=1

      In this video we will discuss
      1. What are jQuery selectors
      2. Different selectors in jQuery
      3. id selector in jquery

      What are jQuery selectors
      One of the most important concept in jQuery is selectors. jQuery selectors allow you to select and manipulate HTML elements.

      Different selectors in jQuery
      jQuery selectors allow you to select html elements in the DOM by
      1. Element ID
      2. Element Tag Name
      3. Element Class Name
      4. Element attribute
      5. Element Attribute values and many more

      Id selector in jquery
      To find an HTML element by ID, use the jQuery id selector

      Example : The following example finds button with ID button1 and attaches the click event handler.
      [html]
      [head]
      [title][/title]
      [script src="jquery-1.11.2.js"][/script]
      [script type="text/javascript"]
      $(document).ready(function () {
      $('button1').click(function () {
      alert('jQuery Tuorial');
      });
      });
      [/script]
      [/head]
      [body]
      [input id="button1" type="button" value="Click Me" /]
      [/body]
      [/html]

      Changes the background colour of the button to yellow
      $(document).ready(function () {
      $('button1').css('background-color', 'yellow');
      });

      Important points to remember about jQuery id selector

      1. jQuery id selector uses the JavaScript document.getElementById() function

      2. jQuery id selector is the most efficient among all jQuery selectors. If you know the id of an element that you want to find, then always use the id selector.

      3. HTML element IDs must be unique on the page. jQuery id selector returns only the first element, if you have 2 or more elements with the same ID.

      [html]
      [head]
      [title][/title]
      [script src="jquery-1.11.2.js"][/script]
      [script type="text/javascript"]
      $(document).ready(function () {
      $('button1').css('background-Color', 'yellow');
      });
      [/script]
      [/head]
      [body]
      [input id="button1" type="button" value="Click Me" /]
      [input id="button1" type="button" value="Click Button" /]
      [/body]
      [/html]

      4. JavaScript's document.getElementById() function throws an error if the element with the given id is not found, where as jQuery id selector will not throw an error. To check if an element is returned by the id selector use length property.

      [html]
      [head]
      [title][/title]
      [script src="jquery-1.11.2.js"][/script]
      [script type="text/javascript"]
      $(document).ready(function () {
      if ($('button1').length ] 0) {
      alert('Element found')
      }
      else {
      alert('Element not found')
      }
      });
      [/script]
      [/head]
      [body]
      [input id="button1" type="button" value="Click Me" /]
      [/body]
      [/html]

      5. JavaScript's document.getElementById() and jQuery(id) selector are not the same. document.getElementById() returns a raw DOM object where as jQuery('id') selector returns a jQuery object that wraps the DOM object and provides jQuery methods. This is the reason you are able to call jQuery methods like css(), click() on the object returned by jQuery. To get the underlying DOM object from a jQuery object write $('id')[0]

      6. document.getElementById() is faster than jQuery('id') selector. Use document.getElementById() over jQuery('id') selector unless you need the extra functionality provided by the jQuery object.

    Bộ chọn jQuery

    • Tác giả: hocwebchuan.com
    • Đánh giá: 5 ⭐ ( 2647 lượt đánh giá )
    • Khớp với kết quả tìm kiếm: Bộ chọn jQuery giúp bạn củng cố thêm kiến thức và hiểu rõ hơn về bộ trọn trong jQuery tốt hơn - Học Web Chuẩn

    JQuery

    • Tác giả: xuanthulab.net
    • Đánh giá: 4 ⭐ ( 3590 lượt đánh giá )
    • Khớp với kết quả tìm kiếm: JQuery là một thư viện JavaScript tương thích với nhiều trình duyệt, nó giúp dễ dàng tương tác với các phần tử HTML

    Cách vô hiệu hóa lựa chọn văn bản, nhấp chuột phải, copy & paste trên một trang web

    • Tác giả: funix.edu.vn
    • Đánh giá: 3 ⭐ ( 8168 lượt đánh giá )
    • Khớp với kết quả tìm kiếm: Nếu bạn muốn ngăn người khác lấy cắp nội dung từ trang web của mình, bạn có thể làm như vậy ở một mức độ nào đó với sự trợ giúp của CSS, JavaScript và jQuery. Trong bài viết này, bạn sẽ học cách tắt tính năng lựa chọn văn bản, cắt, sao chép, dán và nhấp chuột phải vào trang web.

    Selector trong jQuery, cú pháp chọn phần tử trong jQuery

    • Tác giả: thuthuat.taimienphi.vn
    • Đánh giá: 5 ⭐ ( 8895 lượt đánh giá )
    • Khớp với kết quả tìm kiếm: Selector trong jQuery, cú pháp chọn phần tử trong jQuery

    [JQuery] Phần 3: Các hàm chọn jQuery (jQuery Selectors)

    • Tác giả: www.dammio.com
    • Đánh giá: 3 ⭐ ( 6201 lượt đánh giá )
    • Khớp với kết quả tìm kiếm:

    Cơ Bản Về Jquery

    • Tác giả: longnv.name.vn
    • Đánh giá: 4 ⭐ ( 7300 lượt đánh giá )
    • Khớp với kết quả tìm kiếm:

    Xem thêm các bài viết khác thuộc chuyên mục: Kiến thức lập trình