001)
$(document).ready(function() { and the final });.
//ready -> It simply waits until the HTML is finished loading and executes JavaScript
$(function() { }); // same with above
//function() ->Anonymous function // so can't call this function from outside
$('img').each(function() {
alert('I found an image');
});
//each -> loops ... all <img> tags
002)
<script>
$(function() {
$('body').hide().fadeIn(3000);
});
</script>
</head>
// fade in effect when page is initializing
003) select
$('selector') //The basic select syntax
$('#banner').html('<h1> here</h1>');
var messagePara = document.getElementById('message'); //DOM
->var messagePara = $('#message'); //ID selector, # == ID.
var linksList = document.getElementsByTagName('a');
->var linksList = $('a');
$('.submenu') //class selector
$('.submenu').hide();
<ul id=“navBar”>.
$('#navBar a') //Descendent selectors, <a> tags in #navBar
$('body > p') //Child selectors, to select <p> tags that are the children of the <body> tag
$('h2 + div') //Adjacent sibling 인접한 형재자매 , a tag that appears directly after another tag
<h2>...
<div ... //selected
$('img[alt]') //Attribute selectors
$(a[href])
$('input[type="text"]') //to find all text boxes in a form
$('a[href^="http://"]') // ^ == bigins with a specific value
$('a[href^="mailto:"]')
$('a[href$=".pdf"]') // $ == ends with a specific value
$('a[href*="missingmanuals.com"]') // * == contains a specific value
004) Filters
$('tr:even') // to find every even row of a table
$('.striped tr:even') // every even table row in a table with class name of striped
$('p:first'); // first element in a group
$('p:last');
$('a:not(.navButton)'); // to select every <a> tag except ones with a class of navButton.
$('a:not([href^="http://"])') // to find every link that doesn’t begin with http://
$('li:has(a)') //to find all <li> tags, but only if they have an <a> tag inside them
$('a:contains(Click Me!)') // to find every link that says “Click Me!”
$('div:hidden').show(); // hidden several <div> tags by hide(); find them and then make them visible
$('#slideshow img').hide(); // to select all images inside a <div> tag with an ID of slideshow and then hide those images
$('#popUp').width(300).height(300); // want to set the width and height of a <div> tag (with an ID of popUp)
$('#popUp').width(300).height(300).text('Hi!').fadeIn(1000); // Chaining functions
=
$('#popUp').width(300)
.height(300)
.text('Hi!')
.fadeIn(1000);
//As long as you only add a semicolon on the last line of the chain, the JavaScript interpreter treats the lines as a single statement.
005) Adding Content to a Page
alert($('#errors').html()); //html() function // replace
$('#errors').html('<p>There are four errors in this form</p>');
$('#errors h2').text('No errors found'); //.text() works like .html() but it doesn’t accept HTML tags
$('#errors').append('<p>errors in this form</p>'); //just want to add some HTML before the closing </div> tag. =.after()
$('#errors').prepend('<p>errors in this form</p>'); // added content appears directly after the <div>’s opening tag =.before()
006) Replacing and Removing Selections
$('#popup').remove();
$('span.error').remove(); // <span> tags that have a class of error
$('#product101').replaceWith(<p>Added to cart</p>'); // an ID of product101 that you wish to eplace with text
----------------------------------------------------------------------------------
Setting and Reading Tag Attributes
007) CSS Classes
$('a[href^="http://"]').addClass('externalLink'); //to add the class externalLink to all links
.... <a href="http://juninho.kr/"> -> <a href="http://juninho.kr/" class="externalLink">
$('#alertBox').removeClass('highlight'); // opposite of addClass().
$('#changeStyle').click(function() { //Toggling
$('body').toggleClass('altStyle');
});
Reading and Changing CSS Properties
008) css() function
var bgColor = $('#main').css('background-color'); //to find the background color of a <div>
tag with an ID of main:
$('body').css('font-size', '200%');
var baseFont = $('body').css('font-size');
baseFont = parseInt(baseFont,10); //parseInt() strips off anything following the number, ex)16px->16
$('body').css('font-size',baseFont * 2);
$('.pullquote').css('padding',100);
$('p.highlight').css('border', '1px solid black');
$('#highlightedDiv').css({ // multiple, use comma & colon
'background-color' : '#FF0000',
'border' : '2px solid #FE0037'
});
or
$('#highlightedDiv').css('background-color','#FF0000')
.css('border','2px solid #FE0037'); // chaining
009) HTML Attributes
var imageFile = $('#banner img').attr('src'); ->ex) ‘images/banner.png’
$('#banner img').attr('src','images/newImage.png'); //to swap in a different image
$('body').removeAttr('bgColor'); //removes the bgColor property
010) Acting on Each Element
$('img').fadeOut(); //disappear slowly
010) this and $(this)
$('a[href^="http://"]') //Attribute selectors,,, find the links bigin with http
$('a[href^="http://"]').each() //each() function,,, loop through each link
$('a[href^="http://"]').each(function() { //add an anonymous function // retrieve the URL
});
$('a[href^=http://]').each(function() { //access the current element each time through the loop
var extLink = $(this).attr('href'); //stores the value of the current($(this)) element’s href property
});
$('a[href^=http://]').each(function() {
var extLink = $(this).attr('href');
$('#bibList').append('<li>' + extLink + '</li>'); //appending a new list item to the <ul> tag
});
body
<div id="bibliography">
<h3>web pages referenced in this article</h3>
<ul id="bibList">
</ul>
</div>
011) clone()
$(document).ready(function() {
$('span.pq').each(function() { //<span> tag with 'pq' class
var quote = $(this).clone(); // clone() duplicates the current element ,copy
quote.removeClass('pq');
quote.addClass('pullquote'); // change class
$(this).before(quote); // 'this' is original <span>, quote is copy of <span>
// .before() will append = .prepend()
}); // end each
}); // end ready
012) event.
$('#menu').mouseover(function() { // mouseover event
$('#submenu').show();
});
$('a').mouseover(function() {
var message = "<p>You moused over a link</p>";
$('.main').append(message);
});
$(document).ready(function() {
$('html').dblclick(function() { //html selects the entire browser window
//dblclick() function
alert('ouch');
});
});
$('#button').click(function() {
$(this).val("Stop that!"); // button's caption changing
});
$('#textfield').focus(function() {
$(this).css('background-color','red');
});
013) hover() , toggle() function
function showSubmenu() {
$('#submenu').show(); // $('#submenu')..fadeIn();
}
function hideSubmenu() {
$('#submenu').hide(); // $('#submenu').fadeOut();
}
$('#menu').hover(showSubmenu, hideSubmenu);
//hover() function lets you assign two functions at once (mouseover and mouseout events)
following is same
$('#menu').hover(
function() { //mouseover
$('#submenu').show();
},
function() { //mouseout
$('#submenu').hide();
}
);
$('#menu').toggle(showSubmenu, hideSubmenu); // toggle() event works identically to the hover() event
$('#menu').toggle(Submenu1, Submenu2, Submenu3); // toggle( ) can accept more than two functions as arguments
014) Event Object
$(document).click(function(evt) {
var xPos = evt.pageX;
var yPos = evt.pageY;
alert('X:' + xPos + ' Y:' + yPos);
});
pageX ...pointer from the left edge of the browser window
pageY ...pointer from the top edge of the browser window
screenX ...pointer from the left edge of the monitor.
screenY ...pointer from the top edge of the monitor.
shiftKey ... Is true if the shift key is down when the event occurs.
which ... Use with the keypress event ... String.fromCharCode(evt.which)
target ... “target” of the event
data ... used with the bind() function
015) Stopping an Event’s Normal Behavior
$('#url1').click(function(evt){
evt.preventDefault(); // don't follow the link
});
or
$('#url1').click(function(evt){
return false;
});
016) unbind
$('a').mouseover(function() {
alert('You moved the mouse over me!');
});
$('#disable').click(function() {
$('a').unbind('mouseover'); //alert no longer appears.
});
$('#theLink').click(function(evt) {
// do something
evt.stopPropagation(); // Stopping an Event in Its Tracks
});
017) bind
$('#selector').bind('click', myData, functionName);
//myData is data you wish to pass to the function
{
firstName : 'Bob', // name and value
lastName : 'Smith'
}
var linkVar = {message:'Hello from a link'}; //we can store an object literal in a variable
ex)
var linkVar = { message:'Hello from a link'};
var pVar = { message:'Hello from a paragraph'};
function showMessage(evt) {
alert(evt.data.message);
}
$('a').bind('click',linkVar,showMessage);
$('p').bind('mouseover',pVar,showMessage);
- multi event bind
$(document).bind('click keypress', function() { //when click or keypress event occuer
$('#lightbox').hide( );
});
and
$('#theElement').bind({'click' : function() { do something },
'mouseover' : function() { do something };
});
is the same as this
$('#theElement').bind('click', function() {
// do something
});
$('#theElement').bind('mouseover', function() {
// do something
});
018) fadeIn, fadeOut
$(document).ready(function() {
$('.answer').hide();
$('#main h2').toggle(
function() {
$(this).next('.answer').fadeIn(); // .next is next
$(this).addClass('close'); //plus sign to minus sign
},
function() {
$(this).next('.answer').fadeOut();
$(this).removeClass('close');
}
);
});
for more fade out slowly
$('element').fadeOut('slow');
is the same as
$('element').fadeOut(600);
$('#button').click(function() {
$('#instructions').fadeToggle(500);
});
$(document).ready(function() {
$('#open').click(function() {
$('#login form').slideToggle(300);
$(this).toggleClass('close');
});
});
show()+hide()=toggle()
fadeIn()+fadeOut()=fadeToggle()
slideDown()+slideUp()=slideToggle()
019) Absolute Positioning with CSS
<style>
#moveIt {
position: absolute; // != relative;
left: 536px;
top: 0;
width: 400px;
}
</style> |
|
