JQuery-Selectors1

by Ananth Arumugasamy

HTML

<div id ="welcome" class ="intro"> OF TYPE
    <span>This is a first child</span>
    <p> this is a first para</p>
    <p>this is second para</p>
    <span>this is last child</span> 
</div>
<div id ="demo" class ="myclass">
    some text
</div>
<h1> Heading 1</h1>
<h2>Heading 2</h2>
<div>
<p> This is a 1st child </p>
    <p> This is second child</p>
<p> This is  a third child</p> 
</div> </br>
<div>
    <p>this is only p child</p>
   
</div></br>
<div>
    <p>this is only of p child</p>
    <span>this is span</p>
    <span> this is a second span</span>
    </div>
<button id = "onclick">click</button>

CSS

div{
    border:2px solid black;
}
1.id
2.class
3.element
4.multiple id,class,elts
5.first,last
6.even,odd
7.first-child,last-child
8.first-of-type, last-of-type
9.nth-child(n)
10.nth-last-child(n)
11. nth-of-type(n),nth-last-of-type(n)
12.only-child, only-of-type

JavaScript

$('p:only-of-type').click(function() {
    alert("clicked");
});
/*
$('p:only-child').click(function() {
    alert("clicked");
});

$('p:nth-last-of-type(2)').click(function() {
    alert("clicked");
});

$('p:nth-of-type(2)').click(function() {
    alert("clicked");
});


$('p:nth-last-child(2)').click(function() {
    alert("clicked");
});

$('p:nth-child(1)').click(function() {
    alert("clicked");
});

$('p:first-of-type').click(function() {
    alert("clicked");
});

$('p:first-child').click(function() {
    alert("clicked");
});

$('p:odd').click(function() {
    alert("clicked");
});

$('p:first').click(function() {
    alert("clicked");
});

$('p,h1').click(function() {
    alert("clicked");
});

$('p').click(function() {
    alert("clicked");
});

$('.myclass').click(function() {
    alert("clicked");
});


$('#demo').click(function() {
    alert("clicked");
});
var color = "blue";
$(document).ready(function() {
    $('#welcome').fadeOut('1000');
});

$("#onclick").click(function() {
    if(color =="blue"){
        color = "red";
    }else{
        color="blue";
    }
    $('#demo').html('Other Text');
    $('#demo').css("color",color);           
    
                   });




function changeText(){
    document.getElementById('demo').innerHTML="Other Text";
    document.getElementById('demo').style.color="red";
}
*/