Loading presentation...

Present Remotely

Send the link below via email or IM

Copy

Present to your audience

Start remote presentation

  • Invited audience members will follow you as you navigate and present
  • People invited to a presentation do not need a Prezi account
  • This link expires 10 minutes after you close the presentation
  • A maximum of 30 users can follow your presentation
  • Learn more about this feature in our knowledge base article

Do you really want to delete this prezi?

Neither you, nor the coeditors you shared it with will be able to recover it again.

DeleteCancel

Make your likes visible on Facebook?

Connect your Facebook account to Prezi and let your likes appear on your timeline.
You can change this under Settings & Account at any time.

No, thanks

jQuery

jQuery appetizer
by

D friedman

on 30 December 2011

Comments (0)

Please log in to add your comment.

Report abuse

Transcript of jQuery

Remember the philosophy ??? Helpful Resources The Magic API Advantages Why??? http://www.slideshare.net/1Marc/jquery-essentials 2006 IE VS Firefox Syntax: var myObject = document.getElementById("header");
var myAttribute = myObject.getAttribute("className");
IE FF var myObject = document.getElementById("header");
var myAttribute = myObject.getAttribute("class"); Accessing the “class” Attribute of an Element var myCursorPosition = [0, 0];
myCursorPosition[0] = event.clientX;
myCursorPosition[1] = event.clientY;
IE FF var myCursorPosition = [0, 0];
myCursorPosition[0] = event.pageX;
myCursorPosition[1] = event.pageY; Getting the Cursor Position Selectors
<script type="text/javascript">

if (/Firefox[\/\s](\d+\.\d+)/.test(navigator.userAgent)){ //test for Firefox/x.x or Firefox x.x (ignoring remaining digits);
var ffversion=new Number(RegExp.$1) // capture x.x portion and store as a number
if (ffversion>=5)
document.write("You're using FF 5.x or above")
else if (ffversion>=4)
document.write("You're using FF 4.x or above")
else if (ffversion>=3)
document.write("You're using FF 3.x or above")
else if (ffversion>=2)
document.write("You're using FF 2.x")
else if (ffversion>=1)
document.write("You're using FF 1.x")
}
else if (/MSIE (\d+\.\d+);/.test(navigator.userAgent)){ //test for MSIE x.x;
var ieversion=new Number(RegExp.$1) // capture x.x portion and store as a number
if (ieversion>=9)
document.write("You're using IE9 or above")
else if (ieversion>=8)
document.write("You're using IE8 or above")
else if (ieversion>=7)
document.write("You're using IE7.x")
else if (ieversion>=6)
document.write("You're using IE6.x")
else if (ieversion>=5)
document.write("You're using IE5.x")
}

else if (/Opera[\/\s](\d+\.\d+)/.test(navigator.userAgent)){ //test for Opera/x.x or Opera x.x (ignoring remaining decimal places);
var oprversion=new Number(RegExp.$1) // capture x.x portion and store as a number
if (oprversion>=10)
document.write("You're using Opera 10.x or above")
else if (oprversion>=9)
document.write("You're using Opera 9.x")
else if (oprversion>=8)
document.write("You're using Opera 8.x")
else if (oprversion>=7)
document.write("You're using Opera 7.x")
else
document.write("n/a")
}

else
document.write("n/a")

</script> Example:
Hide DIVS with pure javascript divs = document.getElementByTagName('div');
for(i=0; i<divs.length; i++){
divs[i].style.display = 'none';
} $("div").hide(); jQuery Philosophy: 1. Find something
2. Do something with it $ $ $ $ $ $ $ $ $ $('div') = jquery('div')
('jquery' is the jquery function) $('#myid') - select element with id="myid'
$('.myclass') - select elements with 'myclass' class
$('*') - select all elements Basic $("form input") - all inputs within a form
$(‘table > tr’) - all rows in a table
Hierarchy $('li:first') - first <li> in the DOM
$('li:not(li:first)') - all <li> but the first
$('tr:even') - all 'even' table rows
$(':header') - Selects all elements that are headers, like h1, h2, h3 Basic Filters $(':input') - Selects all input, textarea, select and button elements
$(':checkbox') - all checkboxes (equivelant to $('input:checkbox'))
$('input:enabled') - all inputs that are enabled
$(':checked') - Matches all elements that are checked
Form Chain methods (very much like in java....)
$("div").addClass("redBoldText").fadeOut(); Find Elemet. Do something with it Many uses for the same method: $('.myElm').html(); - get
$('.myElm').html("<p>Food</p>"); - set Do something when DOM has finished loading $(function(){
...This code will execute when page is ready.
}); This is usually written like this: $(document).ready(function(){
}); "alternative to more complicated javascript libraries" John Resig "Borrowing from CSS 1–3, and then adding its own,
jQuery offers a powerful set of tools for matching a set of elements in a document." Moving Elements Attributes Events Effects Traversing
AJAX append(), appendTo(),
before(), after() css(), attr(), html(),
val(), addClass() bind(), trigger(), unbind(),
live(), click() show(), fadeOut(),
toggle(), animate() find(), is(), prevAll(),
next(), hasClass() get(), getJSON(), post(),
ajax(), load() Methods Example: Get element with ID 'msg'
and add a message to it: <html>
<body>
<h5>messages:</h5>
<div id='msg'></div>
</body>
</html>
<html>
<body>
<h5>messages:</h5>
<div id='msg'>
<p>We're half way there...</p>
</div>
</body>
</html> $("#msg") $("#msg").append("<p>We're half way there...</p>") <form method="get">
First name: <input type="text" class="mandatory" name="fname" /><br />
Last name: <input type="text" class="mandatory" name="lname" /><br />
<input type="submit" value="Submit" />
</form> $("#msg").append("<p>We're half way there...</p>") $('.myElm').attr('isVisible') $('.myElm').attr('isVisible', 'false'); $('.myElm').css('top') $('.myElm').val() $('.myElm').css('top','80px') $('.myElm').val('30/10/73') attributes Set various css properties:
$(...).css({
“background”: “yellow”,
“height”: “400px”
}); Set all link’s href attribute to google.com
$(“a”).attr(“href”, “http://google.com”);
Set checkboxes attribute “checked” to checked.
$(“:checkbox”).attr(“checked”,”checked”); Events When a button is clicked, do something: $(“button”).click(function(){
something();
}); Setup a custom event and trigger it. $(“button“).bind(“expand”, function(){
something();
});
$(“button:first“).trigger(“expand”); Effects Types of Effects
1. Fade In and Out
2. Hide and Show
3. Slide Up and Down
More Ajax
Plugins
jQuery UI great community books support tutorials open (free) license speed light weight code google trends: Usage statistics: JavaScript Distribution in Top 10,000 Sites http://trends.builtwith.com/javascript http://trends.builtwith.com/javascript http://www.google.com/trends?q=dojo+javascript,+jquery+javascript,+yui+javascript,+prototype+javascript,+mootools+javascript&ctab=0&geo=all&date=all&sort=1 1.7.1 version size: 91.6Kb food???
Full transcript