Here we will continue from previous part of jQuery for Beginners Tutorial.
Selectors
The selectors in jQuery seems like this: $(...). By using them we can call elements by his name, id, class, tag (a, td, div) with initializing jQuery object.
If you have and DIV element and want by moving mouse over it, to execute some code, you can do this:
jQuery for Beginners - Step by Step Tutorial (Part 2)
|
$("div").mouseover(function() {
alert("jQuery");
});
<div id="id_to_select" name="name_to_select">text</div>
Please note that if you have more DIV elements in web page, this function will work for all of them.
Here we can initialize element by his ID:
Here we can initialize element by his ID:
$("#id").mouseover(function() {
alert("jQuery");
});
Here we can initialize element by his name:
$("[name='element_name']").mouseover(function() {
alert("jQuery");
});
And we can initialize element by his class name:
$(".class_name").mouseover(function() {
alert("jQuery");
});
By using jQuery filters, you can help selectors to initialize specific element.
Main jQuery filters
:first - Call the first element from the list and execute some function.
Main jQuery filters
:first - Call the first element from the list and execute some function.
<ul>
<li>element 1</li>
<li>element 2</li>
<li>element 3</li>
</ul>
$(document).ready(function(){
$("li:first").css("font-style", "italic");
});
The result from the above example is that the 'first element' will be italic.
:last - Call the last element from the list and execute some function.
:last - Call the last element from the list and execute some function.
<ul>
<li>element 1</li>
<li>element 2</li>
<li>element 3</li>
</ul>
$(document).ready(function(){
$("li:last").css("font-weight", "bold");
});
The result from the above example is that the 'last element' will be bold.
:header - Select all header elements (h1, h2, h3...)
:header - Select all header elements (h1, h2, h3...)
$(":header").css("text-decoration", "underline");
The result from the above example is that 'all header elements' will be underlined.
Filters for text
:contains(text) - searches for text in selected elements.
Filters for text
:contains(text) - searches for text in selected elements.
<div>John text</div>
<div>Smith text</div>
<div>text</div>
$("div:contains('John')").css("text-decoration", "underline");
The result from the above example is that all div elements containing string 'John' will be underlined.
:empty - select empty elements
:empty - select empty elements
<table>
<tr>
<td>text</td>
<td></td>
<td></td>
<td>text</td>
</tr>
</table>
$("td:empty").text("...").css('background', 'red');
The result from the above example is that all empty td elements will be filled with '...' and also will get background color - red.
:has(selector) - select element which contain exact defined other element.
:has(selector) - select element which contain exact defined other element.
<style>
.sel { border: 1px solid #ff0000; }
</style>
<div><span>hello</span></div>
<div>hello</div>
$("div:has(span)").addClass("sel");
The result from the above example is that to all div elements, which contain span element will be added class 'sel', which will add a border to the selected divs.
Now you can follow next part of jQuery for Beginners Tutorial.
Now you can follow next part of jQuery for Beginners Tutorial.
Next Tutorials
Post Comment
Need a specific tutorial? Do not hesitate and submit a request!
