공부하는 블로그

1. 찾은 노드의 개수 구하기 사용법: $대상.length // 문서에서 div태그 노드가 몇 개인지 출력해주세요. 2. 찾은 노드 중 n번째 노드 접근하기 사용법: $대상.eq(index) //ul.menu의 메뉴 노드(li) 중 두 번째 메뉴 노드의 border속성을 4px solid #f00으로 변경 3. 순차적으로 찾은 노드 접근하기 사용법: $대상.each(function(index){var $target=$(this);또는var $target=$대상.eq(index);})

예제) 문서의 div 태그의 border 속성을 모두 "4px solid #f00"으로 변경하고 싶은 경우 실행결과 $()의 의미는 $함수의 호출의 의미를 가지고 있다. // 문서에서 id가 header인 노드를 찾아 border 속성을 "4px solid #f00"으로 변경// 문서에서 p태그를 찾아 border 속성을 "4px solid #f00"으로 변경// 문서에서 test1클래스가 적용된 노드를 찾아 border속성으로 "4px solid #f00"으로 변경// 문서의 ul.menu노드에서 select클래스가 적용된 메뉴 항목(li)을 찾아 border속성을 "4px solid #f00"으로 변경 속성으로 노트 찾기 // 문서에서 클래스가 적용된 모든 노드를 찾아 border속성을 4px sol..

1. 이벤트 등록1$대상.on("이벤트이름","이벤트리스너");cs또는1$대상.단축이벤트메소드(이벤트리스너);cs 예제: 확인 버튼을 클릭하면 "안녕하세요."메시지를 출력해 주세요.1234567891011 $(document).ready(function(){ $("#btnCheck").on("click",function(){ alert("환영합니다."); //일반 이벤트 등록 방법 }); //또는 $("#btnCheck").click(function(){ alert("환영합니다."); // 단축이벤트 등록 방법 }) })Colored by Color Scriptercs 2. 스타일 설정하기.설정내용이 하나인 경우1$대상.css("스타일이름", 값);cs 설정내용이 여러개인 경우12345$대상.css({ ..

jQuery를 활용한 노드를 찾는 기본적인 방법1var $ 변수이름 = $("css 선택자");cs $()의 정체:함수의 호출 / 함수이름이 $인 함수 호출$()함수의 역할은 선택자에 해당하는 노드를 찾아주는 역할을 한다. "css 선택자":찾고 싶은 선택자를 만들어 $()함수의 매개변수 값으로 넣어주면 된다. var $ 변수이름:$()함수에서 리턴해주는 값을 저장하기 위해 만든변수변수이름 앞에 $를 붙여준 이유는 jQuery기능이 들어있는 변수라는 것을 표현하기 위해서. 1234567// 예제: 문서에서 div태그의 글자색을 모두 빨간색으로 변경해주세요. $(document).ready(function(){ var $divs = $("div"); $divs.css("color","#f00"); })Co..

제이쿼리 (JQuery) JQuery는 JavaScript로 만들어진 Dom에 접근하기 편리하도록 개발된 라이브러리다. HTML문서에 접근하여 동적이고 확장된 기능을 개발하기에 유용한 API를 제공한다. document.getElementById()이렇게 쓰는 것을 간소화 하는 것, 편하게 하기 위해서 1. 플래시와 같이 마우스의 동작 같이 할 수 있는 것2. 비동기 통신이 지원(Ajax)3. 현존하는 페이지에서 제이쿼리가 쓰이지 않는 곳이 없다. / 화면에서 보여지는 모든 동적인 것 (ex: 옛날 회원가입 사이트에서 중복 확인버튼이 있었지만 현재에는 없다.카페에서 현재 창에서 깜빡하지 않고 바로 움직여진다. ) but. 제이쿼리가 쓰기 편함 , 제이쿼리를 이용해서 부트스트랩을 개발했음. (이제 쓰기는 ..

제리쿼리란? jquery.com 에서 compressed 버전 download$(document).ready(function() {}); 는 $().ready(function(){}); 와 같다. .append() : 하위요소의 가장 마지막에 element를 추가 .prepend() : 하위요소의 가장 처음에 element를 추가.after() : 요소의 다음에 element를 추가.before() : 요소의 이전에 element를 추가 이벤트가 발생한 콜백 함수에서 this 는 이벤트가 binding 된 객체.parent() : 바로 위의 부모 선택.parents("선택자") : 선택자에 맞는 조상 선택.closest("선택자") : 선택자에 맞는 조상 중 가장 가까운 조상 선택 .children("선..

123456789101112 jQuery Adventures Where do you want to go? Plan your next adventures Colored by Color Scriptercs head와 /head 사이에 1 cs 12345678 $(document).ready(function() { }); cs 추가한다. $(".comments > li:nth-child(2)").remove(); $(".commnets > li:eq(1)").remove();