336x280(권장), 300x250(권장), 250x250, 200x200 크기의 광고 코드만 넣을 수 있습니다.

안녕하세요.

이번엔 class, id, tag까지 이용한 Jquery예제를 보고 가실께요.

jquery불러오기에 비하면 소스가 늘긴 했지만,  설명도 다 달려있어서 별문제 없을거 같습니다.

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
<!-- jquery를 불러옵니다. jquery.com download 페이지를 참조해주세요 -->
<script src="//code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="//code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
 
<script>
    //Jquery 화면을 불러오자마자 실행합니다.
    $(document).ready(function(){
        //class="testClass" 달린 버튼을 클릭했을때 합니다.
         $(".testClass").click(function(){
             alert("testClass 버튼클릭");
         });
         //id="testID" 달린 버튼을 클릭했을때 합니다.
         $("#testID").click(function(){
             alert("testID 버튼클릭");
         });
 
         //p태그가 소유하고 있는 내용을 클릭했을때 합니다.
         $(p).click(function(){
             alert("p태그 클릭");
         });    
    });
</script>
<input type="button" class="testClass"/>
<input type="button" id="testID"/>
<p>P태그</p>
 
 cs

 

감사합니다.

'JQUERY' 카테고리의 다른 글

북마크 JQUERY 사용하기  (0) 2016.07.08
JQUERY 불러오기 참 간단하죠~  (0) 2016.07.06
JQUERY url 주소가져오기  (0) 2015.11.30
JQUERY attribute 쓰기  (0) 2015.11.29
JQUERY 클릭 이벤트와 멀티 seleter사용하기  (0) 2015.11.29
336x280(권장), 300x250(권장), 250x250, 200x200 크기의 광고 코드만 넣을 수 있습니다.

안녕하세요.

 

이번엔 JQUERY 불러오기에 대해서 쓸께요. ㅎㅎ

JQUERY 이미 올린 것도 약간 있긴하지만.. 틈틈이 만들어서 올려드릴께요~.

 

1
2
3
4
5
6
7
8
9
10
11
<!-- jquery를 불러옵니다. jquery.com download 페이지를 참조해주세요 -->
<script src="//code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="//code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
 
<script>
    //Jquery 화면을 불러오자마자 실행합니다.
    $(document).ready(function(){
          alert("시작하자마자 바로 실행!");  //javascript의 alert화면입니다.
    });
</script>
 
 cs

일단 설명은 주석으로 다 들어있어요~ ㅎㅎ

복사 붙여넣기 해서 보시면 아시겠지만, 하자마자 alert를 하나 띄워줍니다.

 

감사합니다.

'JQUERY' 카테고리의 다른 글

북마크 JQUERY 사용하기  (0) 2016.07.08
JQUERY 간단한 selector 이렇게 하면 좋을거같아요  (0) 2016.07.06
JQUERY url 주소가져오기  (0) 2015.11.30
JQUERY attribute 쓰기  (0) 2015.11.29
JQUERY 클릭 이벤트와 멀티 seleter사용하기  (0) 2015.11.29
336x280(권장), 300x250(권장), 250x250, 200x200 크기의 광고 코드만 넣을 수 있습니다.

안녕하세요.

 

사용자 정의 필터링하는 방법을 알려드리겠습니다.

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
<!DOCTYPE html>
<html>
<meta charset="utf-8"/>
 
<!-- 라우팅과 angularJS기본파일입니다. -->
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<body>
 
<!-- controller와 app을 생성합니다. -->
<ul ng-app="myApp" ng-controller="moneyCtrl">
 
<!-- menuMoney라는 배열을 차례대로 뿌립니다. -->
<li ng-repeat="x in menuMoney">
    <!-- repeat를 통해서 들어온 x를 money형식으로 포멧팅해서 출력합니다. -->
    {{x | money}}
</li>
</ul>
 
<script>
var app = angular.module('myApp', []);
 
/* 어떤 값을 포멧해서 넣어주는 함수이고, 어떤 데이터를 포멧할때 그 데이터를 num자리에 넣어서 실행합니다. */
app.filter('money', function() {
    //원화로 포멧해주는 함수입니다.
    return function(num) {
        var len, point, str;
        
        point = num.length % 3 ;
        len = num.length;  
       
        str = num.substring(0, point);  
        while (point < len) {  
            if (str != "") str += ",";  
            str += num.substring(point, point + 3);  
            point += 3;  
        }  
        str = "\\"+str;
        return str;
    };
});
//controller를 생성합니다. menuMoney라는 변수를 생성해서 배열로 넣어줍니다.
app.controller('moneyCtrl', function($scope) {
    $scope.menuMoney = [
        '1234',
        '1000',
        '1000000',
        '500000',
        '40000',
        '9000000000',
        '10203050'
        ];
});
</script>
</body>
</html>
 
 cs

 

감사합니다.

 

 

'ANGULARJS > filter' 카테고리의 다른 글

angularJS filter 검색을 편하게 해주는 filter  (0) 2016.06.30
angularJS Filter간단한 사용법  (0) 2016.06.30

+ Recent posts

티스토리툴바