Today, I worked some on Jquery. Firstly, my interest was just to find some plugins to create nice pop-ups to show images. But, later I found myself in the docs of JavaScript and Jquery. As a programmer who works with major languages like Java, C#, ASP.NET, I understood how much I’ve ignored this important concept of web programming especially after seeing power of Jquery. To create shared functionality between several elements ( that shares some type of sign ), using Jquery is a very good solution in some problems (for example, highlighting codes in a document , like in this website, use name attribute in <pre> tags and give them some cool css features. This would require very strange and humble solutions when using just C#.) Now, in this entry, I am beginning a new series of articles: Jquery articles. First one: Getting Started with Jquery.
Downloading and Using Jquery
To be able to use Jquery requires no much work and as simple as writing one line of html. Just download it from
here and write
<script type="text/javascript" src="jquery.js"></script>
in <head>…</head> (make sure that “scr” is pointing the correct file !!!!!)
Now, Getting Started
Using JQuery or Javascript means using Document Object Model (DOM) and manipulating these objects. So first of all we should have ready-to-use objects. With this code:
$(document).ready(function(){
// Your code here
});
, jquery waits DOM objects to be loaded and executes your code in “//Your code here” section.
Note: Jquery has many shortcuts. The code above is same as:
var doc = new jQuery(document);
doc.ready(function() {
// Your code here
});
This point is important because shortcuts are used so often.
Using Selectors and Events
We said writing Javascript means using DOM objects. So the point is “how to find and select them”. This is achieved in classic Javascript by using “getElementById(elementIDName)”. Jquery has a good shortcut: $. However when selecting these objects we should write some CSS or XPath selectors. Examples:
1.Selecting all “a” html elements and binding a function to their click events.
$("a").click(function(event){
alert("www.enestaylan.com!");
});
Note: Don’t forget to write this code in “$(document).ready…..” or in a custom function.
2.Select a specific element with its id:
$("#menu").click(function(event){
alert("www.enestaylan.com!");
});
Note: Look at “#” sign before “menu”
3.Select elements with their css class:
$(".menu").click(function(event){
alert("www.enestaylan.com!");
});
4. Selecting all certain types of children elements from a specific html element
$(document).ready(function() {
$("#myList > li").addClass("green");
});
This code is same as:
$(document).ready(function() {
$("#myList li").addClass("green");
});
and
$(document).ready(function() {
$("#myList").find("li").addClass("green");
});
Codes above selects all “li” elements from html element whose id is “myList”
5. Using “first” and “last” keywords to select first and last elements from an element list:
$(document).ready(function() {
$("# myList li:first").addClass("blue");
});
6.Selecting html elements that have some specific sub element:
$(document).ready(function() {
$("li").filter(":has(ul)").css("background-color", "1px red");
});
This code selects all “li” elements that has “ul” sub-element and give them a css attribute. The logical not of this code is:
$(document).ready(function() {
$("li").not(":has(ul)").css("background-color", "1px red");
});
Note: Second code snippet has “not” instead of “filter”
7. Filtering elements according to their attributes:
$(document).ready(function() {
$("a[name]").css("background", "red" );
});
This code selects all “a” element that has name attribute.
$(document).ready(function() {
$("a[href*=/jpg]").click(function() {
// do something
});
});
The code above select all “a” elements whose href attributes containes “jpg” word. (Here *= means contains. For exact matching use just = )