|
|
工具版本兼容问题
JQuery是一个javascript的框架，是对javascript的一种封装。
通过JQuery可以非常方便的操作html的元素
本例通过JQuery 实现 "隐藏与显示"，并分步讲解每一个步骤的意思
示例
1
:
使用JQuery进行隐藏和显示
示例
2
:
jquery.min.js
示例
3
:
本地测试的时候如何使用 jquery.min.js
示例
4
:
理解 $(function(){})
示例
5
:
通过id获取元素
示例
6
:
增加监听器
示例
7
:
隐藏与显示
示例
1
:
使用JQuery进行隐藏和显示
顶
折
");
window.frames["iframe_show1210"].document.write(decodeHtml($("textarea#stepcodeTextarea1210").val()));
window.frames["iframe_show1210"].document.close();
$(window.frames["iframe_show1210"]).load(function(){
$("#iframe_show1210").height($("#iframe_show1210").contents().find("body").height()+showittryitheight);
});
$("#iframe_show1210").height($("#iframe_show1210").contents().find("body").height()+showittryitheight);
setTimeout(function(){
},500);
});
<script src="http://127.0.0.1/study/jquery.min.js"></script>
<script>
$(function(){
$("#b1").click(function(){
$("#d").hide();
});
$("#b2").click(function(){
$("#d").show();
});
});
</script>
<button id="b1">隐藏div</button>
<button id="b2">显示div</button>
<br>
<br>
<div id="d">
这是一个div
</div>
<script src="http://127.0.0.1/study/jquery.min.js"></script>
<script>
$(function(){
$("#b1").click(function(){
$("#d").hide();
});
$("#b2").click(function(){
$("#d").show();
});
});
</script>
<button id="b1">隐藏div</button>
<button id="b2">显示div</button>
<br>
<br>
<div id="d">
这是一个div
</div>
");
window.frames["iframe1210"].document.write(decodeHtml(code1210));
window.frames["iframe1210"].document.close();
//load和下面的非load必需并存，因为如果代码用到了jquery就必须使用load的方式
$(window.frames["iframe1210"]).load(function(){
$("#iframe1210").height($("#iframe1210").contents().find("body").height()+showittryitheight);
});
$("#iframe1210").height($("#iframe1210").contents().find("body").height()+showittryitheight);
alreadyWriteCode1210 = code1210;
$("#rendering1210").hide();
$("#rendered1210").show();
}
var tRereshRetry2DemoPanel1210 = setInterval(rereshRetry2DemoPanel1210,1000);
var binded1210 = false;
$("textarea#stepcodeTextarea1210").keyup(function(){
if(!binded1210){
$(window).bind('beforeunload',function(){
binded1210 = true;
return "xxxx";
});
}
var newCode = $(this).val()
code1210 = newCode;
/*below code is replaced by function rereshRetry2DemoPanel()*/
// if(code1210!=newCode){
// window.frames["iframe1210"].document.write("
");
// window.frames["iframe1210"].document.write(decodeHtml($("textarea#stepcodeTextarea1210").val()));
// window.frames["iframe1210"].document.close();
// $(window.frames["iframe1210"]).load(function(){
// $("#iframe1210").height($("#iframe1210").contents().find("body").height()+showittryitheight);
// });
// code1210 = newCode;
// }
});
$(".tryButton1210").click(function(){
$("#tryDiv1210").show();
$("#stepcodeTextarea1210").focus();
$("#stepcodeTextarea1210").height(200);
$("#iframe1210").height(0);
window.frames["iframe1210"].document.write("
");
window.frames["iframe1210"].document.write(decodeHtml($("textarea#stepcodeTextarea1210").val()));
window.frames["iframe1210"].document.close();
//load和下面的非load必需并存，因为如果代码用到了jquery就必须使用load的方式
$(window.frames["iframe1210"]).load(function(){
$("#iframe1210").height($("#iframe1210").contents().find("body").height()+showittryitheight);
});
$("#iframe1210").height($("#iframe1210").contents().find("body").height()+showittryitheight);
this.scrollIntoView(true);
editor1210.focus();
editor1210.setSize(null, "250");
$("#rendering1210").hide();
$("#rendered1210").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 editor1210 = CodeMirror.fromTextArea(document.getElementById("stepcodeTextarea1210"), {
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);
}
}
});
editor1210.on("change",function(doc){
if(!binded1210){
$(window).bind('beforeunload',function(){
binded1210 = true;
return "xxxx";
});
}
var newCode = doc.getValue();
code1210 = newCode;
$("textarea#stepcodeTextarea1210").val(newCode);
if(alreadyWriteCode1210!=code1210){
lastModifedTime1210 = new Date().getTime();
$("#rendering1210").show();
$("#rendered1210").hide();
}
// alert(doc.getValue());
});
$(".CodeMirror").addClass("form-control");
// var editor1210 = CodeMirror.fromTextArea(, {
// lineNumbers: true,
// styleActiveLine: true,
// matchBrackets: true,
// theme:"eclipse",
// });
editor1210.on("change",function(doc){
// alert(doc.getValue());
});
$("#tryDiv1210").hide();
});
$("div.codemirrorTips span").addClass("glyphicon glyphicon-asterisk");
1. 双击选中单词
2. 三击选中整行
3. CTRL+F 查找
4. F8 全屏编辑，再次点击恢复
|
|
渲染中
渲染完成
|
要使用Jquery需要导入一个第三方的javascript库 jquery.min.js，可以在右侧下载
<script src="http://127.0.0.1/study/jquery.min.js"></script>
<script src="http://127.0.0.1/study/jquery.min.js"></script>
示例
3
:
本地测试的时候如何使用 jquery.min.js
顶
折
因为学习到目前为止，还没有讲解如何搭建web服务器，所以不能够像本网站上演示的 把jquery.min.js 放在 /study/jquery.min.js 这个地方。
那么本地要测试怎么做呢？
1. 首先在右侧下载 jquery.min.js
2. 把 jquery.min.js和测试的html放在同一个目录下
3. 在测试的html中直接写 src="jquery.min.js"
示例
4
:
理解 $(function(){})
顶
折
$(function(){
});
表示文档加载。看上去略复杂，其实是由下面两种构成：
$();
function(){
}
合并在一起就是：
$(function(){
});
这是为了防止文档在完全加载（就绪）之前运行 jQuery 代码。 换句话说，写在这里面的JQuery代码都是文档加载好之后的。 就不会有获取一个还没有加载好的图片这种问题了。 一样功能，还有另一个写法
$(document).ready(function(){
});
它也是由两部分组成
$(document).ready();
function(){
}
");
window.frames["iframe_show1212"].document.write(decodeHtml($("textarea#stepcodeTextarea1212").val()));
window.frames["iframe_show1212"].document.close();
$(window.frames["iframe_show1212"]).load(function(){
$("#iframe_show1212").height($("#iframe_show1212").contents().find("body").height()+showittryitheight);
});
$("#iframe_show1212").height($("#iframe_show1212").contents().find("body").height()+showittryitheight);
setTimeout(function(){
},500);
});
<script src="http://127.0.0.1/study/jquery.min.js"></script>
<script >
$(function(){
document.write("文档加载成功!");
document.close();
});
</script>
<script src="http://127.0.0.1/study/jquery.min.js"></script>
<script >
$(function(){
document.write("文档加载成功!");
document.close();
});
</script>
");
window.frames["iframe1212"].document.write(decodeHtml(code1212));
window.frames["iframe1212"].document.close();
//load和下面的非load必需并存，因为如果代码用到了jquery就必须使用load的方式
$(window.frames["iframe1212"]).load(function(){
$("#iframe1212").height($("#iframe1212").contents().find("body").height()+showittryitheight);
});
$("#iframe1212").height($("#iframe1212").contents().find("body").height()+showittryitheight);
alreadyWriteCode1212 = code1212;
$("#rendering1212").hide();
$("#rendered1212").show();
}
var tRereshRetry2DemoPanel1212 = setInterval(rereshRetry2DemoPanel1212,1000);
var binded1212 = false;
$("textarea#stepcodeTextarea1212").keyup(function(){
if(!binded1212){
$(window).bind('beforeunload',function(){
binded1212 = true;
return "xxxx";
});
}
var newCode = $(this).val()
code1212 = newCode;
/*below code is replaced by function rereshRetry2DemoPanel()*/
// if(code1212!=newCode){
// window.frames["iframe1212"].document.write("
");
// window.frames["iframe1212"].document.write(decodeHtml($("textarea#stepcodeTextarea1212").val()));
// window.frames["iframe1212"].document.close();
// $(window.frames["iframe1212"]).load(function(){
// $("#iframe1212").height($("#iframe1212").contents().find("body").height()+showittryitheight);
// });
// code1212 = newCode;
// }
});
$(".tryButton1212").click(function(){
$("#tryDiv1212").show();
$("#stepcodeTextarea1212").focus();
$("#stepcodeTextarea1212").height(200);
$("#iframe1212").height(0);
window.frames["iframe1212"].document.write("
");
window.frames["iframe1212"].document.write(decodeHtml($("textarea#stepcodeTextarea1212").val()));
window.frames["iframe1212"].document.close();
//load和下面的非load必需并存，因为如果代码用到了jquery就必须使用load的方式
$(window.frames["iframe1212"]).load(function(){
$("#iframe1212").height($("#iframe1212").contents().find("body").height()+showittryitheight);
});
$("#iframe1212").height($("#iframe1212").contents().find("body").height()+showittryitheight);
this.scrollIntoView(true);
editor1212.focus();
editor1212.setSize(null, "250");
$("#rendering1212").hide();
$("#rendered1212").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 editor1212 = CodeMirror.fromTextArea(document.getElementById("stepcodeTextarea1212"), {
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);
}
}
});
editor1212.on("change",function(doc){
if(!binded1212){
$(window).bind('beforeunload',function(){
binded1212 = true;
return "xxxx";
});
}
var newCode = doc.getValue();
code1212 = newCode;
$("textarea#stepcodeTextarea1212").val(newCode);
if(alreadyWriteCode1212!=code1212){
lastModifedTime1212 = new Date().getTime();
$("#rendering1212").show();
$("#rendered1212").hide();
}
// alert(doc.getValue());
});
$(".CodeMirror").addClass("form-control");
// var editor1212 = CodeMirror.fromTextArea(, {
// lineNumbers: true,
// styleActiveLine: true,
// matchBrackets: true,
// theme:"eclipse",
// });
editor1212.on("change",function(doc){
// alert(doc.getValue());
});
$("#tryDiv1212").hide();
});
$("div.codemirrorTips span").addClass("glyphicon glyphicon-asterisk");
1. 双击选中单词
2. 三击选中整行
3. CTRL+F 查找
4. F8 全屏编辑，再次点击恢复
|
|
渲染中
渲染完成
|
与javascript 通过id获取元素节点的方式(document.getElementById )不同 JQuery通过 $("#id") 就可以获取了 需要注意的是，通过 document.getElementById 获取到的是 DOM里的 元素节点而通过$("#id") 获取到的是一个 JQuery 对象参考 DOM的元素节点 与 JQuery 对象互换
");
window.frames["iframe_show1213"].document.write(decodeHtml($("textarea#stepcodeTextarea1213").val()));
window.frames["iframe_show1213"].document.close();
$(window.frames["iframe_show1213"]).load(function(){
$("#iframe_show1213").height($("#iframe_show1213").contents().find("body").height()+showittryitheight);
});
$("#iframe_show1213").height($("#iframe_show1213").contents().find("body").height()+showittryitheight);
setTimeout(function(){
},500);
});
<script src="http://127.0.0.1/study/jquery.min.js"></script>
<script >
$(function(){
document.write( $("#d") );
document.close();
});
</script>
<div id="d">Hello JQuery</div>
<script src="http://127.0.0.1/study/jquery.min.js"></script>
<script >
$(function(){
document.write( $("#d") );
document.close();
});
</script>
<div id="d">Hello JQuery</div>
");
window.frames["iframe1213"].document.write(decodeHtml(code1213));
window.frames["iframe1213"].document.close();
//load和下面的非load必需并存，因为如果代码用到了jquery就必须使用load的方式
$(window.frames["iframe1213"]).load(function(){
$("#iframe1213").height($("#iframe1213").contents().find("body").height()+showittryitheight);
});
$("#iframe1213").height($("#iframe1213").contents().find("body").height()+showittryitheight);
alreadyWriteCode1213 = code1213;
$("#rendering1213").hide();
$("#rendered1213").show();
}
var tRereshRetry2DemoPanel1213 = setInterval(rereshRetry2DemoPanel1213,1000);
var binded1213 = false;
$("textarea#stepcodeTextarea1213").keyup(function(){
if(!binded1213){
$(window).bind('beforeunload',function(){
binded1213 = true;
return "xxxx";
});
}
var newCode = $(this).val()
code1213 = newCode;
/*below code is replaced by function rereshRetry2DemoPanel()*/
// if(code1213!=newCode){
// window.frames["iframe1213"].document.write("
");
// window.frames["iframe1213"].document.write(decodeHtml($("textarea#stepcodeTextarea1213").val()));
// window.frames["iframe1213"].document.close();
// $(window.frames["iframe1213"]).load(function(){
// $("#iframe1213").height($("#iframe1213").contents().find("body").height()+showittryitheight);
// });
// code1213 = newCode;
// }
});
$(".tryButton1213").click(function(){
$("#tryDiv1213").show();
$("#stepcodeTextarea1213").focus();
$("#stepcodeTextarea1213").height(200);
$("#iframe1213").height(0);
window.frames["iframe1213"].document.write("
");
window.frames["iframe1213"].document.write(decodeHtml($("textarea#stepcodeTextarea1213").val()));
window.frames["iframe1213"].document.close();
//load和下面的非load必需并存，因为如果代码用到了jquery就必须使用load的方式
$(window.frames["iframe1213"]).load(function(){
$("#iframe1213").height($("#iframe1213").contents().find("body").height()+showittryitheight);
});
$("#iframe1213").height($("#iframe1213").contents().find("body").height()+showittryitheight);
this.scrollIntoView(true);
editor1213.focus();
editor1213.setSize(null, "250");
$("#rendering1213").hide();
$("#rendered1213").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 editor1213 = CodeMirror.fromTextArea(document.getElementById("stepcodeTextarea1213"), {
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);
}
}
});
editor1213.on("change",function(doc){
if(!binded1213){
$(window).bind('beforeunload',function(){
binded1213 = true;
return "xxxx";
});
}
var newCode = doc.getValue();
code1213 = newCode;
$("textarea#stepcodeTextarea1213").val(newCode);
if(alreadyWriteCode1213!=code1213){
lastModifedTime1213 = new Date().getTime();
$("#rendering1213").show();
$("#rendered1213").hide();
}
// alert(doc.getValue());
});
$(".CodeMirror").addClass("form-control");
// var editor1213 = CodeMirror.fromTextArea(, {
// lineNumbers: true,
// styleActiveLine: true,
// matchBrackets: true,
// theme:"eclipse",
// });
editor1213.on("change",function(doc){
// alert(doc.getValue());
});
$("#tryDiv1213").hide();
});
$("div.codemirrorTips span").addClass("glyphicon glyphicon-asterisk");
1. 双击选中单词
2. 三击选中整行
3. CTRL+F 查找
4. F8 全屏编辑，再次点击恢复
|
|
渲染中
渲染完成
|
JQuery增加click事件的监听
$("#b1").click(function(){
alert("点击了按钮");
});
这个也是由两部分组成： 1. b1按钮的点击事件
$("#b1").click();
2. 弹出对话框的函数
function(){
alert("点击了按钮");
}
与原生javascript需要 在html元素上增加监听事件不同的是 JQuery 不需要在html元素上进行操作 这样的好处是，html只需要显示内容，特别是业务复杂起来之后维护js代码会更加容易。
");
window.frames["iframe_show1214"].document.write(decodeHtml($("textarea#stepcodeTextarea1214").val()));
window.frames["iframe_show1214"].document.close();
$(window.frames["iframe_show1214"]).load(function(){
$("#iframe_show1214").height($("#iframe_show1214").contents().find("body").height()+showittryitheight);
});
$("#iframe_show1214").height($("#iframe_show1214").contents().find("body").height()+showittryitheight);
setTimeout(function(){
},500);
});
<script src="http://127.0.0.1/study/jquery.min.js"></script>
<script >
$(function(){
$("#b1").click(function(){
alert("点击了按钮");
});
});
</script>
<button id="b1">按钮</button>
<script src="http://127.0.0.1/study/jquery.min.js"></script>
<script >
$(function(){
$("#b1").click(function(){
alert("点击了按钮");
});
});
</script>
<button id="b1">按钮</button>
");
window.frames["iframe1214"].document.write(decodeHtml(code1214));
window.frames["iframe1214"].document.close();
//load和下面的非load必需并存，因为如果代码用到了jquery就必须使用load的方式
$(window.frames["iframe1214"]).load(function(){
$("#iframe1214").height($("#iframe1214").contents().find("body").height()+showittryitheight);
});
$("#iframe1214").height($("#iframe1214").contents().find("body").height()+showittryitheight);
alreadyWriteCode1214 = code1214;
$("#rendering1214").hide();
$("#rendered1214").show();
}
var tRereshRetry2DemoPanel1214 = setInterval(rereshRetry2DemoPanel1214,1000);
var binded1214 = false;
$("textarea#stepcodeTextarea1214").keyup(function(){
if(!binded1214){
$(window).bind('beforeunload',function(){
binded1214 = true;
return "xxxx";
});
}
var newCode = $(this).val()
code1214 = newCode;
/*below code is replaced by function rereshRetry2DemoPanel()*/
// if(code1214!=newCode){
// window.frames["iframe1214"].document.write("
");
// window.frames["iframe1214"].document.write(decodeHtml($("textarea#stepcodeTextarea1214").val()));
// window.frames["iframe1214"].document.close();
// $(window.frames["iframe1214"]).load(function(){
// $("#iframe1214").height($("#iframe1214").contents().find("body").height()+showittryitheight);
// });
// code1214 = newCode;
// }
});
$(".tryButton1214").click(function(){
$("#tryDiv1214").show();
$("#stepcodeTextarea1214").focus();
$("#stepcodeTextarea1214").height(200);
$("#iframe1214").height(0);
window.frames["iframe1214"].document.write("
");
window.frames["iframe1214"].document.write(decodeHtml($("textarea#stepcodeTextarea1214").val()));
window.frames["iframe1214"].document.close();
//load和下面的非load必需并存，因为如果代码用到了jquery就必须使用load的方式
$(window.frames["iframe1214"]).load(function(){
$("#iframe1214").height($("#iframe1214").contents().find("body").height()+showittryitheight);
});
$("#iframe1214").height($("#iframe1214").contents().find("body").height()+showittryitheight);
this.scrollIntoView(true);
editor1214.focus();
editor1214.setSize(null, "250");
$("#rendering1214").hide();
$("#rendered1214").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 editor1214 = CodeMirror.fromTextArea(document.getElementById("stepcodeTextarea1214"), {
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);
}
}
});
editor1214.on("change",function(doc){
if(!binded1214){
$(window).bind('beforeunload',function(){
binded1214 = true;
return "xxxx";
});
}
var newCode = doc.getValue();
code1214 = newCode;
$("textarea#stepcodeTextarea1214").val(newCode);
if(alreadyWriteCode1214!=code1214){
lastModifedTime1214 = new Date().getTime();
$("#rendering1214").show();
$("#rendered1214").hide();
}
// alert(doc.getValue());
});
$(".CodeMirror").addClass("form-control");
// var editor1214 = CodeMirror.fromTextArea(, {
// lineNumbers: true,
// styleActiveLine: true,
// matchBrackets: true,
// theme:"eclipse",
// });
editor1214.on("change",function(doc){
// alert(doc.getValue());
});
$("#tryDiv1214").hide();
});
$("div.codemirrorTips span").addClass("glyphicon glyphicon-asterisk");
1. 双击选中单词
2. 三击选中整行
3. CTRL+F 查找
4. F8 全屏编辑，再次点击恢复
|
|
渲染中
渲染完成
|
通过$("#d")拿到div对象后，直接调用hide()和show()方法，即可实现隐藏和显示。
");
window.frames["iframe_show1215"].document.write(decodeHtml($("textarea#stepcodeTextarea1215").val()));
window.frames["iframe_show1215"].document.close();
$(window.frames["iframe_show1215"]).load(function(){
$("#iframe_show1215").height($("#iframe_show1215").contents().find("body").height()+showittryitheight);
});
$("#iframe_show1215").height($("#iframe_show1215").contents().find("body").height()+showittryitheight);
setTimeout(function(){
},500);
});
<script src="http://127.0.0.1/study/jquery.min.js"></script>
<script>
$(function(){
$("#b1").click(function(){
$("#d").hide();
});
$("#b2").click(function(){
$("#d").show();
});
});
</script>
<button id="b1">隐藏div</button>
<button id="b2">显示div</button>
<br>
<br>
<div id="d">
这是一个div
</div>
<script src="http://127.0.0.1/study/jquery.min.js"></script>
<script>
$(function(){
$("#b1").click(function(){
$("#d").hide();
});
$("#b2").click(function(){
$("#d").show();
});
});
</script>
<button id="b1">隐藏div</button>
<button id="b2">显示div</button>
<br>
<br>
<div id="d">
这是一个div
</div>
");
window.frames["iframe1215"].document.write(decodeHtml(code1215));
window.frames["iframe1215"].document.close();
//load和下面的非load必需并存，因为如果代码用到了jquery就必须使用load的方式
$(window.frames["iframe1215"]).load(function(){
$("#iframe1215").height($("#iframe1215").contents().find("body").height()+showittryitheight);
});
$("#iframe1215").height($("#iframe1215").contents().find("body").height()+showittryitheight);
alreadyWriteCode1215 = code1215;
$("#rendering1215").hide();
$("#rendered1215").show();
}
var tRereshRetry2DemoPanel1215 = setInterval(rereshRetry2DemoPanel1215,1000);
var binded1215 = false;
$("textarea#stepcodeTextarea1215").keyup(function(){
if(!binded1215){
$(window).bind('beforeunload',function(){
binded1215 = true;
return "xxxx";
});
}
var newCode = $(this).val()
code1215 = newCode;
/*below code is replaced by function rereshRetry2DemoPanel()*/
// if(code1215!=newCode){
// window.frames["iframe1215"].document.write("
");
// window.frames["iframe1215"].document.write(decodeHtml($("textarea#stepcodeTextarea1215").val()));
// window.frames["iframe1215"].document.close();
// $(window.frames["iframe1215"]).load(function(){
// $("#iframe1215").height($("#iframe1215").contents().find("body").height()+showittryitheight);
// });
// code1215 = newCode;
// }
});
$(".tryButton1215").click(function(){
$("#tryDiv1215").show();
$("#stepcodeTextarea1215").focus();
$("#stepcodeTextarea1215").height(200);
$("#iframe1215").height(0);
window.frames["iframe1215"].document.write("
");
window.frames["iframe1215"].document.write(decodeHtml($("textarea#stepcodeTextarea1215").val()));
window.frames["iframe1215"].document.close();
//load和下面的非load必需并存，因为如果代码用到了jquery就必须使用load的方式
$(window.frames["iframe1215"]).load(function(){
$("#iframe1215").height($("#iframe1215").contents().find("body").height()+showittryitheight);
});
$("#iframe1215").height($("#iframe1215").contents().find("body").height()+showittryitheight);
this.scrollIntoView(true);
editor1215.focus();
editor1215.setSize(null, "250");
$("#rendering1215").hide();
$("#rendered1215").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 editor1215 = CodeMirror.fromTextArea(document.getElementById("stepcodeTextarea1215"), {
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);
}
}
});
editor1215.on("change",function(doc){
if(!binded1215){
$(window).bind('beforeunload',function(){
binded1215 = true;
return "xxxx";
});
}
var newCode = doc.getValue();
code1215 = newCode;
$("textarea#stepcodeTextarea1215").val(newCode);
if(alreadyWriteCode1215!=code1215){
lastModifedTime1215 = new Date().getTime();
$("#rendering1215").show();
$("#rendered1215").hide();
}
// alert(doc.getValue());
});
$(".CodeMirror").addClass("form-control");
// var editor1215 = CodeMirror.fromTextArea(, {
// lineNumbers: true,
// styleActiveLine: true,
// matchBrackets: true,
// theme:"eclipse",
// });
editor1215.on("change",function(doc){
// alert(doc.getValue());
});
$("#tryDiv1215").hide();
});
$("div.codemirrorTips span").addClass("glyphicon glyphicon-asterisk");
1. 双击选中单词
2. 三击选中整行
3. CTRL+F 查找
4. F8 全屏编辑，再次点击恢复
|
|
渲染中
渲染完成
|
代码高亮插件双击即可选中，不过部分同学反应，通过代码高亮插件复制的代码无法在IDEA里正常显示，这里提供TEXTAREA的方式，方便复制，谢谢
1. 自行完成练习
根据练习目标尽量自己实现代码效果，期间会碰到疑问，难题，和自己不懂的地方，这些都是必要的过程
2. 带着疑问查看答案
完成过程中，碰到无法解决的问题，带着疑问，查看答案，分析答案的解决思路
3. 查看答案讲解视频
依然有不明白的地方，点开视频讲解，带着疑问，听视频讲解有问题的部分
4. 再做一遍
理解后，再从头做一遍，把有疑问的地方都捋清楚
5. 总结
最后再总结一遍，总结思路，总结解决办法，以后遇到类似的问题，怎么处理
HOW2J公众号，关注后实时获知布最新的教程和优惠活动，谢谢。
提问之前请登陆
|
