JAVASCRIPT
JQUERY
The syntax is:
<script src="jquery.min.js"></script>
<script>
// Your code here
</script>
o
document.attribute
o
document.function-name(parameters)

document.title
o window.alert(document.title);
o document.title = "Godzilla's Lair";
document.URL
A string that contains the full pathname of the
currently open HTML document
document.lastModified
A string that contains the date for which the
currently open HTML document was last modified
document.getElementById(“main”)
getElementsByTagName(‘p’)




var paragraphs =
document.getElementsByTagName("p");
paragraphs[0].innerHTML = "Godzilla was taller";
paragraphs[1].innerHTML = "Bruce Lee “;






getElementsByClassName(‘red’)
parentNode
childNodes
firstChild
prevSibling
nextSibling
for(var i=0;i<document.body.childNodes.length;i++)
var childNode=document.body.childNodes[i];

getAttribute()

setAttribute()

innerHTML

style
Basic syntax is: $(selector).action()
SELECTORS


















$(‘#main’) id main
$(‘p’) p tags
$(‘.red’) class red
$("*")Selects all elements
$(this)Selects the current HTML
$("p.intro")Selects all <p> elements with
class="intro“
$("p:first")Selects the first <p> element
$("ul li:first-child")Selects the first <li> element of
every <ul>
$("[href]")Selects all elements with an href attribute
$("a[target='_blank']")Selects all <a> elements with
a target attribute value equal to "_blank“
$("a[target!='_blank']")Selects all <a> elements with
a target attribute value NOT equal to "_blank“
$("tr:even")Selects all even <tr> elements
$("tr:odd")Selects all odd <tr> elements
$( "form :checked" );
used with checkboxes, radio buttons and selects.
$( "form :input" );
selects all <input>, <textarea>, <select>, and
<button>
$( "form :disabled" );
$( "form :enabled" );
$("input:text");
o :password
o :reset
o :radio
o :text
o :submit
o :checkbox
o :button
o :image
o :file
Examples
DOM manipulation are:
var bigImage = document.getElementById("leadimage");


alert(bigImage.getAttribute("src"));

bigImage.setAttribute("src", "lespaul.jpg");
document.body.innerHTML=”<h1>replacing</h1>”;

document.body.innerHTML+=”<p>adding content</p>”;

document.getElementById(“myintro").style.color =
"#fff";

document.getElementById(“myintro").style.background
Color = "#f58220";




document.getElementById(“intro").className =
“advanced";
document.getElementById("myElemnt").className
= "myStyle red";//adding a class or multiple
document.getElementById("myElemnt").classList
.add( "myStyle",”red”);
Count how many checkboxes checked
ACTIONS

var numchecked = 0;

var
dom=document.getElementById("vehiclegroup");

for (index=0,index<dom.vehicles.length;index++)

if (dom.vehicles[index].checked)
numchecked++;
alert(numchecked);






Adding and Removing Elements
o createElement("div")
o createTextNode("This is our text.")
o appendChild(newParagraph)
o insertBefore()
toInsertInto. insertBefore(toInsert,toInsertBefore)
o
replaceChild()
ourDiv.replaceChild( newImg, swapMe );
o
removeChild()
parentDiv.removeChild( removeMe );
.html() – Get or set the HTML contents.
.text() – Get or set the text contents; HTML will be
stripped.
.attr(‘href’, ‘google.com’) – Get or set the value of
the provided attribute.
.width() – Get or set the width in pixels of the first
element in the selection as an integer.
.height() – Get or set the height in pixels of the first
element in the selection as an integer.
.position() – Get an object with position information
for the first element in the selection, relative to its
first positioned ancestor. This is a getter only.
.val() – Get or set the value of form elements.
$( "h1" ).html( "hello world" );//setter
$( "h1" ).html(); //gettter
$('a').attr('href', 'http://www.yahoo.com’)//setter
$( "a" ).attr( "href" ); // getter









append() - Inserts content at the end of the selected
elements (inside)
prepend() - Inserts content at the beginning of the
selected elements (inside)
after() - Inserts content after the selected elements
(outside)
before() - Inserts content before the selected
elements (outside)
.insertAfter()
.insertBefore()
.appendTo()
.prependTo()
The .insertAfter() method places the selected
element(s) after the element provided as an
argument. The .after() method places the element
provided as an argument after the selected
element.
remove() - Removes the selected element (and its
child elements)
empty() - Removes the child elements from the
selected element
addClass() - Adds one or more classes to the
selected elements
removeClass() - Removes one or more classes from
the selected elements
Events



toggleClass() - Toggles between adding/removing
classes from the selected elements
css() - Sets or returns the style attribute
$( "h1" ).css({
fontSize: "100px",
color: "red" });
Looping
var links = $(‘a’);
links.each(function(){
var link=$(this);
link.html(link.html() + ‘!’);
});
EVENTS

There are three common methods for applying event
handlers to items within our pages:


As an HTML attribute
<body onclick="myFunction();"></body>
function myFunction(){alert(“An element clicked");}

As a method attached to the element



window.onclick = myFunction;

Using addEventListener()

window.addEventListener("click", function(e) {
alert(“An element clicked");
});
preventDefault
function validateForm(e){
var
name=document.getElementById("name").value;
if (name==null || name==""){
alert("Name can't be blank");
e.preventDefault();
}
}










$(document).ready(function() {
// Do everything
});
$(function(){
// jQuery methods go here...
//shortcut for document ready event
});
$('#button').on('click', onButtonClick);
$('#button').on('click', function () {
alert('clicked!');
});
$("p").click(function(){
// action goes here!!
});
click()
dblclick()
mouseenter()
mouseleave()
mousedown()
mouseup()
Hover()
Focus()
Blur()
$("input").blur(function(){
$(this).css("background-color","#ffffff");
});
Regular Expressions
i-> Perform case-insensitive matching.
m-> Specifies that if the string has newline or carriage
return characters, the ^ and $ operators will now match
against a newline boundary, instead of a string
boundary
g-> Performs a global match that is, find all matches
rather than stopping after the first match.
Character .
& Description
.
a single character
\s
a whitespace character (space,
tab, newline)
\S
non-whitespace character
\d
a digit (0-9)
\D
a non-digit
\w
a word character (a-z, A-Z, 0-9, _)
\W
a non-word character
[\b]
a literal backspace (special case).
[aeiou]
matches a single character in the
given set
[^aeiou]
matches a single character outside
the given set
Expression Description
[abcde]
[^...]
[0-9]
[a-z]
[A-Z]
[A-z]
Any one character between the brackets.
Any one character not between the
brackets.
It matches any decimal digit from 0
through 9.
It matches any character from
lowercase a through lowercase z.
It matches any character from
uppercase A through uppercase Z.
It matches any character from
uppercase A through lowercase z.
if(idText.value.search(/^\d{8}$/) == -1)
idText.style.borderColor = "red";
search(/regular expression/);
(foo|bar|baz) matches any of the alternatives
specified
Expression Description
P+
It matches any string containing one
or more p's.
P*
It matches any string containing
zero or more p's.
P?
It matches any string containing at
most one p.
P{N}
It matches any string containing a
sequence of N p's
P{2,3}
It matches any string containing a
sequence of two or three p's
P{2, }
It matches any string containing a
sequence of at least two p's
P$
It matches any string with p at the
end of it
^p
It matches any string with p at the
beginning of it.