2. Agenda
● Introduction of jQuery
● What is jQuery
● Getting started with jQuery
● Animation, Callback, Chaining
● DOM Manipulation, GET, SET, ADD, REMOVE
● DOM Traversing
● Managing events, contents and effects
5. Adding jQuery to a page
<script src="../dist/jquery-2.1.4.min.js"></script>
<script type="text/javascript”>
$(document).ready(function() {
Your code here…
});
</script>
6. Adding jQuery to a page
You might have noticed that all jQuery methods in our examples, are
inside a document ready event:
$(document).ready(function(){
// jQuery methods go here...
});
This is to prevent any jQuery code from running before the document is
finished loading (is ready).
Trying to hide an element that is not created yet
Trying to get the size of an image that is not loaded yet
$(function(){
// jQuery methods go here...
});
8. Attribute based selector
● To find elements in which an attribute is set to a
specific value, you use the equality syntax.
● Note that the value you wish to compare must be in
quotes.
// selects **all** elements that contains this attribute
$('[“href"]')
// selects all **h1** elements with an attribute matching the
specified value
$('h1[demo-attribute="demo-value"]')
More selectors
9. Attribute based selector cont...
● jQuery allows you to select items by searching inside of
attribute values for desired sub-strings.
● If you wish to find all elements where the value starts with a
string, use the ^= operator.
● If you wish to find all elements where the value contains a
string, use the *= operator.
$('[class^=”col”]') //selects all elements start with 'col'
$('[class*=”md”]') //selects all elements contain 'md'
10. Positional Selectors
●
Oftentimes you need to located elements based on where they are on the
page, or in relation to other elements in the DOM.
●
For example, an <a> element inside of a <nav> section may need to be
treated differently than <a> elements elsewhere on the page. CSS, and in turn
jQuery, offer the ability to find items based on their location.
● The > between selectors indicates the parent/child relationship.
$('nav > a') //Selects all <a> elements that are direct
//descendants nav element
$('nav a') //Selects all <a> elements that are
//descendants nav element The elements can
//appear anywhere inside of the element
//listed first
11. Adding/Removing classes
●
jQuery also makes it very easy to manipulate the classes an element is currently using.
●
In fact, you'll notice most libraries that use jQuery to manipulate the UI will also come with a
stylesheet that defines the set of classes their code will use to enable the functionality.
●
Adding a class to an element is just as easy as calling addClass.
●
Removing a class from an element is just as easy as calling removeClass.
var currentElement = $('#demo');
currentElement.addClass('class-name') //Add class
//'class-name' to selected element.
currentElement.removeClass('class-name') //removes class
//'class-name' from selected element.
12. Working with attributes
● To retrieve an attribute value, simply use the attr method with one parameter, the
name of the attribute you wish to retrieve.
● To update an attribute value, use the attr method with two parameters, the first being
the name of the attribute and the second the new value you wish to use.
var attribute = $('selector').attr('attribute-name');
//gets value of the attribute 'attribute-name' of 'selector'
$('selector').attr('attribute-name','new-value');
//changes value of the attribute 'attribute-name' to 'new-value'
//of 'selector'
13. Modifying Content
● Beyond just working with classes and attributes,
jQuery allows you to modify the content of an
element as well.
// update the text
$('selector').text('Hello, world!!');
// update the HTML
$('selector').html('Hello, world!!');
21. DOM Manipulation
– Get, Set, Add, Remove, Css, dimensions etc
Get Content:
Three methods:
● text() - Sets or returns the text content of selected elements
● html() - Sets or returns the content of selected elements (including HTML markup)
● val() - Sets or returns the value of form fields
&
● Attr()
Example
$("#btn1").click(function(){
alert("Value: " + $("#test").val());
});
22. Example : attr()
● Complete this example
$("button").click(function(){
alert($("#id").attr("href"));
});
23. Dom Manipulation
● Set Content:
$(document).ready(function(){
$("#btn1").click(function(){
$("#test1").text("Hello world!");
});
$("#btn2").click(function(){
$("#test2").html("<b>Hello world!</b>");
});
$("#btn3").click(function(){
$("#test3").val("Dolly Duck");
});
});
24. Dom Manipulation
ADD:
Majorly 4 methods:
● append() - Inserts content at the end of the selected elements
● prepend() - Inserts content at the beginning of the selected elements
● after() - Inserts content after the selected elements
● before() - Inserts content before the selected elements
25. ● Examples
● $("p").append("Some appended text.");
● $("img").after("Some text after");
function afterText() {
var txt1 = "<b>I </b>"; // Create element with HTML
var txt2 = $("<i></i>").text("love "); // Create with jQuery
var txt3 = document.createElement("b"); // Create with DOM
txt3.innerHTML = "jQuery!";
$("img").after(txt1, txt2, txt3); // Insert new elements after <img>
}
26. Dom Manipulation
● Remove
● $("div").remove(".test, .demo");
//remove app “div” that contains .test & .demo class
● Empty
● $("#div1").empty();
27. Dom Manipulation
● addClass() - Adds one or more classes to the selected elements
● removeClass() - Removes one or more classes from the selected
elements
● toggleClass() - Toggles between adding/removing classes from the
selected elements
● css() - Sets or returns the style attribute
● -Make Example for each
$("button").click(function(){
alert("Background= " + $("p").css("background-color"));
});
28. Jquery Traversing
● The <div> element is the parent of <ul>, and an ancestor of everything inside of it
● The <ul> element is the parent of both <li> elements, and a child of <div>
● The left <li> element is the parent of <span>, child of <ul> and a descendant of <div>
● The <span> element is a child of the left <li> and a descendant of <ul> and <div>
● The two <li> elements are siblings (they share the same parent)
● The right <li> element is the parent of <b>, child of <ul> and a descendant of <div>
● The <b> element is a child of the right <li> and a descendant of <ul> and <div>
29. Thank You !!Thank You !!
References:
1- jquery official documentation
2- Jquery communities
3- w3schools
Hinweis der Redaktion
Many frameworks, such as Bootstrap, make their magic happen by having developers add certain classes or other attributes to their HTML. Often, the values you&apos;ll use for classes or attributes have consistent patterns or prefixes. jQuery allows you to select items by searching inside of attribute values for desired sub-strings.
For example, an a element inside of a nav section may need to be treated differently than a elements elsewhere on the page. CSS, and in turn jQuery, offer the ability to find items based on their location.
$(&apos;nav &gt; a&apos;)
&lt;nav&gt;
&lt;a href=”#”&gt;(First) This will be selected&lt;/a&gt;
&lt;div&gt;
&lt;a href=”#”&gt;(Second) This will **not** be selected&lt;/a&gt;
&lt;/div&gt;
&lt;/nav&gt;
jQuery offers you the ability to update the text inside of an element by using the text method, and the HTML inside of an element by using the html method. Both methods will replace all of the content of an element.
The main difference between the two methods is html will update (and parse) the HTML that&apos;s passed into the method, while text will be text only. If you pass markup into the text method, it will be HTML encoded, meaning all tags will be converted into the appropriate syntax to just display text, rather than markup. In other words, &lt; will become &lt; and just display as &lt; in the browser. By using text when you&apos;re only expecting text, you can mitigate cross-site scripting attacks.
Web pages are typically built using an event based architecture. An event is something that occurs where we, as the developer, don&apos;t have direct control over its timing. Unlike a classic console application, where you provide a list of options to the user, in a time and order that you choose, a web page presents the user with a set of controls, such as buttons and textboxes, that the user can typically click around on whenever they see fit. As a result, being able to manage what happens when an event occurs is critical.
Fortunately, in case you hadn&apos;t already guessed, jQuery provides a robust API for registering and managing event handlers, which is the code that will be executed when an event is raised. Event handlers are, at the end of the day, simply JavaScript functions.
To register an event handler, you will call the jQuery method that matches the event handler you&apos;re looking for. For example, if you wanted the click event, you&apos;d use the click method. Methods for wiring up event handlers allow you to pass either an existing function, or create an anonymous method. Most developers prefer to use an anonymous method, as it makes it easier to keep the namespace clean and not have to name another item.
Inside of the event handler code, you can access the object that raised the event by using this. One important note about this is it is not a jQuery object but rather a DOM object; you can convert it by using the jQuery constructor as we&apos;ve seen before: $(this)