1. jQuery Basics
소속 / 작성자
이 문서는 나눔글꼴로 작성되었습니다. 설치하기

2. 1 What is jQuery? 2 jQuery Syntax 3 jQuery Selector 4 jQuery HTML Manipulation 5 jQuery CSS Manipulation 6 jQuery AJAX 7 jQuery Misc – File read
문서의 제목

3. What is jQuery? 01 1 What is jQuery?
jQuery is a library of JavaScript functions.
Why should we use jQuery?
“write less, do more”
Possible things by using jQuery.
HTML element selections
HTML element manipulation
CSS manipulation
HTML event functions
JavaScript effects and animations
HTML DOM traversal and modification
AJAX
Utilities

4. What is jQuery? 02 1 How can you add jQuery library on your env?
Download and add jQuery library to your pages
Alternatives to downloading

5. jQuery Syntax 03 1 jQuery Syntax
jQuery syntax is made for selecting and action.
Basic systax is like below.
$(selector).action()
$ - defining jQuery
(selector) – find(query) HTML elements
Action() – perform any action on the selected element
Some examples
$(this).hide() – hides current element
$(“p”).hide() – hides all paragraphs
$(“p.test”).hide() – hides all paragraphs with class=“test”
$(“#test”).hide() – hides the element with id=“test”

6. jQuery Selectors 04 1 jQuery Selectors
jQuery selector allow you to select HTML elements.
Selector Syntax
$(“<element name>”) - select all <element name> elements
$(“.<class name>”) – select all element with class = <class name>
$(“#<id name>”) - select first element with id = <id name>
Selector Examples
$(this)
$(“p”) / $(“p.intro”) / $(“p#intro”) / $(“p#intro:first”)
$(“.intro”)
$(“#intro”)
$(“[href$=‘.jpg’]”)
Selector Reference

7. jQuery HTML Manipulation05
1 jQuery HTML Manipulation
You can use jQuery for changing or adding HTML elements and attributes
Changing HTML content
$(selector).html(content)
Example → Link - $(“p”).html(“W3Schools”);
Adding HTML content
$(selector).append/prepend(content) - Add content to the inside of matching HTML element
Example → Link - $(“p”).append(“W3Schools”);
$(selector).after/before(content) - Add content to the after all matching element
Example → Link - $(“p”).after(“W3Schools.”);

8. jQuery CSS Manipulation06
1 jQuery CSS Method
jQuery can change CSS by using css().
Basic usage of jQuery CSS methods
$(selector).css(name) : Return the specified CSS property value → Example Link
$(selector).css(name, value) : Set the specified CSS property and value → Example Link
$(selector).css({properties}) : Set multiple CSS property/value → Example Link
$(selector).height/width(value) : Set the size of specified element → Example Link

9. jQuery AJAX 07 1 jQuery AJAX(=Asynchronous JavaScript and XML)
jQuery has a rich library of methods for AJAX → Very Comfortable!
You can request TXT, HTML, XML, JSON data from server.
Also you can load data directly into selected HTML element.
And its usage is very simple like below!
$(selector).load(url, data, callback) : selector – Define the HTML element to change : url – Specify a web address : data – Param which you want to send to server : callback – A function which called after AJAX completion
$.ajax(options) : Low level version of jQuery AJAX function : This is more functionally, but it is also more difficult to use. : options – Defines url, password, data types, filters, charset…

10. jQuery Misc – File read 07 1 jQuery Misc
How can I read HTML file by using jQuery? : Use jQuery AJAX get() method!
Example → Link
Maybe Apps Framework is made like this.

11. 감사합니다
이 문서는 나눔글꼴로 작성되었습니다. 설치하기