JavaScript Tutorial/Dojo toolkit/query
Содержание
Get tag by ID and change inner html
<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<br>";
dojo.stopEvent(e);
}
</script>
</head>
<body onLoad="setup();">
<div id="innerDiv">
inner
</div>
<div id="divOutput"> </div>
</body>
</html>
Object to query
<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>
Query dojo icon class with dojo.query()
<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">
<div dojoType="dijit.Toolbar" style="width:300px">
<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>
<span dojoType="dijit.ToolbarSeparator"></span>
<button dojoType="dijit.form.Button"
iconClass="dijitEditorIcon dijitEditorIconSubscript"></button>
<button dojoType="dijit.form.Button"
iconClass="dijitEditorIcon dijitEditorIconSuperscript"></button>
</div>
</body>
</html>
Query element id and add action
<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>
<div id="showMe">
click me
</div>
</body>
</html>
Query style
<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();">
<div id="div1" class="myStyle"> </div>
</body>
</html>
Query style from tag
<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();">
<div id="parentDiv">
<div id="div3" class="myStyle"> </div>
</div>
</body>
</html>
Query to object
<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>