JQuery : Learning basics Part 2

Code sample that will help you jump start JQuery. Read the previous post here.

//Basic Filter
$(".comment-single > .comment-
body").filter(":odd")
.filter("<wbr />:first").text()
//text value inside is displayed
$(".comment-single > .comment-body")
.filter(":<wbr />contains(great)")
$(".comment-single > .comment-
body").filter(":odd")
.filter("<wbr />:not(:contains(great))")
$("p code:first-child")
$("p code:first-child")
.css("text-<wbr />decoration", "underline")
$("p code:first-child")
.css("<wbr />background-color", "yellow");
$(".comment.even")
.css("background-<wbr />color",
"red");  
//in order to select a multiple class
assigned to a single div
then use period (.)

Animation
$(".comment.even").hide(1000)
$(".comment.even").show(1000)
$(".comment.even").toggle(2000)
$(".comment.even").fadeOut()
$(".comment.even").fadeIn()
$(".comment.even").slideUp()
$(".comment.even").slideDown()

DOM activity
$(".comment.even").append("hello");
$('<p>This is really cool way of learning</
p>')
.appendTo('.comment.even');
$(".comment.even")
.prepend("test value");
$('<p>This is really cool way of learning</
p>')
.prependTo('.comment.even');
$(".comment.even")
.before("test value me up");
$(".comment.even")
.after("test value me up");

All the best for learning JQuery.

Advertisements

JQuery : Learning basics Part 1

Code sample that will help you jump start JQuery. This is Part 1 of 2 part series.

var s=document.createElement('script');
s.setAttribute('src'
,'//ajax.googleapis.com/
ajax/libs/jquery/1.6.4/
jquery.min.js');

document.getElementsByTagName('body')[0].appendChild(s);

//CSS
$("#image40").height();
$("#image40").height(200);
$(".js").scrollTop(0);  
-- scroll the page or
the element to top,
adding zero is very important
$(".js").scrollLeft(20);
$("#image40").position();
$("#image40").outerHeight();
$("#image40").outerWidth();
$("#image40").width();

//EVENTS
function(event){
     alert("Thanks for visiting!");
   }
$("a").keypress(function(<wbr />event){
    alert("keypress");
event.preventDefault();
  });
$("a").focusin(function(event)<wbr />{
    alert("focusin");
event.preventDefault();
  });

$.browser.version
$.browser

$("div").delegate("a",
"hover", function(){
 alert('Example of Delegate!!');
});
$("div").undelegate();

//Hierarchy
$(".comment-body > .reply")
$(".comment-body .reply")

//Basic Filter
$(".comment-body > .reply")
.filter(":even")
$(".comment-body > .reply")
.filter(":odd")
$(".comment-body > .reply")
.filter(":odd").<wbr />filter(":first")
$(".comment-body > .reply")
.filter(":odd").<wbr />filter(":last")
$(".comment-body > .reply")
.filter(":odd").<wbr />filter(":gt(8)")  
//get thelist from 8th position
//i.e greter than 8
$(".comment-body > .reply").filter(":odd")
.<wbr />filter(":lt(8)")  
//get the list before 8th position 
//i.e greter than 8

Read the next part here.