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”]는 특정 문자열을 시작하느 요소들을 찾습니다. (예제) (적용 모습) attributeStartsWith demo (설명)프로젝트를 하다보면 흔하게 쓰는 경우인데, 주로 같은 input 박스에서 같은 그룹핑 이름들을 일괄로 찾아 처리를 할 때 사용을 하곤 합니다.예를들면 전화번호 같은 경우 input box를 3개를 둔다고 하고 이름이 각각 tel1, tel2, tel3이라면 한꺼번에 3개 이름을 지정하지 않고도name^=tel 이렇게 앞에 공통 접두사만 지정하면 tel로 시작하는 이름의 컨포넌트를 일괄로 찾아서 처리할 수 있지요. 위의 예제 같은 경우 input box가 3개이며 각각 newsletter, milkman, newsboy라고 되어 있..

:checkbox는 :button과 동일한 원리로 checkbox type의 컨포넌트들을 찾습니다. 예제) Option Button 실행결과) 설명) var input = $( "form input:checkbox" ) .wrap( "" ) .parent() .css({ background: "yellow", border: "3px red solid" }); $( "form input:checkbox" ) form 쓰고 한칸 띄었으므로 form 밑에 자식들 중에 input 태그이면서 :checkbox로 된 컨포넌트를 찾아서wrap 감싸라 뭐로? 으로 감싸라.그런 다음 parent() 감싼 checkbox의 부모 객체, 즉 에게 노란색 바탕에 3픽셀의 빨간색 선으로 스타일을 줘라. 라는 뜻이 되겠습니다. ..

jQuery 셀렉터의 :button은 button 타입의 컨포넌트들을 찾게 됩니다. 예제) Option Button 실행 모습) 설명)html 상단에서 style들을 선언하고 중간 부분에서는 각각의 컨포넌트들을 선언한 다음 하단부에서 자바스크립트로 처리를 했습니다.자바스크립트를 보면...우선 $( ":button" ).addClass( "marked" )는 모든 버튼 형식의 컨포넌트를 찾아 marked라는 클래스를 부여해라는 뜻이지요.input box의 type이 button이거나 태그 자체가 button 경우가 해당 되므로첫번째 컨포넌트인 와 마지막 컨포넌트인 이 해당 됩니다.그래서 .marked로 지정된 background-color: yellow;border: 3px red solid;이라는 스타일..

[name $ = "value"] 는 속성 값에 끝 부분이 해당하는 단어가 포함되어 있는 모든 요소를 찾는다. 예제) 실행결과) attributeEndsWith demo 설명)$( "input[name$='letter']" ) input 요소들 중에 name 속성 값 끝이 letter로 끝나는 요소들을 모두 찾게 된다.위에 3개 input에서는 "newsletter"와 "jobletter"가 해당 되겠다!

[name!=”value”]는 [name=”value”]와 반대입니다. 지정된 속성을 갖지 않은 것을 찾으며 :not([attr='value'])와 동일합니다. 예제) name is newsletter no name name is accept 실행결과) name is newsletter no name name is accept attributeNotEqual demo 설명)$( "input[name!='newsletter']" ) input 태그를 가진 엘레먼트들 중에 name값이 newsletter가 아닌 것을 찾아next() 다음 요소에 ; not newsletter를 추가하여라가 되겠습니다.위의 조건이라면 3개의 라디오 버튼 컨포넌트 중에 첫 번째만 newsletter라는 name을 갖고 있고두, ..

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

[name|=value] jQuery Selector에서 흔하게 사용하는 [name=value]가 아닌 [name|=value]를 알아보도록 하겠습니다. 예제) Some text Some other text will not be outlined 결과) [name|=value]는 속성 값이 접두사 포함되어 있는 경우를 찾아 줍니다. $( "a[hreflang|='en']" ).css( "border", "3px dotted green" ); 이 예제를 예를 들면 a 태그 중에 hreflang라는 속성 값이 en인 값을 찾는데 값 중에 - (하이픈)이 있는 경우는 하이픈 기준으로 잘라서 앞쪽 이름을 보게 됩니다. 이러면 하이픈을 이용해서 그룹핑을 해서 사용 할 수 있겠죠.

[name*=”value”] jQuery의 selector기능 활용하여 속성 값에 문자열이 포함 되어 있는 경우를 찾는 경우는 [name*=”value”] 이와 같이 사용하면 됩니다. java나 javascript에서 사용하는 indexOf > -1 와 동일한 기능이라고 보시면 됩니다. 예제) 결과) 설명) $( "input[name*='man']" ).val( "has man in it!" ); input 태그들 중에 name 속성 이름에 "man"이라는 문자열이 포함되어 있는 경우 value 값에 "has man in it!"을 넣어라. name이 newmilk인 경우 man 문자열이 포함되어 있지 않아 적용이 안 된 것입니다. 심플하쥬~?