javascript37 jquery text() 메소드 jquery text() 메소드 .text() 메소드는 주요기능으로 텍스트값을 반환하는역할을 한다. alert( $('p').text() ); html은 나를 출력하시오 기본적으로 엘레먼트의 텍스트를 반환하여 출력하게 되어있다. $('p') : p라는 엘리먼트에 접근한다 .text() : 그엘리번트의 텍스트 값을 찾느다. alert : 경고창으로 뜨도록 위와 같이 하면은 경고창에'나를 출력하시오' 라고 나올 것이다.이번에는 괄호안에 값을 넣었을 경우를 보자 $('p').text('나를 출력'); html은 나 말고... 값이 대체 되기도 한다. 화면에는 원래나와야되는 '나말고...' 대신 '나를 출력'이 나타날것이다.정확히 말하면 대체 되는 것이 아니라 덮어지는 것이다. 2010. 2. 20. jquery filter() 메소드 jquery filter() 메소드 filter() filter()메소드는 영어 해석그대로 필터역할을 한다.선택한것에 접근 할때 그 입력값에 일치하는 엘리먼트를 가르킨다 나 말고 나를 집어주시요~ 이 때 다음과 같이 사용하면 $('p').filter('#test').text(); 나를집어주시오를 선택하게 된다. 순서는 다음과 같다. $('p') : p라는 엘리먼트에 접근 .filter('#test') : 그중 test라는 아이디를 가진것을 선택 .text() : 그리고 텍스트를 반환 2010. 2. 19. jquery end() 메소드 jquery end() 메소드 원문은 여기에서 볼 수있다http://api.jquery.com/end/ .end() end() 메소드는 현재의 엘리먼트 바로 앞의 엘리먼트를 지칭한다. 다음예제를보자 Hm.. this is the test $(document).ready(function() { alert($('p').filter('#test').end().text()); }); 스크립트 소스에서 접근순서를보자 $('p') : p엘리먼트에 접근 .filter('#test') : #test라는 아이디에 접근 .end() : 한차례앞의 것에 접근한다 따라서 p에 접근하게 된다 alert($('p').filter('#test').end().text()); 소스는 p에리먼트안의 텍스트 Hm..this is the .. 2010. 2. 18. jQuery 기능적 폼(form) 만들기 jQuery 기능적 폼(form) 만들기 jQuery 이용하여 좀더 기능적으로 form을 만들어보자.기본적인 폼의코드는 다음과 같다 개인 정보 입력 이름 (필수) 연락방법을 선택하세요 (적어도 하나) E-Mail (선택) Phone (선택) Fax (선택) 이름을입력할 input엘리먼트는 클래스명을required 그리고 나머지들은 클래스명을 conditional로 주었다.이코드를 다음과 같이 수정할것이다. legend엘리먼트를 다른 엘리먼트로 대체하여 좀더 편리하게 css로 꾸미게 한다 반드시 입력할 이름란에 '*'를 또 다른 입력란에는 '**'를 필수, 선택 대신으로 대체시킨다 필요한 선택입력 항목 박스를 클릭시 텍스트 입력 박스가 보이도록 또 감추도록한다. 엘리먼트 수정 legend엘리먼트는 css로.. 2010. 2. 18. HttpRequest 객체 자바스크립트객체 HttpRequest 브라우저의 다른 작업을 방해하지않으면서 서버에 데이터를 요청할수 있게하는 HttpRequest..이번엔 그 객체를 직접 만들어보자 인스턴스 만들기 대부분의 브라우저에서는 다음과 같이 간단히 시작할 수 있다 xhr = new XMLHttpRequest(); 여전히 걸림돌은 IE이다.익스플로어의 경우는 액티브X인스턴스를 만들어야된다. xhr = new ActiveXObject("Microsoft.XMLHTTP"); 자 그럼 일반적으로 내장객체지원하는 브라우저 그리고 그렇지않은 익스플로어를 구분하고 그에따라 위에서 생성한 적절한것을 사용하도록 해야할 것이다. 그럼 이때 필요한것은? 당연히 조건문.. //XMLHttpRequest를 지원할 경우 if (window.XMLHt.. 2009. 12. 10. Ajax와 HttpRequest Ajax와 HttpReqyest, 자바스크립트객체 먼저 저번에 둘러봤던 ajax에 대해 다시한번 돌아보자 일반적인 웹어플리케이션 동작 페이지에서 이벤트발생 서버에 요청 일반적으로 HTML로 결과를 응답받는다 페이전체가 리로드(바뀐다)된다 Ajax 웹어플리케이션 동작 페이지에서 이벤트발생 서버에 요청 XML,텍스트 등으로 결과를 응답받는다 필요한 페이지 일부가 리로드(바뀐다)된다 단 다음을 반드시 명시하자 기본적으로 html+css가 페이지를 구성한다 브라우저가 요청과 응답하는것이다. 자바스크립트 객체의 역할은 요청과 응답이 아니라 요청을 동기화시키고 들어온 응답을 처리한다. XMLHttpRequest 앞에서 본 자바스크립트 개체의 역할은 클라이언트와 서버사이통신을 담당한다고 할수 있겠다.이런 객체가 처음.. 2009. 12. 9. Ajax란 무엇인가? Ajax의 정의 Ajax란 무엇인가? jQuery를 한창 포스팅하다가 dom가지 설명을 끝내고 이제 Ajax로 넘어갈떄이다. 이쯤에서 Ajax를 둘러볼 필요가있다. 간단한 정의부터 사용예시까지 짤막하게 살펴보자. Ajax 의 정의 초창기에 비동기적인 자바스크립트와 XML 이라는 말의 줄임으로 접근되었다. 비동기(Asynchronous) 자바스크립트(javascript) 그리고 and XML 이로서 ajax 란 약자가 나왔다고 하는데....마지막에 xml은 필수요소가 아니다. 이후에 어떤 약어라기보다는 방법론으로 축약되어 사용되고있다. 위에서 그래도 중요시 할점은 비동기(asynchronous) 란 점이다. 페이지의 전통적인경우 브라우저는 서버에 전재페이지를 요청하고 그리고 사용자가 링크크릭또는 폼전송시 브라우저는 새로운.. 2009. 12. 8. jQuery DOM empty clone 메소드 복사하기 jQuery DOM clone 메소드 .clone()은 엘리먼트를 복사하는 메소드이다. 클론은 이벤트 또한 복제하는데 하나하나 살펴보자 아메바...... 위의 엘리먼트를 복제해보자 $('p').clone(); 자 위의것 대로 하면 될것같지만 복사해서 놓을 위치를 정해줘야 된다. 그래서 .insertAfter()등의 메소드를 사용한다. $('p').clone().insertAfter('p'); 위와같이하면아래와같이 복사되어 나올것이다 아메바......아메바...... 이벤트까지 복제 이벤트 까지 복제하는예제를 보자.변수에 true를 넣으면 이벤트까지복제 반대로 false를 넣어주면 엘리먼트만 복제된다. 누르면 버튼이 복제되어 생겨남 위의 버튼을 누르면 복제되도록하려면 $('button').click(fun.. 2009. 11. 28. jQuery DOM empty remove 메소드 제거하기 jQuery DOM empty remove 메소드 제거하기위한 메소드로는 .empty()와 .remove()가 있다..empty()의경우는 검색된 요소안의 모든 엘리먼트를 제거하고 .remove()의 경우는 검색된 엘리먼트와 자식들을 제거한다.차례대로 보자 empty 메소드 empty메소드는 비운다는 말 그대로 모든걸 지운다.해당엘리먼트의 자식과 텍스트모두 제거한다 모두 사라 집니다. 위의 코드에 아래를 삽입하면 아무것도 나오지 않는다. $('p').empty(); //p란 엘리먼트에 접근후 //p엘리먼트의 자식과 텍스트 제거 remove 메소드 이메소드는 접근하여 검색된 엘리먼트와 자식,텍스트를 제거한다. 사라짐 안사라짐 위에서 selected란 클래스의 엘리먼트를 사라지게 할것이다. $('p').re.. 2009. 11. 25. jQuery DOM wrap 메소드 대치하기 text replaceAll, replaceWith 메소드 대치란 원래있던 값대신에 다른 값을 생성하여 넣어주는 것을 말한다. 이런것이가능한 메소드는 .text(), .replaceAll()그리고 .replaceWith()등이 있다. text 메소드 .text()메소드는 텍스트를 대치해준다.안녕하세요?를 반갑습니다로 대치해보겠다. 안녕하세요? 이걸 대치하려면 다음과 같다. $('p').text('반갑습니다'); 결과는 안녕하세요? 대신에 반갑습니다가 나올것이다 replaceWith 메소드 이메소드는 .text()메소드 처럼 대치하느데 그 대상이 엘리먼트인다.예제를보자문자대신에 그림을 대치시켜보자. 네이버 간판으로 바뀜 $('p').replaceWith(''); 네이버 간판으로 바뀜 대신에 아래그림이 나올.. 2009. 11. 24. 이전 1 2 3 4 다음
