1 / 12

KAPITA SELEKTA INFORMATIKA

KAPITA SELEKTA INFORMATIKA. Lasmedi Afuan , ST.M.Cs. jquery. jQuery is a JavaScript Library. jQuery greatly simplifies JavaScript programming. jQuery is easy to learn. What You Should Already Know. Before you start studying jQuery , you should have a basic knowledge of: HTML CSS

merton
Download Presentation

KAPITA SELEKTA INFORMATIKA

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. KAPITA SELEKTA INFORMATIKA LasmediAfuan, ST.M.Cs

  2. jquery • jQuery is a JavaScript Library. • jQuery greatly simplifies JavaScript programming. • jQuery is easy to learn.

  3. What You Should Already Know • Before you start studying jQuery, you should have a basic knowledge of: • HTML • CSS • JavaScript

  4. What is jQuery? • jQuery is a library of JavaScript Functions. • jQuery is a lightweight "write less, do more" JavaScript library. • The jQuery library contains the following features: • HTML element selections • HTML element manipulation • CSS manipulation • HTML event functions • JavaScript Effects and animations • HTML DOM traversal and modification • AJAX • Utilities

  5. Adding the jQuery Library to Your Pages • The jQuery library is stored a single JavaScript file, containing all the jQuery functions. • It can be added to a web page with the following mark-up: <head> <script type="text/javascript“ src="jquery.js"></script></head>

  6. Call jquery • <head><script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script></head> • <head><script type="text/javascript" src="http://ajax.microsoft.com/ajax/jquery/jquery-1.4.2.min.js"></script></head>

  7. Basic Example <html><head><script type="text/javascript" src="jquery.js"></script><script type="text/javascript">$(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</button></body></html>

  8. jQuery Syntax • The jQuery syntax is tailor made for selecting HTML elements and perform some action on the element(s). • Basic syntax is: $(selector).action() • A dollar sign to define jQuery • A (selector) to "query (or find)" HTML elements • A jQuery action() to be performed on the element(s) • 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"

  9. jQuery Selectors • jQuery selectors allow you to select and manipulate HTML elements as a group or as a single element. • jQuery Element Selectors jQuery uses CSS selectors to select HTML elements. • $("p") selects all <p> elements. • $("p.intro") selects all <p> elements with class="intro". • $("p#demo") selects the first <p> element with id="demo".

  10. Jquery selectors • jQuery Attribute Selectors jQuery uses XPath expressions to select elements with given attributes. • $("[href]") select all elements with an href attribute. • $("[href='#']") select all elements with an href value equal to "#". • $("[href!='#']") select all elements with an href attribute NOT equal to "#". • $("[href$='.jpg']") select all elements with an href attribute that ends with ".jpg".

More Related