jQuery Core[BASIC]
//태그명 직접입력 선택
$("div").
// 클래스명으로 선택
$(".class").
//ID 명으로 선택
$("#id").
// 모든 Element 선택 하여 CSS적용
$("*").css("border","1px")
//다중 셀렉터 , 기준으로 해당요소들 모두 선택
$("div,span,p.myClass")
[BASIC Filter]
//애니메이션 되고있는 Element 선택
$(":animated")
//3번째 DIV요소 의미 ((index) 와 같은요소)
$("div:eq(2)")
//DIV요소중 3번째 이후 부터 ((index) 보다 큰(이후) 요소)
$("div:gt(2)")
// DIV 요소중 3번째 이전 ((index) 보다 작은(이전) 요소)
$("div:lt(2)")
// input 요소중 짝수 요소 선택
$("input:even")
// input 요소중 홀수 요소 선택
$("input:odd")
// 체크 되지 않은 Input 요소를 css 백그라운드 색상 수정.
$("input:not(:checked)").css("background-color","blue");
/h1,h2,h3 과 같은 요소 선택
$(":header")
// 첫번째 DIV 선택 :first : last // 마지막 DIV 선택
$("div:first) == $("div:eq(0)") == $("div:lt(1)")
[Child Filter]
// 선택 요소중 첫번째 자식 요소 선택 (*nth-child의 (인덱스)는 1부터 시작)
$(" :first-child") == $(" :nth-child(1)")
// tr 이 복수개일 경우 그중 자식 요소중 td의 첫번째 요소들이 선택된다. last-child // 마지막 자식 요소
$("tr td:first-child")
// 부모 요소의 자식 (index..)번째의 요소 , index 는 1부터 시작.
$(" :nth-child(index/even/odd/equation)")
// ul요소의 2번째 li요소들 선택
$("ul li:nth-child(2)")
//ul요소의 짝수번째 li 요소들 선택
$("ul li:even")
//ul요소의 홀수번째 li 요소들 선택
$("ul li:odd")
//3*0, 3*1, 3*2, ... (요소들을 선택)
$("ul li:nth-child(3n)")
// 부모의 자식요소가 딱 한개만 존재하는(only) 요소 선택
$(" :only-child")
// div > button 자식이 하나 있는 요소만 선택 text,css 변경
예) $("div button:only-child").text("bye~!").css("border"."2px red solid");
[Hierarchy]
$("parent > child") // 부모 요소의 자식 요소 선택
예)$("DIV > SPAN") - <div><span>Hello </span></div> : div 선택
$("ancestor descendant") // 조상 하위의 모든 자손에 해당하는 요소 선택.
예)$("form input") - 폼 하위 input 모든 요소 선택
$("prev + next") // prev 요소 다음에 나오는 형제 요소 선택.
예) $("label + input).css("color","blue").val("Labeled!");
$("prev ~ siblings") // prev 요소 다음에 나오는 '모든' 형제 요소 선택.
예) $("#prev ~ div").css("border","3px groove blue");
[Filter]
// text 를 포함한 요소 선택
$(" :contains(text)")
$("div:contains('hello')") //ex. <div> hello, nice to meet you~~ </div>선택
// 비어있는 요소 선택.
$(" :empty")
$("td:empty").text("Was Empty!")
// selector 에 해당하는 요소를 자식요소로포함하는 요소 선택.
$(" :has(selector)")
$("div:has(p)") // <div>HELLO in a paraGraph</div>
[Visibility Filter]
jQuery(" :hidden") //$(" :hidden") <!=> jQuery(" :visible")
선택 요소
1.display:none // visibility:hidden, opacity: 0 는 보이는것으로 간주됨.
2.type="hidden"
3.width:0;height:0
4.부모 요소가 hidden 인것.
[Form]
$(" :checked") // 체크된 요소
$(" :selected") // 선택된 요소 <option selected="selected"> this </option> // 예) $("select option:selected")
$(" :disabled") // <input name="email" disabled="disabled" />
$(" :enabled") // 활성화 되어있는 요소 (<> disabled)
$(" :file") // <input type="file" />
$(" :image") // <input type="image" />
$(" :input") // 폼 요소 선택 <input />, <textarea />, <select>, <button />
$(" :checkbox") // <input type="checkbox"> == $("[type=checkbox]")
$(" :button") // <input type="button" />
$(" :password") // <input type="password" />
$(" :radio") // <input type="radio" >
$(" :reset") // <input type="reset" /> 예) $("input:reset")
$(" :submit") // <input type="submit" />
$(" :text") // <input type="text" /> //$("input :text")
[Attribute] : 속성선택자
// type 속성이 "text"인 input 엘리먼트 선택
$('input[type="text"]');
// name 속성이 "chooseOne"인 input 엘리먼트 선택
$('input[name="chooseOne"]');
//속성중에 선택자와 이름이 같은 것이 있음
[name] $('div[data-pane]'); (data-pane이라는 네임 속성을 지닌 모든 div 엘리먼트 선택)
//속성값이 선택자값과 불일치
[name!="value"] $('input[checked!="checked"]');
//속성값이 선택자값으로 시작됨 value+%
[name^="value"] $('p[id^="body"]'); (예: id="bodyParagraph", id="bodySection")
//속성값이 선택자값으로 끝남 %+value
[name$="value"] $('div[id$="Section"]'); (예: id="headerSection", id="bannerSection")
//속성값이 선택자값을 포함하고 있음 (:href 속성값에 "article"이 포함된 모든 a 엘리먼트 선택) %+value+%
[name*="value"] $('a[href*="article"]'); (예: href="/articles/september", href="/entries/article")
//속성값이 선택자값으로 시작되며 뒤에 "-"으로 연결된 값이 따름 value+ -
[name|="value"] $('span[name|="tag"]'); (예: name="tag", name="tag-pets", name="tag-fashion")
//속성값 중에 선택자값과 일치하는 단어가 있음
[name~="value"] $('div[class~="buttonStyle"]'); (예: class="skinColor buttonStyle topDiv")
//*복수의 속성으로 선택
[name1="value"][name2="value"] $('input[type="hidden"][data-value="userValue"]');
(type 속성값이 "hidden"이고, //data-value 속성값이 "userValue"인 모든 input 엘리먼트 선택)
'jQuery' 카테고리의 다른 글
| 제이쿼리 셀렉터 요약 (0) | 2014.02.04 |
|---|---|
| jQuery select box 제어 (0) | 2014.02.04 |
| 4.jQuery Events (0) | 2013.12.08 |
| 3.jQuery Manipulation (0) | 2013.12.07 |
| 2.jQuery CSS (0) | 2013.12.06 |