본문 바로가기
웹/Jquery

선택자

옥돌소녀 2019. 11. 5. 16:30 

<!-- jquery의 css 선택자 -->

<!DOCTYPE html>
<html lang="en">
<head>
    <script src="jquery-3.1.1.js"></script>
    <!-- cdn -->
    <script src="http://code.jquery.com/jquery-3.1.1.js"></script>
    <script>
        $(document).ready(function(){
            //css 선택자 사용
            $('*').css('color','red');
            //css의 속성명과 값을 동일하게 설정할 수 있다. 
            $('h1').css('backgroundColor','orange');
            //여러개의 태그를 선택할 때
            $('p,h2').css('color','blue');
            //아이디 선택자 
            $('#id-h1').css('color','green');
            //클래스 선택자 
            $('.class-h1').css('color','cyan');
            //클래스 이름이 두개일 때의 선택자 
            $('.item select').css('color','gray');

        });
    </script>


</head>
<body>
    <h1>Lorem ipsum</h1>
    <p>Lorem ipsum dolor sit amet.</p>
    <h2>Lorem ipsum</h2>
    <h1 id="my-h1">Lorem ipsum</h1>
    <h1 class="class-h1">Lorem ipsum</h1>
    <h2 class="item select">Lorem ipsum</h2>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
    <script src="jquery-3.1.1.js"></script>
    <script>
        window.onload=function(){
            alert("문서 로딩 완료");
        };
        // jquery 방법
        $(document).ready(function(){
            alert("문서 로딩 완료");
        });
        // $ 식별자
         //window.jQuery=window.$=jQuery 식별자가 동일함 
         jQuery(document).ready(function(){
                alert("문서 로딩 완료3");
         });

         //좀 더 간략한 표현 
         $(function(){
            alert("문서 로딩 완료4");
         });


    </script>

</head>
<body>
    
</body>
</html>
<!-- jquery-3.1.1.js : 원본 소스 -->
<!-- jquery-3.1.1.min.js  : 공백, 줄바꿈, 코멘트 제거 버젼-->

<!-- jquery 라이브러리 -->
<!-- 2006년 1월, 존 레식이 발표한 라이브러리로서 -->
<!-- 모든 브라우저에서 동작하도록 만든 클라이언트 자바스크립트 lib -->
<!-- 무료이고, 오픈 소스이다  -->

<!-- 장점 :1.  모든 브라우저 호환이 됨 -->
<!--       2.  표준 자바스크립트보다 문법이 간결하다 30%의 노력이 필요하다 -->
<!--      공식사이트는 jquery.com   -->

<!-- jquery를 사용하는 방법 2가지 -->
<!-- 1. 파일을 직접 배포하면서 링크하는 방법 -->
<!-- 2. 네트워크 (CDN)에 있는 파일을 링크하는 방법 -->
<!-- CDN(Content Delivery(Distribution) Network) : -->
<!-- 전 세계 여러지점에 서버에 파일을 배포하고, 가까운 지역에서  -->
<!-- 파일 다운로드 링크를 제공해 주는 네트워크 시스템이다.  -->



<!DOCTYPE html>
<html lang="en">
<head>
        <!-- jqery cdn 링크 -->
        <script
        src="https://code.jquery.com/jquery-3.3.1.js"
        integrity="sha256-WpOohJOqMqqyKL9FccASB9O0KwACQJpFTUBLTYOVvVU="
        crossorigin="anonymous"></script>

        <!-- 직접 파일 배포 -->
        <script src="jquery-3.1.1.js"></script>

</head>
<body>
    
</body>
</html>

저작자표시 (새창열림)

'웹 > Jquery' 카테고리의 다른 글

문서객체 활용하기  (0) 2019.11.11
xml  (0) 2019.11.08
Jquery .css  (0) 2019.11.08
객체 할당  (0) 2019.11.06
배열  (0) 2019.11.05

'웹/Jquery' Related Articles

티스토리툴바