Jquery

서울IT코드정리 /kyChoi·2021년 10월 31일
0

JSP 정리❤

목록 보기
11/22
<script src="https://code.jquery.com/jquery-3.5.0.js"></script>
<script>
    window.onload = function () { }
    $(document).ready(function(){

    });

jquery 에는  $(document).ready(function(){

    });이 로직이 프로그램 실행되면 안의 로직을 읽는다.

</script>
<script>
    window.onload = function () { }
    $(document).ready(function () {
        $($("input")[0]).css("backgroundColor", "red");
        $("#b1").css("backgroundColor", "green");
        $(".b2").css("backgroundColor", "blue");
        $("h1").css("backgroundColor", "yellow");
    });



</script>

<body>
    <input type="button">
    <input type="button" id="b1">
    <input type="button" class="b2">
    <h1>111</h1>
    <h1>222</h1>
    <h1>333</h1>
</body>

$() 안에는 선택자를 넣을 수 있다
1. 아이디
2. 클래스
3. 태그

$({
backgroundColor:"red",
border:"1px solid navy",
color:"blue"
})
처럼 array-like 처럼 사용할 수 있다

<script>
    window.onload = function () { }
    $(document).ready(function () {
        $("h1").css({

            backgroundColor: "red",
            border: "1px solid navy",
            color: "blue" //여러개의 값을 setting 할 수 있다
        });
    });



</script>

<body>
    <h1>AAA</h1>
</body>
<script>
    $(document).ready(function () {
        $("h1").html("BBB"); //AAA대신 BBB가 적힌다
    });
</script>

<body>
    <h1>AAA</h1>
</body>
<script>
    $(document).ready(function () {
        var s = $($("h1")[1]).html();
        console.log(s); //BBB만 출력됩니다~
    });
</script>

<body>
    <h1>AAA</h1>
    <h1>BBB</h1>
    <h1>CCC</h1>
</body>
   $(document).ready(function () {
        var s1 = $("h1").text(); //이텔릭체 없이 문자를 출력합니다, text는 테그 해석없이 문자들만 출력합니다~
        console.log(s1);
        var s2 = $("h1").html();//이텔릭체 적용된 문자를 출력합니다
        console.log(s2);
    });
</script>

<body>
    <h1>AAA<i>BBB</i>CCC</h1>
    var array =["red","green","blue"];
      var num = 0;
      $("h1").each(function(){
          $(this).css("color",array[num++]);
      }); //모든 테그에 적용되다, 
    });
</script>

<body>
   <h1>AAA</h1>
   <h1>BBB</h1>
   <h1>CCC</h1>
</body>
profile
건물주가 되는 그날까지

0개의 댓글