태그 속성값이란?
<input type="text" id="id1" name="name1" />
각 밑줄 친것처럼 각 태그들에 정의되어있는 설정값들이다.
해당 값들의 속성값을 알아오기 위해서는 attr함수를 사용하면 되는데
사용법은
$("태그").attr("옵션key") 와같은 형식으로 지정해주면 된다.
간단한 스크립트로 예를 들어보자
상단에 input태그의 id값을 가져오고 싶을경우
$("input").attr("id")
상단에 input태그의 name값을 가져오고 싶을경우
$("#id1").attr("name")
등 위와같이 attr함수를 이용하면 해당 속성에대한 값을 추출할수 있을 것이다.
그리고 만약 속성값을 변경하고 싶다면
$("#").attr("name","새로운네임")
형식으로 지정하면 해당 속성값 변경이 일어난다.
jquery 1.6.x 버전부터 prop라는놈이 추가로 된걸로 알고 있다.
이놈은 뭐할때 유용하냐면 true / false체크 같은것을 사용할때 아주 유용하다
예를들어 체크박스에서 prop를 요즘 자주쓰는데,
$("#").attr("checked",true);
$("#").attr("checked",false);
또는
$("#").attr("checked","checked");
$("#").attr("checked","");
prop가 지원하기 전에 버전에서는 해당 스크립트로 체크박스를 제어할수 있었는데
prop가 나온후로는
$("#").prop("checked",true);
$("#").prop("checked",false);
로 변경을 해주어야 체크박스 핸들링이 가능하다.
만약 jquery버전업을 했거나 attr함수로 원하는 제어가 안되실 경우에는 prop함수를 사용해보시길 바랍니다.
정확히 어떨때는 prop를 써야한다고 정의를 해드리지 못하겠습니다.
감으로 둘중 하나를 골라서 사용하셔야 한다는...
아마 대부분 attr로 해결이 가능하지만 해결이 불가능할경우!! prop속성을 한번 사용해보시길....
스크립트 비교 소스로 마무리...
스크립트 부분
$(function(){
//체크가 안되어있을때
alert($("#check1").attr("checked")+","+$("#check1").prop("checked"));
//-> 결과 undefined , false
//체크가 되있을때
alert($("#check2").attr("checked")+","+$("#check2").prop("checked"));
//-> 결과 checked , true
})
샘플 html 태그
<input type="checkbox" id="check1" /> <input type="checkbox" id="check2" checked="checked" />
도움이 되셨다면 손가락↓ 클릭! 궁금하신점은 댓글!!
'자바스크립트이야기 > jQuery' 카테고리의 다른 글
| [jQuery 13장] 동적으로 생성된 태그에 이벤트를 주자! (24) | 2014.06.16 |
|---|---|
| [jQuery 12장] 동적으로 태그 추가 및 태그를 문자자체로 표출하기 (2) | 2014.06.10 |
| [jQuery 10장]스크립트로 지정 태그에 클래스 적용하기 (0) | 2014.06.09 |
| jQuery / 프로토타입 동시사용시 ... (0) | 2014.06.09 |
| [jQuery 9장] 공백 제거 $.trim() (0) | 2014.06.09 |
우리는 가끔 특정 이벤트를 주어 클래스를 지정 태그에 적용 시킬때가 존재한다.
a 태그 클릭시 포커스를 줄때 또는 버튼 클릭시 특정 태그에 클래스를 추가 또는 제거 하는 방식으로 예를 들어서 작성해보겠음.
클래스 관련 추가/삭제/존재여부에 대한 함수를 다뤄볼텐데
클래스 추가하기 : $("").addClass("classId")
클래스 제거하기 : $("").removeClass("classId")
클래스 존재유무 체크 : $("").hasClass("classId")
로직을 가상으로 만들어보고 소스를 제작해보도록 하겠다.
1. a태그 클릭시 클래스 아이디가 focusRed 라는 놈으로 글자색 변경하기
2. 버튼 클릭시 클래스 존재유무로 클래스 존재하지 않으면 특정 글자의 font size를 늘리는 plusfontsize 클래스 아이디 추가
클래스 존재하면 특정 글자 원래대로 돌려주어야 하므로 plusfontsize 클래스 아이디 제거
이 두가지로 소스코드를 짜봅시다!
우선은 테스트용 css를 짜보도록 하자
<style type="text/css">
.focusRed {
color: red;
}
.plusfontsize{
font-size: 20pt;
}
</style>
html태그이다. body 태그내에 작성해주자
<a href="#" id="atag">빨~~~갛게</a><br/> <input type="button" value="클래스적용토글" id="classChangeButton" /><br/> <label id="fontLabel">글자11</label>
이제 마지막으로 스크립트 코드를 짜보자
$(function(){
//a태그 클릭시
$("#atag").click(function(){
//a태그에 focusRed라는 클래스를 추가한다.
$("#atag").addClass("focusRed");
});
//id가 classChangeButton이라는 버튼 클릭시
$("#classChangeButton").click(function(){
//라벨태그에 클래스가 존재하지 않는다면,
if(!$("#fontLabel").hasClass("plusfontsize")) {
//plusfontsize 클래스아이디를 fontLable 아이디를 가지고 있는 label에 클래스 추가
$("#fontLabel").addClass("plusfontsize");
//라벨태그에 클래스가 존재할경우
} else {
//plusfontsize 클래스 아이디를 fontLable 아이디를 가지고 있는 label 클래스 제거
$("#fontLabel").removeClass("plusfontsize");
}
})
})
해당 소스를 페이지에 맞춰 읽어보면서 실행을 해보면 위에서 가상으로 짠 로직에 대한 결과가 나올것이다.
도움이 되셨다면 손가락↓ 클릭! 궁금하신점은 댓글!!
'자바스크립트이야기 > jQuery' 카테고리의 다른 글
| [jQuery 12장] 동적으로 태그 추가 및 태그를 문자자체로 표출하기 (2) | 2014.06.10 |
|---|---|
| [jQuery 11장] 태그속성값 가져오기 attr / prop (0) | 2014.06.10 |
| jQuery / 프로토타입 동시사용시 ... (0) | 2014.06.09 |
| [jQuery 9장] 공백 제거 $.trim() (0) | 2014.06.09 |
| [jQuery 8장]숨겨진 태그 화면에 보여주기 효과 (0) | 2014.06.09 |
예전에 jquery와 프로토타입을 동시에 사용해서 충돌났던게 생각나서 작성하게 되었다.
현재는 어떨지 모름...
jquery도 $사용 프로토 타입 역시 $를 사용하기때문에 동시에 사용시
프로토타입은 $ 그대로를 사용해주고
jquery는 $들어갈 부분에 jQuery를 사용해주면서 코딩해주어야 했다.
예를들면
$(document).ready(function(){
});
var a = $("#").val();
alert(a);
이런 소스가 있다 가정할경우
jQuery(document).ready(function(){
});
var a = jQuery("#").val();
alert(a);
이런식으로 변경을 해주었었다.
갑자기 생각나서 올려보았다..
'자바스크립트이야기 > jQuery' 카테고리의 다른 글
| [jQuery 11장] 태그속성값 가져오기 attr / prop (0) | 2014.06.10 |
|---|---|
| [jQuery 10장]스크립트로 지정 태그에 클래스 적용하기 (0) | 2014.06.09 |
| [jQuery 9장] 공백 제거 $.trim() (0) | 2014.06.09 |
| [jQuery 8장]숨겨진 태그 화면에 보여주기 효과 (0) | 2014.06.09 |
| [jQuery 7장] 셀렉터가 모예요? (4) | 2014.05.14 |
개발을 하다보면 submit을 날리기 전에 값들의 존재유무를 파악할때가 존재하는데
if($("").val() == ""){
alert("입력하세요");
return;
}
와 같은 코드가 들어간다.
해당 태그의 값이 비어있는데 실질적으로는 여러번의 스페이스바를 눌러서 " "
이런형식의 값이라면? 위의 if문은 건너뛰게 되는것이다.
css및 특정 플러그인 스크립트를 쓸경우 text 태그에 " 값" 이런식으로 들어갈 경우도
종종 있어서 공백 제거는 필수체크를 해줘야 한다.
jquery에서 공백제거를 하려면 $.trim() 함수를 써주면 된다.
예를들어
var tempValue = " 값 " ;
이런식으로 주고
$.trim(tempValue) 라고 주게 되면 양쪽 공백이 모두 제거가 된다.
태그의 value 값의 공백을 제거하고 싶다면
$.trim($("#").val())
이렇게 지정해주면 되겠다.
샘플 소스는 다음과 같다.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/jquery/1.9.0/jquery.js"></script>
<script type="text/javascript">
$(function(){
alert("공백제거전 ::"+$("#trimtest").val());
alert("공백제거후 ::"+$.trim($("#trimtest").val()));
})
</script>
</head>
<body>
<input type="text" id="trimtest" value = " abc" />
</body>
</html>
도움이 되셨다면 손가락↓ 클릭! 궁금하신점은 댓글!!
'자바스크립트이야기 > jQuery' 카테고리의 다른 글
| [jQuery 10장]스크립트로 지정 태그에 클래스 적용하기 (0) | 2014.06.09 |
|---|---|
| jQuery / 프로토타입 동시사용시 ... (0) | 2014.06.09 |
| [jQuery 8장]숨겨진 태그 화면에 보여주기 효과 (0) | 2014.06.09 |
| [jQuery 7장] 셀렉터가 모예요? (4) | 2014.05.14 |
| [jQuery 6장] 특정 텍스트 태그에 포커스를 줘보고 키보드의 키를 눌렀을때의 이벤트 값을 확인해보자으~ (0) | 2014.05.14 |
오랫만에 jquery 글을 올리게 되었다..
ExtJS에 요즘 빠져서 한동안 글을 못올리고 있었는데 메뉴정리하고.... 쿨럭!
오늘은 숨겨져 있는 태그를 보여주거나 현재 화면에 보여지는 태그들을 숨기기와 같은 DISPLAY작업을 해보자 한다.
CSS태그 중에서
display : block (보여주기)
display : none(숨기기)
와 같은 기능을 하는 놈들이다.
사용함수는
$("").show() / $("").hide()
$("").slideDown() / $("").slideUp()
$("").fadeIn() / $("").fadeOut()
이렇게 세가지를 다뤄보도록 하겠다.
show/hide는 css 옵션중 display의 block/none이랑 같은 기능이고
slideDown/slideUp/fadeIn/fadeOut은 조금 애니메이션 효과가 들어가 있다.
예제로 숨겨져 있는 화면을 select box로 값을 지정 후 값의 구분에 따른 show/slideDown/fadeIn을 주어서 화면에 보여
줘보겠다.
샘플소스 전에 jquery 파일 include 해줘야 하는데 파일을 별도로 다운받지 않으신 분은 외부링크를 include(CDN)해주자(head 태그 내에)
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/jquery/1.9.0/jquery.js"></script>
이어서 스크립트 소스부분(head 태그 내에)
$(function(){
$("#showbtn").click(function(){
if($("#displayselect").val() == "1") {
$("#displaydiv").show();
} else if($("#displayselect").val() == "2") {
$("#displaydiv").slideDown();
} else if($("#displayselect").val() == "3") {
$("#displaydiv").fadeIn();
}
});
$("#hidebtn").click(function(){
if($("#displayselect").val() == "1") {
$("#displaydiv").hide();
} else if($("#displayselect").val() == "2") {
$("#displaydiv").slideUp();
} else if($("#displayselect").val() == "3") {
$("#displaydiv").fadeOut();
}
})
})
그리고 샘플링을 위한 html 태그소스(body 태그 내에)
<select id="displayselect"> <option value="1">show/hide</option> <option value="2">slide</option> <option value="3">fade</option> </select> <input type="button" id="showbtn" value="보여주기"> <input type="button" id="hidebtn" value="숨기기"> <div style="display: none;" id="displaydiv"> <span>초기 숨겨져 있는 화면1</span> <span>초기 숨겨져 있는 화면2</span> <span>초기 숨겨져 있는 화면3</span> <span>초기 숨겨져 있는 화면4</span> </div>
요약하자면
보여주기 관련 함수는 show()/slideDown()/fadeIn()
숨기기 관련함수는 hide()/slideUp()/fadeOut()
을 사용하면 될것이다.
* 대소문자 구분에 유의하고 $(보여주기/숨기기태그).함수() 라는것을 기억하자!!
실행하면 다음화면과 같은 효과를 눈으로 확인하실수 있을겁니다.
도움이 되셨다면 손가락↓ 클릭! 궁금하신점은 댓글!!
'자바스크립트이야기 > jQuery' 카테고리의 다른 글
| jQuery / 프로토타입 동시사용시 ... (0) | 2014.06.09 |
|---|---|
| [jQuery 9장] 공백 제거 $.trim() (0) | 2014.06.09 |
| [jQuery 7장] 셀렉터가 모예요? (4) | 2014.05.14 |
| [jQuery 6장] 특정 텍스트 태그에 포커스를 줘보고 키보드의 키를 눌렀을때의 이벤트 값을 확인해보자으~ (0) | 2014.05.14 |
| [jQuery 5장] 이번에는 클릭이 아닌 더블클릭을 할꺼야! (0) | 2014.05.14 |