- MooTools 1.3 Cookbook
- Jay Larry G. Johnston
- 498字
- 2021-04-02 19:07:05
Injecting Hello World into an HTML DIV
Let us add an element to the HTML Document Object Model (DOM).
Getting ready
There is no oldie that is more goodie than greeting the world around us. There is an elemental power to our first Hello World, a power that proclaims, "We have the power to code syntactically correct. We have the power to change things on the screen. We have the power to accomplish business goals using this language. And, we are friendly and outgoing; 'Hello'."
How to do it...
Here is an example that demonstrates MooTools' syntax and power:
<script type="text/javascript" src="mootools-1.3.0.js"></script>
</head>
<body>
<div id="mycanvas">
Knock Knock, Who's there?
Hello, who?
</div>
<script type="text/javascript">
var whocanitbenow = 'Hello World!';
var readymsg = 'Okay to make the magic happen?';
if (confirm(readymsg,true,false)) {
// sexy part:
$('mycanvas').set('html',whocanitbenow);
} else {
// well, since they're being silly...
setTimeout(fallback_plan, 1000);
}
function fallback_plan() {
$('mycanvas').set( 'html', 'orange you glad there is a backup message?');
}
</script>
How it works...
So, as usual in our favorite MooTools cookbook, the alluring part is set with spacing above and below. Here is the 1, 2, 3 of what is happening in that nugget of goodness:
- We use the MooTools dollar, $, to select our div
- We use the MooTools method
set() - We send two arguments to
set()Note
MooTools $ has a counterpart, the double dollar sign: $$, which is used for sending CSS selectors and returns a multiple element collection.
The single $, originally reserved for grabbing DOM unique,
idattributed elements takes no punctuation not already inherent in the name of theidattribute.
Using MooTools dollar not only empowers us with cross-browser compatible code to humbly abstract and replace the infamous, JavaScript built-in, getElementById() method to get the element, but it also enhances the returned object with Moo-methods like get() and set().
Tip
Using Multiple Frameworks
It is imperative to use document.id(<id>) instead of its alias, $(<id>), when working with multiple frameworks. Reviewing the Moo-source shows that document.id is used exclusively. When another framework is using the dollar syntax, MooTools attempts to sense that and not extend the object.
There's more...
The get() method returns the attribute or property value requested while the set() method takes the attribute/property argument and a value to which the property should change. In this example we could use $('mycanvas').set('text',whocanitbenow);. That would do the same thing as our example, since we have only altered text, but would prevent us from injecting HTML and would strip all existing HTML from our text.
We now see that our goal with this recipe is to try it out; be sure to change the whocanitbenow variable to something with HTML in it like this:
<script type="text/javascript">
var whocanitbenow = '<strong>Hello <em>World</em></strong>!';
var readymsg = 'Okay to make the magic happen?';
if (confirm(readymsg,true,false)) {
// "alluring" part:
$('mycanvas').set('html',whocanitbenow);
} else {
// well, since they're being silly...
setTimeout(fallback_plan, 1000);
}
function fallback_plan() {
$('mycanvas').set( 'html', 'orange you glad there is a backup message?');
}
</script>
See also
For more information on CSS selectors see http://www.w3.org/TR/CSS2/selector.html.
- TArch 8.5天正建筑軟件標準教程
- Getting Started with Microsoft Application Virtualization 4.6
- Moldflow 2010完全自學與速查手冊（模流分析·成本控制）
- Procreate繪畫創作從入門到精通
- Microsoft SharePoint 2010 Administration Cookbook
- Google Web Toolkit 2 Application Development Cookbook
- 綁定的藝術：Maya高級角色骨骼綁定技法（第2版）
- Photoshop網店美工實例教程（第2版 全彩微課版）
- Premiere pro CC中文版自學視頻教程
- Instant Testing with QUnit
- Photoshop CS6案例教程（第3版）
- UG NX12中文版實用教程
- Revit技巧精選應用教程
- iOS智能手機APP界面設計實戰教程
- 平面設計師實戰教程