jQuery를 사용하는 방법? jQuery 선택기란 무엇입니까?

본 글의 내용은 jQuery 사용법을 소개하는 것인가요? jQuery 선택기란 무엇입니까? jQuery 파일 라이브러리의 사용, 기본 구문 사용 및 jQuery 선택기의 사용법을 모든 사람이 이해할 수 있도록 하십시오. 도움이 필요한 친구들이 참고할 수 있기를 바랍니다.

1. 사용 방법

jQuery 라이브러리는 모든 jQuery 기능이 포함된 JavaScript 파일에 있습니다.

웹페이지에서 jQuery를 사용해야 하는 경우 먼저 웹페이지에 jQuery의 js 파일을 도입해야 합니다.

nbsp;html>


<meta>
<title>My Test JQuery</title>
    <script></script>

2. jQuery 구문

jQuery 구문은 HTML 요소를 선택하고 선택한 요소에 대해 특정 작업을 수행하는 것입니다. [추천 관련 동영상 튜토리얼: jQuery 튜토리얼]

기본 문법 형식:

 $(selector).action()

예:

$("p").hide()    // 隐藏所有 <p> 元素
$("#myInfo").hide() // 隐藏所有 id="myInfo" 的元素

# 🎜🎜#쓰기:

모든 jQuery 함수는 document.ready 함수에 있습니다. 아래 그림과 같습니다.

이것은 문서가 완전히 로드(준비)되기 전에 jQuery 코드가 실행되는 것을 방지하기 위한 것입니다. 즉, DOM이 로드될 때까지 DOM을 조작할 수 없습니다.

문서가 완전히 로드되기 전에 기능을 실행하면 작업이 실패할 수 있습니다.

    $(document).ready(function(){     
       // 代码部分写在这里     
    });

은 다음과 같이 축약될 수도 있습니다.

   $(function(){         
      // 这里写代码         
   });

예:

nbsp;html>


<meta>
<title>My Test JQuery</title>
    <script></script>
    <script>    
        $(function(){
           $("button").click(function(){
                $("#myDiv1").html("Hello JQuery World");
                $("#myDiv1").css("background-color","green");
            });
        });
    </script>


    <button>点击</button>
    <div>Hello</div>

　#🎜 🎜#

3. 기본 선택기

(1)

Element selector

: jQuery 요소 선택기는 이름을 기준으로 요소를 선택합니다. 예: 요소 선택기를 사용하여 모든

요소를 선택하고 숨깁니다.

nbsp;html>


<meta>
<title>My Test JQuery</title>
    <script></script>
    <script>    
        $(function(){
           $("button").click(function(){
                $("p").hide();
            });
         
        });
    </script>


    <button>点击</button>
    <p>p元素1</p>
    <p>p元素2</p>
    <div>Hello</div>

　

(2)

#id 선택기

: jQuery #id 선택기는 HTML 요소 id를 전달합니다. 속성은 지정된 요소를 선택합니다. 페이지에 있는 요소의 ID는 고유해야 하므로 페이지에 있는 요소만 선택하려면 #id 선택기를 사용해야 합니다.

Example : #id 선택기를 사용하여 id="myDiv1"인 요소가 숨겨집니다.

nbsp;html>


<meta>
<title>My Test JQuery</title>
    <script></script>
    <script>    
        $(function(){
           $("button").click(function(){
                $("#myDiv1").hide();
            });
        });
    </script>


    <button>点击</button>
    <p>p元素1</p>
    <p>p元素2</p>
    <div>Hello</div>

　

(3)

.class 선택기

: jQuery 클래스 선택기는 지정된 클래스를 전달할 수 있습니다. 요소 찾기 . 예: 클래스 선택기를 사용하여 Class="myClass1"인 요소를 선택하고 숨깁니다.

nbsp;html>


<meta>
<title>My Test JQuery</title>
    <script></script>
    <script>    
        $(function(){
           $("button").click(function(){
                $(".myClass1").hide();
            });
        });
    </script>


    <button>点击</button>
    <p>p元素1</p>
    <p>p元素2</p>
    <div>Hello</div>
    <div>你好</div>

　

요약: 위 내용은 이 글의 전체 내용입니다. 모든 분들의 공부에 도움이 되었으면 좋겠습니다.

위 내용은 jQuery를 사용하는 방법? jQuery 선택기란 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!