jQuery를 사용하는 방법? jQuery 선택기란 무엇입니까?-JS 튜토리얼-php.cn

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

青灯夜游

풀어 주다： 2018-11-13 10:39:38

앞으로

2218명이 탐색했습니다.

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

1. 사용 방법

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

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

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>My Test JQuery</title>
    <script type="text/javascript" src="./js/jquery-1.10.2.min.js"></script>
</head>
<body>
</body>
</html>

로그인 후 복사

2. jQuery 구문

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

기본 문법 형식:

 $(selector).action()

로그인 후 복사

예:

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

로그인 후 복사

# 🎜🎜#쓰기:

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

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

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

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

로그인 후 복사

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

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

로그인 후 복사

예:

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>My Test JQuery</title>
    <script type="text/javascript" src="./js/jquery-1.10.2.min.js"></script>
    <script type="text/javascript" >    
        $(function(){
           $("button").click(function(){
                $("#myDiv1").html("Hello JQuery World");
                $("#myDiv1").css("background-color","green");
            });
        });
    </script>
</head>
<body>
    <button type="button">点击</button>
    <div id="myDiv1">Hello</div>
</body>
</html>

로그인 후 복사

　#🎜 🎜#

3. 기본 선택기

(1)

Element selector

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

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

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>My Test JQuery</title>
    <script type="text/javascript" src="./js/jquery-1.10.2.min.js"></script>
    <script type="text/javascript" >    
        $(function(){
           $("button").click(function(){
                $("p").hide();
            });
         
        });
    </script>
</head>
<body>
    <button type="button">点击</button>
    <p>p元素1</p>
    <p>p元素2</p>
    <div id="myDiv1">Hello</div>
</body>
</html>

로그인 후 복사

(2)

#id 선택기

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

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

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>My Test JQuery</title>
    <script type="text/javascript" src="./js/jquery-1.10.2.min.js"></script>
    <script type="text/javascript" >    
        $(function(){
           $("button").click(function(){
                $("#myDiv1").hide();
            });
        });
    </script>
</head>
<body>
    <button type="button">点击</button>
    <p>p元素1</p>
    <p>p元素2</p>
    <div id="myDiv1">Hello</div>
</body>
</html>

로그인 후 복사

(3)

.class 선택기

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

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>My Test JQuery</title>
    <script type="text/javascript" src="./js/jquery-1.10.2.min.js"></script>
    <script type="text/javascript" >    
        $(function(){
           $("button").click(function(){
                $(".myClass1").hide();
            });
        });
    </script>
</head>
<body>
    <button type="button">点击</button>
    <p>p元素1</p>
    <p>p元素2</p>
    <div id="myDiv1">Hello</div>
    <div Class="myClass1">你好</div>
</body>
</html>

로그인 후 복사

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