You will be fine

<jQuery> 4. Selector, Event

by BFine

공부(2018~2019) - 스킨변경전/Javascript

반응형

1.introduce 



$(selector) == document.getElmentsByTagName("");


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
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
 $(document).ready(function(){
    $("h1").css("color","blue");
    $("select > option")
    $("input[value*=입력]").css("color","pink");
             // $끝날때 (입력으로 끝나는것)
             // *포함하고있는거
    $("option:selected").css("color","blue");
             
 })
</script>
</head>
<body>
<input type="text" value="id">
<input type="text" value="입력">
<input type="checkbox" value="jq" checked="checked">
<br>
<h1>
과목
</h1>
<select>
<option>국</option>
<option>영</option>
<option selected="selected">수</option>
</select>
cs





2.selector, css


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
$("h1").css("color","blue");
    
$("select > option")
    
$("input[value*=입력]").css("color","pink");
             // $끝날때 (입력으로 끝나는것)
             // *포함하고있는거
    
$("option:selected").css("color","blue");
    
$("tr:odd").css("background-color","yellow");
    // 인덱스는 0번부터 시작.. odd 홀수 even 짝수
$("td:odd").css("background-color","pink");
    
$("td:gt(1)").css("background-color","aqua");
    //1이상 greater than ( lt,eq)
cs



3.event



$("input[type=button]").on("click", function(){} ) --> on 함수를 주로 사용



1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
 
 $(document).ready(function(){
    $("#btn1").on("click",function(){
        alert($("#btn1").val());
        // jqeury는 함수 --> 값 리턴은 val()
        
        alert($(this).val()); 
        // event가 발생한 jqeury객체(this)
    });
 });
 
</script>
</head>
<body>
<input id="btn1" type="button" value="click">
<input id="btn2" type="button" value="click stop">
</body>
cs


 
        $("#btn1").off("click"); off 이벤트 제거
        
        $("#btn1").one("click",function(){ alert("한번만"); }); 한번만 실행
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<script>
 
 $(document).ready(function(){
    $("#btn1").on("click",function(){
        alert($("#btn1").val());
        // jqeury는 함수 --> 값 리턴은 val()
        
        alert($(this).val()); 
        // event가 발생한 jqeury객체(this)
    });
    $("#btn2").on("click",function() {
        
        $("#btn1").off("click");
        
        
    })
 });
 
</script>
</head>
<body>
<input id="btn1" type="button" value="click">
<input id="btn2" type="button" value="click stop">
</body>
cs



$("#btn1").on("click",function(){  k+=1;

$("div").html(""+k);

//==getElementById().innerHTML

});






실행





ex) background change


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
<script>
 
 $(document).ready(function(){
     
     $("input").on("click",function(){  
         
         if( $("input:checked").val()=="파랑"){
            $("div").css("width","200px").css("height","50px").css("background-color","blue");
        }else if($("input:checked").val()=="노랑") {
            $("div").css("width","200px").css("height","50px").css("background-color","yellow");
        }
        alert($('input:checked').val());
        
     
     });
 
  
 });
 
</script>
</head>
<body>
<div>
<input type="radio" id="b" value="파랑" name="ch">파랑
<input type="radio" id="y" value="노랑" name="ch" checked="checked">노랑
cs




실행


파랑 노랑


반응형

'공부(2018~2019) - 스킨변경전 > Javascript' 카테고리의 다른 글

<jQuery> 6. MAP  (0) 2018.04.12
<jQuery> 5. Event object  (0) 2018.04.11
<Javascript> 9. Event, 정규표현식  (0) 2018.04.09
<javascript> 8.DOM, BOM  (0) 2018.04.06
<javascript> 7. Number, String  (0) 2018.04.05

블로그의 정보

57개월 BackEnd

BFine

활동하기

티스토리툴바