은은하게 코드 뿌시기

제이쿼리(jQurey) -기본 본문

웹/제이쿼리 JSTL

제이쿼리(jQurey) -기본

은은하게미친자 2022. 11. 10. 16:48
728x90

1 .제이쿼리 

- 자바스크립트 라이브러리 언어, 자바스크립트보다 애니메이션을 쉽게 구현할 수있음

1.1 제이쿼리 연동법

  • 다운받아서 파일을 연동
  • CDN 방식 :  URL을 링크하여 사용

1.2 선택자

    : HTML요소를 선택하여 가져옵니다.

$(function(){
    $("요소 선택").css("속성","값");
});`
바디에잇는 모든 문서 객체 를 로딩한 후에 실행

기본선택자

- 직접선택자 :  id, class 등을 통해 직접선택

- 근접 선택자 : 자식요소, 다음 요소 등을 선택

탐색 선택자

- 위치 선택자 : 인덱스 위치를 파악하여 선택

- 속성 선택자 : 속성을 선택

객체조작

- 선택한 요소 삭제, 생성, 복제, 속성 변경

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://code.jquery.com/jquery-latest.min.js"></script>
    <script>
        $(function(){
            $(".wrap_1").css("border","1px solid orange");
            // wrap_1 클래스 아래 있는 p요소 의 속성 변경
            
            
            //직접선택자 id, class 등을 통해 직접선택 
            $(".wrap_1 p").css("background-color","pink");
 
 
            // 근접선택자 : 자식요소, 다음 요소 등을 선택
            // acrtive속성을 가진 다음 요소의 속성변경
            $(".active").next("p").css("background-color","aqua");
 
 
            // 위치선택자 : 인덱스 위치를 파악하여 선택
            // 인덱스는 0부터 시작
            // wrap_1 클래스 아래 있는 p요소 중 인덱스를 설정하여 의 속성 변경
            $(".wrap_1 p").eq(1).css("background-color","silver");
            
            
            //속성 선택자 : 속성을 선택
            $("input[type=text]").css({"background-color":"orange"});
        
            //객체조작  객체삭제 : active속성 삭제해보기
            $(".wrap_1 p").eq(1).removeClass("active");
         
            //객체조작 객체 생성
            $(".wrap_1").append("<p> 텍스트추가 </p>")
 
 
        });
 
    </script>
</head>
<body>
    <div class="wrap_1">
        <p>텍스트1</p>
        <p class="active">내용2</p>
        <p><a href="#">네이버</a></p>
        <p>
            <input type="text" value="Hello">
        </p>
    </div>
    <div class="wrap_2"> 
        <p>내용5</p>
        <p>내용6</p>
    </div>
    <div class="wrap_3">
        <div>
            <p>내용7</p>
            <p>내용8</p>
        </div>
    </div>
</body>
</html>
 cs

 

 

 

728x90

'웹 > 제이쿼리 JSTL' 카테고리의 다른 글

제이쿼리(jQurey) 비동기 방식 연동 - JQUERY/AJAX  (1) 2022.11.14
제이쿼리(jQurey) - 효과 및 애니메이션 메소드  (0) 2022.11.14
제이쿼리(jQurey) -이벤트  (0) 2022.11.10
제이쿼리(jQurey) load,div onclick, show, hide ,visible 간단예제  (0) 2022.07.12
제이쿼리(jQuery) cdn 및 onload, ready  (0) 2022.07.12
'웹/제이쿼리 JSTL' Related Articles more
Comments