Learning jQuery is Fun : jQuery Quick Tutorial – Part 2-Attributes

We have seen Selectors in first part of the tutorial which is referenced at Learning jQuery is Fun – jQuery Quick Tutorial – Part 1 – Selectors. Now we are moving on with second part and that is Attributes.

Attributes section consist of functions which are used to do actions on attributes of the HTML Tag. for example, if you wanted to get the href of the link tag which has ‘Manish’ as id. You can do it like $(“a[id=’Manish’]”).attr("href") and you get href of the anchor tag. Let’s look at Attribute in bit/byte detail.

Attributes Related Functions

There are around 5 function ( in next version if it increases, don’t write comment about that as i already has low disk-space in wordpress account :)). All function somehow do interact with element’s attributes.

• attr(name) returns the attribute passed to the function for first element selected by selectors. That means var title = $("em").attr("title"); returns title of first matched em tag into the title variable. all parameters are in string value in jQuery so please please don’t forget quotes unless specified. I have said this in first part also. Isn’t it ? Ahhh… Memento effect :).
• attr(key,value) sets the value to the attribute passed by key. So $("button:gt(1)").attr("disabled","disabled"); will disable buttons which are greater than 1.
• Sometimes we don’t have direct value to set in some attributes. And we need to use functions to set the value. Wow!!! you are genius. Let me tell jQuery guys. And yes, they have implemented within the second. They added function attr(key, fn) for the same as you thought of. Thanks for your contribution :P. This is used to set function value to set specific key’s attribute. Following example will clear it out. $("div").attr("id", function (arr) { return "div-id" + arr; }). Here function always get the element position in the jQuery object. So if page has 3 div, above line will result their id into div-id0,div-id1,div-id2.
• One more complex but useful function is attr(properties).  It will set the propertie(s) passed into the function to selector’s elements. e.g. $("img").attr({ src: "/images/hat.gif", title: "jQuery", alt: "jQuery Logo" }); This will set src,title and alt tag for each img tag in the page. Power of one line.
• Last is simple one and that doesn’t need any description removeAttr(name)

CSS Class Releated Functions

There are simple yet helpful routines for working with class attribute of the page elements. Following are 5 functions and their description. They are really easy to understand 🙂

addClass (class)	add provided class to selected elements.	$("p:last").addClass("selected"); last paragraph will be assigned selected style.
hasClass( class)	Whether selected element has the class or not. return bool value.	$("p:first").hasClass("selected").toString() Return ‘true’ or ‘false’ according to first para contain selected class or not.
removeClass(class)	remove class from the selected elements	Don’t wait everytime for example. Use your mind too sometimes
toggleClass(class) & toggleClass(class,switch)	toggle the class into selected elements. That means if present then remove it and if it’s not there then add it to the element	http://docs.jquery.com/Attributes/toggleClass see this for example. I am not explaining it as it’s bit late and i need to get dinner fast man!!!.

 

HTML/Text/Value Releated Functions

Now, last functions are related to working with HTML or Text or value of particular element. The working of all are almost similar.

html() text() val()	Get the html (innerHTML), text, value respectively. The point to remember with text is that it will return combined text of all selected elements. While html and val only returns data for first selected elements.	var htmlStr = $(this).html(); var str = $("p:first").text(); var singleValues = $("#single").val();
html(val) text(val) val(val)	Set passed value to the innerthml, text or val as per called function. Here once again with text the difference is it escapes the ‘<’ and ‘>’.  So if you pass ‘<b>manish</b>’ as text, it wont show bold manish. Instead of it shows the same passed text.	$("div").html("<span class=’red’>Hello <b>Again</b></span>"); $("p").text("<b>Some</b> new text."); $("input").val(‘Icangohomenow’);

 

Huh!!!. Attribute finished. We have learned here ( me too has learned :P. seriously ) how to work with attributes with selectors. It was great experience to work with such a library.

$(“Person[ name= ‘Manish’]).val(‘Go to home’).attr(‘timepass’,’Counter-strike game’).

Bye guys!!!