Selecting Elements

Selecting DOM Elements

$('#idname')
$('.className')

Find any a tags contained within the selected tag

$('#idname').find('a')

Find Children of tag

$('#idname').children()
$('#idname').children('h2')

Select Parents

$('#idname').parents()

Siblings

$('#idname').siblings()

Adding and Removing Classes

  $('body').addClass('js');

    var $circles = $('#circles');

    $circles.find(':nth-child(2)')
        .addClass('selected');

    $circles.find(':nth-child(4)')
        .removeClass('selected');

    $circles.find(':nth-child(4)')
        .toggleClass('selected');

Cloning DOM Elements

var $group = $('#group-friends');
var $copy = $group.find('input:last').clone();
$group.append($copy);

Getting Text from the Page

Will return the text plus the tags

$('#header').html();

Will return the text only

$('#header').text();

Will return the text only and trim any white spaces before and after

$('#header').text().trim();

Adding css

$("#idname").css("width", 500);
$("#idname").css("margin", "auto");
$("#idname").css("float", "left");
$("#idname").css("color", "purple");

Passing multiple arguments

$('#id').css({
"background": "url('background.png') repeat-y"
});

Target by tags

$('a').css("color", "red");

Target tags inside ids

$('#id a').css("color", "green);

Target tags that follow specific tags. eg target a tag that follow an em tag

$('em + a').css("color", "green);

Target all tags inside another tag. eg. all tags within the p tag

$('p > em').css("color", "green);

Target a link that has the text 'google' in it

$("a[href*='google']").css("font-weight", "bolder");

Target and image using the the alt tag. filtering ^= means the beginning

$("img[alt^='texttoserchfor']").css({
"border-color": "black",
"border-width": "1px",
"border-style": "solid"
}); 

Change width and height of an image

$("img[alt^='texttolookfor'").width(150).height(150);

Changing items that end with, use $=

$("a[href$='pdf'").css("color", "red");

Targeting something that does not contain something. eg target a li item that does not contain the word and

$("#id li:not(:contains(and))").css("color", "red")

Target something that contains the text and

$("a:contains(and)").css("color", "red")

Select every paragraph that has a i tag

$("p:has(i)").hide();

Change the value of a text box

$("input[type='text']#idname").val("robert");

---

Back To Top< ---- >Category< ---- > Home