* 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)
<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.htmldrive.net/item/picked
- jQuery UI
- 드래그 앤 드롭
- 디자인이 좀...(쓸수가)
- 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 기초강좌
direct.co.kr/cs/jQuery.pdf
jQuery API
jQuery 1.4 Help File (jquery-1.4.chm)
https://charupload.wordpress.com/2007/12/07/jquery-documentation-chm/
'Code > JavaScript' 카테고리의 다른 글
| [JavaScript] Ajax 예제 (0) | 2018.12.14 |
|---|---|
| [JavaScript] jQuery 나라별 언어 국제화 방법 (0) | 2018.11.27 |
| [W3Schools] JavaScript 정리 (0) | 2018.11.07 |
| 자바스크립트 모듈 시스템 (0) | 2018.10.26 |
| 자바스크립트 (프레임워크, 라이브러리) 역사 정리 (0) | 2018.10.25 |
