미련곰 블로그

http://www.ajaxline.com/10-best-jquery-menu-plugins

요즘 돌아 다니면서 질문 올라온 것들을 보면 jQuery의 속성(Attrbute)으로 셀렉터 하는 방법을 몰라서 질문을 하는 경우가

많고 기초적인 내용 이지만 아직 모르셨던 분에게는 유용할 꺼라 생각 해서 적어 봅니다.

제가 설명이나 말주변이 그리 좋은게 아니라... 그냥 알아서 봐주세요..^^*

1. [속성명] : 해당하는 속성을 가진 모든 엘리먼트를 선택 합니다.

   예) $("img[alt]") - img 엘리먼트 중 alt 속성이 있는 모든 img 엘리먼트를 선택 합니다.
       $("*[alt]")   - 모든 엘리먼트 중 alt 속성을 가지고 있는 모든 엘리먼트를 선택 합니다.

2. [속성명=속성값] : 해당하는 속성에 지정한 속성값(value)를 가지고 있는 모든 엘리먼트를 선택 합니다.

   예) $("img[alt=버튼]") - img 엘리먼트 중 alt 속성의 값이 "버튼"인 모든 img 엘리먼트를 선택 합니다.

3. [속성명!=속성값] : 해당하는 속성에 지정한 속성값이 아닌 모든 엘리먼트를 선택 합니다.

   예) $("input[value!=0")  - input 엘리먼트 중 value 값이 0이 아닌 모든 input 엘리먼트를 선택 합니다.

4. [속성명*=속성값] : 해당하는 속성에 지정된 속성값을 포함하고 있는 모든 엘리먼트를 선택 합니다.

   예) $("input[value*=안녕) - input 엘리먼트 중 value 값에 안녕이라는 글자를 포함하는 모든 input 엘리먼트를 선택 합니다.

       <input type='text' value='선생님 안녕하세요' /> - 선택됨....

       SQl의 LIKE 조건과 같은 기능...

5. [속성명^=속성값] : 해당 하는 속성에 지정된 속성값으로 시작하는 모든 엘리먼트를 선택 합니다.

   예) $("img[src^=btn])  - img 엘리먼트 중 src속성의 값이 btn... 으로 시작하는 모든 img 엘리먼트를 선택 합니다.

       <img src='btn_cancel.png' />  - 선택됨...

6. [속성명$=속성값] : 해당 하는 속성에 지정된 속성값으로 끝나는 모든 엘리먼트를 선택 합니다.

   예) $("img[src$=.gif"])  - img 엘리먼트 중 src속성의 값이 ... .gif로 끝나는 모든 img 엘리먼트를 선택 합니다.

       이미지의 엘리먼트의 특정 확장자를 가진 엘리먼트를 검색하거나 할때 유용하겠져~

위에 속성들은 중복으로 사용이 가능 합니다.

예를 들어 input 태그의 name속성의 값이 idx라는 값중 value 값이 0 인 것들만 선택하려 한다면...

$("input[name=idx][value=0]") 과같이 중복하여 사용 할수 있습니다.

원본글 : http://taeyo.net/Forum/Content.aspx?SEQ=1514&TBL=KNOWHOW&PGN=1

위 와같은 xml 을 jquery 로 분리를 해보자..

jquery 의 ajax 연동은 따로 설명 하지 않겠다. 아래 참고

http://docs.jquery.com/Ajax

	$.ajax({
		type: 'get'
		, dataType: "xml"
		, url: "Service.aspx"
		, data: "arg=L
		, success: function(xml) {
			// xml 노드 null 확인
			if ($(xml).find("list").find("item").length > 0) {

				// totalitem 찾기
				var totitem = $(xml).find("totalitem").text();
				
				// item 노드 loop
				$(xml).find("list").find("item").each(function(idx) {				
					
					var idx = $(this).find("idx").text()
					var title = $(this).find("title").text()
					var content = $(this).find("content").text()
					
				});
			}			
		}
		, error: function(xhr, status, error) {alert(error); }
	});

	$("")
		.attr("selected", "selected")
		.text("텍스트")
		.attr("value", "값")
		.appendTo("#selectboxid");


	$("#selectboxid")
		.change(function() { alert(this.value); });

자 이제는 jQuery 코드..

거의 ajax 를 사용해서 바인딩위주로 동작하기에 코드는 간단하다..

jquery 라이브러리와..

ajax 의공통적인 설정부분을 인클루드 한다.


jquery.ajax.init.js  는 위와 같은 내용으로..

ajax 의 기본적인 설정을 넣어놓는 부분이다.


UI 는 이런식으로 구성을 하고..


ready 함수에서 acode 를 불러온다..

참고로..

jquery 에서 select - option 태그를 핸들링하려면..

위 처럼해야한다..(이부분은 좀 해맸다 ㅡ,,ㅡ);



Bcode 를 가져오고..

ready 와 별반 다르지 않다.

CCode 또한..

짜짠..완성

자..

그러면 이제 data 를 읽어올 webservice 를 만들어 봅시다..

역시 씸플하게..

A.B.C 코드를 읽어오는 메소드를 한개씩

ACode를 읽어올 메소드 입니다..

SqlHelper 클래스는 필자가 만들어 쓰는 ms-sql 랩핑 클래스인데..

차후에 공개하기로 하고..

위의 세가지 메소드는 공통적으로 DataTable을 받아서  Json 으로 변환을 시켜준다..

JSonSerializer 또한 차후 공개 하기로 하고..(찾아보면 많다..)



webservice 를 실행한 결과이다..

json 데이타를 참 좋게 보여준다..

ms-sql 을 사용하여..

테이블을 3개 생성한다..

데이타베이스 관련한 포스팅이 아니므로 ..

직관적이고..

씸플하게..

jQuery + Webservice 를 사용해서 위와 같은 단계형 select box 를 만들어 보겠다.

http://www.uploadify.com/

사용방법은 간단하다.