[ jquery ] jquery 기본 명령어
페이지 정보
작성자 웹지기 댓글 0건 조회 2,671회 작성일 18-09-30 05:32본문
[code]
.appendTo() ==> 1.새로운 요소를 타겟(target)에 해당하는 요소 마지막에 추가합니다.
$("span").appendTo("#foo");
.append() ==> 2
.last() ==> 7
.siblings() ==> 8
.prevAl!l() ==> 11
.prev() ==> 12
.prevUntil() ==> 13
.parentsUntil() ==> 14
=========================
.offsetPosition() ==> 16
.parent() ==> 17,18
.not() ==> 19
.nextUntil() ==> 22
.nextAll() ==> 23
.next() ==> 26(선택 집합의 각 요소별로 바로 다음에 오는 요소를 반환해 줍니다.
만일 선택자(selector)가 인자로 주어졌다면 그 선택자와 일치하는 요소만 반환이 됩니다.
$("button[disabled]").next().text("this button is disabled");
.map() ==> 결과를 배열로 돌려받기
.last() ==> 30
.is() ==> 32(맞는지 확인하기)
.has() ==> 33(가지고 있나 없나)
.first() ==> 35(첫번째 요소 찾기)
.find() ==> 36(DOM tree 에서 하위(자식) 요소들을 찾아내어 새로운 jQuery 객체를 생성합니다)
.filter() ==> 37(선택 요소 집합에서 추출하기)
.eq() ==> 38(인덱스로 요소 찾기)
.end() ==> 39(이전 선택 요소로 돌아가기)
.each() ==> 41(선택된 요소만큼 루프)
.contents() ==> 42(텍스트 노드를 포함한 자식 요소 가져오기)
.closest() ==> 43(현재 요소에서 가장 가까운 선택 요소)
.children() ==> 52(자식 요소들 찾기)
.andself() ==> 53(선택된 요소들 이어 붙이기)
.add() ==> 56.선택 요소 확장하기
.val() ==> 61.폼의 value 가져오기
.toggleClass() ==> 65.토글 클래스
.removeClass() ==> 66.클래스 제거
.removeAttr() ==> 68.속성 제거
.html() ==> 70.innerHTML과 같은 표현
.hasClass() ==> 72.클래스가 있나 찾기
.attr() ==> 73.속성을 제어하기
.addClass ==> 75.클래스 추가하기
:visiable,:hidden ==> 76.눈에 보이는 요소 찾기
:text ==> 77.텍스트박스 찾기
.submit() ==> 78.Submit Button 찾기
:selected ==> 80.Select Box에서 선택된 것 찾기<==> change()
:reset ==> 82.Reset Button 찾기
:radio ==> 83.Radio Button 찾기
:password ==> 84.type = password 찾기
:parent ==> 85.다른 요소를 포함한 요소 찾기 <==> :empty
:only-child ==> 87.유일한 자식 요소 찾기
:odd ==> 89.홀수번째 요소 찾기
:nth-child ==> 90.N번째 자식 요소 찾기
:not ==> 91.~이 아닌 요소 찾기
next ~ siblings ==> 94.다음 형제 요소 선택하기
prev ~ siblings ==> 95.다음 형제 요소 선택하기(뒤로)
Multiful Selector ==> 98.한번에 여러 요소 선택하기 ... $("div,span,p.myClass").css("border","3px solid red");
AttributeMultiful Selector ==> 99.다중 속성 필터를 이용한 요소 선택 ... $('input[id][name$="man"]').val('only this one')
:last ==> 100.마지막 자식 요소 찾기 ... $("tr:last").css({backgroundColor: 'yellow', fontWeight: 'bolder'})
:last-child ==> 103.마지막 자식 요소들 찾기 ...
$("div span:last-child").css({color:"red", fontSize:"80%"}).hover(function () {$(this).addClass("solast");}, function () {$(this).removeClass("solast");});
:input ==> 105.폼에 속한 input들 찾기 ... $("form > *"); 폼에 속한 모든 하위 요소들 선택
:image ==> 106.type=image 요소 선택 ... $("input:image").css({background:"yellow", border:"3px red solid"});
#id ==> 107.ID로 요소 찾기 ... $("#myID\\.entry\\[1\\]").css("border","3px solid red");
:hidden => 108.안보이는 요소 찾기
:header ==> 110.<h1><h2>와 같은 tag 선택 ... $(":header").css({ background:'#CCC', color:'blue' });
:has('selector') ==> 111.자식 요소들 중에 tab찾기 ... $("div:has(p)").addClass("test");
[attribute] ==> 113.속성이 있는지 찾기 ...
$('div[id]').one('click', function(){var idString = $(this).text() + ' = ' + $(this).attr('id');$(this).text(idString);});
$(':empty') ==> 115.내용이 빈 태그 찾기 ... $("td:empty").text("Was empty!").css('background', 'rgb(255,220,200)');
$("element") ==> 116.요소명(태그)로 찾기 ... $("div").css("border","9px solid red");
$(':lt(index)') ==> 118.~보다 작은 요소 선택하기 ... $("td:lt(4)").css("color", "red");
$(':gt(index)') ==> 120.~보다 큰 요소 선택하기 ... $("td:gt(4)").css("color", "red");
$(':first') ==> 123.첫번째 요소 찾기 ... $("tr:first").css("font-style", "italic");
$('first-child') ==> 124.자식 요소 중 첫번째 선택 ...
$("div span:first-child")
.css("text-decoration", "underline")
.hover(function () {
$(this).addClass("sogreen");
}, function () {
$(this).removeClass("sogreen");
});
$(':file') ==> 125.Input file 찾기 ... $("input:file").css({background:"yellow", border:"3px red solid"});
$(':even') ==> 126.짝수 찾기 ... $("tr:even").css("background-color", "#bbbbff");
$(':eq(index)') ==> 127.인덱스로 요소 찾기 ... $("td:eq(2)").css("color", "red");
$(':disabled') ==> 128.요소 중에 사용불가(disabled) 상태인 요소를 찾아 반환 ... $("input:disabled").val("this is it");
$('ancestor descendant') ==> 129.부모(ancestor)에 속한 자식(descendant)를 찾기 ... $("form input").css("border", "2px dotted blue");
$(:contains('text')) ==> 131.'text'에 해당하는 단어가 포함된 컨텐츠를 가진 요소를 찾는 선택자 ... $("div:contains('John')").css("text-decoration", "underline");
$('.class') ==> 132.클래스명이 일치하는 요소를 찾는 선택자 ... $(".myClass").css("border","3px solid red");
$('parent > child ') ==> 133.parent 에 속한 child를 찾기 ... $("ul.topnav > li").css("border", "3px double red");
$(':checked') ==> 134.체크박스나 라디오버튼 태그 중에 선택되어 있는 요소 찾기
function countChecked() {
var n = $("input:checked").length;
$("div").text(n + (n <= 1 ? " is" : " are") + " checked!");
}
countChecked();
$(":checkbox").click(countChecked);
$(':checkBox') ==> 135.input 중에 체크박스를 찾는 선택자 ...
var input = $("form input:checkbox").wrap('<span></span>').parent().css({background:"yellow", border:"3px red solid"});
$("div").text("For this type jQuery found " + input.length + ".").css("color", "red");
$("form").submit(function () { return false; });
$(':button') ==> 139.button 요소 또는 input 요소중에 type이 button 인 요소를 찾아줍니다
var input = $(":button").css({background:"yellow", border:"3px red solid"});
$("div").text("For this type jQuery found " + input.length + ".")
.css("color", "red");
$("form").submit(function () { return false; });
$('[name^="value"] ') ==> 140.태그의 name 속성명에 들어가 있는 문자중에 "value" 에 해당되는 문자가 시작부분에 포함되어 있는지 확인하는 선택자
$('input[name^="news"]').val('news here!');
$('[name!="value"] ') ==> 141.태그의 name 속성값과 "value" 가 일치하지 않는 요소만 찾아주는 선택자
$('input[name!="newsletter"]').next().append('<b>; not newsletter</b>');ㅇ
$('[name="value"] ') ==> 144.태그의 name 속성명에 들어가 있는 문자가 "value" 와 일치하는 요소를 찾습니다.
$('input[name="newsletter"]').next().text(' is newsletter');
$('[name$="value"] ') ==> 145.태그의 name 속성명에 들어가 있는 문자의 끝에서 부터 "value" 에 해당되는 문자가 포함되어 있는지 확인하는 선택자입니다
$('input[name$="letter"]').val('a letter');
$('[name~="value"] ') ==> 146.attr 속성의 값이 공백과 함께 value 값을 포함하는 Selector 요소와 일치
$('input[name~="man"]').val('man 이 단어로 포함되어 있음'); ... 속성값이 독립적으로 같아야 함.
$('[name*="value"] ') ==> 147.태그의 name 속성명에 들어가 있는 문자중에 "value" 에 해당되는 문자가 위치에 상관없이 들어가 있는지 확인하는 선택자입니다
$('input[name*="man"]').val('man 이 포함되어 있음');
$(':animated ') ==> 150.화면에서 움직이는 요소를 찾아내는 선택자
$("#run").click(function(){
$("div:animated").toggleClass("colored");
});
function animateIt() {
$("#mover").slideToggle("slow", animateIt);
}
animateIt();
$("*") ==> 151.CSS 선택자(selector)와 일치하는 요소들(elements)을 사용하기 위한 문자열(사용하지 말 것)
■ AJAX + JSON 의 eval!() 함수 사용의 문제 ==> 155
■ AJAX 기본으로 쓰기 ==> 156
■ 숫자에 콤마 붙이기 ==> 157
■ JQuery Core ==> 158
■ Social Network ==> 193
[/code]
** 기본 셀렉터 ***********************************************************************************
1. All Selector ==> $("*") : HTML DOM을 탐색하여 모든 요소를 배열형식의 jQuery 개체로 반환합니다.
ex) $(document).ready(function() {
$("*").css("border", "1px solid #ff0000") ;
});
-> 페이지의 HTML DOM이 모두 로드가 되면 실행이 되는 함수로 자바스크립트의 onload 메서드의 확장된 역할을 하고 있습니다.
2. ID Selector ==> $("#ID") : 문서 안에 있는 여러 엘리먼트중 ID값이 동일한 엘리먼트를 찾아 반환합니다.
ex) $(document).ready(function() {
$("#content").css("background","yellow");
});
3. Element Selector ==> $(“elementName”) : 자바스크립트의 getElementByTagName(“tagName”)과 비슷한 역할을 하며 DOM 개체를
구성하는 태그와 동일한 개체를 찾아 다수의 jQuery 개체를 반환합니다.
ex) $(document).ready(function() {
$("div").css("border","2px solid blue");
});
4. Class Selector : $(“.className”) :
* 자바스크립트의 getElementByClassName()과 동일한 역할을 하고 있는 셀렉터.
* IE8 이하 버전에서는 지원을 하고 있지 않다고 하며, IE9과 HTML의 차세대 버전인 HTML5에서는 기본적으로 지원.
* jQuery의 ClassSelector의 경우 현존하는 대부분의 브라우저에서 사용이 가능.
ex) $(document).ready(function() {
$(".myClass").css("border","2px solid blue");
});
5. Multiple Selector : $(“selector1, selector2, selectorN”)
* 셀렉터를 “,” 통하여 나열할 경우 각각의 셀렉터를 통해 탐색된 개체의 집합을 반환.
ex) $(document).ready(function() {
//id=content, div 요소를 찾아 테두리를 "blue"로 변경합니다.
$("#content, div").css("border", "2px solid blue");
});
6. Complex Selector :
ex) $(document).ready(function() {
//div 요소 중 class가 myclass인 개체를 찾아 테두리를 "blue"로 변경.
$("div.myClass").css("border", "2px solid blue");
});
** Attribute Selector ***********************************************************************************
1. $(Selector[attr]) : attr 속성(attribute)값을 가지는 Selector 요소와 일치
ex) $(document).ready(function() {
// “a” 태그의 속성 “target”이 존재하는 요소를 선택.
$("div > a[target]").css("border", "2px solid blue");
});
2. $(Selector[attr="value"]) : attr 속성의 값이 value와 동일한 값인 Selector 요소와 일치
ex) $(document).ready(function() {
// “a” 태그의 속성값이 'http://www.sqler.com'인 요소를 선택.
$("div > a[href = 'http://www.sqler.com']").css("background", "#CCC");
});
3. $(Selector[attr!="value"]) : attr 속성의 값이 value와 같지 않은 값인 Selector 요소와 일치
ex) $(document).ready(function() {
// “a” 태그의 속성값이 'http://www.sqler.com'이 아닌 요소를 찾아 반환.
$("div > a[href! = 'http://www.sqler.com']").css("background", "#CCC");
});
4. $(Selector[attr^="value"]) : attr 속성의 값이 value 값으로 시작하는 Selector 요소와 일치
* 일정한 패턴으로 정의된 속성이 있을경우 해당 셀렉터를 사용하면 매우 유용.
ex) $(document).ready(function() {
// “div” 태그의 속성 id의 값이 'content-' 을 포함하는 요소를 찾아 반환.
$("div[id^='content-']").css("background", "#CCC");
});
5. $(Selector[attr$=""value]) : attr 속성의 값이 value 값으로 끝나는 Selector 요소와 일치
ex) $(document).ready(function() {
// “div” 태그의 속성 id의 값이 '-1' 을 포함하는 요소를 찾아 반환.
$("div[id$='content-1]").css("background", "#CCC");
});
6. $(Selector[attr*="value"]) : attr 속성의 값이 value 값을 포함하는 Selector 요소와 일치
ex) $(document).ready(function() {
// “input” 태그의 속성 name의 값이 'name' 을 포함하는 요소를 찾아 반환.
$("input[name*='man']").css("background", "yellow");
});
7. $(Selector[attr~="value"]) : attr 속성의 값이 공백과 함께 value 값을 포함하는 Selector 요소와 일치
ex) $(document).ready(function() {
// “input” 태그의 속성 name의 값이 'name' 을 포함하는 요소를 찾아 반환.
// 'batman'과 같은 값은 포함이 안됨.
$("input[name~='man']").css("background", "yellow");
});
** DOM 계층(Heirarchy)을 이용한 요소 접근 ************************************************
1. Child Selector : $(“Parent > Child”) : 부모(Parent) 요소 바로 아래 자식(Child)인 요소를 반환.
ex) $(document).ready(function () {
$("ul.siteUrl > li").css("border", "1px solid #ff0000");ㅏ
});
2. Descendant Selector : $(“ancestor descendant”)
ex) $(document).ready(function () {
$("#siteUrl1 > li").css("border", "1px solid #ff0000"); // parent와 child 관계
$("#siteUrl2 li").css("border", "1px solid blue"); // ancestor와 descendant 관계
});
3. Next Adjacent(이웃의,인접한) Selector : $(“prev + next”) : Prev 요소 바로 다음에 나오는 형제(Adjacent) 수준의 next 요소와 일치하는 항목을 반환.
ex) $(document).ready(function () {
$("label + input").css("border", "1px solid #ff0000");
});
☞ .siblings( )
◇ DOM 트리 상의 형제 요소들을 찾아 새로운 jQuery 객체를 만들어 줍니다.
<ul>
<li>list item 1</li>
<li>list item 2</li>
<li class="third-item">list item 3</li>
<li>list item 4</li>
<li>list item 5</li>
</ul>
$('li.third-item').siblings().css('background-color','red');
☞ .prevAl!l( )
◇ DOM 트리를 기준으로 하여 조건에 맞는 모든 앞쪽 요소들을 새로운 jQuery 객체로 만들어 반환해 줍니다.
◇ 선택자가 주어졌고 선택될 수 있는 바로 이전 요소들이 있다면 jQuery 객체에 포함되어 반환되고 그렇지 않다면 제외됩니다.
<style>
div { width:70px; height:70px; background:#abc;
border:2px solid black; margin:10px; float:left; }
div.before { border-color: red; }
</style>
<script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
<div></div>
<div></div>
<div></div>
<div></div>
<script>$("div:last").prevAl!l().addClass("before");</script>
☞ .prev([selector])
◇ DOM 트리를 기준으로 하여 바로 이전 요소를 새로운 jQuery 객체로 만들어 반환.
$('li.third-item').prev().css('background-color', 'red');
<script>
var $curr = $("#start");
$curr.css("background", "#f99");
$("button").click(function () {
$curr = $curr.prev();
$("div").css("background", "");
$curr.css("background", "#f99");
});
</script>
<script>$("p").prev(".selected").css("background", "yellow");</script>
☞ .prevUntil([selector],[filter])/.prevUntil([element],[filter])
◇ 이전에 위치한 요소를 찾아 반환하다 요소가 필터 조건에 부합될 경우 실행이 멈춥
<script>
$("#term-2").prevUntil("dt")
.css("background-color", "red");
var term1 = document.getElementById('term-1');
$("#term-3").prevUntil(term1, "dd")
.css("color", "green");
</script>
◇ 첫번째는 id=item-2 부터 시작해서 앞쪽 요소들 방향으로 쭈욱 가다가 dt 엘리먼트를 만날 때까지
빨간색을 칠하라는 스크립트입니다.
두번째는 id=item-3 부터 시작해서 id=item-1 인 것을 만날 때까지 텍스트 색을 초록색으로 만듭니다.
단, 'dd' 인 것들만 적용됩니다. 'dd' 부분을 제거해 보시면 쉽게 이해하실 수 있습니다.
☞ .parentsUntil([selector],[filter])/.parentsUntil([element],[filter])
◇ 특정한 조건이 참이 되기 전까지 계속 부모요소를 찾아 냅니다. 결과는 jQuery 객체가 되는데
.parentsUntil() 의 특정 조건에 참이 되는 요소는 제외됩니다.
<script>
$("li.item-a").parentsUntil(".level-1")
.css("background-color", "red");
$("li.item-2").parentsUntil( $("ul.level-1"), ".yes" )
.css("border", "3px solid green");
</script>
======================================================================================
** 기본필터(Basic Filter) ************************************************
1. :eq(index) : Index에 해당하는 요소를 반환합니다.(단일요소).
2. :even : 짝수의 요소를 반환합니다. (0부터 시작)
3. :odd : 홀수의 요소를 반환합니다. (0부터 시작)
4. :first : 첫번째 요소를 반환합니다.
5. :last : 마지막 요소를 반환합니다.
6. :gt(index) : Index 보다 높은 Index에 해당되는 요소를 모두 반환합니다.
7. :lt(index) : Index 보다 낮은 Index에 해당되는 요소를 모두 반환합니다.
ex) $(document).ready(function () {
$("tr:eq(0) > td:eq(7)").css("background", "#EEE");
$("tr:eq(1) > td:gt(2)").css("background", "#EEE");
$("tr:eq(2) > td:odd").css("background", "#EEE");
$("tr:eq(3) > td:first").css("background", "#AAA");
$("tr:eq(3) > td:last").css("background", "#BBB");
});
// “:even, :odd” 경우 “zebra” 줄무늬 스타일의 목록을 만들 때 자주 사용이 됩니다.
ex) $(“tr:even”).css(“background”, “#DDD”)와 같이 사용하면 각 tr 부분에 스타일을 작성하지 않고 간단하게 “zebra” 스타일의 목록을 만들 때 매우 유용합니다
8. :not(selector) ==> $(“td:not(‘.noselect’)”) : td 요소중에 클래스명이 “notSelect”인 항목을 제외한 요소의 집합을 선택합니다.
ex) $(document).ready(function () {
$("td:not(.notSelect)").css("background", "#AAA");
});
9. :focus : 현재 포커스가 위치한 요소를 반환합니다. (1.6 이상에서 지원)
** 폼필터(Form Filter) ************************************************
== 폼 필터는 형식(text, checkbox, password, radio, file)을 기반으로 하는 폼 요소를 선택할 때 사용하는 필터.
1.:button => <input type=”butto” />
2.:checkbox => <input type=”checkbox” />
3. :checked => <input type=”checkbox” checked=”checked” />
4. :disabled => <input type=”text” disabled=”disabled” />
5. :enabled => <input type=”text” enabled=”enabled” />
6. :file => <input type=”file” />
7. :focus => 1.6이상에서 지원
8. :image => <input type=”image” />
9. :input => <input> 모든 input 요소
10. :password => <input type=”password” />
11. :radio => <input type=”radio” />
12. :reset => <input type=”reset” />
13. :selected => <select><option selected="selected"></option></select>
14. :submit => <input type=”submit” />
15. :text => <input type=”text” />
16. :hidden => <input type=”hidden” />
ex) $(document).ready(function () {
$(":checked,:selected").css("border", "2px solid red");
$(":selected").css("background", "red");
});
** 자식필터<Child Filter> ************************************************
1. :first-child [자식 요소 중 첫번째에 해당하는 요소를 모두 반환합니다.]
2. :last-child [자식 요소 중 마지막에 해당하는 요소를 모두 반환합니다.]
ex) $(document).ready(function () {
$("td:first-child").css("background", "red");
$("td:last-child").css("background", "yellow");
});
3.:nth-child ==> $(“td:nth-child(2n+1)”)
* $(“td:nth-child(2n+1)”)을 풀어보면 2의배수(2n)에 1을 더한 값에 해당하는 위치에 있는 요소를 선택을 하게 됩니다.
여기서 가장 중요한 부분은 n은 1이 아닌 0부터 시작을 한다는 것입니다. 1이 아닌 0부터 시작을 하므로
수식을 풀면 “1, 3, 5, 7, 9, 11…”의 형식.
ex) $(document).ready(function() {
$("td:nts-child(2n+1)").css("background","red");
});
** Traverse[탐색] Filtering ************************************************
traverse [횡단하다, 가로지르다]
1. Filtering
1-1 .eq(index) => 선택한 요소들 중에서 인덱스와 일치하는 단일 요소를 선택 반환합니다.
* $("td:eq(0)") == $("td").eq(0);
1-2 .filter(expr)
* $("td:even") == $("td").filter(".even")
* 필터 메서드의 강점은 function을 이용하여 마치 필터를 확장해서 쓰는것과 같은 효과를 얻을 수 있는 점.
* $(document).ready(function() {
$("td").filter(index) {
return index % 3 == 0;
}).css("background","red");
});
<div id="first"></div>
<div id="second"></div>
<div id="third"></div>
<div id="fourth"></div>
<div id="fifth"></div>
<div id="sixth"></div>
<script>
$("div").css("background", "#b4b0da")
.filter(function (index) {
return index == 1 || $(this).attr("id") == "fourth";
})
.css("border", "3px double red");
</script>
1-3 .not(expr) => 표현식과 일치하지 않는 요소의 집합을 선택 반환합니다.
$(document).ready(function() {
$("td").not(index) {
return index % 3 == 0;
}).css("background","red");
});
1-4 .has(selector) => 기본 셀렉터를 통해 가져온 개체의 집합에서 selector에 해당하는 요소를 가진 개체만을 선택 반환합니다.
// 'ul'을 가진 'li'를 반환한다.
$(document).ready(function () {
$("li").has("ul").css("background", "red");
});
1-5 .is(expr)
* 기본 셀렉터에서 가져온 개체의 집합에서 표현 식과 일치하는 부분이 있는지에 대한 여부를 반환.
* 집합에서 단 하나라도 일치하는 항목이 존재한다면 “true”를 반환하고 아니면 “false”를 반환.
$(document).ready(function() {
$("*").each(function () {
if($(this).is("li")) {
$(this).css("border","1px solid blue");
}
});
});
1-6 .map(callback)
* 셀렉터를 통해 가져온 개체의 집합을 jQuery개체의 배열 형식으로 반환합니다.
$(document).ready(function () {
var liText = $("li").map(function (index) {
return "[(" + index + ")" + $(this).text() + "]";
}).get().join(',');
$("#result").text(liText);
});
☞ .slice(start, [end])
◇ 요소 집합의 특정 부분을 잘라내어 축소시킨 집합을 만들어 줍니다.
◇ 선택한 요소에서 start 번째에서 시작하고 end번째에서 끝나는 개체의 집합을 반환.
◇ 기본 셀렉터에서 선택된 요소는 0부터 시작을 합니다. start는 포함을 하나, end 번째 요소는 포함을 않음.
$('li').slice(2, 4).css('background-color', 'red');
** Traverse[탐색] Miscellaneous ************************************************
1. .add( )
$(document).ready(function() {
$("li").add("div > p").css("border", "1px solid red");
});
2. .contents()
* 셀렉터를 통해 선택된 개체 안에 있는 모든 요소를 반환.
* filter 메서드와 조합을 통해 많이 사용.
* $(document).ready(function () {
$("ul").find("li").contents().remove("ul");
});
// 셀렉터를 통해 ul 요소를 찾은 후 find()를 통해 "li" 요소를 찾습니다.
마지막으로 contents() 메서드를 통해 li 요소에 담겨있는 모든 요소를 찾은 후
remove() 메서드를 통해 "ul"이 제거가 되었습니다
3. .end()
* $("div").find("p").end().addClass(myClass);
** Traverse[탐색] Tree ************************************************
1. .find()
* $("div").filter("a") : div요소의 집합에서 “a”를 찾습니다
* $("div").find("a") : div요소의 집합 내용에서 “a”를 찾습니다
** JQuery FORM API ************************************************
* 사용자의 데이터를 서버로 전송을 하는 막중한 임무를 뛰고 있습니다.
** JQuery Event Method ************************************************
1. .blur() : 요소에서 포커스를 잃을 경우에 발생하는 이벤트 입니다.
2. .change() : <input />, <textarea />, <select /> 요소의 값 변경시 발생하는 이벤트 입니다.
3. .click() : 마우스 클릭 시 발생하는 이벤트 입니다.
$(document).ready(function () {
$("td").click(function () {
alert(!$(this).text());
});
});
4. .dblclick() : 마우스를 더블클릭 했을 경우 발생하는 이벤트 입니다.
5. .focus() : 요소에 포커스 되었을 때 발생하는 이벤트 입니다.
6. .hover() : 마우스가 요소 위에 위치했을 때 발생하는 이벤트 입니다.
7. .keydown() : 키 입력 시 발생되는 이벤트이며, 모든 키에 대해 적용이 됩니다.
* .keydown() 이벤트를 사용하는 이유는 엔터키와 같은 특수 입력키에 대한 내용도 체크하기 위함.
* 특수키에 대한 값이 필요 없을 경우에는 .keypress() 를 사용.
* $(document).ready(function () {
$("#txtInput").keydown(function (e) {
$("#txtKeyCode").val(e.keyCode);
});
});
08. .keypress() : keydown 이벤트와 동일하게 키 입력 시 발생이 되지만 enter, tab등의 특수키에는 이벤트가 발생되지 않습니다.
09. .keyup() : 키 입력 후 발생되는 이벤트 입니다.
10. .mousedown() : 마우스 클릭 시 발생하는 이벤트입니다.
11. .mouseenter() : 선택한 요소의 영역에 마우스가 위치했을 때 발생되는 이벤트 입니다.
12. .mouseleave() : 선택한 요소의 영역에서 마우스가 벗어 났을 때 발생되는 이벤트 입니다.
13. .mouseout() : 선택한 요소의 영역에서 마우스가 벗어 났을 때 발생되는 이벤트입니다.
14. .mouseup() : 마우스 클릭 후 발생되는 이벤트입니다.
15. .ready() : DOM이 모두 준비 되었을 때 발생하는 이벤트입니다.
16. .resize() : resize 될 경우 발생하는 이벤트입니다.
17. .scroll() : HTML 문서가 스크롤 되었을 때 발생하는 이벤트입니다.
18. .select() : 선택한 개체를 마우스를 통해 선택 하였을 때 발생하는 이벤트입니다.
19. .submit() : Submit이 일어날 때 발생하는 이벤트입니다. (Form 메서드 참고).
** jQuery Event(고급) ************************************************
☞ bind( )
◇ 개체와 이벤트를 묶어주는 역할.
◇ 파라미터의 값으로 이벤트 이름을 넣음 으로써 해당 이벤트를 체크.
var count = 0;
$(document).ready(function () {
$("#mousearea").bind("mouseenter mouseleave", function(e) {
count++;
$("#spResult").text(count + "Mouse Count");
});
});
var countEnter = 0;
var countLeave = 0;
$(document).ready(function () {
$("#mousearea").bind("mouseenter mouseleave", function(e) {
if (e.type = 'mouseenter') {
mouseEnter++;
$("#spResult").text(count + "MouseEnter");
} else {
mouseLeave++;
$("#spResult").text(count + "MouseLeave");
};
});
});
☞ .live()
☞ .die()
☞ .one()
☞ .each()
◇ jQuery 객체의 수만큼 for 문 같이 반복을 해주는 함수.
<div> test1 </div>
<div> test2 </div>
<div> test3 </div>
$(document.body).ready(function {
$("div").each(function(i) {
if (this.style.color != "blue") {
this.style.color = "blue";
} else {
this.style.color = "red";
}
});
});
<body>
<button>Change colors</button>
<span></span>
<div></div>
<div></div>
<div></div>
<div></div>
<div id="stop">Stop here</div>
<div></div>
<div></div>
<div></div>
<script>
$("button").click(function () {
$("div").each(function (index, domEle) {
// domEle == this
$(domEle).css("backgroundColor", "yellow");
if ($(this).is("#stop")) {
$("span").text("Stopped at div index #" + index);
return false;ㄱ
}
});
});
</script>
☞ append( )/appendTo( )
◇ 새로운 요소를 타겟(target)에 해당하는 요소 마지막에 추가합니다.
A.append(B) : A요소에 B요소를 추가
A.appendTo(B) : B요소에 끝에 A요소 추가
$('<p> test </p>).appendTo('.inner'); // 복사 개념
$('h2').appendTo($('.container')); // 이동 후 복사
<body>
<span>I have nothing more to say... </span>
<div id="foo">FOO! </div>
<script>$("span").appendTo("#foo"); // check append() examples</script>
</body>
== 콜백 함수
== 마크업
== DOM요소
== toggleClass("example")
== addClass("blue")
== setMask()
== nextUntil()
관련링크
- http://www.sqler.com/ 593회 연결
- http://findfun.tistory.com/193 826회 연결
댓글목록
등록된 댓글이 없습니다.