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 & JavaScript

No description
by

Helen Lawes

on 11 December 2013

Comments (0)

Please log in to add your comment.

Report abuse

Transcript of jQuery & JavaScript

JavaScript & jQuery
Performance
Best practices
Make reusable
Selecting DOM
Advanced Selecting
jQuery vs JavaScript Speed
var c = $("#comments .comment");
var c = $(".comment");
var c = document.querySelectorAll("comments .comment");
var n = document.getElementById("comments");
var c = n.getElementsByClassName("comment");
var c = document.getElementsByClassName("comment")
Declaring functions
Combine selectors using same function
Loop through jQuery selection
Public methods
document.getElementById('menu')
All nodes matching element:
Node by name attribute
Node matching query:
Single node by id:
$('#menu')
$('li')
document.getElementByTagName('li')
$('[name=x]')
document.getElementsByName('x')
$('article#first p.summary')
document.querySelectorAll('article#first p.summary')
Fetch
JavaScript
jQuery
name="blue"
Selector with attribute
jQuery
Matches
string followed by hyphen
$('[name|="value"]')
name="value-blah"
substring anywhere
$('[name*="value"]')
name="bvalueu"
word delimeted by spaces
$('[name~="value"]')
name="the value is"
ends with
$('[name$="value"]')
name="bluevalue"
starts with
$('[name^="value"]')
name="valueblue"
equals
$('[name="value"]')
name="value"
not equals
$('[name!="value"]')
4,649
3,437
1,362

107

75
Standard JavaScript:
function multiply(x,y) {
 return (x * y);
}
console.log(multiply(2,2));
//output: 4
Setting to a variable
var multiply = function(x,y) {
return (x * y);
}
console.log(multiply(2,2));
//output: 4

Using custom namespace
JQUERY4U = {
multiply: function(x,y) {
      return (x * y);
}
}
//function call
JQUERY4U.multiply(2,2);

Support metadata
Summary
JavaScript runs faster than jQuery
jQuery is shorter and more powerful
Select child elements within parent context
Avoid repetition of selectors
Make code re-usable
Use parameters/metadata in plugin
Give plugins public methods for additional requests
Have fun and build stuff!
Speeding jQuery up
with filtering
var c = $('#comments').filter('.comment');
No filter
Time (ms)*
With filter
Time (ms)*
var c = $('.comment:eq(1)');
1,021
var c = $('.comment').filter(':eq(1)');
var c = $('.comment').eq(1);
190
69
var c = $('.comment:gt(1)');
1,037
var c = $('.comment').filter(':gt(1)');
211
var c = $('.comment:even');
986
var c = $('.comment').filter(':even');
203
var c= $('#comments .comment');
87
104
The filter function is best used with jQuery extensions (selectors not based on the CSS specification)


http://api.jquery.com/category/selectors/jquery-selector-extensions/
Language
Code
Time
(ms)*
jQuery
JavaScript
*Times taken from http://www.sitepoint.com/jquery-vs-raw-javascript-1-dom-forms/

Times taken from a small page I built which ran the code 10,000 times, and 16 .comment nodes were used




*
Increase specificity from left to right
$("p#intro em");
$("em", $("p#intro")); // or
$("p#intro").find("em");
Inefficient
Optimised
Avoid selector repetition
$("p").css("color", "blue");
$("p").css("font-size", "1.2em");
$("p").text("Text changed!");
var $p = $("p");
$p.css({"color": "blue","font-size":"1.2em"});
$p.text("Text changed!");
Bad
Good
http://www.sitepoint.com/efficient-jquery-selectors/
Further information:
http://www.sitepoint.com/efficient-jquery-selectors/
http://jsperf.com/jquery-class-vs-tag-qualfied-class-selector/2
$("#element1").draggable();
$("#element2").draggable();
$("#eleemnt3").draggable();
Bad

Good*
$('#element1,#element2,#element3').draggable();
Best*
$('.element').draggable();
*Note: The good and best practices assume that the function can be use on multiple elements. If it doesn't work then use each:

$('.element').each(function(){
$(this).draggable();
});
Allow options/parameters
$.fn.myPlugin = function(opts){
var options = {
'speed':500,
'distance':10
};
options = $.extend({},options,opts);
};
$.fn.myFunc = function(){
...
this.each(function(){
...
}
};
$.fn.myFunc = function(){
this.publicFunc = function() { ... }
return this;
}
var setup = $('.selector').myFunc();
setup.publicFunc();
Alternatives:

$.fn.myFunc = function() {
this.publicFunc = function() {...}
this.data('myFunc',this);
});
$('.selector').myFunc();
$('.selector').data('myFunc').publicFunc();
$.fn.myFunc = function() {
...
var arg = arguments[0];
if(arg == "slide" )
this.slide();
else
this.init();
});

$('.selector').myFunc();
$('.selector').myFunc('slide');
<div class="slider" data="{continuous:true}"></div>
<div class="slider" data="{direction:'ltr'}"></div>

$.fn.slider = function() {
this.options = $.extend({},this.options,this.data());
};
$('.slider').slider();
Make chainable
$.fn.myPlugin = function() {
...
return this;
}
$('.selector').myPlugin().css('color','red');
jQuery plugins
Selection plugin

$.fn.myPlugin = function() { ... }
// function call
$('.myEl').myPlugin();

Utility plugin

$.myPlugin = function(params) { ... }
// function call
$.myPlugin(params);
Full transcript