728x90
반응형

객체명은 큰따, 작따 없이 바로 기재 $(객체명)

선택자는 큰따, 작따 사용 "body div"

객체명이 제외한 선택자들은 큰따 작따 사용
$(객체명) or jQuery(객체명)		  
$("*") or jQuery('*')  
마지막으로 target으로 설정한 값이 실행됨.  
제이쿼리를 사용하기 위해 선행되어야 하는 작업
1. 제이쿼리 라이브러리를 연결한다.
(네트워크 방식 /  다운로드 방식)
2. 반드시 즉시실행 함수 안이나 자바스크립트의 함수 안에 기술해야 한다.
3. 반드시 $(....)또는 jQuery(....)로 시작해야 한다.		 https://jquery.com/
<!-- 네트워크 방식 -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.4/jquery.js" integrity="sha512-+k1pnlgt4F1H8L7t3z95o3/KO+o78INEcXTbnoJQ/F2VqDVhWoaiVml/OEHv9HsVgxUaVW+IbiZPUJQfF/YxZw==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
  
<!-- 다운로드 방식 -->
<script src="./jquery/jquery-3.6.4.js" integrity="sha512-+k1pnlgt4F1H8L7t3z95o3/KO+o78INEcXTbnoJQ/F2VqDVhWoaiVml/OEHv9HsVgxUaVW+IbiZPUJQfF/YxZw==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
   
 
  
코드 기술이 짧아져서 사용하기에는 편하지만
컴파일이 길어짐
  

 

ㅁㄴㄹ
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- 다운로드 방식 : 제이쿼리 라이브러리 파일을 직접 내려받아 html에 불러오는 방식 -->
    <script src="./jquery/jquery-3.6.4.js"></script>

    <script>
        // 제이쿼리는 선택자를 사용하기 위해서는 실행할 수 있는 환경이 미리 조성되어 있어야만 한다.
        // 즉시실행 방법.
        // javascript형식
        // window.onload = function (){ 소스코드들; ....;} ; (세미콜론 생략 가능)

        // jQuery즉시실행 함수 형식
        // $(document).ready(function(){소스코드들; ...;});
        // $(function(){소스코드들; ...;});

        // 콜백함수(=형식:자바스크립트의 익명함수 형식)
        // 매개인자로 존재하면서 실행과 반환을 자동으로 해주는 함수

        jQuery(document).ready(function(){
            alert("3.$(document).ready ALERT 경고창");
            document.write("3.$(document).ready ALERT 경고창");
        });

        $(function(){
            alert("4.$(document).ready ALERT 경고창");
            document.write("4.$(document).ready ALERT 경고창");
        });
        //jQuery보다 js즉시실행함수가 우선순번
        (function(){
            alert("1.(function)의 ALERT 경고창");
            document.write("1.(function)의 ALERT 경고창");
        })();

        window.onload = function(){
            alert("2.window.onload ALERT 경고창");
            document.write("2.window.onload ALERT 경고창");
        }
    </script>
</head>
<body>
    본문 내 알림 글자를 띄윕니다.
</body>
</html>​

 

ㄴㅁ
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .spotlight{background-color: #ff0;}
        .redtext {color: rgb(104,94,94);}
        .largetext {font-size: 30pt;}
        .italictext {font-style: italic;}
    </style>
    <!-- 네트워크 전송방식(CDN : Content Deilvery Network 또는 Code Delivery Network) : 온라인에서 제공하는 제이쿼리 라이브러리 파일을 네트워크를 통해 html에 불러오는 방식임
    3.7.1 : 현재 가장 최신버전임 -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.4/jquery.min.js"></script>
    <script>
        // 선택자 사용하기
        // 형식$('선택자') : documnet처럼 내장 객체(만든 객체포함)를 제외하고는 선택자(css의 선택자와 동일)를
        // 기술할 경우 따옴표(큰따, 작따 모두 가능)로 묶어 준다.
        // addClass() : 해당 선택자에 class속성 추가하기
        // removeClass() : 해당 선택자에 class속성값 제거하기
        // hide() : 해당 선택자 엘리먼트 숨기기 (none과 동일) 영영까지 제거함
        // show() : 해당 선택자 엘리먼트 보이기. 엘리먼트 고유 속성 그대로 보여짐

        /*
        $("span") =>
        <span id="simpletext1" class="redtext largetext">simple</span>
        <span id="simpletext2" class="redtext">basic</span>
        document.getElementsByTagName("span")[0].setAtrribute("class","redtext")
        document.getElementsByTagName("span")[1].setAtrribute("class","redtext")
        */
        function startFnc(){
            // $(this). 
            $("span").addClass('redtext');
            $('div').addClass('spotlight');
            $('#simpletext1').addClass('largetext');
            $('.simpletext1').addClass('italictext');
            $('#fbtn').hide(); // display : none;
            $('#ebtn').show(); // visibility : visible;
        }

        function endFnc(){
            $("span").removeClass('redtext');
            $('div').removeClass('spotlight');
            $('#simpletext1').removeClass('largetext');
            $('.simpletext1').removeClass('italictext');
            $('#fbtn').hide(); 
            $('#ebtn').show(); 
        }

        //즉시실행함수
        $(document).ready(function(){
            $('#ebtn').hide();
            // =>document.getElementById("ebtn").style.display='none';
        });
    </script>
</head>
<body>
    <span id="simpletext1">simple</span>
    <div class="simpletext1">jQuery</div>
    <span id="simpletext2">basic</span>
    <div id="simpletext3">example</div>
    <button id="fbtn" onclick="startFnc()">제이쿼리 적용하기</button>
    <button id="ebtn" onclick="endFnc()">제이쿼리 제거하기</button>
</body>
</html>​

 

728x90
반응형
저작자표시 비영리 변경금지

'[JS]' 카테고리의 다른 글

[JS] jQuery selector - prev, prevAll, prevUntil / next, nextAll, nextUntil / siblings  (0) 2024.03.05
[JS] jQuery selector - parent(), children(), closest()  (0) 2024.03.05
[JS] querySelector, querySelectorAll  (0) 2024.03.04
[JS] callfunction  (0) 2024.03.04
[JS] window.location.href / window.history  (0) 2024.03.04

+ Recent posts

티스토리툴바