jQuery('[attribute]') 는 attribute 에 해당하는 속성이 있는 확인하는 선택자입니다.
원문 링크 
http://api.jquery.com/has-attribute-selector/
- jQuery('[attribute]')
- attribute 속성명
예 제
div 영역의 텍스트를 클릭했을 때 div 태그에 id 속성이 포함되어 있다면 id 속성값을 텍스트로 추가표시 합니다.
<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-1.4.4.js"></script>
</head>
<body>
<div>no id</div>
<div id="hey">with id</div>
<div id="there">has an id</div>
<div>nope</div>
<script>
$('div[id]').one('click', function(){
var idString = $(this).text() + ' = ' + $(this).attr('id');
$(this).text(idString);
});
</script>
</body>
</html>
미리보기 : 각 텍스트를 클릭하세요.
스크립트에 보지 못했던 것들이 좀 많이 들어가 있습니다. one() 이라는 함수가 보이고, 'click' 이라는 인자도 보이네요. one() 이라는 함수는 해당 객체에 이벤트를 묶어주는 함수입니다. 위에서 보면 div 에 id 값이 있다면 onclick 이라는 이벤트를 묶어(bind)주라는 뜻입니다. 그래서 해당 객체가 onclick 이벤트가 발생하였을 경우 일어날 일들을 그 안에 정의하고 있죠. 여기서는 id 속성값을 기존의 문자열과 묶어서 다시 그 객체안에 텍스트로 집어 넣어 주고 있습니다.
조금 어려운 개념들이 나왔네요. 이벤트 할당 같은 개념은 사실 초심자 분들은 미쳐 생각하기 힘듭니다. 특히나 웹 즉, html 과 자바스크립트로 객체에 나중에 이벤트를 만들어서 붙여줄 수 있다는 것을 알고 하시는 분들이 그리 많지 않습니다. 물론 지금은 좀 다르죠. 막 배우시는 분들도 자바스크립트의 중요성을 다들 아시니까요. 저 배울때는 안그랬어요 ^^;;;
그럼 즐프하세요.
※ 본 예제는 http://www.jquery.com 에 있는 내용임을 밝힙니다.
'프로그래밍 > jQuery' 카테고리의 다른 글
| jQuery API 정복 - ID 로 찾아내기 : jQuery("#id") (7) | 2011.02.10 |
|---|---|
| jQuery API 정복 - 안보이는 요소 찾기 : jQuery(':hidden') (1) | 2011.02.10 |
| jQuery API 정복 - 제목 태그(h1)를 찾자 : jQuery(':header') (8) | 2011.02.09 |
| jQuery API 정복 - 자식 중에 태그 찾기 : jQuery(':has(selector)') (30) | 2011.02.09 |
| jQuery API 정복 - 내용이 빈 태그 찾기 : jQuery(':empty') (7) | 2011.02.08 |
| jQuery API 정복 - 요소명(태그)으로 찾기 : jQuery('element') (0) | 2011.02.07 |
| jQuery 1.5 버젼이 나왔습니다!! (8) | 2011.02.07 |
| jQuery API 정복 - ~보다 작은 요소 선택하기 : jQuery(':lt(index)') (7) | 2011.02.07 |