.Net Technology: jquery

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

<title>JQuery Page</title>

$(document ).ready(function(){$('#togglecls').slideDown('slow');

var obj = { one:1, two:2,

three:3, four:4, five:5 };

$.each(obj, function(i, val) {

$('#' + i).append(document.createTextNode('Property' + i + 'contains '+ val));

});

$.each($.browser,

function(i, val) {

$("<div>" + i + " is " + val +

"</div>")

.appendTo(document.body);

});

if($.browser.safari){$('#togglecls').html("<marquee><h5>hiiii</h5></marquee>");}

//if($.support.boxModel){alert("support");$('#support').html('i support w3c box model');}else{alert("not");$('#support').html('i didint support w3c box model');}

//$('#btn2').bind('click',function (event){alert ("btn click");});

//$('#btn2').mouseover(function (event){alert ("btn click2");});

$('#btn2').bind('click',typer );

$('#togglecls').hover(over, out);

//$('#first').one('click',over);

$('#first').click(function (){$('h2').toggle();});

//$('#img1').fadeOut(2000);

//$('#img1').fadeIn(2000);

$('#img2').slideUp("slow");

$('#img2').slideDown("slow");

$('#img1').fadeTo(2000,.033);

//$("#togglecls").addClass('stripe');alert("hi");

});

function animator()

{

$('#target').animate({

width: "80%",

opacity: 0.333,

fontSize: "26pt",

marginLeft: "0.5in",

borderWidth: "15px"

}, 2000 );

}

function clicker(){alert("hi");$('#btn2').unbind('click',clicker);}

function typer(event)

{alert("hi");

$('#togglecls').text('Character: '+ String.fromCharCode(event.keyCode));

}

function tooglecls()

{

//alert($("p").size());

$("#togglecls").toggleClass('stripe');

$('div >p').css("font-weight","bold");

$('#togglecls').slideUp("slow");

$('p:contains("5")').css("color","blue");

$('p[lang]').css("font-style","italic");

//$('#btn1:contains("togg")').css("color","red");

$('p:first-child(2)').css("color","red");

$('p:last').css("color","yellow");

//$("p").toggle();

$('<p>insert after togglecls </p>').insertAfter('#togglecls');

if($('#togglecls').is('p')){$('p:nth-child(2)').css("color","cyan");}else{alert("not p");}

$('p:eq(0)').css("color","white");

alert($('input:checkbox').length);

alert($('select option:selected').length);

$('img').each(function (m){this.title="image";});

$('img').width(25);

$('img').height(25);

$('p').append('<b>rose</b>');

$('p').wrap('<h6></h6>');

$('#btn1').before('<h1>jquery</h1>');

$('#btn1').after('<h1>jquery</h1>');

$('#btn1').val('jquery');

}

function over()

{alert("hi");$('#togglecls').css("color","red");

}

function out()

{$('#togglecls').css("color","black");}

//--------for btn2 button--------

//*--------function(like onload)--------

//$(function()

//{

//$('<p>And heres anotherone!</p>').insertAfter('#togglecls');

//$('<p>And me too!</p>').insertAfter('#togglecls');

//})-------end function----

</script>

p.stripe{background-color:pink;}

.clear {

clear:both;

line-height:0;

font-size:0;

height:0;

margin:0;

padding:0;

}

</style>

</head>

<body>

<input type ="checkbox" />checkbox1"

<input type ="checkbox" />checkbox2"</div> </td><td><div id="target">

Dropdownlist:<select size="4" multiple="multiple">

</select><br />

</div></td><td>

<p>This is paragraph 1.</p>

</span>

<p>This is paragraph 2.</p>

<p>This is paragraph 5.</p>

<p lang="en" >hello</p>

<p id="togglecls">hiiiiiiiiiiiii</p>

<p >first</p>

<p>third</p>

</div>

</td></tr></table>

<h6>Looping over an object with

</h6>

Color: <input type="color" name="user_color" />

</form>

</body>

</html>

Friday, 4 November 2011

jquery