jquery의 입력 상자를 사용하여 키워드 찾기

이제 키워드를 찾고 jquery 입력 상자의 색상을 밝게 하는 예제 코드를 공유하겠습니다. 이 코드는 좋은 참조 값을 가지고 있으며 모든 사람에게 도움이 되기를 바랍니다.

예제 코드는 다음과 같습니다.

<p>
  <a class="btn btn-success show" title="Popover title"
     data-container="body" data-toggle="popover" data-placement="bottom"
     data-content="底部的 Popover 中的一些内容"> aaaa </a>
</p>
<script>
  $(function () {
    initPopover();
  })
  function initPopover() {
    $(".show").popover({
      container: "body",
      trigger: " manual"  //手动触发
    }).on(&#39;show.bs.popover&#39;, function () {
      $(this).addClass("popover_open");
    }).on(&#39;hide.bs.popover&#39;, function () {
      $(this).removeClass("popover_open");
    });
    $(".show").click(function () {
      if ($(this).hasClass("popover_open")) {
        $(this).popover("hide")
      } else {
        $(".popover_open").popover("hide");
        $(this).popover("show");
      }
      var e = arguments.callee.caller.arguments[0] || event;
      e.stopPropagation();
    });
    $(document).click(function () {
      $(".show").popover("hide");
    });
  }
</script>

주의 사항:

1.버튼, a, img 등에 해당되지 않습니다

2. 호출 쇼 인스턴스 이 이벤트는 메소드가 호출될 때 즉시 트리거됩니다.

shown.bs.popover: 이 이벤트는 팝오버 상자가 완전히 나타날 때 트리거됩니다(CSS 전환 효과가 완료될 때까지 기다립니다).

hide.bs.popover: 이 이벤트는 hide 인스턴스 메소드가 호출될 때 즉시 트리거됩니다.

hidden.bs.popover: 이 이벤트는 툴팁이 완전히 숨겨지면 트리거됩니다(CSS 전환 효과가 완료될 때까지 기다립니다).

3. jquery 및 부트스트랩 헤더 파일 소개

4. 버블링 취소

위 내용은 앞으로 모든 사람에게 도움이 되기를 바랍니다.

관련 기사:

vue에서 jqgrid 구성 요소의 URL 주소를 동적으로 수정할 수 없는 문제를 해결하는 방법

vue에서 Taobao 별 등급을 구현하는 방법

별을 구현하는 방법 vue-star Development의 평가 구성요소

ES6의 맵, 세트, ​​배열 및 객체 비교(자세한 튜토리얼)

위 내용은 jquery의 입력 상자를 사용하여 키워드 찾기의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!