Blog Content

end() : 현재 실행된 상태의 이전으로 되돌림 04.End.htm .Yellow{ background-color:Yellow; } $(document).ready(function() { //[1] JavaScript 텍스트 찾아가기 alert($('div').find('p').text()); //[2] JavaScript 텍스트 찾아가기 var result = $('div').find('p:last').find('b').html(); alert(result); //jQuery //[3] 방금 탐색한 기능 이전으로 돌리기 var html = $('div').find('p:last').find('b').end().html(); alert(html); //jQuery -> end() -> jQuery })..

not : 지정된 선택기와 맞는 요소를 제외한 나머지 검색 03.Not.htm 지정된 표현식을 제외한 집합 가져오기 .Yellow{ background-color:Yellow; } $(document).ready(function() { //라디오버튼을 제외한 input 태그에 배경색을 Yellow로 설정 $('input').not("input[type=radio]").each(function(){ $(this).addClass("Yellow").css("border", "1px solid red"); }); }); 결과화면

is("") : 지정된 선택기와 맞는 요소 검색 02.Is.htm 지정된 표현식이 있는지 없는지 검사 $(document).ready(function() { //myForm 영역에 submit 버튼이 있는지 검사 if ($('#myForm').children().is("input[type=submit]")) { alert("있다."); } else { alert("없다"); } }); 결과화면

eq(index) : n번째 인덱스의 요소를 가져옴 01.Eq.htm n번째 요소 가져오기 $(document).ready(function() { //alert($('p').html() 하면 첫번째만 읽어온다. alert($('p').text()); //선택기 필터 alert($('p').html()); //메서드 }); C# ASP.NET jQuery 결과화면

현재까지 진행된 jQuery 전체 소스 파일입니다.

실제 값이 DB에 저장될 때 ,(콤마)를 구분하여 값을 넣고 이 값을 다시 세팅 06.Val.htm 폼 요소의 값 가져오기 및 설정 $(document).ready(function() { //[4] Init초기값 세팅 $('#txtName').val("Godffs"); $('input:radio').val(['F']); //input 타입중 라디오에 대해서 값을 F로 설정 $('#lstFavorites').val(['0', '2']); $('#btnOK').click(function() { var msg = ""; //[1] 텍스트에 입력한 값 읽어오기 msg += $('#txtName').val() + '\n'; //[2] 채크된 값을 읽어오기 msg += $('input:radio[name=Gende..

05.Text.htm 텍스트 값 가져오기 및 설정 $(document).ready(function() { //get var text = $('b').text(); alert(text); //set $('p:first').text("낼 봐요"); //first붙이지 않으면 인코딩하여 문자열로 출력 $('p:last').html("낼봐요."); //html은 자체에서 인코딩 //[!] 15줄을 alert로 출력해서 다른 결과값을 확인해보자 //get html값 가져와서 창으로 띄우기 alert($('p:last').html); //alert창은 text로만 띄운다. }); 안녕하세요. jQuery 반가워요. jQuery 또 만나요 언제요? 결과확인

04.RemoveAttr.htm 특정 속성을 지우기 $(document).ready(function() { //버튼 클릭시 특성/속성/attribute/어트리뷰트/애트리뷰트 제거 $('#btnRemove').click(function() { $('img:first').removeAttr("src"); //src 속성 삭제 }); }); 결과화면

03.MapCollection.htm 맵(컬렉션)으로 다중 속성 지정 $(document).ready(function() { $("#com").attr({ src: "../ProductImages/COM-01.jpg", alt: "컴퓨터", title: "좋은컴퓨터" }); }); 결과화면

02.ShowBigImg.htm 마우스 오버시 큰 이미지 보여주기 $(document).ready(function() { //아래 코드는 모든 이미지 파일의 이미지명을 얻어, //bigs/폴더에 있는 동일한 이미지를 div에 보여준다. $('#product img').mouseover(function() { $("#showImage").show(); //이미지 보여줄 레이어 보이기 var imgSrc = ""; //이미지 소스 저장 변수 imgSrc = $(this).attr("src"); //attr() src get하기 imgSrc = imgSrc.substr(imgSrc.lastIndexOf("/") + 1); //순수 파일명만 얻기 imgSrc = ""; //큰이미지 설정 $("#showImage..

Attributes의 주요 메서드 - html() : 요소의 HTML을 읽어(get)온다. - html(val) : 요소에 HTML을 설정(set)한다. - text() : 일치하는 모든 요소의 텍스트를 붙여서 읽어(get)온다. - text(val) : 요소에 텍스트를 설정(set)한다. Attr() 메서드 속성으로 접근한 마우스오버,마우스 아웃 예제입니다. 01.Attr.htm DOM요소의 attributee 읽어오기 $(document).ready(function() { //[1] Get alert($('a').attr('href')); //동적으로 //[2] set : img에 마우스 오버시 이미지 변경//세팅(설정) $('img').mouseover(function() { $(this).attr..

현재까지 진행된 jQuery 전체 소스 파일입니다.

선택된 값을 가져오는 예제입니다. dropdownlist에서 선택된 값을 가져오고 싶다면 :selected 라는 코드를 쓰면 유용 $("#dropdown리스트아이디 option:selected").text(); $("option:selected").text(); $(":selected").text(); 원래는 맨 윗줄처럼 정확하게 타겟을 지정해준후 :selected를 쓰는게 정석입니다. 하지만 선택과 관련된 컨트롤이 이 페이지에 하나밖에 없다면 단순히 [ :selected ] 만 써도됩니다. [ jooonho의 블로그 ] 04.Selected.htm 드롭다운리스트 선택한 값 가져오기 $(document).ready(function() { // 콤보박스가 변경될 때 이벤트 발생 $('#lstFavorite..

속성값을 비교하는 예제입니다. 03.PasswordConfirm.htm 암호확인 기능 구현하기 $(document).ready(function() { //[1] lblError 레이어 클리어 $('#txtPassword').keyup(function() { //$('#lblError').remove(); // 제거 $('#lblError').text(''); // 제거가 아니라 클리어 }); //[2] 암호 확인 기능 구현 $('#txtPasswordConfirm').keyup(function() { if ($('#txtPassword').val() != $('#txtPasswordConfirm').val()) { $('#lblError').text(''); // 클리어 $('#lblError').htm..

input 태그의 모든 text타입들을 전부 타겟으로 선택할때 사용합니다. $(':text').메서드() 이런형식으로 쓰시면 모든 input type="text" 형식의 태그들이 타겟으로 설정됩니다. [ jooonho의 블로그 ] 02.Text.htm Text 박스의 값 복사 .silver { background-color:Green; } $(document).ready(function() { // 모든 텍스트박스의 배경을 Silver로 설정 $(':text').addClass("silver"); // 첫번째 텍스트박스의 값을 두번째 텍스트박스로 복사 $('#btnCopy').click(function() { $('#txtID').val($('#txtUserID:text').val()); }); }); ..