JQuery-CSS-JavaScript

Hi everybody...

We have been working on JQuery-Core and JQuery-DOM yet. Here I am going to explain JQuery-CSS and JQuery-JavaScript.

3. JQuery-CSS

3.1 css(String)
css(String name) returns String

Access a style property on the first matched element. This method makes it easy to retrieve a
style property value from the first matched element.

Example:
Retrieves the color style of the first paragraph
$("p").css("color");
HTML:
<p style="color:red;">Test Paragraph.</p>
Result:
"red"

Example:
Retrieves the font-weight style of the first paragraph.
$("p").css("font-weight");
HTML:
<p style="font-weight: bold;">Test Paragraph.</p>
Result:
"bold"

3.2 css(Map)
css(Map properties) returns jQuery

Set a key/value object as style properties to all matched elements.
This serves as the best way to set a large number of style properties on all matched
elements.

Example:
Sets color and background styles to all p elements.
$("p").css({ color: "red", background: "blue" });
HTML:
<p>Test Paragraph.</p>
Result:
<p style="color:red; background:blue;">Test Paragraph.</p>

3.3 css(String,String|Number)
css(String key, String|Number value) returns jQuery

Set a single style property to a value, on all matched elements. If a number is provided, it is
automatically converted into a pixel value.

Example:
Changes the color of all paragraphs to red
$("p").css("color","red");
HTML:
<p>Test Paragraph.</p>
Result:
<p style="color:red;">Test Paragraph.</p>

Example:
Changes the left of all paragraphs to "30px"
$("p").css("left",30);
HTML:
<p>Test Paragraph.</p>
Result:
<p style="left:30px;">Test Paragraph.</p>

3.4 width()
width() returns String

Get the current computed, pixel, width of the first matched element.

Example:
$("p").width();
HTML:
<p>This is just a test.</p>
Result:
300

3.5 width(String|Number)
width(String|Number val) returns jQuery

Set the CSS width of every matched element. If no explicit unit was specified (like 'em' or '%')
then "px" is added to the width.

Example:
$("p").width(20);
HTML:
<p>This is just a test.</p>
Result:
<p style="width:20px;">This is just a test.</p>

Example:
$("p").width("20em");
HTML:
<p>This is just a test.</p>
Result:
<p style="width:20em;">This is just a test.</p>

3.6 height()
height() returns String

Get the current computed, pixel, height of the first matched element.

Example:
$("p").height();
HTML:
<p>This is just a test.</p>
Result:
300

3.7 height(String|Number)
height(String|Number val) returns jQuery

Set the CSS width of every matched element. If no explicit unit was specified (like 'em' or '%')
then "px" is added to the width.

Example:
$("p").height(20);
HTML:
<p>This is just a test.</p>
Result:
<p style="height:20px;">This is just a test.</p>

Example:
$("p").height("20em");
HTML:
<p>This is just a test.</p>
Result:
<p style="height:20em;">This is just a test.</p>

4. JavaScript
4.1 $.extend(Object,Object,Object)
$.extend(Object target, Object prop1, Object propN)
returns Object

Extend one object with one or more others, returning the original, modified, object. This is a
great utility for simple inheritance.

Example:
Merge settings and options, modifying settings
var settings = { validate: false, limit: 5, name: "foo" };
var options = { validate: true, name: "bar" };
jQuery.extend(settings, options);
Result:
settings == { validate: true, limit: 5, name: "bar" }
 
Example:
Merge defaults and options, without modifying the defaults
var defaults = { validate: false, limit: 5, name: "foo" };
var options = { validate: true, name: "bar" };
var settings = jQuery.extend({}, defaults, options);
Result:
settings == { validate: true, limit: 5, name: "bar" }

4.2 $.each(Object,Function)
$.each(Object obj, Function fn) returns Object

A generic iterator function, which can be used to seemlessly iterate over both objects and
arrays. This function is not the same as $().each() - which is used to iterate, exclusively, over
a jQuery object. This function can be used to iterate over anything.
The callback has two arguments:the key (objects) or index (arrays) as first the first, and the
value as the second.

Example:
This is an example of iterating over the items in an array, accessing both the current item and
its index.
$.each( [0,1,2], function(i, n){
 alert( "Item #" + i + ": " + n );
});

Example:
This is an example of iterating over the properties in an Object, accessing both the current
item and its key.
$.each( { name: "John", lang: "JS" }, function(i, n){
 alert( "Name: " + i + ", Value: " + n );
});

4.3 $.trim(String)
$.trim(String str) returns String

Remove the whitespace from the beginning and end of a string.

Example:
$.trim("  hello, how are you?  ");
Result:
"hello, how are you?"

4.4 $.merge(Array,Array)
$.merge(Array first, Array second) returns Array

Merge two arrays together, removing all duplicates.
The result is the altered first argument with the unique elements from the second array
added.

Example:
Merges two arrays, removing the duplicate 2
$.merge( [0,1,2], [2,3,4] )
Result:
[0,1,2,3,4]

Example:
Merges two arrays, removing the duplicates 3 and 2
var array = [3,2,1];
$.merge( array, [4,3,2] )
Result:
array == [3,2,1,4]

4.5 $.grep(Array,Function,Boolean)
$.grep(Array array, Function fn, Boolean inv) returns
Array

Filter items out of an array, by using a filter function.
The specified function will be passed two arguments: The current array item and the index of
the item in the array. The function must return 'true' to keep the item in the array,  false to
remove it.

Example:
$.grep( [0,1,2], function(i){
 return i > 0;
});
Result:
[1, 2]

4.6 $.map(Array,Function)
$.map(Array array, Function fn) returns Array

Translate all items in an array to another array of items.
The translation function that is provided to this method is  called for each item in the array
and is passed one argument:  The item to be translated.
The function can then return the translated value, 'null' (to remove the item), or  an array of
values - which will be flattened into the full array.

Example:
Maps the original array to a new one and adds 4 to each value.
$.map( [0,1,2], function(i){
 return i + 4;
});
Result:
[4, 5, 6]

Example:
Maps the original array to a new one and adds 1 to each value if it is bigger then zero,
otherwise it's removed-
$.map( [0,1,2], function(i){
 return i > 0 ? i + 1 : null;
});
Result:
[2, 3]

Example:
Maps the original array to a new one, each element is added with it's original value and the
value plus one.
$.map( [0,1,2], function(i){
 return [ i, i + 1 ];
});
Result:
[0, 1, 1, 2, 2, 3]

4.7 $.browser()
$.browser() returns Boolean

Contains flags for the useragent, read from navigator.userAgent. Available flags are: safari,
opera, msie, mozilla
This property is available before the DOM is ready, therefore you can use it to add ready
events only for certain browsers.
There are situations where object detections is not reliable enough, in that cases it makes
sense to use browser detection. Simply try to avoid both!
A combination of browser and object detection yields quite reliable results.

Example:
Returns true if the current useragent is some version of microsoft's internet explorer
$.browser.msie

Example:
Alerts "this is safari!" only for safari browsers
if($.browser.safari) { $( function() { alert("this is safari!"); } ); }

all rights reserved by Mostafa Rastgar and Programmer Assistant weblog