라이브러리란?(library)

자주 사용하는 코드들을 재사용할 수 있는 형태로 가공해서 프로그래밍 효율을 높여주는 코드들

jQuery란?

  1. 엘리먼트를 선택하는 강력한 방법과
  2. 선택된 엘리먼트들을 효율적으로 제어할 수 있는 다양한 수단을 제공하는
  3. 자바스크립트 라이브러리



라이브러리 활용법  jquery 라이브러리를 다운받아   <script src= "위치"/>

  또는 위치부분에 CDN주소 


$('css선택자').css('color': 'red');


.css('color': 'red'); 부분은 Jquery 객체의 메소드


     


$(' 선택자 ')


선택자   --> TagName


.선택자    --> ClassName


#선택자   -->  IdName   


예제


적용 우선순위   #idName  >  .ClassName  >  선택자


결과 값 참고!

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://code.jquery.com/jquery-1.12.4.js"
            integrity="sha256-Qw82+bXyGq6MydymqBxNPYTaUXXq7c8v3CwiYwLLNXU="
            crossorigin="anonymous"></script>
</head>
<body>
<ul>
    <li>HTML</li>
    <li>HTML1</li>
    <li class="aaa">CSS</li>
    <li id="idName1">JAVASCRIPT</li>
</ul>


<script>
    $('ul').css('color', 'red');
    $('.aaa').css('color', 'green');
    $('#idName1').css('color', 'blue').css('textDecoration', 'underline');
</script>


</body>
</html>





CSS 선택


span 태그 내의 class 는 그룹핑.


id 는 식별자!  (중복은 가능하나 하지 말아야 함)



CSS에서  


우선순위    id > class > 태그( ex_<span> ) )


#idname   #으로 시작 되는 부분은 id를 선택 


#idname{

     css 적용 옵션

}


.classname 으로 시작되는 부분은 클래스를 선택

.classname {

      css 적용 옵션

}


span 부분   모든 <span>태그 선택

span{

   css 적용 옵션

}



아래 <head> 태그안의  

<style> css 적용 예


<body>부분  <span>태그 내의 id, class 를   <style>태그의 css적용



------------------------------

<!doctype html>

<html lang="ko">


<head>

    <style>

        .js {

            font-weight: bold;

            color: red;

        }


        #first {

            color: green;

        }

        span {

            color: blue;

        }

    </style>

</head>

<body>


<h1><a href="index.html"> WEB</a></h1>


<h2 style="background-color:coral; color:powderblue">JavaScript</h2>


<p>

    <span id="first" class="js">JavaScript</span> (/ˈdʒɑːvəˌskrɪpt/[6]), often abbreviated as JS, is a

    high-level, interpreted programming language. It is

    a language which is also characterized as dynamic, weakly typed, prototype-based and multi-paradigm. Alongside

    <span>HTML</span>

    and <span>CSS</span>, <span class="js">JavaScript</span> is one of the three core technologies of World Wide Web

    content engineering. It is used to make

    webpages interactive and provide online programs, including video games. The majority of websites employ it, and all

    modern web browsers support it without the need for plug-ins by means of a built-in <span

        class="js">JavaScript</span>

    engine. Each of the

    many <span class="js">JavaScript</span> engines represent a different implementation of <span

        class="js">JavaScript</span>, all based on the ECMAScript

    specification, with some engines not supporting the spec fully, and with many engines supporting additional features

    beyond ECMA.

</p>


</body>

</html>


결과



+ Recent posts

티스토리툴바