jquery

[liamchoi943]

jquery란???

1. 엘리먼트를 선택하는 강력한 방법 << 자바스크립트는 결국에는 html의 엘리먼트를 제어하는것... 그 선택자체가 쉽도록 하는것이 jquery...
2. 선택된 엘리먼트들을 효율적으로 제어할 수 있는 다양한 수단을 제공하는
3. 자바스크립트 라이브러리...

사용하는방법은 두가지

1. 소스코드를 다운로드후 src="directory"해주면됨...
2. 아니면... 그냥 구글의 자바스크립트 라이브러리를 사용하면 됨 -> 여기가면 url 주소 있음...https://developers.google.com/speed/libraries#jquery

jquery는 무조건 $로 시작함... 기본적인 문법 -> $(제어대상).method1().method2();

예) $('.welcome').html('helloworld!codingeverybody!').css('background-color'.'yellow'); welcome에 들어가있는놈은 css selector임 -> 이렇게 method의 method로 꼬리를 물수있는데 이걸 chain이라고함...

[liamchoi943]

Wrapper? jquery( 엘리먼트 오브젝트 | css 스타일 선택자) << jquery( ) 이게 wrapper.

$(엘리먼트)와 jQuery(엘리먼트)는 같은 의미이지만 $를 사용하는 다른 라이브러리들과의 충돌때문에 다음과 같은 방법을 사용한다...

JQuery('body').html('hello world');

(function($) { $('body').html('hello world'); } )(jQuery) 이렇게 하면 충돌을 방지해준다...

제어 대상을 지정하는 방법 -> jQuery(selector, [context]) -> context은 생략가능...

     <ul>
        <li>test2</li>
    </ul>
    <ul class="foo">
        <li>test</li>
    </ul>
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
    <script type="text/javascript">
        (function($){            
            $('ul.foo').click( function() {
                $('li', this).css('background-color','red');
            });
        })(jQuery) <<ul.foo가 클릭이 되었을때 'li', this. css(background 등등) 이 실행됨...

[liamchoi943]

javascript 변수형(int double stirng) 등등이 존재하지 않음... 그냥 var = a; var = b 등등이렇게 선언하고 데이터형은 알아서 할당됨... += ++ 등등 같은 연산자 사용 가능~

string concaenate (string1 + string2 = string1string2) 가능 조건문은 같음 (==, !=, &&, ||) function 선언은 function send() { alert('send");} 이렇게 선언하고 호출은 send(); 또는!!!! send = function() { alert('send');} 이렇게 가능~ 또는!!! send = () => { alert('send'); } 이렇게도 가능

(변수가 있고... 값을 반환할때는...) function add(value1, value2) { return value 1 + value2; }

arrays: var arr = new Array; <- index은 0 부터 시작. arr.length 하면 length 반환... < 메서드는 아니고 그냥 멤버 변수임 arr.join("asdf") 은 arr의 모든 element 사이에 asdf을 더해서 호출해줌 arr.reverse()은 반대로~ arr.sort()은 sort... (default is alphabetical) arr.concat(arr2) 하면 arr 뒤에 arr2를 붙혀줌 arr.push는 맨뒤에 요소를 삽임 arr.pop은 맨뒤 요소를 꺼냄 (stack와 동일) arr.shift은 arr의 첫번째 요소를 삭제 arr.unshift('asdf')은 arr앞에 'asdf'을 더해줌

OBject is just a structure like java var obj = new Object;

for loop: for( var i = 0; i<5; i++) { 등등} var arr = [1,2,3,4,5]; for(var i in arr) { asdf }

아니면 배열에선~ arr.forEach( (value) => { asdf}); (약간 램다식?으로) -> foreach가 빠르다고 알려져있음...

while loop: var i = 0; while(i<5) { 등등 i++; }

arr = [1,2,3,4,5]; arr.map( (value,index) => { //value = 1, index = 0 //value = 2, index = 1 등등 }); -> map은 foreach와 달리 새로운 객체를 반환하며 map에선 값과 동시에 인덱스를 출력가능...

문자열~ document.write(Welcome.charAt(0)); // charAt(n) : n번째 문자를 출력한다. 결과는 O

document.write(Welcome.charCodeAt(0)); // charCodeAt(n) : n번째 문자의 유니코드를 출력한다. 결과는 79

document.write(Welcome.indexOf("x")); // indexOf("?") : ?라는 글자가 있다면 글자의 인덱스를, 없다면 false(-1)을 출력한다. 결과는 -1

document.write(Welcome.includes("space")); // includes("?") : ?라는 글자가 있다면 true(0), 없다면 false(-1)을 출력한다. 결과는 0

document.write(Welcome.replace("peaceful", "nasty")); // replace("a", "b") : a를 b로 교체한다. 결과는 ONDE Planet is the most nasty space in the universe.

document.write(Welcome.search("universe")); // search("?") : ?라는 글자를 검색하여 첫 문자의 시작 지점을 알려준다. 결과는 46

document.write(Welcome.slice(0,4)); // slice(n, n') : n~n'-1 까지의 문자를 가져온다. 결과는 ONDE

document.write(Welcome.split(" ")); // split("?") : ?라는 문자를 기준으로 문자열을 분리한다. 결과는 ONDE,Planet,is,the,most,peaceful...

document.write(Welcome.trim()); // trim() : 앞, 뒤의 공백을 제거하는 역할을 한다. 이 값에서는 앞뒤에 공백이 없으므로 결과가 본래의 문자열과 동일하다.

document.write(Welcome.length); // length : 문자열의 길이를 반환한다. 결과는 55

수학 연산은... Math라는 기능을 사용

Math.abs() 절대값 Math.ceil() -> 올림 Math.floor() Math.round() -> 반올림 Math.random()

[liamchoi943]

체인은? jqery의 메소드들은 반환값으로 자기 자신을 반환해야한다는 규칙이 있음... 이를 이용하면 선택한 대상에 대해서 연속적인 제어를 할수 있다...

장점은? 코드가 간결해짐 인간의 언어와 유사해서 사고의 자연스러운 과정과 비슷...

jQuery

attr() 메서드는 "attribute",.. 그러면 여기서는 a 태그의 튜토리얼 속성을 가진넘의 href attibute, target attribute, 그리고 css로 'color'를 레드로 지정해준다... (채인이기때문에 가능)

이걸 javascript로 하면??

jQuery

var tutorial 만들어주고... setattribute, style.color 등으로 지정해줘야하는데... 보다시피 jquery가 훨신 쉬움...

탐색(traversing) chain의 대상을 바꿔서 체인을 계속 연장시킬 수 있는 방법 ->너무 복잡한 chain은 코드의 가독성 (읽힐수있는 효율성)을 떨어트릴수 있다...

• list item 1
• list item 2
• list item 3

• list item 1
• list item 2
• list item 3

여기서는 ul.first를 바꾸는게 아니라... foo를 찾고 css를 foo에 매기는거임... end()는? 마지막으로 사용한 traverse를 취소함... (여기서는 find(.foo)를 취소함... 즉 ul.first로 돌아감)

[liamchoi943]

이벤트 시스템에서 일어나는 사건을 의미함 javascript나 jquery에게 이벹느란 브라우어저에서 일어나는 사건... (클릭, 마우스 이동, 타이핑 등등) 이벤트가 발생했을때... 작동할 로직을 알려줄수있음..

function clickHandler(e){ alert('thank you'); } $(document).bind('ready', function(){ $('#click_me').bind('click', clickHandler); $('#remove_event').bind('click', function(e){ $('#click_me').unbind('click', clickHandler); }); $('#trigger_event').bind('click', function(e){ $('#click_me').trigger('click'); }); }) 여기선 bind, unbind, trigger를 함.. bind는 이벤트를 설치할때 사용하는 메서드... unbind로 제거 가능 trigger로 이벤트 핸들러를 강제로 실행 click, ready와 같은 다양한 이벤트 헬퍼가 있음...

이벤트 헬퍼는?

$(document).ready(function(){ $('#click_me').click(clickHandler); $('#remove_event').click(function(e){ $('#click_me').unbind('click', clickHandler); }); $('#trigger_event').click(function(e){ $('#click_me').trigger('click'); });

여기서 ready라는 method가 헬퍼임... 첫예제에서 'ready'라는 이벤트 핸들러를 설치하는것 보다... 그냥 직접 ready라는 헬퍼 (메서드를) 호출하는게 더 나음...

.... 위에꺼 다 필요없음 ㅡㅡ The on() method attaches one or more event handlers for the selected elements and child elements.

As of jQuery version 1.7, the on() method is the new replacement for the bind(), live() and delegate() methods. This method brings a lot of consistency to the API, and we recommend that you use this method, as it simplifies the jQuery code base.

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

그냥 on 쓰면됨

[liamchoi943]

jquery는 엘리먼트를 제어하는 일관되고 풍부한 기능들을 제공함...

https://api.jquery.com/category/manipulation/ -> 들가면 자식들을 manipulation 하는 방법들을 볼수있음

.append() -> 자식으로 삽입 ...문법은 $( ".inner" ).append( "

Test

" ); .after() -> 형제로 삽입... 문법은 append랑 동일... .addClass() -> Adds the specified class(es) to each element in the set of matched elements. $( "p" ).addClass( "myClass yourClass" ); .wrap() -> 부모로 감싸기... ->
Wrap an HTML structure around each element in the set of matched elements $( ".inner" ).wrap( "

" ); .remove() -> 삭제... (쉬움) .replaceAll() -> 치환 $( ".first" ).replaceAll( ".third" ); -> replaces classes with first with third

[liamchoi943]

form... 서버로 데이터를 전송하기 위한 수단...

Githubissues.

Githubissues is a development platform for aggregating issues.