JQuery를 처음부터 배우기, 강의 2_jquery

본 강의에서는 주로 JQuery의 Selector에 대해 간략하게 소개하고 JQuery가 그 가치를 얻는 방법에 대해 설명합니다. 더 이상 고민하지 말고 코드를 게시하고 DEMO를 기반으로 이야기해 보겠습니다.

코드 복사 코드는 다음과 같습니다.

<%@ Page Language="C# " AutoEventWireup= "true" CodeBehind="JQuery2.aspx.cs" Inherits="JQuery_1.JQuery2" %>


< ;head runat="server">

;



코드의 첫 번째 줄에서 볼 수 있듯이 실제로는 aspx 페이지입니다. 줄, JQuery는 JavaScript 스크립트이므로 HTML에서도 사용할 수 있으므로 동일하게 실행할 수 있습니다. VS를 사용하여 JQuery를 작성했기 때문에 aspx 페이지를 직접 추가했습니다.

코드에는 내용이 거의 없습니다. 머리 부분에는 텍스트 입력 상자가 있고 하나의 버튼에는 onclick="btnclick();" 이벤트가 있습니다. , 다른 하나는 그렇지 않습니다. 실행 효과로 볼 때 두 버튼은 실제로 동일한 효과를 가지며, 둘 다 텍스트 상자에 입력한 내용을 팝업으로 표시합니다. 이제 JS의 두 부분을 간략하게 분석해 보겠습니다.

JS의 첫 번째 부분에서는 btnclick()이라는 이름의 함수가 사용자 정의되고, 변수 t1은 함수 본문의 var 키워드를 사용하여 정의됩니다. T1의 값은 JQuery의 선택기를 통해 얻습니다. $("#txt1")은 JQuery 객체를 생성합니다. # ID를 이름으로 변경하면 값을 얻을 수 없습니다. $("#txt1")의 val() 메서드는 텍스트 상자의 값을 가져옵니다. $("#txt1").val()은 JavaScript의 document.getElementById("txt1").value와 동일합니다.

첫 번째 Button의 onclick 이벤트는 첫 번째 JS 함수에서 사용자 정의를 실행합니다. 두 번째 버튼에는 onclick 이벤트가 없습니다. 첫 번째 버튼과 동일한 효과를 얻는 방법은 무엇입니까? 다음으로 JS 코드의 두 번째 부분을 분석해 보겠습니다.

JS 코드의 두 번째 부분에서는 처음부터 JQuery 문서 개체가 직접 생성되고 문서 개체의 Ready 이벤트가 호출되어 DOM이 로드된 후 즉시 실행됩니다. Ready 이벤트에서는 JQuery 개체 $("#btn2")가 생성됩니다. 이 개체에서 JQuery가 ID가 btn2인 컨트롤을 선택하는 것을 볼 수 있습니다. $("#btn2")를 생성할 때 onclick() 메서드가 호출됩니다. 이 방법을 통해 버튼 2가 버튼 1과 동일한 효과를 얻을 수 있습니다. 여기서 간단히 설명하자면 JS 코드의 두 번째 부분에서는 $(document).ready(function() {}) 이벤트를 제거하는 경우 $("#btn2").click(function() { var t1 = $("#txt1").val(); Alert(t1) }); 그러면 두 번째 버튼을 클릭해도 아무런 효과가 없습니다.

오늘 강의는 여기까지입니다. 다른 내용에 대해서는 자세히 다루지 않겠습니다. 질문이 있거나 소스 코드가 필요한 경우 34979719 그룹에 가입하세요. 다음 강의에서는 일반적으로 사용되는 통제의 가치 획득 및 할당.