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

One thought on “JQuery : Learning basics Part 2

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s