Working With JQuery Part1

Seçil AYDIN
secil.aydin@argela.com.tr

 Developed by John Resig, 2006
 Open Source Javascript Library
 Two versions: compressed and
uncompressed
 MIT and GPL license
 WRITE LESS, DO MORE

 Light and small size
 Plugins (http://plugins.jquery.com)
 Easy to learn
 CSS3 support
 Large documentation
(http://docs.jQuery.com)
 Availability of examples

 Google
 Amazon.com
 IBM, Dell
 Microsoft
 NBC
 EA Games
 Twitter, Facebook, …
 For other companies:
http://docs.jquery.com/Sites_Using_jQuery

 Connect to official web site:
http://jquery.com/ and download compressed
version
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>My First Example</title>
<script src="src/scripts/jquery-1.6.4.min.js"></script>
<script>
$(document).ready(function){
//jquery codes will be here
}
</script>
</head>
<body>

</body>
</html>

 Use jQuery or $ sign
jQuery('div').html('Selam'); OR $('div').html('Selam');

for(var i=1; i<$(‘div’).length;i++) OR var num = $(‘div’).length;
for(var i=1; i<num; i++)

$(‘div’).toggleClass(‘blue_dot’);

Selector Method Paramter

1 2
$(document).ready(function(){ $().ready(function(){
//code //code
}); });

4
function($){
//code
3
})(jQuery);
$function(){
//code
});

Different styles of document ready (run when page is loaded)

1
function add(){ 3
$.transactions = {
} add: function(){
add(); },

take_square: function(num) {
alert(num * num);
2
}
$.add = function(){
};
$.transactions.add();
};
$.transactions.take_square(4);
jQuery.add(); or $.add();

$(“p”).click(function(){
//code
});

Or

function action(){
//code
}

$(“p”).click(action);

 Basic Selectors
1) Tag Selectors
2) Class Selectors
3) #id Selectors

1)Tag Selectors:
<a>, <p>, <table>, <h1>, <img>, <span>, <div>,
<form>, <select>, etc.
Ex: $(‘p’).css(‘text-decoration’, ‘underline’);
(second.html)

2) Class Selectors:
Select according to class
$('.m1').css('text-decoration','underline');
$('li.m3').css('text-decoration', 'underline');

3) #id Selectors:
$('#mobile').css('text-decoration','underline');
$('#list .m3').css('text-decoration','underline');

 Hierarchy Selectors
1) Descendant Selectors(E F):
grandfather-descendant relationship
$('body ul').css('color', 'blue');
2) Next Adjacent Selectors(E+F):
select next matching next
$('div+p').css('color','yellow');
$('ul li+p').css('color','yellow');
$('#mobile+div').css('color','yellow');

3) Next Siblings Selectors(E~F/ Prev Siblings):
$('div~p').css('color','pink');
$('p~p').css('color','pink');
4) Child Selectors(E>F/ parent>child):
$('body>p').css('color', 'yellow');
$('ul >li').css('color','yellow');
5) E,F,G Selectors:
$('#mobile, #list').css('color', 'pink');
$('.m2, .p1').css('color','blue');

 Attribute Selectors
$('div[id="layer"]').css('color','red');
$('a[href^="http"][href$="com"]').css('color','yell
ow');
Selection Method Description(selects)
$(a[name]); links with name property
$('a[name="contact"]'); links with contact name
$('a[name^="cont"]'); links with beginning with cont name
$('a[name$="act"]'); links with ends with act name
$('a[name!="contact"]'); links with not containing contact
$('a[name*="ont"]'); links with containing ont

Form Object Method
text $('input[type="text"]');
password $('input[type="password"]');
file $('input[type="file"]');
hidden $('input[type="hidden"]');
checkbox $('input[type="checkbox"]');
radio $('input[type="radio"]');
select $('input[type="select"]');
image $('input[type="image"]');
submit $('input[type="submit"]');
reset $('input[type="reset"]');
button $('input[type="button"]');
textarea $('input[type="textarea"]');

 Simple Filters:
Use Simple Selectors or hierarchical selectors
Uses index number an object of DOM
Indexes starting from 0
Filters starting with : Filter Description
:first Selects object with 0 index number
:last with last index number
:not with not cont. property
:even with even index number
:odd with odd index number
:eq(n), :nth(n) with specified index number
:gt(n) with greater index than specified
:lt(n) with lesser index than specified
:header with header like <h1>, <h2>

Filter Description

:nth-child(n) select object with n index number between selected objects

:first-child select first object between selected objects

:last-child select last object between selected objects

:only-child select only the one object between selected objects

Filter Description

:contains() selects objects with the specified contents

:empty selects object with empty objects (opposite of parent)

:has() selects objects with objects

:parent selects objects with objects (opposite of empty)

Filter Description

:hidden selects hidden objects

:visible selects visible objects

Filter Description

:enabled selects active objects

:disabled selects passive objects

:selected takes the value of open able object

:checked takes the value of check box

Filter Description

:eq(index), .eq(-index) selects object with the entered index

.has() selects objects inside the selected object

.filter(selector) entered object/objects are selected. Also makes entered function
.filter(function(index))
.is() checks whether selected object has entered property

.each() builds an loop inside the selected object

.first() returns the first object of the selector object

.last() returns the last object of the selector object

.map() converts the objects inside the selector

.not() returns the objects not suits the selection

.slice() selects objects between two index points

 .EQ()
<ul>
<li>Star TV</li>
<li>ShowTV</li>
<li>ATV</li>
<li>KanalD</li>
<li>TRT1</li>
</ul>

$(‘li’).eq(1); //selects Star TV
$(‘li’).eq(-1); //selects TRT1

Ps: difference between :eq() is taking negative number.

 .HAS()
<div>
<span>Panasonic</span>
</div>
<div>
<label>Sony</label>
</div>

$(‘div’).has(“span”); //selects Panasonic

Ps: difference between :has() is taking parameter with (“”)
$(“ul”).has(“li”) function has better performance than
$(“ul:has(li)”)

Working With JQuery Part1

More Related Content

What's hot

Similar to Working With JQuery Part1

Recently uploaded

Working With JQuery Part1

Editor's Notes