JavaScript Tutorial/Dojo toolkit/query
Содержание
Get tag by ID and change inner html
<source lang="javascript">
<html>
<head> <script type="text/javascript"> var djConfig = { baseScriptUri : "js/dojo/" }; </script> <script type="text/javascript" src="js/dojo/dojo/dojo.js"></script> <script language="JavaScript" type="text/javascript"> function setup() { dojo.byId("innerDiv").onclick = doInnerClick; } function doInnerClick(e) { dojo.byId("divOutput").innerHTML += "inner
"; dojo.stopEvent(e); } </script> </head> <body onLoad="setup();">
inner
</body>
</html></source>
Object to query
<source lang="javascript">
<html>
<head> <link rel="StyleSheet" type="text/css" href="js/dojo/dijit/themes/tundra/tundra.css"> <script type="text/javascript"> var djConfig = { baseScriptUri : "js/dojo/", parseOnLoad : true }; </script> <script type="text/javascript" src="js/dojo/dojo/dojo.js"></script> <script> function Foo( ) { var o = dojo.queryToObject("foo=1&bar=2&baz=3"); alert(o); alert(dojo.objectToQuery(o));
}
</script> </head> <body class="tundra" onload=Foo()>
</body> </html></source>
Query dojo icon class with dojo.query()
<source lang="javascript">
<html>
<head> <link rel="StyleSheet" type="text/css" href="js/dojo/dijit/themes/tundra/tundra.css"> <script type="text/javascript"> var djConfig = { baseScriptUri : "js/dojo/", parseOnLoad : true }; </script> <script type="text/javascript" src="js/dojo/dojo/dojo.js"></script> <script> dojo.require("dojo.parser"); dojo.require("dijit.Toolbar"); dojo.require("dijit.form.Button"); dojo.addOnLoad(function( ) { var bold = function( ) {alert("bold");} var italic= function( ) {alert("italic");} var underline = function( ) {alert("underline");} var superscript = function( ) {alert("superscript");} var subscript = function( ) {alert("subscript");} dojo.query(".dijitEditorIcon").forEach(function(x) { if (dojo.hasClass(x, "dijitEditorIconBold")) dojo.connect(x.parentNode, "onclick", bold); else if (dojo.hasClass(x, "dijitEditorIconItalic")) dojo.connect(x.parentNode, "onclick", italic); else if (dojo.hasClass(x, "dijitEditorIconUnderline")) dojo.connect(x.parentNode, "onclick", underline); else if (dojo.hasClass(x, "dijitEditorIconSubscript")) dojo.connect(x.parentNode, "onclick", superscript); else if (dojo.hasClass(x, "dijitEditorIconSuperscript")) dojo.connect(x.parentNode, "onclick", subscript); }); }); </script> </head> <body class="tundra">
<button dojoType="dijit.form.Button" iconClass="dijitEditorIcon dijitEditorIconBold" ></button> <button dojoType="dijit.form.Button" iconClass="dijitEditorIcon dijitEditorIconItalic" ></button> <button dojoType="dijit.form.Button" iconClass="dijitEditorIcon dijitEditorIconUnderline" ></button> <button dojoType="dijit.form.Button" iconClass="dijitEditorIcon dijitEditorIconSubscript"></button> <button dojoType="dijit.form.Button" iconClass="dijitEditorIcon dijitEditorIconSuperscript"></button>
</body>
</html></source>
Query element id and add action
<source lang="javascript">
<html> <head> <title>Dojo example</title>
<script type="text/javascript"> var djConfig = { baseScriptUri : "js/dojo/", parseOnLoad : true }; </script> <script type="text/javascript" src="js/dojo/dojo/dojo.js"></script> <script> dojo.addOnLoad(function(){ dojo.query("#showMe").onclick(function(e){ var node = e.target; var a = dojo.anim(node, { backgroundColor: "#ff0", color: "#00f" }, 1000); dojo.connect(a, "onEnd", function(){ dojo.anim(node, { color: "#0ff" }, null, null, function(){ node.innerHTML = "Alert!"; dojo.anim(node, { color: "red" }); }); }); }); });
</script> <body>
click me
</body> </html></source>
Query style
<source lang="javascript">
<html>
<head> <style> .myStyle { color : #ff0000; } </style> <script type="text/javascript"> var djConfig = { baseScriptUri : "js/dojo/" }; </script> <script type="text/javascript" src="js/dojo/dojo/dojo.js"></script> <script> function testIt() { alert(dojo.query(".myStyle")); } </script> </head> <body onLoad="testIt();">
</body>
</html></source>
Query style from tag
<source lang="javascript">
<html>
<head> <style> .myStyle { color : #ff0000; } </style> <script type="text/javascript"> var djConfig = { baseScriptUri : "js/dojo/" }; </script> <script type="text/javascript" src="js/dojo/dojo/dojo.js"></script> <script> function testIt() { alert(dojo.query(".myStyle", "parentDiv")); } </script> </head> <body onLoad="testIt();">
</body>
</html></source>
Query to object
<source lang="javascript">
<html>
<head> <link rel="StyleSheet" type="text/css" href="js/dojo/dijit/themes/tundra/tundra.css"> <script type="text/javascript"> var djConfig = { baseScriptUri : "js/dojo/", parseOnLoad : true }; </script> <script type="text/javascript" src="js/dojo/dojo/dojo.js"></script> <script> function Foo( ) { var o = dojo.queryToObject("foo=1&bar=2&baz=3"); alert(o); alert(dojo.objectToQuery(o));
}
</script> </head> <body class="tundra" onload=Foo()>
</body> </html></source>