jquery) selector, event, get, set, add

jquery basics

Selector

// Jquery는 본질적으로 HTML의 Element를 조작하기 위한 것이다

// 따라서 HTML 요소를 잡아오는 selector 가 매우 중요하고 jQuery의 모든 selector는

// $로 시작하여 () 괄호가 따라온다.

/*

$("*") Selects all elements    

$(this)    Selects the current HTML element    

$("p.intro")   Selects all <p> elements with class="intro" 

$("p:first")   Selects the first <p> element   

$("ul li:first")  Selects the first <li> element of the first <ul>    

$("ul li:first-child")    Selects the first <li> element of every <ul>    

$("[href]")               Selects all elements with an href attribute 

$("a[target='_blank']")   Selects all <a> elements with

a target attribute value equal to "_blank"    

$("a[target!='_blank']")  Selects all <a> elements with

a target attribute value NOT equal to "_blank"    

$(":button")  Selects all <button> elements and <input> elements of type="button" 

$("tr:even")  Selects all even <tr> elements  

$("tr:odd")   Selects all odd <tr> elements   

*/

+

선택한 객체의 바로 밑 : $(this).children()

선택한 객체에서 가장 가까운 것 : $(this).closest('td') (예시는 가장 가까운 td)

선택한 객체의 하위 모든 것 중 검색 : $(this).find('.className')

선택한 객체의 바로 다음 태그 : $(this).next()

인덱스로 찾기 :

ex)

$( "li" ).eq( 2 ).css( "background-color", "red" ); : li 태그중 가장 처음 것이 0이고 그 뒤로 0, 1, 2번째 태그의 css를 변경

$(this).children().eq(2).css("display","none"); : this 의 제일 처음 자식이 기준이 되고 0, 1, 2번째 태그의 css 변경

Event 처리

사용자의 입력 장치에 의해서 다양한 event가 발생할 수 있는데

이를 이용해서 연쇄적인 event 및 동적으로 html 요소를 조작할 수 있도록

jquery는 특수한 함수들을 가지고 있다

함수들의 정보 및 입력 장치에 의한 event의 종류는 아래 링크 참고

https://www.w3schools.com/jquery/jquery_events.asp

유념해야 할 것은 함수 표현 방식이다

아래에서 'p'태그를 선택하여 조작하는 것을 전제로

예시문을 통해 알아보자

표현 방식은 두 종류가 있다

1) 하나의 이벤트 처리

$('p').~사용자 입력 event~( function() {

~사용자 입력 event 발생시 연쇄 발생할 event를 여기에 설계

});

2) 다수의 이벤트 처리

$('p').on('~사용자 입력 event~', function() {

~사용자 입력 event 발생시 연쇄 발생할 event를 여기에 설계

});

cf) 여기서 숙지에 도움이 되는 개념은 Map 개념이다. key-value 방식으로

셀렉터로 잡히고 이 대상이 on(붙는데 어디에 붙냐면)

(key, value)(key에 붙고 value를 실행)으로 알아두자

후에 css를 변경하든 value를 변경하든 이런 key-value 개념을 이용해서 숙지할 만한

함수들이 많이 있으니 잘 알아둔다.

+

jQuery click()

Demonstrates the jQuery click() event.

jQuery dblclick()

Demonstrates the jQuery dblclick() event.

jQuery mouseenter()

Demonstrates the jQuery mouseenter() event.

jQuery mouseleave()

Demonstrates the jQuery mouseleave() event.

jQuery mousedown()

Demonstrates the jQuery mousedown() event.

jQuery mouseup()

Demonstrates the jQuery mouseup() event.

jQuery hover()

Demonstrates the jQuery hover() event.

jQuery focus() and blur()

Demonstrates the jQuery focus() and blur() events.

jQuery Get, Set

Get, Set Content - text(), html(), and val()

Three simple, but useful, jQuery methods for DOM manipulation are:

text() - Sets or returns the text content of selected elements

html() - Sets or returns the content of selected elements (including HTML markup)

val() - Sets or returns the value of form fields

※ 파라미터가 비어 있으면 Get이고 파라미터가 존재하면 Set이다

The following example demonstrates how to get content with the jQuery text() and html() methods:

https://www.w3schools.com/jquery/jquery_dom_get.asp

https://www.w3schools.com/jquery/jquery_dom_set.asp

Get, Set Attributes - attr()

The jQuery attr() method is used to get attribute values.

The jQuery attr() method is also used to set/change attribute values.

The following example demonstrates how to get the value of the href attribute in a link:

https://www.w3schools.com/jquery/jquery_dom_get.asp

https://www.w3schools.com/jquery/jquery_dom_set.asp

※ Set의 파라미터에는 Map 형식인 key(tag)-Value로 설정한다는 것을 참고!

다수의 attribute를 바꾸고 싶으면 jason 형식으로 파라미터를 설정한다

cf) element = tag  vs  attribute = things in tag

jQuery add

// ***********************************************************************

// append() - Inserts content at the end of the selected elements

// prepend() - Inserts content at the beginning of the selected elements

// after() - Inserts content after the selected elements

// before() - Inserts content before the selected elements

// ***********************************************************************

$(function () {

    // append (태그 내부)

     $('p').append('<h1> 내용 뒤에 붙이기 </h1>');

    /*

    <p> / test 'p'태그 / <h1> 내용 뒤에 붙이기 </h1> </p>

    */

    

    // after (태그 외부)

    $('p').after('<h1> 내용 뒤에 붙이기 </h1>');

    /*

    <p> / test 'p'태그 / </p> <h1> 내용 뒤에 붙이기 </h1>

    */

    // prepend (태그 내부)

    $('p').prepend('<h1> 내용 앞에 넣기 </h1>');

    /*

    <p> <h1> 내용 뒤에 붙이기 </h1> / test 'p'태그 / </p>

    */

    // before (태그 외부)

    $('p').before('<h1> 내용 앞에 넣기 </h1>');

    /*

    <h1> 내용 뒤에 붙이기 </h1> <p> / test 'p'태그 / </p>

    */

});