Testing tools and AI - ideas what to try with some tool examples
Jquery library
1.
2. Disclaimer: This presentation is prepared by trainees of
baabtra as a part of mentoring program. This is not official
document of baabtra –Mentoring Partner
Baabtra-Mentoring Partner is the mentoring division of baabte System Technologies Pvt .
Ltd.
5. jQuery
write less, do more
SUHAIL K.P
suhailkp007@gmail.
com
www.facebook.com
/suhilkp007
twitter.com/suhilk
p007
6. What is jQuery?
• library of JavaScript Functions.
• Takes a lot of common tasks that require many lines of JavaScript
code to accomplish, and wraps them into methods that can call
with a single line of code.
• simplifies complicated things from JavaScript, like AJAX calls and
DOM manipulation.
• The jQuery library contains the following features:
HTML/DOM manipulation
CSS manipulation
HTML event methods
Effects and animations
AJAX
Utilities
7. Why jQuery?
• There are lots of other JavaScript frameworks like
MooTools, YUI , Dojo etc but jQuery seems to be
the most popular, and also the most extendable.
• Many of the biggest companies on the Web use
jQuery, such as:
Google
Microsoft
IBM
Netflix
8. How to install jQuery ?
• You can download jQuery library from jQuery.com
•
•
If you don't want to store the jQuery library on your own computer, you can use
the hosted jQuery library from Google ,Microsoft or jQuery website.
Google
<script type="text/javascript"
src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js">
</script>
•
Microsoft
<script type="text/javascript"
src="http://ajax.microsoft.com/ajax/jquery/jquery-1.4.2.min.js">
</script>
•
jQuery
<script type="text/javascript"
src=" http://code.jquery.com/jquery-latest.js">
</script>
9. How to use jQuery library?
include jquery library in your HTML file as follows
<html>
<head>
<title>The jQuery Example</title>
<script type="text/javascript“ src="jquery1.3.2.min.js“ >
</script>
<script type="text/javascript">
// you can add our javascript code here </script>
</head>
<body> ........ </body>
</html>
10. How to call a jQuery library
functions?
you want an event to work on your page, you should call it
inside the $(document).ready() function. Everything inside it
will load as soon as the DOM is loaded and before the page
contents are loaded.
To do this, we register a ready event for the document as follows:
$(document).ready(function()
{
// do stuff when DOM is ready
});
11. jQuery Syntax
• The jQuery syntax for selecting HTML elements and perform
some action on the element(s).
• Basic syntax is: $(selector).action()
– A dollar sign to define jQuery(synonym of 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"
12. Selectors
• jQuery selectors allow you to select and manipulate
HTML element(s).
• You can instantiate the jQuery object simply by writing
jQuery() or even shorter using the jQuery shortcut
name: $(). Therefore, selecting a set of elements is as
simple as this:
$(<query >)
• With the jQuery object returned, you can then start
using and altering the element(s) you have matched.
13. SELECT DOM ELEMENTS
• Selecting DOM elements through
document based on the css selectors.
• The #id selector
$(document).ready(function() {
$(“#d1").text("Test");
});
• This code will be applied on only one
element whose ID attribute is d1.
14. SELECT DOM ELEMENTS(CONT’D)
The .class selector
$(document).ready(function() {
$(“.para").text("Test");
});
This code will be applied on all elements with the
.para class
15. SELECT DOM ELEMENTS(CONT’D)
The element selector
$(document).ready(function() {
$(“div").text("Test");
});
This code will be applied on all <div> tags
16. SOME MORE EXAMPLES
Syntax
Description
$(this)
Current HTML element
$("p")
All <p> elements
$("p.intro")
All <p> elements with class="intro"
$("p#intro")
All <p> elements with id="intro"
$("p.intro:first")
The first <p> element with class="intro"
$(".intro")
All elements with class="intro"
$("#intro")
The first element with id="intro"
$("ul li:first")
The first <li> element of the first <ul>
$("ul li:first-child")
The first <li> element of every <ul>
$("[href$='.jpg']")
All elements with an href attribute that ends with
".jpg"
$("div#intro .head")
All elements with class="head" inside a <div>
element with id="intro"
17. JQUERY
EVENTS
The jQuery event handling methods are core functions in jQuery.
Event handlers are method that are called when "something happens"
in HTML
$("button").click(function() {..some code... } )
EX:
$(document).ready(function(){
$("button").click(function(){
$("p").hide();
});
});
18. JQUERY
EVENTS(CONT’D)
Here are some examples of event methods in jQuery:
Event Method
Description
$(document).ready(function)
Binds a function to the ready event of a
document
(when the document is finished loading)
$(selector).click(function)
Triggers, or binds a function to the click event of
selected elements
$(selector).dblclick(function)
Triggers, or binds a function to the double click
event of selected elements
$(selector).focus(function)
Triggers, or binds a function to the focus event
of selected elements
$(selector).mouseover(function)
Triggers, or binds a function to the mouseover
event of selected elements
19. jQuery - DOM Traversing
• which provides a variety of DOM traversal methods to help
us to select elements in a document.
• DOM Traversal Methods do not modify the jQuery object
and they are used to filter out elements from a document
based on given conditions.
20. For Example :
<html>
<head>
<title>the title</title>
</head><body><div>
<ul>
<li>list item 1</li>
<li>list item 2</li>
<li>list item 3</li>
<li>list item 4</li>
<li>list item 5</li>
<li>list item 6</li>
</ul> </div> </body> </html>
Above every list has its own index, and can be located directly by using
eq(index),
Eg: $("li").eq(1)
21. jQuery - AJAX
•jQuery provides several methods for AJAX functionality.
jQuery load() Method
The load() method loads data from a server and puts the
returned data into the selected element.
22. Syntax:
$(selector).load(URL,data,callback);
•The required URL parameter specifies the URL you wish to load.
•The optional data parameter specifies a set of querystring key/value pairs to send
along with the request.
•The optional callback parameter is the name of a function to be executed after the
load() method is completed.
25. If this presentation helped you, please visit our
page facebook.com/baabtra and like it.
Thanks in advance.
www.baabtra.com | www.massbaab.com |www.baabte.com
26. Contact Us
Emarald Mall (Big Bazar Building)
Mavoor Road, Kozhikode,
Kerala, India.
Ph: + 91 – 495 40 25 550
Start up Village
Eranakulam,
Kerala, India.
Email: info@baabtra.com
NC Complex, Near Bus Stand
Mukkam, Kozhikode,
Kerala, India.
Ph: + 91 – 495 40 25 550