lec 14-15 Jquery_All About J-query_.pptx
MuhammadAbubakar114879
12 views
46 slides
Jun 24, 2024
Slide 1 of 46
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
About This Presentation
j query
Slide Content
JQuery Web Design and Development Lecture 14 -15 (Overview / Basics)
Contents jQuery Introduction Using jQuery Making sure Document is Ready jQuery Selectors jQuery Statement Reading / Setting CSS Properties Adding / Removing / Modifying Elements Basic Animation & Effects AJAX Learn More: http://api.jquery.com/
Jquery jQuery is a lightweight, "write less, do more", JavaScript library. The purpose of jQuery is to make it much easier to use JavaScript on your website. jQuery takes a lot of common tasks that require many lines of JavaScript code to accomplish, and wraps them into methods that you can call with a single line of code. jQuery also simplifies a lot AJAX( Asynchronous java scripts and X ML) and DOM manipulation
What is jQuery?Features Jquery Feature HTML/DOM and CSS manipulation Cross-browser Compatibility (jQuery will run exactly the same in all major browsers) HTML Events and methods Ajax requests http requests made by browsers Helpful Utilities like .In Array () and .Extend() Plugins simply new method that we use to extend j query prototype objects
Why we use jquery For short selectors Variety of Animation Functions Easy Dom Manipulation Easy CSS Styling Easy DOM traversing Simple Ajax Code
Benefits Of Using Jquery Two main Benefits Browser Independent Increase Coding Speed
Downloading jQuery There are two versions of jQuery available for downloading: Production version - this is for your live website because it has been minified and compressed Development version - this is for testing and development (uncompressed and readable code) Both versions can be downloaded from jQuery.com. The jQuery library is a single JavaScript file , and you reference it with the HTML <script> tag (notice that the <script> tag should be inside the <head> section):
Steps to implement Jquery in HTML 3 steps to implement Jquery in HTML Step 1: Download Jquery.js file Step 2: Include Jquery .jsfile in html file step 3 : Do Jquery code in <Script >tag
Methods < h tml> <head> <script src: jquery.js></script> <script> </script> </head> OR You can write script tag inside body <Body> <h1> Jquery </h1 > <Script> </script> </body> </html>
Editors Notepad Notepad ++ VS Code Sublime Atom
Compressed version unreadable
Uncompressed version Readable form
Compressed version
Using compressed version <html> <head> <title> working with jquery </title> <script src: “jquery-3.7.1.min.js ”></script> </head> <body> <h1> jquery implementation</h1> </body> </html>
jQuery CDN If you don't want to download and host jQuery yourself , you can include it from a CDN (Content Delivery Network). Google is an example of someone who host jQuery:
CDN
Google CDN
Using jQuery (CDN) <html> <head> <title>Using jQuery</title> <script src ="https://ajax.googleapis.com/ajax/libs/ jquery /3.7.1/jquery.min.js"></script > </head> <body> <h1>Using jQuery</h1> </body> </html>
jQuery Syntax Basic syntax is: The jQuery syntax is tailor-made for selecting HTML elements and performing some action on the element(s). $( selector ). action (); A $ sign to define/access jQuery A ( selector ) to "query (or find)" HTML elements A jQuery action () to be performed on the element(s) Example: . $("p").hide() Hides all <p> elements $(".test").show() Display s HTML elements having class=“test”
The element Selector The jQuery element selector selects elements based on the element name. You can select all <p> elements on a page like this: $("p") Example When a user clicks on a button, all <p> elements will be hidden:
jQuery Selectors - Examples
“ * “ Selector (selects all elements ) <!DOCTYPE html > <html> <head > <script src="https://ajax.googleapis.com/ajax/libs/ jquery /3.7.1/jquery.min.js"></script> <script> $(document).ready(function (){ // Allow to execute a function when doc is fully loaded $("button").click(function(){ $("*").hide(); }); }); </script> </head> <body> <h2>This is a heading</h2> <p>This is a paragraph.</p> <p>This is another paragraph.</p> <button>Click me</button> </body> </html>
Example Jquery “ P “Element Selector <!DOCTYPE html> <html> <head> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script> <script> $(document).ready(function(){ $("button").click(function(){ $("p").hide(); }); }); </script> </head> <body> <h2>This is a heading</h2> <p>This is a paragraph.</p> <p>This is another paragraph.</p> <button>Click me to hide paragraphs</button> </body> </html>
(“This”) select current html Element <!DOCTYPE html> <html> <head> <script src="https://ajax.googleapis.com/ajax/libs/ jquery /3.7.1/jquery.min.js"></script> <script> $(document).ready(function(){ $("button").click(function(){ $(this).hide(); }); }); </script> </head> <body> <h2>This is a heading</h2> <p>This is a paragraph.</p> <p>This is another paragraph.</p> <button>Click me</button> </body> </html>
First element ul using: first <! DOCTYPE html><html > <head> <script src="https://ajax.googleapis.com/ajax/libs/ jquery /3.7.1/jquery.min.js"></script> <script> $(document).ready(function(){ $("button").click(function(){ $(" ul li:first ").hide(); }); }); </script> </head> <body> <p>List 1:</p> < ul > <li>Coffee</li> <li>Milk</li> <li>Tea</li> </ ul > <p>List 2:</p> < ul > <li>Coffee</li> <li>Milk</li> <li>Tea</li> </ ul > <button>Click me</button > </body > </html>
Actions
jQuery Actions/Methods .html() Sets or returns the content of selected elements . css () Sets or returns one or more style properties for selected elements .before() Inserts content before selected elements .append() Inserts content at the end of selected elements . attr () Sets or returns attributes/values of selected elements .text() Sets or returns the text content of selected elements . val () Sets or returns the value attribute of the selected elements (for form elements) .remove() Removes all child nodes and content from selected elements
Action .before () Example <!DOCTYPE html> <html> <head> <script src="https://ajax.googleapis.com/ajax/libs/ jquery /3.7.1/jquery.min.js"></script> <script> $(document).ready(function(){ $("button").click(function(){ $("p").before("<p>Hello world!</p>"); }); }); </script> </head> <body> <button>Insert content before each p element</button> <p>This is a paragraph.</p> <p>This is a paragraph.</p> </body> </html>
output
.Remove () <!DOCTYPE html> <html> <head> <script src="https://ajax.googleapis.com/ajax/libs/ jquery /3.7.1/jquery.min.js"></script> <script> $(document).ready(function(){ $("button").click(function(){ $("p").remove(); }); }); </script> </head> <body> <p>This is a paragraph.</p> <p>This is another paragraph.</p> <button>Remove all p elements</button> </body> </html>
Output. Remove()
.html () Sets or returns the content of selected elements <!DOCTYPE html> <html> <head> <script src="https://ajax.googleapis.com/ajax/libs/ jquery /3.7.1/jquery.min.js"></script> <script> $(document).ready(function(){ $("button").click(function(){ $("p").html("Hello world!"); }); }); </script> </head> <body> <button>Change content of all p elements</button> <p>This is a paragraph.</p> <p>This is another paragraph.</p> </body> </html>
Output .html()
Adding and Removing Content Add New Elements: Removing Elements: See: Example 04
What are Events? All the different visitors' actions that a web page can respond to are called events. The jQuery event handling methods are core functions in jQuery An event represents the precise moment when something happens. Examples: moving a mouse over an element selecting a radio button clicking on an element The term "fires/fired" is often used with events. Example: "The keypress event is fired, the moment you press a key".
Events syntax To assign a click event to all paragraphs on a page, you can do this $(" p").click (); The next step is to define what should happen when the event fires. You must pass a function to the even $(" p").click(function(){ // action goes here!! }); See: http://www.w3schools.com/jquery/jquery_events.asp
JQUERY EVENTS The click() method attaches an event handler function to an HTML element. The function is executed when the user clicks on the HTML element The $(document).ready() method allows us to execute a function when the document is fully loaded
Events See: http://www.w3schools.com/jquery/jquery_ref_events.asp
Events :Click and Ready function () <! DOCTYPE html> <html> <head> <script src="https://ajax.googleapis.com/ajax/libs/ jquery /3.7.1/jquery.min.js"></script> <script> $(document).ready(function(){ $("p").click(function(){ $(this).hide(); }); }); </script> </head> <body> <p>If you click on me, I will disappear.</p> <p>Click me away!</p> <p>Click me too!</p> </body> </html>
Event Mouseover Function() <!DOCTYPE html> <html> <head> <script src="https://ajax.googleapis.com/ajax/libs/ jquery /3.7.1/jquery.min.js"></script> <script> $(document).ready(function(){ $("p"). mouseover (function(){ $("p"). css ("background-color", "yellow"); }); $("p"). mouseout (function(){ $("p"). css ("background-color", " lightgray "); }); }); </script> </head> <body> <p>Move the mouse pointer over this paragraph.</p> </body> </html>
Basic Animation & Effects
Hide and show Example <!DOCTYPE html> <html> <head> <script src="https://ajax.googleapis.com/ajax/libs/ jquery /3.7.1/jquery.min.js"></script> <script> $(document).ready(function(){ $(".btn1").click(function(){ $("p").hide(); }); $(".btn2").click(function(){ $("p").show(); }); }); </script> </head> <body> <p>This is a paragraph.</p> <button class="btn1">Hide</button> <button class="btn2">Show</button> </body> </html>
Lab Task Class work Q.no1 Select All button elements and input element's of type =button using Jquery Q.no: 02 Insert contents “Long Live Pakistan” at the end of selected elements Q.no 03 Remove the child elements from the selected elements. Q.no 04 hide and show selected Elements using hide and show method.
Tags
Categories
GeneralDownload
Download Slideshow Get the original presentation fileQuick Actions
Statistics
- Views 12
- Slides 46
- Age 526 days
Related Slideshows
22
Pray For The Peace Of Jerusalem and You Will Prosper
RodolfoMoralesMarcuc
32 views
26
Don_t_Waste_Your_Life_God.....powerpoint
chalobrido8
33 views
31
VILLASUR_FACTORS_TO_CONSIDER_IN_PLATING_SALAD_10-13.pdf
JaiJai148317
31 views
14
Fertility awareness methods for women in the society
Isaiah47
30 views
35
Chapter 5 Arithmetic Functions Computer Organisation and Architecture
RitikSharma297999
27 views
5
syakira bhasa inggris (1) (1).pptx.......
ourcommunity56
29 views