There are a
few different methods that you can use to select objects on your page to
manipulate them in the way that you need.
The choices
are:
By Id…
The Hello
World example used the Id method of selecting an object. To use this method,
you instantiate the jQuery object and reference the id of the object you wish
to manipulate.
To tell the
jQuery constructor that you want to use the object’s id attribute, you precede the
id of your object with a hash (#).
Like this:
<script
type="text/javascript">
function
PrintHelloWorld() {
$("#HelloWorld").text("Hello World!!!");
}
$(function
() {
PrintHelloWorld();
});
</script>
<div
id="HelloWorld"></div>
In this
example, there is only one element what has the id of HelloWorld, and its text
attribute is set to Hello World!!!.
By class…
To use this
method, you instantiate the jQuery object and reference the class of the object
or objects you wish to manipulate.
To tell the
jQuery constructor that you want to use the object’s class attribute, you
precede the class name of your object with a dot (.).
Like this:
<script
type="text/javascript">
$(function
() {
$(".bold").text("bold");
$(".normal").text("normal");
});
</script>
<div
class="bold"></div>
<div
class="normal"></div>
<div
class="bold"></div>
This example
has three div objects on the page. Two use the class name “bold” and one uses “normal”.
The line $(".bold").text("bold"); creates a list of two objects and sets their text
attribute to “bold”.
The line $(".normal").text("normal");creates a list of only one object and sets it’s text
attribute to “normal”.
By Element type…
To use this
method, you instantiate the jQuery object and reference the element type of the
object or objects you wish to manipulate.
To tell the
jQuery constructor that you want to use the object’s element type, you just use
the element type. There is no preceding character.
Like This:
<style
type="text/css">
.another {color: Red;}
</style>
<script
type="text/javascript">
$(function
() {
$("div").text("This is a div");
$("span").text("This is a span");
$("p").text("This is a paragraph");
$("span.another").text("This is another span");
});
</script>
<div></div>
<span></span>
<p></p>
<span></span>
<span
class="another"></span>
This example
has one <div> object, one <p> object and three <span>
objects.
The line $("div").text("This is a div"); creates a list of just a single
object and sets it’s text attribute to “This is a div”.
The line $("span").text("This is a span"); creates a list of two objects and sets
their text attribute to “This is a span”.
The line $("p").text("This is a paragraph"); creates a list of just a single
object and sets it’s text attribute to “This is a paragraph”.
The line $("span.another").text("This is another span"); is different to anything we have done
so far. It creates a list of just a single object and sets its text attribute
to “This is another span”. This takes the element type and its class into account when it selects the object.
No comments:
Post a Comment