Mobile-Web-App

Wednesday, February 15, 2012

jQuery: Button and .click()

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="utf-8">
 <title>Mobile-Web-App: jQuery</title>
 <script type="text/javascript" src="http://code.jquery.com/jquery-1.6.4.min.js"></script>

<script>
$("document").ready(function(){
 $("#myButton").click(function(){
  alert("Thanks for Click!");
 });
});

</script>

</head>
<body>

<form>
 <button id="myButton">Click Me</button>
</form>

</body>
</html>

jQuery: .append() and .appendTo()

.append(content): Insert content, specified by the parameter, to the end of each element in the set of matched elements.
.appendTo(target): Insert every element in the set of matched elements to the end of the target.

Example:

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="utf-8">
 <title>Mobile-Web-App: jQuery</title>
 <script type="text/javascript" src="http://code.jquery.com/jquery-1.6.4.min.js"></script>

<script>
$(document).ready(
 function(){
  $("#title").append("<spin style='color: red;'><b>append</b></spin>");
  $("<spin style='color: red;'><b>appendTo</b></spin>").appendTo(".desc");
 });
</script>

</head>
<body>

<p id="title">* jQuery is a new kind of JavaScript Library *</p>
<p id="desc1" class="desc">jQuery is a fast and concise JavaScript Library that simplifies HTML document traversing, event handling, animating, and Ajax interactions for rapid web development.</p>
<p id="desc2" class="desc">jQuery is designed to change the way that you write JavaScript.</p>

</body>
</html>

Related:
- jQuery: .prepend() and .prependTo()

jQuery: .prepend() and .prependTo()

.prepend(content): Insert content, specified by the parameter, to the beginning of each element in the set of matched elements.
.prependTo(target): Insert every element in the set of matched elements to the beginning of the target.

Example:

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="utf-8">
 <title>Mobile-Web-App: jQuery</title>
 <script type="text/javascript" src="http://code.jquery.com/jquery-1.6.4.min.js"></script>

<script>
$(document).ready(
 function(){
  $("#title").prepend("<spin style='color: red;'><b>prepend</b></spin>");
  $("<spin style='color: red;'><b>prependTo</b></spin>").prependTo(".desc");
 });
</script>

</head>
<body>

<p id="title">* jQuery is a new kind of JavaScript Library *</p>
<p id="desc1" class="desc">jQuery is a fast and concise JavaScript Library that simplifies HTML document traversing, event handling, animating, and Ajax interactions for rapid web development.</p>
<p id="desc2" class="desc">jQuery is designed to change the way that you write JavaScript.</p>

</body>
</html>

Related:
- jQuery: .append() and .appendTo()

Tuesday, February 14, 2012

Field Guide to Web Applications

Chrome Developer Relations team launched the Field Guide to Web Applications, a new resource helping web developers create great web apps.

The fictitious author Bert Appward guides you through topics like the properties of web applications, design fundamentals, tips for creating great experiences, and a few case studies that put best practices to use.

Link: Field Guide to Web Applications

jQuery: Change HTML elements using html()

Unlike text()(refer to Change HTML elements using jQuery), html() method cam specify HTML tegs also.

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="utf-8">
 <title>Mobile-Web-App: jQuery</title>
 <script type="text/javascript" src="http://code.jquery.com/jquery-1.6.4.min.js"></script>

<style>
.italic-red{
 font-style: italic;
 color: red;
}
</style>

<script>
$(document).ready(
 function(){
  $("#title").html("<a href='http://mobile-web-app.blogspot.com/'><b>Mobile-Web-App</b><a>");
  $("#title").addClass("italic-red");
 });
</script>

</head>
<body>

<p id="title">* jQuery is a new kind of JavaScript Library *</p>
<p id="desc1" class="desc">jQuery is a fast and concise JavaScript Library that simplifies HTML document traversing, event handling, animating, and Ajax interactions for rapid web development.</p>
<p id="desc2" class="desc">jQuery is designed to change the way that you write JavaScript.</p>

</body>
</html>

Monday, February 13, 2012

Change HTML elements using jQuery

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Mobile-Web-App: jQuery</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.6.4.min.js"></script>

<style>
.italic-red{
font-style: italic;
color: red;
}
</style>

<script>
$(document).ready(
function(){
 $("#title").text("Mobile-Web-App");
 $("#title").addClass("italic-red");
});
</script>

</head>
<body>

<p id="title">* jQuery is a new kind of JavaScript Library *</p>
<p id="desc1" class="desc">jQuery is a fast and concise JavaScript Library that simplifies HTML document traversing, event handling, animating, and Ajax interactions for rapid web development.</p>
<p id="desc2" class="desc">jQuery is designed to change the way that you write JavaScript.</p>

</body>
</html>

Related:
Change HTML elements using html() can also specify HTML tags.

jQuery: search html elements contains...

In this example, apply css style on <p> contains word of "*".

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="utf-8">
 <title>Mobile-Web-App: jQuery</title>
 <script type="text/javascript" src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
 
<style>
.italic-red{
 font-style: italic;
 color: red;
}
</style>

<script>
$(document).ready(
 function(){
  $("p:contains(*)").addClass("italic-red"); //<p> elements with '*'
 });
</script>

</head>
<body>

<p id="title">* jQuery is a new kind of JavaScript Library *</p>
<p id="desc1" class="desc">jQuery is a fast and concise JavaScript Library that simplifies HTML document traversing, event handling, animating, and Ajax interactions for rapid web development.</p>
<p id="desc2" class="desc">jQuery is designed to change the way that you write JavaScript.</p>

</body>
</html>