jQuery
jQuery is JavaScript library.
jQuery CDN: https://code.jquery.com/
You can check from the latest version. If you click one of the links, you can get the CDN link for jQuery. I used minified for jQuery 3.x
Copy and paste the link inside the head
tag in html file(and it should be above your css link). Because it's read from top to bottom - if your css link is above the jQuery link, your css might not work like you expected.
<!-- jQuery CDN: https://code.jquery.com/ -->
<script src="https://code.jquery.com/jquery-3.6.0.min.js"
integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
<script>
jQuery documentation
Read Documentation: https://api.jquery.com/
You can find anything you'd like to do with jQuery if you use search box. It shows you how to use jQuery with examples.
Selector
You can select elements with id, class and tag name like you do in css but you should use dollar sign and parentheses $()
For example, if you'd like to select an element with id name "item", $("#item")
. If the element has class "box", then $(".box")
and for h2
tag, $("h2")
.
(If it was javascript you have to write like document.querySelector("#item") or document.getElementByID("item") which is very long.)
-
.parent()
: gets the ancestors of each element in the current set of matched elements, optionally filtered by a selector. Usage eg)$('.items').parent().css('backgroundColor', 'blue');
-
.children()
: gets the children of each element in the set of matched elements, optionally filtered by a selector. Usage eg)$('.ul2').children('li:gt(5)').css('color', 'blue').css('backgroundColor', 'red')
-
.siblings()
gets the siblings of each element in the set of matched elements, optionally filtered by a selector.
Using jQuery
-
.html()
: is used to set an element's content. It's to write html. -
.css()
: as a setter, jQuery modifies the element's style property. For example, $("#mydiv").css("color", "green") is equivalent to document.getElementById("mydiv").style.color = "green". -
.attr()
: a convenient way to set the value of attributes -
val()
: allows you to pass an array of element values
jQuery filter
-
:eq
: equal( = )$("li").eq(2).css("color", "blue" );
means change color to blue for li element on the index 2. -
:lt
: little ( < ), stands for theΒ less-than sign $("li:lt(2)") means li elements that have smaller index than 2. -
:gt
: greater ( > ), stands for theΒ greater-than sign$("li:gt(4)").css( "backgroundColor", "yellow");
means change background color to yellow for li elements that have greater index than 4. -
:not(selector)
:$("input:not(:checked)+span").css("backgroundColor", "yellow");
means change background color to yellow for the span that is next to input not checked. -
:even
: even elements in that set. -
:odd
: odd elements in that set. -
:first
: the first element in that set. -
:last
: the last element in that set
// example
$( "li" ).filter(":nth-child(2n)").css("backgroundColor", "red" );
filter by attribute
- attributeContains -
input[name*="name"]
: It will select an element if the selector's string appears anywhere within the element's attribute value. Usage eg)$("input[name*='man']").val("has man in it!");
- attributeEquals -
input[name="value"]
: Selects elements that have the specified attribute with a value exactly equal to a certain value. Usage eg)$("input[value='Hot Fuzz']").next().text("Hot Fuzz");
child filter
-
:first-child
: first-child selector can match more than one. one for each parent. This is equivalent tonth-child(1)
. -
:last-child
: selects all elements that are the last child of their parent. last-child selector can match more than one. one for each parent. -
:nth-child(2)
: implementation of :nth- selectors is strictly derived from the CSS specification, the value of n is "1-indexed", meaning that the counting starts at 1 -
:nth-child(even)
: even number indexed elements -
:nth-child(odd)
: odd number indexed elements
content filter
-
:contains(text)
: select all elements that contain the specified text. Usage eg) $("div:contains('shop')").css("text-decoration", "underline"); -
:empty
: removes all child nodes of the set of matched elements from the DOM. Usage eg)$(".hello").empty();
-
:has(selector)
: selects elements which contain at least one element that matches the specified selector
class attribute
-
.addClass()
: adds the specified class(es) to each element in the set of matched elements. -
.removeClass()
: remove a single class, multiple classes, or all classes from each element in the set of matched elements. -
.toggleClass()
: add or remove one or more classes from each element in the set of matched elements, depending on either the classβs presence or the value of the state argument. -
.hasClass()
: determine whether any of the matched elements are assigned the given class.
editing with jQuery
$("p").append("Some appended text.");
$("p").prepend("Some prepended text.");
$("#div1").remove();
$('ul').after('<h2>The end!</h2>');
$('ul').before('<h2>Start!</h2>')
$("div").addClass("important");
$("h1,h2,p").removeClass("blue");
$("h1,h2,p").toggleClass("blue");
$("p").css("background-color");
$("p").css("backgroundColor","yellow");
// You can use - and camelCase but it's good to use one fixed.
effects with jQuery
$("p").hide();
$("p").show();
$("p").toggle();
$("#div1").fadeIn();
$("#div1").fadeOut();
$("#div1").fadeToggle();
$("#div3").fadeIn(3000);
jQuery practice
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title></title>
<!-- https://code.jquery.com/ -->
<!-- 3μ λ minified μ¬μ©ν¨ -->
<script src="https://code.jquery.com/jquery-3.6.0.min.js"
integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
<script>
// λ¬Έμ¬κ° λ€ μ€λΉλλ©΄ μ€ν.
$(function () { // μ΄κ²μ μ£Όμμ²λ¦¬νλ©΄ μ€νμ΄ μλ©λλ€.
//htmlμ΄ λ€ λ‘λλμ§ μμ μνμ΄κΈ° λλ¬Έμ κ·Έλ μ΅λλ€.
$('box').fadeOut(3000).fadeIn(3000);
})
</script>
<style>
.box {
width: 200px;
height: 200px;
background-color: palevioletred;
}
.box2 {
width: 100px;
height: 100px;
opacity: 0.3;
background-color: red;
}
</style>
</head>
<body>
<h1 id="one">jQuery μ€μ΅</h1>
<p>hello</p>
<button class="btn1">ν΄λ¦ν΄!!</button>
<p class="μ€μ΅">jQuery μ€μ΅μ νκ³ μμ΅λλ€.</p>
<img>
<br>
<textarea name="λ©λͺ¨μ₯" id="λ©λͺ¨μ₯" cols="30" rows="10"></textarea>
<button class="btn2">λ©λͺ¨μ₯ λ΄μ© κ²½κ³ μ°½μΌλ‘ μΆλ ₯</button>
<p id="p3">hello world</p>
<!--
1. li items λΆλͺ¨λ₯Ό μ°Ύμ background-colorλ₯Ό νλμμΌλ‘ λ²κΏμ£ΌμΈμ.
2. items 2λ²μ§Έ μμ λΉ¨κ°μμΌλ‘ λ°κΏμ£ΌμΈμ.
3. ul2μ μμμΈ liμμλ₯Ό μ ννμ¬ 1λ²λΆν° 3λ²κΉμ§ colorλ₯Ό λ
ΉμμΌλ‘ λ°κΏμ£ΌμΈμ.
4. ul2μ μμμΈ liμμλ₯Ό μ ννμ¬ 7λ²λΆν° 10λ²κΉμ§ colorλ₯Ό νλμ, background-colorλ₯Ό λΉ¨κ°μμΌλ‘ λ°κΏμ£ΌμΈμ.
-->
<div class="wrapper">
<h1 class="title">TITLE</h1>
<ul>
<li class="items">item1</li>
<li class="items">item2</li>
<li class="items">item3</li>
</ul>
</div>
<!-- ul>li{hello}*10 -->
<ul class="ul2">
<li>hello</li>
<li>hello</li>
<li>hello</li>
<li>hello</li>
<li>hello</li>
<li>hello</li>
<li>hello</li>
<li>hello</li>
<li>hello</li>
<li>hello</li>
</ul>
<div id="div1">Hello world!</div>
<div class="one blue">hello world</div>
<div class="two blue">hello world</div>
<p class="blue">hello world</p>
<div class="three">hello</div>
<div class="three blue">hello</div>
<div class="box">hello world</div>
<div class="box2">hello world</div>
<button class="btn3">λλ¬λ΄μ!</button>
<script>
// document.getElementById('one').innerHTML = "!!!";
// classλ . μμ΄λλ #
$('#one').text('hello jquery');
// $('p').hide(); // display: none λ¨
$('.btn1').click(function () {
alert('ν΄λ¦νλ€μ?');
});
// $('.μ€μ΅').text('<strong>μ€μ΅</strong>μ€μ΄μμ');
$('.μ€μ΅').html('<strong>μ€μ΅</strong>μ€μ΄μμ');
$('.μ€μ΅').css('color', 'red');
$('.μ€μ΅').css('backgroundColor', 'blue');
// camelCase is used in jQuery
$('img').attr('src', '../html/img/a.jpg',);
$('img').attr('data-name', 'νλ‘ν').attr('data-hello', 'world');
$('img').css({ 'width': '400px', 'height': '280px' });
$('.btn2').click(function () {
let λ©λͺ¨μ₯κ° = $('#λ©λͺ¨μ₯').val();
$('#λ©λͺ¨μ₯').val('κ°μ μ
λ ₯νμΈμ.');
alert(λ©λͺ¨μ₯κ°);
});
$('#p3').css('color', 'red').css('backgroundColor', 'blue');
$('.items').parent().css('backgroundColor', 'blue');
$('.items').eq(1).css('color', 'red');
// $('.ul2 > li:lt(3)').css('color', 'green');
// $('.ul2').children('li:lt(3)').css('color', 'green');
$('.ul2:nth-child(n+3)').css('color', 'green')
// $('.ul2 > li:gt(5)').css('color', 'blue').css('backgroundColor', 'red');
$('.ul2').children('li:gt(5)').css('color', 'blue').css('backgroundColor', 'red')
// appendλ λ§μ§λ§μ μΆκ°λ¨
// νλ°μ΄ν¬, μνμ΄νλ JSONμμλ§ μ£Όμνλ©΄ λκ³ μ무거λ μ¬μ©ν΄λ λκΈ΄ν¨.(λ³΄ν΅ νμ¬ μ»¨λ²€μ
μ λ§κ² μ¬μ©)
// ul 볡μκ°λ₯Ό μ‘μ!
$('ul').append("<li>hello world end</li>");
// appendλ μμ μΆκ°λ¨ (ulμ μμμ μΆκ°)
$('ul').prepend("<li>hello world start</li>");
// afterλ ul λ€μμ μΆκ°
$('ul').after("<h2>λ!</h2>");
$('ul').before("<h2>μμ</h2>");
// this removes the element
// $('#div1').remove()
$('#div1').addClass('important');
$('.one, .two, p').removeClass('blue');
// toggleμ μμΌλ©΄ μκΈ°κ³ μμΌλ©΄ μμ΄μ§κ²
$('.three').toggleClass('blue');
// λͺ¨λ¬μ°½μμ μ¬μ©ν μ¬λ‘κ° μμ
$('.box').fadeOut(3000).fadeIn(3000);
https://electronic-moongchi.tistory.com/75
$('.box').click(function () {
$(this).stop();
});
// div ν΄λ¦νμ λ μ 보μ΄κ² νκΈ°
// domμ΄ μ€λΉλλ©΄ μ€νν΄λΌ!
$(function () {
$('.box').click(function () {
$(this).hide();
});
});
//JQuery - animate
//λ²νΌ ν΄λ¦νμ λ λ³νμ£ΌκΈ°
$('.btn3').click(function () {
$('.box2').animate({
width: '300px',
height: '300px',
opacity: 1,
}, 'slow');
});
$(".box2").hover(function () {
$(this).css("background-color", "yellow");
}, function () {
$(this).css("background-color", "blue");
});
$('.box2').mouseenter(function () {
alert("You entered!");
});
$('.box2').mouseleave(function () {
alert("Bye! You now leaved");
});
</script>
</body>
</html>
hover()
<div id="box"></div>
// hover - change color(when hover, background color to yellow, when it's not hover than blue)
$("#box").hover(function(){
$(this).css("background-color", "yellow");
}, function(){
$(this).css("background-color", "blue");
});
mouse event
$("#p1").mouseenter(function(){
alert("You entered p1!");
});
$("#p1").mouseleave(function(){
alert("Bye! You now leaved p1!");
});
jQuery plugins
- jQuery UI (Progressbar, Selectmenu, etc)
- jQuery Validation
- jQuery Lightbox
- Bootstrap
Ajax (Asynchronous Javascript and XML)
Find more about Ajax
$('#btn_data').click(function () {
$('#data').load('https://testtest/main/data/data.json');
});
$('#btn_data2').click(function () {
$("#data2").load('https://testtest/main/index.html h1');
});
$('#btn_data3').click(function () {
$("#data3").load('https://testtest/main/index.html h1', function (responseText, statusText, xhr) {
console.log(responseText);
console.log(statusText);
console.log(xhr);
console.log(xhr.status);
}
);
});
$('#btn_data4').click(function () {
//$.ajax({route, sync status, things to do when it succed})
//$.ajax({url:'route', async: false, success:function(result){}})
$.ajax({
url: 'https://testtest/main/index.html',
async: true,
success: function (result) {
$("#data4").html(result);
}
});
});
Axios
Axios is a promise-based HTTP Client for node.js and the browser. It is isomorphic (= it can run in the browser and node.js with the same codebase). On the server-side it uses the native node.js http module, while on the client (browser) it uses XMLHttpRequests.
const url = 'https://raw.githubusercontent.com/paullabkorea/coronaVaccinationStatus/main/data/data.json';
axios.get(url).then((response) => { console.log(response) });
https://axios-http.com/docs/intro
Learn about Axios
(I learnt about Ajax and Axios briefly, will write detailed post when I learn node.js later)
Top comments (2)
jQuery is a controversial topic. I am self-taught developer. I struggled hard learning vanilla JS, neglecting jQuery. Strange as it may seem, I know Vanilla JS better than jQuery. Now I got offer from a company and they asked if I knew jQuery. Your post is exactly on time.
I heard that jQuery is used less than before but there are many places still using it. I personally prefer Vanilla JS than jQuery since it was first time for me to use it and it was more confusing to me but I think it's better if you know both anyways :)