You will be fine

<jQuery> 5. Event object

by BFine

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

반응형

1.Event Object

<복습>

특정코드의 값을 찾을때는 $("태그명[내용]") --> $("a[href*=google]"), $("input[checked=checked]")

속성값이 부여된 태그를 찾을때 $("input:checked"), $("option:selected") 


Event 객체, e.pageXY --> 이벤트가 발생한 위치의 좌표


e.type --> 해당 이벤트정보


e.which--> 이벤트 발생한 요소의 Key 값



<예제>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<script>
 
 $(document).ready(function(){
     
        $("#one").on("mouseover",function(e){ // event 객체 사용
            $("#result").html("x좌표="+e.pageX+" Y좌표="+e.pageY)            
            $("#result").css('color',"aqua");
        });
        $("#one").on("mouseout",function(e){
            
            $("#result").html(e.type+" "+e.which);// e.type 내용    
            $("#result").css('color',"blue");
        });
     });
 
</script>
</head>
<body>
<div id="result"></div>
<img id="one" src="images/americano.jpg">
</body>
cs




실행





2.Animation Object



dd $("div").show(1000,function(){});  show 설정시간 동안 실행(시간, 함수), hide


dd callback함수 : 발생 시간을 사용자가 설정


ex) slideUp/Down, fadeIn/fadeOut

     


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<script>
 
 $(document).ready(function(){
        $("#b1").on("click",function(){
            $("#two").show(2000); // 지정한 시간만큼 천천히 보여준다
        });
        $("#b2").on("click",function(){
            $("#two").hide(2000,function(){alert("hide")}); // 지정한 시간만큼 천천히 사라진다
        }); // show+hide == toggle
     });
 
</script>
 
<body>
<input id="b1" type="button" value="show">
<input id="b2" type="button" value="hide"><br>
 
<img id="two" src="images/americano.jpg" width="100" height="100" style="display:none">
</body>
cs


실행






<추가>


animate({css(top/left/width)}, 3000, function(){})

$(document).ready(function(){
       $("#b3").on("click",function(){
           $("#thr").animate({left:"100px",width:"300px"},3000);
       });
       $("#b4").on("click",function(){
           $("#thr").show(2000).fadeIn(2000)
       });
 });



3.Attr, Append, Prop


attr() removeAttr(속성명) : 속성추가.삭제 / addClass() removeClass() : 스타일 추가,삭제 

    

append() remove(): 태그 추가,삭제


empty() : 태그 삭제


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
27
28
29
30
31
32
33
34
<script>
 
$(document).ready(function(){
    $("#btn6").on('click',function(){
        
        $("#res2").html($("#t1").val()); //읽기
        $("#t1").val("kim");//수정
 
        $("#res2").text(); //html은 태그포함, text는 태그 불포함
        
        $("#res2").attr('type'); //속성 읽기
        $("#res2").attr('type',"password");//수정
        
        //$("#res2").html($("input:checkbox:eq(0)").attr("checked"));
          //attr() 중간변화를 감지 못함
 
        $("#res2").html($("input:checkbox:eq(0)").prop("checked"));
          //prop() 변화감지                           == 1번째 값    
      
       // $("#t1").remove(); // 선택태그 삭제
        $("#t1").empty(); // 선택태그의 자식태그둘 삭제
        
    });
});
</script>
</head>
<body>
<input type="checkbox" value="1">1
<input type="checkbox" value="2">2
<input type="checkbox" value="3" checked="checked">3
 
입력:<input id="t1" type="text">
<input id="btn6" type="button" value="press"><br>
<div id=res2></div>
cs





Ex


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
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
<script>
 
$(document).ready(function(){
    var res="";
    var allcount=0;
    
    $("input[type=checkbox]").on("click",function(){
        if(allcount==1){
            $("#all").prop("checked",false);    
        }
            
        if($(this).prop("id")=="all"){
            if($(this).prop("checked")){
                $("input[type=checkbox]").prop("checked",true);
                allcount=1;
            }else{
                $("input[type=checkbox]").prop("checked",false);
                allcount=0;
            }            
        }
    });
    
    $("#btn").on("click",function(e){
        var arry="";
      $("input[type=checkbox]:checked").each(function () {
            arry+=$(this).prop("id")+" ";
        });
        
        res+="검색어 : "+$("#search").val();
        alert("<체크>"+arry+"\n"+res);
        
    });
    
});
</script>
</head>
<body>
<h1>검색 대상과 검색어를 입력하세요</h1>
<input id="all" type="checkbox" >모두
<input id="제목" type="checkbox" >제목
<input id="내용" type="checkbox" >내용
<input id="작성자" type="checkbox" >작성자
<input id="search" type="text" value="검색어를 입력하세요">
<input id="btn" type="button" value="검색">
 
</body>
    });
});
</script>
</head>
<body>
<input type="checkbox" value="1">1
<input type="checkbox" value="2">2
<input type="checkbox" value="3" checked="checked">3
 
입력:<input id="t1" type="text">
<input id="btn6" type="button" value="press"><br>
<div id=res2></div>
cs


<추가>

$("input:checkbox:checked).val() // 여러개 가져올 수 있음(배열)





반응형

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

<jQuery> 7. Ajax  (0) 2018.04.25
<jQuery> 6. MAP  (0) 2018.04.12
<jQuery> 4. Selector, Event  (0) 2018.04.10
<Javascript> 9. Event, 정규표현식  (0) 2018.04.09
<javascript> 8.DOM, BOM  (0) 2018.04.06

블로그의 정보

57개월 BackEnd

BFine

활동하기

티스토리툴바