A mixin lets you make groups of CSS declarations that you want to reuse throughout your site. You can even pass in values to make your mixin more flexible.
// This CSS won't print because %equal-heights is never extended.
%equal-heights{display:flex;flex-wrap:wrap;}// This CSS will print because %message-shared is extended.
%message-shared{border:1pxsolid#ccc;padding:10px;color:#333;}.message{@extend%message-shared;}.success{@extend%message-shared;border-color:green;}.error{@extend%message-shared;border-color:red;}.warning{@extend%message-shared;border-color:yellow;}
'<'li class ='vacation sale' data-price = '399.99' '>'
jquery('li') or $('li')
$( document ).ready(function() {
$("span").text("$100");
});
Question: Modify all list nodes
Question: Finding elements by ID or class
Question: Finding elements by ID
Question: Finding elements by ID or class
Question: Finding elements by ID or class
select by element :$("ul")
select by id :$("#vacations")
select by id : $(".america")
Searching the DOM
You can search an element by
Specifying class followed by element $(tours li)
specifying class '>' element for finding direct children $(tours '>' li)
Multiple elements ,just comma seperated classes $(".asia",".sale")
selecting odd| even| first : last $(tours > li :even)
Traversing the DOM
You can search an element by
Specifying class followed by element $(tours).find('li')
specifying class '>' element for finding direct children $(tours'>' li)
Multiple elements ,just comma seperated classes $(".asia",".sale")
selecting odd| even| first : last $(tours).find('li).even()/odd()/first()/last()
$(tours).find('li).first().next().prev()
$(tours).parent().find('p')
$(tours).children()
Acting the DOM
You can search an element by ----
--
Refactoring the DOM
Removing the Clicked Button
$(document).ready(function() {
$('button').on('click', function() {
var message = $('Call 1-555-jquery-air to book this tour');
$('.usa').append(message);
$(this).remove();
});
});
Relative Traversing I
$(document).ready(function() {
$('button').on('click', function() {
var message = $('Call 1-555-jquery-air to book this tour');
$(this).after(message);
$(this).remove();
});
});
Relative Traversing II
$(document).ready(function() {
$('button').on('click', function() {
var message = $('Call 1-555-jquery-air to book this tour');
$(this).parent().after(message);
$(this).remove();
});
});
Relative Traversing III
Rather than clicking on the button to show the message, we've decided to allow travelers to click on the entire
element. Change the call to on() to target .tour elements instead of button elements. After that change, $(this) will reference the clicked . Let's remove the closest() method so that .append(message) still works. Then, use find to locate the button element and remove() it.
$(document).ready(function() {
$('.tour').on('click', function() {
varmessage = $('Call 1-555-jquery-air to book this tour');
$(this).append(message).find('button').remove();
});
});
Traversing and Filtering
'<'li class ='vacation sale' data-price = '399.99' '>'
Data price is a special tag that we with HTML 5 we can add to provide additional information
-
-
3.20 Better On Handlers
250 PTS
There is a small problem with the way our on() handler is being used. Currently, it is targeting all of the elements on the screen. Refactor the on() handler to only target elements within a .tour by using the selector argument of the on() method.
A jQuery action() to be performed on the element(s)
This is to prevent execution before document is loaded
-----
$(document).ready(function(){ // jQuery methods go here... });
SELECTORS
Tag Name:
It represents a tag name available in the DOM. For example: $('p') selects all paragraphs'p'in the document. Tag ID: It represents a tag available with a specific ID in the DOM.For example:$('#real-id') selects a specific element in the document that has an ID of real-id. Tag Class: It represents a tag available with a specific class in the DOM.For example:$('real-class') selects all elements in the document that have a class of real-class.
var x = $("p").position(); alert("Top position: " + x.top + " Left position: " + x.left);
9. Appends element to existing element
$("Hello javatpoint.com").appendTo("p");
10. To change value of an attribute of an element at runtime
$("img").attr("width", "500"); 11. Remove element to existing element $( "p" ).remove(); --------------------------------------------------------------------------------------------------------------------
