> 웹 프론트엔드 > JS 튜토리얼 > jquery를 사용하여 입력 상자의 텍스트 내용 조작

jquery를 사용하여 입력 상자의 텍스트 내용 조작

php中世界最好的语言
풀어 주다: 2018-03-15 10:01:13
원래의
1722명이 탐색했습니다.

이번에는 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('show.bs.popover', function () {
      $(this).addClass("popover_open");
    }).on('hide.bs.popover', 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: 이 이벤트는 Tooltip이 완전히 숨겨지면 트리거됩니다(CSS 전환 효과가 완료될 때까지 기다립니다).

3. jquery 및 bootstrapheader 파일 소개

4. 버블링 취소

이 기사의 사례를 읽으신 후 해당 방법을 익히셨을 것으로 예상됩니다. 더 흥미로운 정보를 보려면 PHP에 있는 다른 관련 기사를 참조하세요. 중국사이트!

추천 자료:

입력 상자와 드롭다운 상자 간의 연결 효과 달성

Jquery 드롭다운 상자의 데이터를 동적으로 가져오는 방법

Ajax와 Jquery를 데이터베이스와 결합하여 생성 드롭다운 상자를 구현하기 위한 보조 연결

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

관련 라벨:
원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
최신 이슈
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿