아래와 같이 간단하게만 해도 숫자이외에 입력시 숫자이외글은 입력되었다가 지워진다!!
$(document).on("keyup","#id",
function(){
$(this).val($(this).val().replace(/[^0-9]/gi,""));
}
);
| 이미지 바꾸기 (0) | 2013.02.06 |
|---|---|
| jquery 슬라이드 메뉴(마우스오버/아웃) (0) | 2013.01.18 |
| jquery 요약 (0) | 2013.01.18 |
| jquery api (0) | 2011.12.15 |
| JQuery (0) | 2011.04.06 |
쭈니후니
개발자로서 공부와 낚시를 좋아하는 한사람으로서의 추억을 담을 블로그입니다.
jquery로 이미지 변경
jQuery('div.gnbWrap > ul > li:not(.on)').hover(function() {
var filename = $(this).find('img').attr('src');
jQuery(this).find('img').attr('src', filename.replace('lev.png', 'over.png'));
},
function() {
var filename = $(this).find('img').attr('src');
jQuery(this).find('img').attr('src', filename.replace('over.png', 'lev.png'));
});
hover :not(.on) 을 이용해서 해당 이미지에 클릭했을시 이미지 변경하는것
메뉴바에 마우스 오버시 사용하면 유용하다!!!!
| Jquery 숫자만 간단하게 (0) | 2016.03.14 |
|---|---|
| jquery 슬라이드 메뉴(마우스오버/아웃) (0) | 2013.01.18 |
| jquery 요약 (0) | 2013.01.18 |
| jquery api (0) | 2011.12.15 |
| JQuery (0) | 2011.04.06 |
쭈니후니
개발자로서 공부와 낚시를 좋아하는 한사람으로서의 추억을 담을 블로그입니다.
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
$("ul.sub").hide();
$("ul.menu li").hover(function(){
$("ul:not(:animated)",this).slideDown("fast");
},
function(){
$("ul",this).slideUp("fast");
});
});
</script>
<style type="text/css">
</style>
</head>
<body>
<div id="container">
<ul class="menu">
<li><a href="#">메뉴</a>
<ul class="sub">
<li><a href="#">서브메뉴1</a></li>
<li><a href="#">서브메뉴2</a></li>
<li><a href="#">서브메뉴3</a></li>
</ul>
</li>
</ul>
</div>
</body>
</html>
위 hover()는 mouseover() mouseout()를 합쳐논 함수라고 볼수있다``;;
| Jquery 숫자만 간단하게 (0) | 2016.03.14 |
|---|---|
| 이미지 바꾸기 (0) | 2013.02.06 |
| jquery 요약 (0) | 2013.01.18 |
| jquery api (0) | 2011.12.15 |
| JQuery (0) | 2011.04.06 |
쭈니후니
개발자로서 공부와 낚시를 좋아하는 한사람으로서의 추억을 담을 블로그입니다.
[jQuery Cookbook - 1장 jQuery의 기초]
방법1 : <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
방법2 : 다운로드 받아 포함시키기
DOM 로드된 후 함수 실행 (로딩속도 향상을 위해 방법3을 사용하자!)
방법1 : jQuery(document).ready(function() { //실행구문 })
방법2 : jQuery(function() { //실행구문 })
방법3 : </body> 앞에 스크립트 추가
DOM요소 선택
jQuery('a') => 모든 a요소 (== document.getElementsByTagName('a'))
jQuery('a').length => 모든 a요소의 개수
jQuery('input', $('form')) => 모든 form요소내의 input요소(들)
jQuery('input', document.forms[0]) => 첫번째 form요소내의 input요소(들)
jQuery('input', 'body') => body요소내의 input요소(들)
DOM요소 필터링
jQuery('a').filter('.external') => 모든 a요소 중 클래스명이 external인 a요소(들) (== jQuery('a').filter(function(index) { return $(this).hasClass('external'); }))
jQuery('p').filter('.middle').end() => 모든 p요소 중 클래스명이 middle인 요소(들)의 필터링 전 요소(들) (== jQuery('p'))
DOM요소 검색
jQuery('p').find('em') => 모든 p요소 하위의 em요소(들) (== jQuery('em', $('p')) ==jQuery('p em'))
jQuery('p').filter('.middle').find('span').end().end() => 모든 p요소 중 클래스명이 middle인 요소(들)의 하위 span요소(들)의 검색 전, 필터링 전 요소(들)
(==jQuery('p'))
DOM 셀렉션 추가
jQuery('div').find('p').andSelf().css('border', '1px solid #993300'); => div요소(들)과 하위 p요소(들) 모두에 대해 스타일 적용
DOM 탐색
jQuery('li:eq(1)') => 두번째 li 요소
관련메소드 => next():다음요소, prev():이전요소, parent():상위요소, children():하위요소들, nextAll():다음요소들, prevAll():이전요소들
jQuery('li:eq(1)').parent().children(':last') => 두번째 li요소의 상위요소의 마지막 하위요소
기타 탐색관련 메소드 : http://docs.jquery.com/Traversing
DOM요소 생성
jQuery('<p><a>jQuery</a></p>'); => p요소 생성
jQuery('<p><a>jQuery</a></p>').find('a').attr('href', 'http://www.jquery.com'); => p요소를 생성하고 하위 a요소(들)을 찾아 속성 변경
jQuery('<p><a>jQuery</a></p>').find('a').attr('href', 'http://www.jquery.com').end().appendTo('body');
=> p요소를 생성하고 하위 a요소(들)을 찾아 속성 변경 후 생성된 p 요소를 body요소 하위로 포함시킴
DOM요소 제거
jQuery('a).remove(); => 모든 a요소 제거
jQuery('a').remove('.remove'); => 클래스명이 remove인 모든 a요소 제거
DOM요소 교체
jQuery('li.remove').replaceWith('<li>removed</li>'); => 클래스명이 remove인 모든 li요소들을 뒤에 나온 li요소로 변경
DOM요소 복제
jQuery('ul').clone().appendTo('body'); => 모든 ul요소들을 복제하여 body의 하위요소로 포함시킴
jQuery('ul#a li').click(function() { //실행구문 }).parent().clone(true).find('li').appendTo('#b').end().end().remove();
=> 아이디가 a인 ul 하위의 li요소들을 클릭하면 함수를 실행시키고 부모요소인 ul요소를 찾아 복제(true이면 이벤트까지도 복제됨)한 후 복제된 ul의
하위 li요소들을 찾아 아이디가 b인 요소의 하위요소로 포함시킨 후 기존 ul을 제거
속성 제어
jQuery('a').attr('href', 'http://www.jquery.com').attr('href'); => 모든 a요소의 href속성의 값을 설정하고 가져옴
jQuery('a').attr({'href':'http://www.jquery.com', 'title':'jquery.com'}) => 모든 a요소의 href속성값과 title속성값을 설정
jQuery('a').removeAttr('title') => 모든 a요소의 title속성 제거
class 조작
addClass() : 클래스 추가 hasClass() : 클래스 값 확인 removeClass() : 클래스 제거 toggleClass() : 클래스 없으면 추가, 있으면 제거
HTML 컨텐츠 / 텍스트 조작
jQuery('p').html('<strong>Hello World</strong>'); => 모든 p요소에 html컨텐츠 삽입
jQuery('p').html(); => 모든 p요소의 html 가져옴
jQuery('p').text('Hello World'); => 모든 p요소에 text 삽입 (text메소드는 html을 escape한다)
jQuery('p').text(); => 모든 p요소의 text 가져옴
전역적인 충돌 없이 $ 사용
(function($) {
})(jQuery);
[JQuery Cookbook - 2장 jQuery로 요소 선택하기]
직속 자손 결합자 (>) : 계층적 관계
jQuery('#nav li > a'); => id가 nav인 요소의 하위 모든 li요소의 직속 자손인 a요소들
jQuery('> p', '#content'); => id가 content인 요소의 직속 자손인 p요소들 => jQuery('#content > p')와 같다
jQuery('#content').children(); => id가 content인 요소의 모든 직속 자손들 => jQuery('#content').find('> *');과 같다
jQuery('#content').children('p'); => id가 content인 요소의 모든 직속 p요소들
일반 형제 결합자 (~)
jQuery('li.selected ~ li'); => selected클래스를 가진 모든 li요소들 다음에 나오는 모든 li요소들
필터
:gt(n) 인덱스가 n보다 큰 요소들
jQuery(':even'); => 문서내의 모든 짝수번째 요소들
jQuery('ul li').filter(':first'); => ul요소다음에 나오는 첫번째 li요소들
현재 에니메이션 중인 요소 선택
jQuery('div:animated'); => 에니메이션 중인 div요소들
jQuery('div:not(div:animated)').animate({height:100}); => 에니메이션 중이 아닌 div요소들의 높이를 100까지 에니메이션
텍스트나 요소를 포함하는 요소 선택
jQuery('span:contains("bob")'); => bob라는 문자열을 포함하는 span요소들
jQuery('div:has(p a)'); => p요소 하위에 a요소를 가진 div요소들
jQuery('p').filter(function() { return /(^|\s)(apple|orange|lemon)(\s|$)/.test(jQuery(this).text()); });
=> apple이나 orange나 lemon이라는 텍스트를 가진 p요소들
일치되지 않는 요소 선택
jQuery('div:not(#content)'); => id가 content가 아닌 모든 div요소들
jQuery('a:not(div.important a, a.nav)'); => important클래스를 가진 div요소의 하위 a요소가 아니고 nav클래스를 가진 a요소가 아닌 a요소들
jQuery('a').click( function() { jQuery('a').not(this).addClass('not-clicked'); } ); => a요소를 클릭하면 모든 다른 a요소들에 not-clicked클래스 추가
$('#nav a').not('a.active'); => id가 nav인 요소의 하위 a요소들 중 active클래스를 가지지 않은 a요소들
가시성 기반 요소 선택
jQuery('div:hidden'); => 눈에 보이지 않는 div요소들
속성 기반 요소 선택
jQuery('a[href="http://google.com"]');=>href속성의 값이 http://google.com인 a요소들
jQuery('*[title][href]'); => title과 href 속성을 모두 가지는 요소들
jQuery('div[id^="content-sec-"]'); => id속성의 값이 content-sec-으로 시작하는 div요소들
속성 셀렉터
폼요소 셀렉터
jQuery(':text'); => type속성의 값이 text인 모든 input요소들
jQuery(':input:not(:hidden)'); => 눈에 보여지는 모든 input요소들
jQuery(':text, :textarea'); => type속성의 값이 text이거나 textarea인 모든 input요소들
특성을 갖는 요소 선택
jQuery('*').filter(function() { return !!jQuery(this).css('backgroundImage') });
=> 배경이미지를 갖는 모든 요소들
=> !!는 타입을 불린으로 변경하기 위함
=> jQuery함수의 인자인 this는 모든요소들(*) 중 filter에 인자로 전달되는 시점에 함수에 인자로 전달된 요소를 가리키는데
요소를 jQuery함수의 인자로 넘겨 jQuery메소드를 사용할 수 있도록 함
jQuery('div').filter(function() { var width = jQuery(this).width(); return width>100&&width<200; });
=> 넓이가 100보다 크고 200보다 작은 모든 div요소들
컨텍스트 매개변수
jQuery('p', '#content'); => id가 content인 요소의 하위 p요소들 (이때 #content가 p의 컨텍스트) => jQuery('#content p');와 같다
jQuery('form').bind('submit', function() { var allInputs = jQuery('input', this); });
=> form요소들 중 submit이벤트가 일어나면 allinputs변수에 이벤트가 일어난 form의 모든 input요소들을 저장
| Jquery 숫자만 간단하게 (0) | 2016.03.14 |
|---|---|
| 이미지 바꾸기 (0) | 2013.02.06 |
| jquery 슬라이드 메뉴(마우스오버/아웃) (0) | 2013.01.18 |
| jquery api (0) | 2011.12.15 |
| JQuery (0) | 2011.04.06 |
쭈니후니
개발자로서 공부와 낚시를 좋아하는 한사람으로서의 추억을 담을 블로그입니다.
| Jquery 숫자만 간단하게 (0) | 2016.03.14 |
|---|---|
| 이미지 바꾸기 (0) | 2013.02.06 |
| jquery 슬라이드 메뉴(마우스오버/아웃) (0) | 2013.01.18 |
| jquery 요약 (0) | 2013.01.18 |
| JQuery (0) | 2011.04.06 |
쭈니후니
개발자로서 공부와 낚시를 좋아하는 한사람으로서의 추억을 담을 블로그입니다.
| Jquery 숫자만 간단하게 (0) | 2016.03.14 |
|---|---|
| 이미지 바꾸기 (0) | 2013.02.06 |
| jquery 슬라이드 메뉴(마우스오버/아웃) (0) | 2013.01.18 |
| jquery 요약 (0) | 2013.01.18 |
| jquery api (0) | 2011.12.15 |
쭈니후니
개발자로서 공부와 낚시를 좋아하는 한사람으로서의 추억을 담을 블로그입니다.
개발자로서 공부와 낚시를 좋아하는 한사람으로서의 추억을 담을 블로그입니다.
