Selecting elements with Jquery | styling html elements with Jquery


We’ll be looking on how to select a HTML element lets say for instance an <h1> tag and change the background color and the font color when clicking it, let’s get started.
To select an element in Jquery we simply pass the element’s name as a string parameter to the $ function (note the $ symbol is the short form for Jquery). Here is how the code will look

Styling elements with jquery




<! DOCTYPE HTML>
</head>
<script type="text/javascript" src="Scripts/jquery-1.7.2.min.js"></script>
</head>

<body>
<script type="text/javascript">
$(document).ready(function() {
$('h1').click(function(){
$(this).css('background-color','#F00')//setting a background color
$(this).css('color','#fff') // setting font solor
});//click function end
});//document ready function end
</script>

<h1>click me and change the Background</h1>

<style>
h1{ border: 1px solid #999; border-radius:5px; width:510px; cursor: pointer;}
</style>
</body>
</html>

Comments

Popular posts from this blog

How CSS3 Works