Tuesday, April 14, 2009

JQuery code for inline edit

<html>
<body>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>

<span class="editName">Test</span>
<input id="newName" name="editName" style="display: none" type="text" />

<script type="text/javascript">
$(function(){
$("span.editName").click(function(){
$(this).hide();
$(this).next("input#newName").show().focus();
});
});
</script>
</body>
</html>

$(document).ready()

Traditionally Javascript events were attached to a document using an “onload” attribute in the tag of the page.

The $(document).ready() function takes a function as its argument. (In this case, an anonymous function is created inline—a technique that is used throughout the jQuery documentation.)

Understanding Selectors: the Backbone of jQuery

$(document);
The first option will apply the jQuery library methods to a DOM object (in this case, the document object).
$(’#mydiv’)
The second option will select every <div> that has the <id> attribute set to “mydiv”.
$(’p.first’)
The third option will select all of the <p> tags with the class of “first”.
$(’p[title="Hello"]‘)
This option will select from the page all <p> tags that have a title of “Hello”. Techniques like this enable the use of much more semantically correct (X)HTML markup, while still facilitating the DOM scripting required to create complex interactions.
$(’p[title^="H"]‘)
This enables the selection of all of the <p> tags on the page that have a title that starts with the letter H.

Try simple JQuery/javascript online

http://www.w3schools.com/JS/tryit.asp?filename=tryjs_text
Jquey reference online
<html>
<body>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>

<script type="text/javascript">
document.write("Hello World!");
$(
function()
{
alert('hi');
}
)
</script>

</body>
</html>