Learn new Get simpler Do more

// 현재 선택되어진 select box의 값 읽기 // Get selected value $("#myselectbox option:selected").val(); // Get selected text $("#myselectbox option:selected").text(); // Get selected index $("#myselectbox option").index($("#myselectbox option:selected")); // Select box의 Selected 값 설정 // Set the element at index 2 to be selected $("#myselect option:eq(2)").attr("selected", "selected"); // Set the selected el..

대부분의 소프트웨어와는 달리, jQuery 플러그인은 작성하기가 쉬워서 몇 가지만 작성하면 코드를 더욱 단순하게 유지할 수 있다. 반복 작업이 있을 경우에 jQuery 플러그인을 사용하기 바란다. 예를 들어, 같은 일을 여러 번 수행하기 위해 each() 함수를 사용하고 있다면 플러그인을 사용해도 된다. jQuery 플러그인을 작성이 쉽기 때문에, 여러분이 사용할 수 있는 것도 수백 가지나 존재한다. jQuery는 탭, 곡선형 코너, 슬라이드 쇼, 툴 팁, 날짜 셀렉터, 기타 여러분이 상상하고 있는 모든 것을 위한 플러그인이 있다. // 가장 기본적인 jQuery 플러그인 $.fn.donothing = function(){ return this; }; // css('background')를 사용하는 대신..

jQuery는 각각 다른 종류의 웹브라우저를 써도 화면이 똑같이 나오고, 브라우저에 따라 입력과 사용에 문제가 생기지 않음을 의미하는 크로스 브라우징을 지원하고 있다. 즉, 웹개발자로써 jQuery에 있어서 각각의 브라우저에 맞게 분기하고 하는 고생을 덜을수가 있다.

jQuery의 또 다른 강력한 기능은 메소드 체인(method chaining.)이다. jQuery 객체에 대해 메소드를 호출할 때마다, 이 메소드는 같은 jQuery 객체를 리턴한다. jQuery 객체에 다중 메소드를 호출하고 싶다면 셀렉터를 다시 입력하지 않고 이를 수행할 수 있다. Hello, how are you?

jQuery를 사용하여 기본적인 애니메이션과 효과를 다룰 수 있다. 애니메이션 코드의 중심에는 animate() 함수가 있는데, 이는 숫자로 된 CSS 스타일 값을 바꾼다. 예를 들어, 높이, 넓이, 폭, 위치를 움직일 수 있다. 또한, 애니메이션의 속도를 밀리초 또는 사전 정의된 속도(느림, 보통, 빠름)로 지정할 수 있다. » Run Hello! » Animate Block1 » Animate Block2 » Animate Both » Reset Block1 Block2

jQuery는 DOM 스크립팅과 이벤트 핸들링을 단순화하는데 제격이다. DOM의 트래버스와 조작이 쉽고, 이벤트의 첨부, 제거, 호출은 매우 자연스러운 일이며, 직접 수행하는 것보다 에러도 적게 발생한다. 기본적으로 jQuery는 DOM 스크립팅으로 수행하는 일들을 더욱 쉽게 수행할 수 있도록 해준다. // ----------------------------------- // Event - Page Load // ----------------------------------- $(document).ready(function () { $("p").text("The DOM is now loaded and can be manipulated."); }); // ----------------------------..

jQuery는 하나의 셀렉터에서 거의 모든 엘리먼트 조합을 선택할 수 있도록 하는 복잡하고도 완벽한 셀렉터 신택스를 갖고 있다. jQuery의 셀렉터 신택스는 CSS3과 XPath에 기반하고 있다. CSS3과 XPath 신택스를 더욱 잘 안다면, jQuery 사용이 더욱 수월해진다. // ---------------------------------------------------------- // multiple(selector1, selector2, selectorN) // ---------------------------------------------------------- $("div,span,p.myClass").css("border","3px solid red"); // ------------..

Ajax는 jQuery를 사용하면 더 단순해 질 수 있다. 일부 매개변수들을 서버 상의 페이지로 전달해야 할 경우 jQuery를 사용하면 이는 매우 간단하다. 필요한 메소드가 어떤 것인지에 따라서 $.post()와 $.get() 중 선택한다. 선택적 데이터 객체와 콜백 함수를 전달할 수도 있다. 복잡한 Ajax 스크립팅을 해야 한다면, $.ajax() 함수를 사용한다. // --------------------------------------- // $.get() // --------------------------------------- $.get('ajax/test.html', function(data) { $('.result').html(data); alert('Load was performed.'..

jQuery를 사용하면 복잡하지 않게 코드로 표현하고자 하는 것만 나타낼 수 있다. 엘리먼트를 반복할 필요가 없다. javascript jquery document.getElementById("ID") $("#ID") document.getElementById("ID").style.display = 'none' $("#ID").css("display","none") document.getElementById("ID").options[document.getElementById("ID").selectedIndex].value $("#ID option:selected").val() var ck = document.getElementByName("NAME"); var str = ""; for(var i = 0;i

2006년 초, John Resig가 만든 jQuery는 JavaScript 코드로 작업하는 사람들에게는 훌륭한 라이브러리이다. 여러분이 JavaScript 언어 초보자라서 라이브러리가 Document Object Model (DOM) 스크립팅과 Ajax의 복잡성을 다루어주기를 원하든지, 숙련된 JavaScript 구루로서 DOM 스크립팅과 Ajax의 반복성에 지루해졌다면, jQuery가 제격이다. jQuery는 코드를 단순하고 간결하게 유지한다. 많은 반복 루프와 DOM 스크립팅 라이브러리 호출을 작성할 필요가 없다. jQuery를 사용하면 매우 적은 문자로 표현할 수 있다. 단순화 편리한 Ajax 호출 막강한 CSS 셀렉터 HTML 애니메이션 DOM 스크립팅과 이벤트 헨들링 강력한 메소드 체인 (me..