* CDN

jQuery CDN
    - cloudflare  , (20ms - 50ms)  (https://cdnjs.com/libraries/jquery/)
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

    - Microsoft , (17ms - 50ms)
<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.3.1.min.js"></script>

    - Google , (50ms - 180ms)
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

    - jquery.com , (320ms - 900ms)
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>


//=========

<head>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.3.1.min.js"></script>

</head> 



//=====================

* html 로딩시 실행 (Document Ready Event)

$(document).ready(function(){

...

}); 


- 동일한 코드

$(function(){

...

}); 


//=========

* 요소 선택기 ( Selector, 셀렉터)

- 레퍼런스

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


- 선택기 테스터

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



- 예제)

HTML = <input type="checkbox" name="answer1">

-> jquery선택 = input[type=checkbox][name=answer1]:checked



//

$("*") - 모든 요소 선택

$(this) - 현재 요소 선택

$("p.intro") - <p class="intro"

$("p:first") - 1번째  <p> element

$("ul li:first") - 1번째 <ul> 의 1번째 <li>

$("ul li:first-child") - 모든 <ul> 의 1번째 <li>

$("[href]") - herf 속성이 있는 모든 요소 선택

$(":button") - type="button" 인 모든 <button>, <input>

$("tr:even") - 모든 짝수 번째 <tr>

$("tr:odd") - 모든 홀수 번째 <tr>


$("[id]") - id 속성요소를 가진 모든 요소


$("a[target='_blank']") - target='_blank'가 있는 모든 <a>

$("a[target!='_blank']") - target='_blank'가 아닌 모든 <a>

$("[href$='.jpg']") - ".jpg" 로 끝나는 href 속성을 가진 모든 요소

$("[title|='Tomorrow']") Tomorrow와 같거나 시작하는 것(대소문자 구분)

$("[title^='Tom']") "Tom" 으로 시작하는 것

$("[title~='hello']") "hello" 와 정확히 일치하는 것

$("[title*='hello']") "hello" 를 포함하는 것


$("div > p")     <div> 바로 아래 자식 <p>
$("div p")     <div> 아래 모든 자식 <p>

$("div ~ p") - <div>에 속하지 않는 <p>태그가 선택됨 

동기들(Siblings) : 같은 부모를 가진 자식들 집합

https://www.w3schools.com/jquery/tryit.asp?filename=tryjquery_sel_firstoftype


$("div + p") - next, <div> 밖의 바로 다음에 오는 <p>

https://www.w3schools.com/jquery/tryit.asp?filename=tryjquery_sel_previous_next




//======================

* CallBack 함수

- 작동이 끝난후 실행됨


<script>

$(document).ready(function(){

    $("button").click(function(){

        $("p").hide(1000, function(){

            alert("The paragraph is now hidden");

        });

    });

});

</script>



//====================


* 값 조회

$("#w3s").attr("href")



* 값 설정

$("#w3s").attr({

        "href" : "https://www.w3schools.com/jquery/",

        "title" : "W3Schools jQuery Tutorial"

    });



* 추가

$("p").prepend("Some prepended text.");

- 자식중 첫번째에 추가


$("body").append(txt1, txt2, txt3); 

- 자식중 마지막에 추가


$("img").after("Some text after");

- 자신의 다음에 추가


$("img").before("Some text before");

- 자신의 이전에 추가



* 삭제

$("p").remove(".test, .demo"); //class='test' , class='demo' 삭제



//====================

* CSS - 스타일 변경

$("p").css({"background-color": "yellow", "font-size": "200%"});



//======

* 좌표계

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

https://www.w3schools.com/jquery/img_jquerydim.gif



//===============================

* DOM 개체 순회( Traversing)

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

prev() prevAll() prevUntil()

next() nextAll() nextUntil()


parent() parents()

children()

siblings() - 같은 단계에 있는 모든 요소(같은 부모)


find() - 후손중에 검색



//=================

< AJAX >



* load()

$("#div1").load("demo_test.txt"); // 문서를 읽어서 div1에 쓴다.

$("#div1").load("demo_test.txt #p1"); //demo_test.txt 문서중 id=p1의 내용을 읽어온다


- CallBack함수

https://www.w3schools.com/jquery/tryit.asp?filename=tryjquery_ajax_load_callback


$("#div1").load("data.txt #p11", function(responseTxt, statusTxt, xhr){

if(statusTxt == "success"){

console.log("성공");

}else{

console.log("error -- : " +xhr.status+": " +xhr.statusText);

}

});


//=======

* ajax() 

$.ajax({url: "demo_test.txt", success: function(result){

            $("#div1").html(result);

        }});



* post()

    $.post("demo_test_post.asp",

    {

        name: "Donald Duck",

        city: "Duckburg"

    },

    function(data, status){

        alert("Data: " + data + "\nStatus: " + status);

    });

}); 



//==============================

* 다른 라이브러리(프레임워크)와 충돌 피하기

- $ 대신 jQuery사용

$.noConflict();

jQuery(document).ready(function(){


- $ 대신 사용할 문구 지정 가능

var jq = $.noConflict();

jq(document).ready(function(){


//=========================

* 플러그인

http://www.bestjquery.com/

http://www.htmldrive.net/item/picked



- jQuery UI

https://jqueryui.com/

- 드래그 앤 드롭

- 디자인이 좀...(쓸수가)


- jQuery Cookie

https://plugins.jquery.com/cookie/

https://github.com/carhartl/jquery-cookie



//================================

//참고

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

- HTML5 , CSS 3, XML, BootStrap 3, 4,  

- JavaScript, jQuery, AngularJS ,JSON, AJAX, W3.JS 

- SQL, PHP, Python, ASP, Node.js, 


A re-introduction to JavaScript (JS tutorial)

https://developer.mozilla.org/en-US/docs/Web/JavaScript/A_re-introduction_to_JavaScript


생활 코딩 - jQuery Ajax

https://opentutorials.org/course/1375/6851


웹 프런티어와 함께 하는 jQuery 기초강좌

http://www.sqler.com/387795

direct.co.kr/cs/jQuery.pdf


jQuery API

https://api.jquery.com/


jQuery 1.4 Help File (jquery-1.4.chm)

https://charupload.wordpress.com/2007/12/07/jquery-documentation-chm/


반응형
Posted by codens