|
|
| 关键字 |
简介 |
示例代码 |
|
nodeName
|
节点名称
|
示例代码
|
|
nodeValue
|
节点值
|
示例代码
|
|
nodeType
|
节点类型
|
示例代码
|
|
innerHTML
|
元素的文本内容
|
示例代码
|
id
value
className
|
元素上的属性
|
示例代码
|
|
练习-验证账号是否已经存在
|
示例代码
|
|
答案-验证账号是否已经存在
|
示例代码
|
|
|
练习-切换不同的图片
|
示例代码
|
|
|
答案-切换不同的图片
|
示例代码
|
|
|
练习-判断输入框里的值，是否是整数(浮点数也不行)
|
示例代码
|
|
|
答案-判断输入框里的值，是否是整数(浮点数也不行)
|
示例代码
|
示例
1
:
节点名称
示例
2
:
节点值
示例
3
:
节点类型
示例
4
:
元素的文本内容
示例
5
:
元素上的属性
示例
6
:
练习-验证账号是否已经存在
示例
7
:
答案-验证账号是否已经存在
示例
8
:
练习-切换不同的图片
示例
9
:
答案-切换不同的图片
示例
10
:
练习-判断输入框里的值，是否是整数(浮点数也不行)
示例
11
:
答案-判断输入框里的值，是否是整数(浮点数也不行)
nodeName表示一个节点的名字
如本例：
document.nodeName 文档的节点名，是 固定的#document
div1.nodeName 元素的节点名，是对应的标签名 div
div1.attributes[0].nodeName 属性的节点名，是对应的属性名 id
div1.childNodes[0].nodeName 内容的节点名，是固定的 #text
");
window.frames["iframe_show1175"].document.write(decodeHtml($("textarea#stepcodeTextarea1175").val()));
window.frames["iframe_show1175"].document.close();
$(window.frames["iframe_show1175"]).load(function(){
$("#iframe_show1175").height($("#iframe_show1175").contents().find("body").height()+showittryitheight);
});
$("#iframe_show1175").height($("#iframe_show1175").contents().find("body").height()+showittryitheight);
setTimeout(function(){
},500);
});
<html>
<div id="d1">hello HTML DOM</div>
<script>
function p(s){
document.write(s);
document.write("<br>");
}
var div1 = document.getElementById("d1");
p("document的节点名称:"+document.nodeName);
p("div元素节点的节点名称:"+div1.nodeName);
p("div下属性节点的节点名称:"+div1.attributes[0].nodeName);
p("div下内容节点的节点名称:"+div1.childNodes[0].nodeName);
</script>
</html>
<html>
<div id="d1">hello HTML DOM</div>
<script>
function p(s){
document.write(s);
document.write("<br>");
}
var div1 = document.getElementById("d1");
p("document的节点名称:"+document.nodeName);
p("div元素节点的节点名称:"+div1.nodeName);
p("div下属性节点的节点名称:"+div1.attributes[0].nodeName);
p("div下内容节点的节点名称:"+div1.childNodes[0].nodeName);
</script>
</html>
");
window.frames["iframe1175"].document.write(decodeHtml(code1175));
window.frames["iframe1175"].document.close();
//load和下面的非load必需并存，因为如果代码用到了jquery就必须使用load的方式
$(window.frames["iframe1175"]).load(function(){
$("#iframe1175").height($("#iframe1175").contents().find("body").height()+showittryitheight);
});
$("#iframe1175").height($("#iframe1175").contents().find("body").height()+showittryitheight);
alreadyWriteCode1175 = code1175;
$("#rendering1175").hide();
$("#rendered1175").show();
}
var tRereshRetry2DemoPanel1175 = setInterval(rereshRetry2DemoPanel1175,1000);
var binded1175 = false;
$("textarea#stepcodeTextarea1175").keyup(function(){
if(!binded1175){
$(window).bind('beforeunload',function(){
binded1175 = true;
return "xxxx";
});
}
var newCode = $(this).val()
code1175 = newCode;
/*below code is replaced by function rereshRetry2DemoPanel()*/
// if(code1175!=newCode){
// window.frames["iframe1175"].document.write("
");
// window.frames["iframe1175"].document.write(decodeHtml($("textarea#stepcodeTextarea1175").val()));
// window.frames["iframe1175"].document.close();
// $(window.frames["iframe1175"]).load(function(){
// $("#iframe1175").height($("#iframe1175").contents().find("body").height()+showittryitheight);
// });
// code1175 = newCode;
// }
});
$(".tryButton1175").click(function(){
$("#tryDiv1175").show();
$("#stepcodeTextarea1175").focus();
$("#stepcodeTextarea1175").height(200);
$("#iframe1175").height(0);
window.frames["iframe1175"].document.write("
");
window.frames["iframe1175"].document.write(decodeHtml($("textarea#stepcodeTextarea1175").val()));
window.frames["iframe1175"].document.close();
//load和下面的非load必需并存，因为如果代码用到了jquery就必须使用load的方式
$(window.frames["iframe1175"]).load(function(){
$("#iframe1175").height($("#iframe1175").contents().find("body").height()+showittryitheight);
});
$("#iframe1175").height($("#iframe1175").contents().find("body").height()+showittryitheight);
this.scrollIntoView(true);
editor1175.focus();
editor1175.setSize(null, "250");
$("#rendering1175").hide();
$("#rendered1175").hide();
});
var mixedMode = {
name: "htmlmixed",
scriptTypes: [{matches: /\/x-handlebars-template|\/x-mustache/i,
mode: null},
{matches: /(text|application)\/(x-)?vb(a|script)/i,
mode: "vbscript"}]
};
var editor1175 = CodeMirror.fromTextArea(document.getElementById("stepcodeTextarea1175"), {
lineNumbers: true,
styleActiveLine: true,
matchBrackets: true,
mode:"text/html",
theme:"eclipse",
selectionPointer: true,
lineWrapping: true,
extraKeys: {
"Alt-/": "autocomplete",
"Ctrl-F": "findPersistent",
"F8": function(cm) {
cm.setOption("fullScreen", !cm.getOption("fullScreen"));
},
"Esc": function(cm) {
if (cm.getOption("fullScreen")) cm.setOption("fullScreen", false);
}
}
});
editor1175.on("change",function(doc){
if(!binded1175){
$(window).bind('beforeunload',function(){
binded1175 = true;
return "xxxx";
});
}
var newCode = doc.getValue();
code1175 = newCode;
$("textarea#stepcodeTextarea1175").val(newCode);
if(alreadyWriteCode1175!=code1175){
lastModifedTime1175 = new Date().getTime();
$("#rendering1175").show();
$("#rendered1175").hide();
}
// alert(doc.getValue());
});
$(".CodeMirror").addClass("form-control");
// var editor1175 = CodeMirror.fromTextArea(, {
// lineNumbers: true,
// styleActiveLine: true,
// matchBrackets: true,
// theme:"eclipse",
// });
editor1175.on("change",function(doc){
// alert(doc.getValue());
});
$("#tryDiv1175").hide();
});
$("div.codemirrorTips span").addClass("glyphicon glyphicon-asterisk");
1. 双击选中单词
2. 三击选中整行
3. CTRL+F 查找
4. F8 全屏编辑，再次点击恢复
|
|
渲染中
渲染完成
|
nodeValue表示一个节点的值
如本例：
document.nodeValue 文档的节点值，是 null
div1.nodeValue 元素的节点值，是null
div1.attributes[0].nodeValue 属性的节点值，是对应的属性值 d1
div1.childNodes[0].nodeValue 内容的节点值，是内容 即： #text
");
window.frames["iframe_show1176"].document.write(decodeHtml($("textarea#stepcodeTextarea1176").val()));
window.frames["iframe_show1176"].document.close();
$(window.frames["iframe_show1176"]).load(function(){
$("#iframe_show1176").height($("#iframe_show1176").contents().find("body").height()+showittryitheight);
});
$("#iframe_show1176").height($("#iframe_show1176").contents().find("body").height()+showittryitheight);
setTimeout(function(){
},500);
});
<html>
<div id="d1">hello HTML DOM</div>
<script>
function p(s){
document.write(s);
document.write("<br>");
}
var div1 = document.getElementById("d1");
p("document是没有nodeValue的："+document.nodeValue);
p("元素节点是没有nodeValue的："+div1.nodeValue);
p("属性节点id的nodeValue："+div1.attributes[0].nodeValue);
p("内容节点的nodeValue："+div1.childNodes[0].nodeValue);
</script>
</html>
<html>
<div id="d1">hello HTML DOM</div>
<script>
function p(s){
document.write(s);
document.write("<br>");
}
var div1 = document.getElementById("d1");
p("document是没有nodeValue的："+document.nodeValue);
p("元素节点是没有nodeValue的："+div1.nodeValue);
p("属性节点id的nodeValue："+div1.attributes[0].nodeValue);
p("内容节点的nodeValue："+div1.childNodes[0].nodeValue);
</script>
</html>
");
window.frames["iframe1176"].document.write(decodeHtml(code1176));
window.frames["iframe1176"].document.close();
//load和下面的非load必需并存，因为如果代码用到了jquery就必须使用load的方式
$(window.frames["iframe1176"]).load(function(){
$("#iframe1176").height($("#iframe1176").contents().find("body").height()+showittryitheight);
});
$("#iframe1176").height($("#iframe1176").contents().find("body").height()+showittryitheight);
alreadyWriteCode1176 = code1176;
$("#rendering1176").hide();
$("#rendered1176").show();
}
var tRereshRetry2DemoPanel1176 = setInterval(rereshRetry2DemoPanel1176,1000);
var binded1176 = false;
$("textarea#stepcodeTextarea1176").keyup(function(){
if(!binded1176){
$(window).bind('beforeunload',function(){
binded1176 = true;
return "xxxx";
});
}
var newCode = $(this).val()
code1176 = newCode;
/*below code is replaced by function rereshRetry2DemoPanel()*/
// if(code1176!=newCode){
// window.frames["iframe1176"].document.write("
");
// window.frames["iframe1176"].document.write(decodeHtml($("textarea#stepcodeTextarea1176").val()));
// window.frames["iframe1176"].document.close();
// $(window.frames["iframe1176"]).load(function(){
// $("#iframe1176").height($("#iframe1176").contents().find("body").height()+showittryitheight);
// });
// code1176 = newCode;
// }
});
$(".tryButton1176").click(function(){
$("#tryDiv1176").show();
$("#stepcodeTextarea1176").focus();
$("#stepcodeTextarea1176").height(200);
$("#iframe1176").height(0);
window.frames["iframe1176"].document.write("
");
window.frames["iframe1176"].document.write(decodeHtml($("textarea#stepcodeTextarea1176").val()));
window.frames["iframe1176"].document.close();
//load和下面的非load必需并存，因为如果代码用到了jquery就必须使用load的方式
$(window.frames["iframe1176"]).load(function(){
$("#iframe1176").height($("#iframe1176").contents().find("body").height()+showittryitheight);
});
$("#iframe1176").height($("#iframe1176").contents().find("body").height()+showittryitheight);
this.scrollIntoView(true);
editor1176.focus();
editor1176.setSize(null, "250");
$("#rendering1176").hide();
$("#rendered1176").hide();
});
var mixedMode = {
name: "htmlmixed",
scriptTypes: [{matches: /\/x-handlebars-template|\/x-mustache/i,
mode: null},
{matches: /(text|application)\/(x-)?vb(a|script)/i,
mode: "vbscript"}]
};
var editor1176 = CodeMirror.fromTextArea(document.getElementById("stepcodeTextarea1176"), {
lineNumbers: true,
styleActiveLine: true,
matchBrackets: true,
mode:"text/html",
theme:"eclipse",
selectionPointer: true,
lineWrapping: true,
extraKeys: {
"Alt-/": "autocomplete",
"Ctrl-F": "findPersistent",
"F8": function(cm) {
cm.setOption("fullScreen", !cm.getOption("fullScreen"));
},
"Esc": function(cm) {
if (cm.getOption("fullScreen")) cm.setOption("fullScreen", false);
}
}
});
editor1176.on("change",function(doc){
if(!binded1176){
$(window).bind('beforeunload',function(){
binded1176 = true;
return "xxxx";
});
}
var newCode = doc.getValue();
code1176 = newCode;
$("textarea#stepcodeTextarea1176").val(newCode);
if(alreadyWriteCode1176!=code1176){
lastModifedTime1176 = new Date().getTime();
$("#rendering1176").show();
$("#rendered1176").hide();
}
// alert(doc.getValue());
});
$(".CodeMirror").addClass("form-control");
// var editor1176 = CodeMirror.fromTextArea(, {
// lineNumbers: true,
// styleActiveLine: true,
// matchBrackets: true,
// theme:"eclipse",
// });
editor1176.on("change",function(doc){
// alert(doc.getValue());
});
$("#tryDiv1176").hide();
});
$("div.codemirrorTips span").addClass("glyphicon glyphicon-asterisk");
1. 双击选中单词
2. 三击选中整行
3. CTRL+F 查找
4. F8 全屏编辑，再次点击恢复
|
|
渲染中
渲染完成
|
nodeType表示一个节点的类型
不同的节点类型，对应的节点类型值是不一样的
如本例：
document.nodeType 文档的节点类型，是 9
div1.nodeType 元素的节点类型，是 1
div1.attributes[0].nodeType 属性的节点类型，是 2
div1.childNodes[0].nodeType 内容的节点类型，是 3
");
window.frames["iframe_show1177"].document.write(decodeHtml($("textarea#stepcodeTextarea1177").val()));
window.frames["iframe_show1177"].document.close();
$(window.frames["iframe_show1177"]).load(function(){
$("#iframe_show1177").height($("#iframe_show1177").contents().find("body").height()+showittryitheight);
});
$("#iframe_show1177").height($("#iframe_show1177").contents().find("body").height()+showittryitheight);
setTimeout(function(){
},500);
});
<html>
<div id="d1">hello HTML DOM</div>
<script>
function p(s){
document.write(s);
document.write("<br>");
}
var div1 = document.getElementById("d1");
p("document的nodeType是："+document.nodeType);
p("元素节点的nodeType是："+div1.nodeType);
p("属性节点的nodeType是："+div1.attributes[0].nodeType);
p("内容节点的nodeType是："+div1.childNodes[0].nodeType);
</script>
</html>
<html>
<div id="d1">hello HTML DOM</div>
<script>
function p(s){
document.write(s);
document.write("<br>");
}
var div1 = document.getElementById("d1");
p("document的nodeType是："+document.nodeType);
p("元素节点的nodeType是："+div1.nodeType);
p("属性节点的nodeType是："+div1.attributes[0].nodeType);
p("内容节点的nodeType是："+div1.childNodes[0].nodeType);
</script>
</html>
");
window.frames["iframe1177"].document.write(decodeHtml(code1177));
window.frames["iframe1177"].document.close();
//load和下面的非load必需并存，因为如果代码用到了jquery就必须使用load的方式
$(window.frames["iframe1177"]).load(function(){
$("#iframe1177").height($("#iframe1177").contents().find("body").height()+showittryitheight);
});
$("#iframe1177").height($("#iframe1177").contents().find("body").height()+showittryitheight);
alreadyWriteCode1177 = code1177;
$("#rendering1177").hide();
$("#rendered1177").show();
}
var tRereshRetry2DemoPanel1177 = setInterval(rereshRetry2DemoPanel1177,1000);
var binded1177 = false;
$("textarea#stepcodeTextarea1177").keyup(function(){
if(!binded1177){
$(window).bind('beforeunload',function(){
binded1177 = true;
return "xxxx";
});
}
var newCode = $(this).val()
code1177 = newCode;
/*below code is replaced by function rereshRetry2DemoPanel()*/
// if(code1177!=newCode){
// window.frames["iframe1177"].document.write("
");
// window.frames["iframe1177"].document.write(decodeHtml($("textarea#stepcodeTextarea1177").val()));
// window.frames["iframe1177"].document.close();
// $(window.frames["iframe1177"]).load(function(){
// $("#iframe1177").height($("#iframe1177").contents().find("body").height()+showittryitheight);
// });
// code1177 = newCode;
// }
});
$(".tryButton1177").click(function(){
$("#tryDiv1177").show();
$("#stepcodeTextarea1177").focus();
$("#stepcodeTextarea1177").height(200);
$("#iframe1177").height(0);
window.frames["iframe1177"].document.write("
");
window.frames["iframe1177"].document.write(decodeHtml($("textarea#stepcodeTextarea1177").val()));
window.frames["iframe1177"].document.close();
//load和下面的非load必需并存，因为如果代码用到了jquery就必须使用load的方式
$(window.frames["iframe1177"]).load(function(){
$("#iframe1177").height($("#iframe1177").contents().find("body").height()+showittryitheight);
});
$("#iframe1177").height($("#iframe1177").contents().find("body").height()+showittryitheight);
this.scrollIntoView(true);
editor1177.focus();
editor1177.setSize(null, "250");
$("#rendering1177").hide();
$("#rendered1177").hide();
});
var mixedMode = {
name: "htmlmixed",
scriptTypes: [{matches: /\/x-handlebars-template|\/x-mustache/i,
mode: null},
{matches: /(text|application)\/(x-)?vb(a|script)/i,
mode: "vbscript"}]
};
var editor1177 = CodeMirror.fromTextArea(document.getElementById("stepcodeTextarea1177"), {
lineNumbers: true,
styleActiveLine: true,
matchBrackets: true,
mode:"text/html",
theme:"eclipse",
selectionPointer: true,
lineWrapping: true,
extraKeys: {
"Alt-/": "autocomplete",
"Ctrl-F": "findPersistent",
"F8": function(cm) {
cm.setOption("fullScreen", !cm.getOption("fullScreen"));
},
"Esc": function(cm) {
if (cm.getOption("fullScreen")) cm.setOption("fullScreen", false);
}
}
});
editor1177.on("change",function(doc){
if(!binded1177){
$(window).bind('beforeunload',function(){
binded1177 = true;
return "xxxx";
});
}
var newCode = doc.getValue();
code1177 = newCode;
$("textarea#stepcodeTextarea1177").val(newCode);
if(alreadyWriteCode1177!=code1177){
lastModifedTime1177 = new Date().getTime();
$("#rendering1177").show();
$("#rendered1177").hide();
}
// alert(doc.getValue());
});
$(".CodeMirror").addClass("form-control");
// var editor1177 = CodeMirror.fromTextArea(, {
// lineNumbers: true,
// styleActiveLine: true,
// matchBrackets: true,
// theme:"eclipse",
// });
editor1177.on("change",function(doc){
// alert(doc.getValue());
});
$("#tryDiv1177").hide();
});
$("div.codemirrorTips span").addClass("glyphicon glyphicon-asterisk");
1. 双击选中单词
2. 三击选中整行
3. CTRL+F 查找
4. F8 全屏编辑，再次点击恢复
|
|
渲染中
渲染完成
|
修改与获取内容的值可以通过 childNodes[0].nodeValue进行
还有个简便办法就是通过innerHTML进行。 效果是一样的。
");
window.frames["iframe_show1178"].document.write(decodeHtml($("textarea#stepcodeTextarea1178").val()));
window.frames["iframe_show1178"].document.close();
$(window.frames["iframe_show1178"]).load(function(){
$("#iframe_show1178").height($("#iframe_show1178").contents().find("body").height()+showittryitheight);
});
$("#iframe_show1178").height($("#iframe_show1178").contents().find("body").height()+showittryitheight);
setTimeout(function(){
},500);
});
<html>
<div id="d1">hello HTML DOM</div>
<script>
function changeDiv1(){
document.getElementById("d1").childNodes[0].nodeValue= "通过childNode[0].value改变内容";
}
function changeDiv2(){
document.getElementById("d1").innerHTML= "通过innerHTML改变内容";
}
</script>
<button onclick="changeDiv1()">通过内容节点方式改变div的内容</button>
<button onclick="changeDiv2()">通过innerHTML改变div的内容</button>
</html>
<html>
<div id="d1">hello HTML DOM</div>
<script>
function changeDiv1(){
document.getElementById("d1").childNodes[0].nodeValue= "通过childNode[0].value改变内容";
}
function changeDiv2(){
document.getElementById("d1").innerHTML= "通过innerHTML改变内容";
}
</script>
<button onclick="changeDiv1()">通过内容节点方式改变div的内容</button>
<button onclick="changeDiv2()">通过innerHTML改变div的内容</button>
</html>
");
window.frames["iframe1178"].document.write(decodeHtml(code1178));
window.frames["iframe1178"].document.close();
//load和下面的非load必需并存，因为如果代码用到了jquery就必须使用load的方式
$(window.frames["iframe1178"]).load(function(){
$("#iframe1178").height($("#iframe1178").contents().find("body").height()+showittryitheight);
});
$("#iframe1178").height($("#iframe1178").contents().find("body").height()+showittryitheight);
alreadyWriteCode1178 = code1178;
$("#rendering1178").hide();
$("#rendered1178").show();
}
var tRereshRetry2DemoPanel1178 = setInterval(rereshRetry2DemoPanel1178,1000);
var binded1178 = false;
$("textarea#stepcodeTextarea1178").keyup(function(){
if(!binded1178){
$(window).bind('beforeunload',function(){
binded1178 = true;
return "xxxx";
});
}
var newCode = $(this).val()
code1178 = newCode;
/*below code is replaced by function rereshRetry2DemoPanel()*/
// if(code1178!=newCode){
// window.frames["iframe1178"].document.write("
");
// window.frames["iframe1178"].document.write(decodeHtml($("textarea#stepcodeTextarea1178").val()));
// window.frames["iframe1178"].document.close();
// $(window.frames["iframe1178"]).load(function(){
// $("#iframe1178").height($("#iframe1178").contents().find("body").height()+showittryitheight);
// });
// code1178 = newCode;
// }
});
$(".tryButton1178").click(function(){
$("#tryDiv1178").show();
$("#stepcodeTextarea1178").focus();
$("#stepcodeTextarea1178").height(200);
$("#iframe1178").height(0);
window.frames["iframe1178"].document.write("
");
window.frames["iframe1178"].document.write(decodeHtml($("textarea#stepcodeTextarea1178").val()));
window.frames["iframe1178"].document.close();
//load和下面的非load必需并存，因为如果代码用到了jquery就必须使用load的方式
$(window.frames["iframe1178"]).load(function(){
$("#iframe1178").height($("#iframe1178").contents().find("body").height()+showittryitheight);
});
$("#iframe1178").height($("#iframe1178").contents().find("body").height()+showittryitheight);
this.scrollIntoView(true);
editor1178.focus();
editor1178.setSize(null, "250");
$("#rendering1178").hide();
$("#rendered1178").hide();
});
var mixedMode = {
name: "htmlmixed",
scriptTypes: [{matches: /\/x-handlebars-template|\/x-mustache/i,
mode: null},
{matches: /(text|application)\/(x-)?vb(a|script)/i,
mode: "vbscript"}]
};
var editor1178 = CodeMirror.fromTextArea(document.getElementById("stepcodeTextarea1178"), {
lineNumbers: true,
styleActiveLine: true,
matchBrackets: true,
mode:"text/html",
theme:"eclipse",
selectionPointer: true,
lineWrapping: true,
extraKeys: {
"Alt-/": "autocomplete",
"Ctrl-F": "findPersistent",
"F8": function(cm) {
cm.setOption("fullScreen", !cm.getOption("fullScreen"));
},
"Esc": function(cm) {
if (cm.getOption("fullScreen")) cm.setOption("fullScreen", false);
}
}
});
editor1178.on("change",function(doc){
if(!binded1178){
$(window).bind('beforeunload',function(){
binded1178 = true;
return "xxxx";
});
}
var newCode = doc.getValue();
code1178 = newCode;
$("textarea#stepcodeTextarea1178").val(newCode);
if(alreadyWriteCode1178!=code1178){
lastModifedTime1178 = new Date().getTime();
$("#rendering1178").show();
$("#rendered1178").hide();
}
// alert(doc.getValue());
});
$(".CodeMirror").addClass("form-control");
// var editor1178 = CodeMirror.fromTextArea(, {
// lineNumbers: true,
// styleActiveLine: true,
// matchBrackets: true,
// theme:"eclipse",
// });
editor1178.on("change",function(doc){
// alert(doc.getValue());
});
$("#tryDiv1178").hide();
});
$("div.codemirrorTips span").addClass("glyphicon glyphicon-asterisk");
1. 双击选中单词
2. 三击选中整行
3. CTRL+F 查找
4. F8 全屏编辑，再次点击恢复
|
|
渲染中
渲染完成
|
元素上的属性，比如id,value 可以通过 . 直接访问 如果是自定义属性，那么可以通过如下两种方式来获取
getAttribute("test")
attributes["test"].nodeValue
注: class需要通过className获取
");
window.frames["iframe_show1197"].document.write(decodeHtml($("textarea#stepcodeTextarea1197").val()));
window.frames["iframe_show1197"].document.close();
$(window.frames["iframe_show1197"]).load(function(){
$("#iframe_show1197").height($("#iframe_show1197").contents().find("body").height()+showittryitheight);
});
$("#iframe_show1197").height($("#iframe_show1197").contents().find("body").height()+showittryitheight);
setTimeout(function(){
},500);
});
<html>
<div id="d1">hello HTML DOM</div>
<script>
function get(){
var input1 = document.getElementById("input1");
var s = "id="+input1.id + "<br>";
s += "value="+input1.value + "<br>";
s += "class="+input1.className + "<br>";
s += "test="+input1.getAttribute("test")+ "<br>";
s += "test="+input1.attributes["test"].nodeValue+ "<br>";
document.getElementById("d1").innerHTML= s;
}
</script>
<input id="input1" class="class1 class2" test="t1" value="这是一个输入框">
<br>
<button onclick="get()">获取input的属性</button>
<div style="height:30px"></div>
</html>
<html>
<div id="d1">hello HTML DOM</div>
<script>
function get(){
var input1 = document.getElementById("input1");
var s = "id="+input1.id + "<br>";
s += "value="+input1.value + "<br>";
s += "class="+input1.className + "<br>";
s += "test="+input1.getAttribute("test")+ "<br>";
s += "test="+input1.attributes["test"].nodeValue+ "<br>";
document.getElementById("d1").innerHTML= s;
}
</script>
<input id="input1" class="class1 class2" test="t1" value="这是一个输入框">
<br>
<button onclick="get()">获取input的属性</button>
<div style="height:30px"></div>
</html>
");
window.frames["iframe1197"].document.write(decodeHtml(code1197));
window.frames["iframe1197"].document.close();
//load和下面的非load必需并存，因为如果代码用到了jquery就必须使用load的方式
$(window.frames["iframe1197"]).load(function(){
$("#iframe1197").height($("#iframe1197").contents().find("body").height()+showittryitheight);
});
$("#iframe1197").height($("#iframe1197").contents().find("body").height()+showittryitheight);
alreadyWriteCode1197 = code1197;
$("#rendering1197").hide();
$("#rendered1197").show();
}
var tRereshRetry2DemoPanel1197 = setInterval(rereshRetry2DemoPanel1197,1000);
var binded1197 = false;
$("textarea#stepcodeTextarea1197").keyup(function(){
if(!binded1197){
$(window).bind('beforeunload',function(){
binded1197 = true;
return "xxxx";
});
}
var newCode = $(this).val()
code1197 = newCode;
/*below code is replaced by function rereshRetry2DemoPanel()*/
// if(code1197!=newCode){
// window.frames["iframe1197"].document.write("
");
// window.frames["iframe1197"].document.write(decodeHtml($("textarea#stepcodeTextarea1197").val()));
// window.frames["iframe1197"].document.close();
// $(window.frames["iframe1197"]).load(function(){
// $("#iframe1197").height($("#iframe1197").contents().find("body").height()+showittryitheight);
// });
// code1197 = newCode;
// }
});
$(".tryButton1197").click(function(){
$("#tryDiv1197").show();
$("#stepcodeTextarea1197").focus();
$("#stepcodeTextarea1197").height(200);
$("#iframe1197").height(0);
window.frames["iframe1197"].document.write("
");
window.frames["iframe1197"].document.write(decodeHtml($("textarea#stepcodeTextarea1197").val()));
window.frames["iframe1197"].document.close();
//load和下面的非load必需并存，因为如果代码用到了jquery就必须使用load的方式
$(window.frames["iframe1197"]).load(function(){
$("#iframe1197").height($("#iframe1197").contents().find("body").height()+showittryitheight);
});
$("#iframe1197").height($("#iframe1197").contents().find("body").height()+showittryitheight);
this.scrollIntoView(true);
editor1197.focus();
editor1197.setSize(null, "250");
$("#rendering1197").hide();
$("#rendered1197").hide();
});
var mixedMode = {
name: "htmlmixed",
scriptTypes: [{matches: /\/x-handlebars-template|\/x-mustache/i,
mode: null},
{matches: /(text|application)\/(x-)?vb(a|script)/i,
mode: "vbscript"}]
};
var editor1197 = CodeMirror.fromTextArea(document.getElementById("stepcodeTextarea1197"), {
lineNumbers: true,
styleActiveLine: true,
matchBrackets: true,
mode:"text/html",
theme:"eclipse",
selectionPointer: true,
lineWrapping: true,
extraKeys: {
"Alt-/": "autocomplete",
"Ctrl-F": "findPersistent",
"F8": function(cm) {
cm.setOption("fullScreen", !cm.getOption("fullScreen"));
},
"Esc": function(cm) {
if (cm.getOption("fullScreen")) cm.setOption("fullScreen", false);
}
}
});
editor1197.on("change",function(doc){
if(!binded1197){
$(window).bind('beforeunload',function(){
binded1197 = true;
return "xxxx";
});
}
var newCode = doc.getValue();
code1197 = newCode;
$("textarea#stepcodeTextarea1197").val(newCode);
if(alreadyWriteCode1197!=code1197){
lastModifedTime1197 = new Date().getTime();
$("#rendering1197").show();
$("#rendered1197").hide();
}
// alert(doc.getValue());
});
$(".CodeMirror").addClass("form-control");
// var editor1197 = CodeMirror.fromTextArea(, {
// lineNumbers: true,
// styleActiveLine: true,
// matchBrackets: true,
// theme:"eclipse",
// });
editor1197.on("change",function(doc){
// alert(doc.getValue());
});
$("#tryDiv1197").hide();
});
$("div.codemirrorTips span").addClass("glyphicon glyphicon-asterisk");
1. 双击选中单词
2. 三击选中整行
3. CTRL+F 查找
4. F8 全屏编辑，再次点击恢复
|
|
渲染中
渲染完成
|
因为截至目前的学习进度，还没有学习服务端的内容，那么就在js使用简单的验证规则： 如果账号是以a或者A开头的，那么就提示已经存在了。
");
window.frames["iframe_show2925"].document.write(decodeHtml($("textarea#stepcodeTextarea2925").val()));
window.frames["iframe_show2925"].document.close();
$(window.frames["iframe_show2925"]).load(function(){
$("#iframe_show2925").height($("#iframe_show2925").contents().find("body").height()+showittryitheight);
});
$("#iframe_show2925").height($("#iframe_show2925").contents().find("body").height()+showittryitheight);
setTimeout(function(){
},500);
});
<html>
<script>
function check(){
var name = document.getElementById("name").value;
var noMessage= document.getElementById("noMessage");
var yesMessage= document.getElementById("yesMessage");
noMessage.style.display="none";
yesMessage.style.display="none";
if(0!=name.length){
var firstChar = name.charAt(0);
if('a'==firstChar || 'A'==firstChar)
noMessage.style.display="inline";
else
yesMessage.style.display="inline";
}
}
</script>
<input id="name">
<input type="button" value="验证" onclick="check()">
<span id="noMessage" style="color:red;display:none;">账号已经存在</span>
<span id="yesMessage" style="color:green;display:none;">账号可以使用</span>
</html>
<html>
<script>
function check(){
var name = document.getElementById("name").value;
var noMessage= document.getElementById("noMessage");
var yesMessage= document.getElementById("yesMessage");
noMessage.style.display="none";
yesMessage.style.display="none";
if(0!=name.length){
var firstChar = name.charAt(0);
if('a'==firstChar || 'A'==firstChar)
noMessage.style.display="inline";
else
yesMessage.style.display="inline";
}
}
</script>
<input id="name">
<input type="button" value="验证" onclick="check()">
<span id="noMessage" style="color:red;display:none;">账号已经存在</span>
<span id="yesMessage" style="color:green;display:none;">账号可以使用</span>
</html>
");
window.frames["iframe2925"].document.write(decodeHtml(code2925));
window.frames["iframe2925"].document.close();
//load和下面的非load必需并存，因为如果代码用到了jquery就必须使用load的方式
$(window.frames["iframe2925"]).load(function(){
$("#iframe2925").height($("#iframe2925").contents().find("body").height()+showittryitheight);
});
$("#iframe2925").height($("#iframe2925").contents().find("body").height()+showittryitheight);
alreadyWriteCode2925 = code2925;
$("#rendering2925").hide();
$("#rendered2925").show();
}
var tRereshRetry2DemoPanel2925 = setInterval(rereshRetry2DemoPanel2925,1000);
var binded2925 = false;
$("textarea#stepcodeTextarea2925").keyup(function(){
if(!binded2925){
$(window).bind('beforeunload',function(){
binded2925 = true;
return "xxxx";
});
}
var newCode = $(this).val()
code2925 = newCode;
/*below code is replaced by function rereshRetry2DemoPanel()*/
// if(code2925!=newCode){
// window.frames["iframe2925"].document.write("
");
// window.frames["iframe2925"].document.write(decodeHtml($("textarea#stepcodeTextarea2925").val()));
// window.frames["iframe2925"].document.close();
// $(window.frames["iframe2925"]).load(function(){
// $("#iframe2925").height($("#iframe2925").contents().find("body").height()+showittryitheight);
// });
// code2925 = newCode;
// }
});
$(".tryButton2925").click(function(){
$("#tryDiv2925").show();
$("#stepcodeTextarea2925").focus();
$("#stepcodeTextarea2925").height(200);
$("#iframe2925").height(0);
window.frames["iframe2925"].document.write("
");
window.frames["iframe2925"].document.write(decodeHtml($("textarea#stepcodeTextarea2925").val()));
window.frames["iframe2925"].document.close();
//load和下面的非load必需并存，因为如果代码用到了jquery就必须使用load的方式
$(window.frames["iframe2925"]).load(function(){
$("#iframe2925").height($("#iframe2925").contents().find("body").height()+showittryitheight);
});
$("#iframe2925").height($("#iframe2925").contents().find("body").height()+showittryitheight);
this.scrollIntoView(true);
editor2925.focus();
editor2925.setSize(null, "250");
$("#rendering2925").hide();
$("#rendered2925").hide();
});
var mixedMode = {
name: "htmlmixed",
scriptTypes: [{matches: /\/x-handlebars-template|\/x-mustache/i,
mode: null},
{matches: /(text|application)\/(x-)?vb(a|script)/i,
mode: "vbscript"}]
};
var editor2925 = CodeMirror.fromTextArea(document.getElementById("stepcodeTextarea2925"), {
lineNumbers: true,
styleActiveLine: true,
matchBrackets: true,
mode:"text/html",
theme:"eclipse",
selectionPointer: true,
lineWrapping: true,
extraKeys: {
"Alt-/": "autocomplete",
"Ctrl-F": "findPersistent",
"F8": function(cm) {
cm.setOption("fullScreen", !cm.getOption("fullScreen"));
},
"Esc": function(cm) {
if (cm.getOption("fullScreen")) cm.setOption("fullScreen", false);
}
}
});
editor2925.on("change",function(doc){
if(!binded2925){
$(window).bind('beforeunload',function(){
binded2925 = true;
return "xxxx";
});
}
var newCode = doc.getValue();
code2925 = newCode;
$("textarea#stepcodeTextarea2925").val(newCode);
if(alreadyWriteCode2925!=code2925){
lastModifedTime2925 = new Date().getTime();
$("#rendering2925").show();
$("#rendered2925").hide();
}
// alert(doc.getValue());
});
$(".CodeMirror").addClass("form-control");
// var editor2925 = CodeMirror.fromTextArea(, {
// lineNumbers: true,
// styleActiveLine: true,
// matchBrackets: true,
// theme:"eclipse",
// });
editor2925.on("change",function(doc){
// alert(doc.getValue());
});
$("#tryDiv2925").hide();
});
$("div.codemirrorTips span").addClass("glyphicon glyphicon-asterisk");
1. 双击选中单词
2. 三击选中整行
3. CTRL+F 查找
4. F8 全屏编辑，再次点击恢复
|
|
渲染中
渲染完成
|
请先登录
在查看答案前，尽量先自己完成，碰到问题再来查看答案，收获会更多
");
window.frames["iframe_show2927"].document.write(decodeHtml($("textarea#stepcodeTextarea2927").val()));
window.frames["iframe_show2927"].document.close();
$(window.frames["iframe_show2927"]).load(function(){
$("#iframe_show2927").height($("#iframe_show2927").contents().find("body").height()+showittryitheight);
});
$("#iframe_show2927").height($("#iframe_show2927").contents().find("body").height()+showittryitheight);
setTimeout(function(){
},500);
});
<script>
function switch1(){
var img = document.getElementById("img");
img.src = "http://127.0.0.1/study/gareen.jpg";
}
function switch2(){
var img = document.getElementById("img");
img.attributes["src"].nodeValue="http://127.0.0.1/study/katarina.jpg";
}
</script>
<button onclick="switch1()">通过src属性切换图片1</button> <br>
<button onclick="switch2()">通过属性节点切换图片2</button> <br>
<img id="img" width="100" src="http://127.0.0.1/study/katarina.jpg"/>
<script>
function switch1(){
var img = document.getElementById("img");
img.src = "http://127.0.0.1/study/gareen.jpg";
}
function switch2(){
var img = document.getElementById("img");
img.attributes["src"].nodeValue="http://127.0.0.1/study/katarina.jpg";
}
</script>
<button onclick="switch1()">通过src属性切换图片1</button> <br>
<button onclick="switch2()">通过属性节点切换图片2</button> <br>
<img id="img" width="100" src="http://127.0.0.1/study/katarina.jpg"/>
");
window.frames["iframe2927"].document.write(decodeHtml(code2927));
window.frames["iframe2927"].document.close();
//load和下面的非load必需并存，因为如果代码用到了jquery就必须使用load的方式
$(window.frames["iframe2927"]).load(function(){
$("#iframe2927").height($("#iframe2927").contents().find("body").height()+showittryitheight);
});
$("#iframe2927").height($("#iframe2927").contents().find("body").height()+showittryitheight);
alreadyWriteCode2927 = code2927;
$("#rendering2927").hide();
$("#rendered2927").show();
}
var tRereshRetry2DemoPanel2927 = setInterval(rereshRetry2DemoPanel2927,1000);
var binded2927 = false;
$("textarea#stepcodeTextarea2927").keyup(function(){
if(!binded2927){
$(window).bind('beforeunload',function(){
binded2927 = true;
return "xxxx";
});
}
var newCode = $(this).val()
code2927 = newCode;
/*below code is replaced by function rereshRetry2DemoPanel()*/
// if(code2927!=newCode){
// window.frames["iframe2927"].document.write("
");
// window.frames["iframe2927"].document.write(decodeHtml($("textarea#stepcodeTextarea2927").val()));
// window.frames["iframe2927"].document.close();
// $(window.frames["iframe2927"]).load(function(){
// $("#iframe2927").height($("#iframe2927").contents().find("body").height()+showittryitheight);
// });
// code2927 = newCode;
// }
});
$(".tryButton2927").click(function(){
$("#tryDiv2927").show();
$("#stepcodeTextarea2927").focus();
$("#stepcodeTextarea2927").height(200);
$("#iframe2927").height(0);
window.frames["iframe2927"].document.write("
");
window.frames["iframe2927"].document.write(decodeHtml($("textarea#stepcodeTextarea2927").val()));
window.frames["iframe2927"].document.close();
//load和下面的非load必需并存，因为如果代码用到了jquery就必须使用load的方式
$(window.frames["iframe2927"]).load(function(){
$("#iframe2927").height($("#iframe2927").contents().find("body").height()+showittryitheight);
});
$("#iframe2927").height($("#iframe2927").contents().find("body").height()+showittryitheight);
this.scrollIntoView(true);
editor2927.focus();
editor2927.setSize(null, "250");
$("#rendering2927").hide();
$("#rendered2927").hide();
});
var mixedMode = {
name: "htmlmixed",
scriptTypes: [{matches: /\/x-handlebars-template|\/x-mustache/i,
mode: null},
{matches: /(text|application)\/(x-)?vb(a|script)/i,
mode: "vbscript"}]
};
var editor2927 = CodeMirror.fromTextArea(document.getElementById("stepcodeTextarea2927"), {
lineNumbers: true,
styleActiveLine: true,
matchBrackets: true,
mode:"text/html",
theme:"eclipse",
selectionPointer: true,
lineWrapping: true,
extraKeys: {
"Alt-/": "autocomplete",
"Ctrl-F": "findPersistent",
"F8": function(cm) {
cm.setOption("fullScreen", !cm.getOption("fullScreen"));
},
"Esc": function(cm) {
if (cm.getOption("fullScreen")) cm.setOption("fullScreen", false);
}
}
});
editor2927.on("change",function(doc){
if(!binded2927){
$(window).bind('beforeunload',function(){
binded2927 = true;
return "xxxx";
});
}
var newCode = doc.getValue();
code2927 = newCode;
$("textarea#stepcodeTextarea2927").val(newCode);
if(alreadyWriteCode2927!=code2927){
lastModifedTime2927 = new Date().getTime();
$("#rendering2927").show();
$("#rendered2927").hide();
}
// alert(doc.getValue());
});
$(".CodeMirror").addClass("form-control");
// var editor2927 = CodeMirror.fromTextArea(, {
// lineNumbers: true,
// styleActiveLine: true,
// matchBrackets: true,
// theme:"eclipse",
// });
editor2927.on("change",function(doc){
// alert(doc.getValue());
});
$("#tryDiv2927").hide();
});
$("div.codemirrorTips span").addClass("glyphicon glyphicon-asterisk");
1. 双击选中单词
2. 三击选中整行
3. CTRL+F 查找
4. F8 全屏编辑，再次点击恢复
|
|
渲染中
渲染完成
|
请先登录
在查看答案前，尽量先自己完成，碰到问题再来查看答案，收获会更多
示例
10
:
练习-判断输入框里的值，是否是整数(浮点数也不行)
练习难度
顶
折
 Or
姿势不对,事倍功半!
点击查看做练习的正确姿势
示例
11
:
答案-判断输入框里的值，是否是整数(浮点数也不行)
顶
折
代码高亮插件双击即可选中，不过部分同学反应，通过代码高亮插件复制的代码无法在IDEA里正常显示，这里提供TEXTAREA的方式，方便复制，谢谢
1. 自行完成练习
根据练习目标尽量自己实现代码效果，期间会碰到疑问，难题，和自己不懂的地方，这些都是必要的过程
2. 带着疑问查看答案
完成过程中，碰到无法解决的问题，带着疑问，查看答案，分析答案的解决思路
3. 查看答案讲解视频
依然有不明白的地方，点开视频讲解，带着疑问，听视频讲解有问题的部分
4. 再做一遍
理解后，再从头做一遍，把有疑问的地方都捋清楚
5. 总结
最后再总结一遍，总结思路，总结解决办法，以后遇到类似的问题，怎么处理
HOW2J公众号，关注后实时获知布最新的教程和优惠活动，谢谢。
提问之前请登陆
|
