procodes

:checked는 checkbox, radio, select box의 option에 대해 체크가 된 요소들을 찾습니다. 예제) 실행 결과) checked demo 설명)일단 스크립트를 부분만 보면 countChecked를 function을 만들면서,상단 var n = $( "input:checked" ).length; 이건 input 태그요소들 중에 체크(:checked)가 된 요소의 개수를 찾아 n 변수에 담은 후 $( "div" ).text( n + (n === 1 ? " is" : " are") + " checked!" );div에 체크된컨포넌트가 1개이면 1 is checked!! 2개 이상이면 2 are checked!라는 text를 뿌리게 되어 있습니다. 물론 시작하면서 countChecked..

:animated selector는 애니메이션이 동작 중인 요소들을 찾습니다. 예제) Run 실행 모습)설명)우선 :animated는 jQuery에서 애니메이션 진행 상태에가 있는 요소를 찾습니다. $( "#run" ).click(function() { $( "div:animated" ).toggleClass( "colored" );});run이라는 엘리먼트 요소 버튼을 클릭했을 경우document안에 div 요소 중 :animated 즉, 애니메이션 동작을 하고 있다면 colored 클래스를 토글 방식으로 적용했다 안했다를 반복해라라는 뜻이 되겠네요.div 박스의 기본 background color는 노란색인데 colored는 녹색이죠. colored 클래스를 적용 했을 때는 녹색, 뺐을 때는 노란색 ..

jQuery selector들 중에 [name=”value”]는 제일 흔하게 사용합니다. 단순하게 속성의 값이 = (equals)인 것을 찾아라라는 역할을 하죠. 예제) name? value? value? 실행 결과) name? value? value? attributeEquals demo 설명)html 상단에는 각종 컨포넌트들이 나열되어 있고 하단부에서 [type='checkbox']이면서 [name='newsletter']를 찾아라. 즉, and 조건이 되는 것입니다.

closest은 selector로 찾은 요소 기준으로 부모를 포함한 모든 직계조상들 중에 찾고자 하는 요소를 찾아줍니다. 예를 들어 목록에서 깊숙히 정의한 어떤 링크를 클릭했을 때 그 행에 효과를 주고 싶을 경우나5레벨 정도 트리 구조의 형태에서 첫번째 1레벨만 펼침 효과를 주고 싶을 때 사용할 수 있습니다. 예를 들어 아래의 jQuery 코드를 정의한다면.. $("span").closest("ul").css({"color": "red", "border": "2px solid red"}); 아래 결과처럼 span 태그 기준으로 부모 포함 직계 조상들 중에 첫번째로 찾은 ul 태그에 효과를 주게 됩니다.한 단계 위에 ul 태그가 하나 더 있지만 span 태그 기준으로 첫 번째가 아니므로 적용이 안 된 것입..

1. 요소 선택기 (태그 선택기) html 안에 있는 모든 P태그를 찾습니다. $("P") 2. ID 선택기 이와 같은 name이 같은 요소가 존재한다면 id attribute를 추가하여 유일한 ID값을 지정 후 아래와 같이 아이디 앞에 #을 추가하여 사용합니다. $("#abc1") 3. .class 선택기 CSS의 class값을 지정한 element만 찾고 싶다면 아래 같이 class명 앞에 .(마침표)를 추가하여 사용합니다.$(".text_box"); 4. 전체 선택기 html상에서 전체 요소를 찾기는 경우는 극히 드물다고 보는데 아무쪼록 전체 선택 기능도 있습니다.$("*") 테스트 해 보기 : https://www.w3schools.com/jquery/tryit.asp?filename=tryjqu..