|
|
| 关键字 |
简介 |
示例代码 |
|
addClass
|
增加class
|
示例代码
|
|
removeClass
|
删除class
|
示例代码
|
|
toggleClass
|
切换class
|
示例代码
|
|
css
|
css函数
|
示例代码
|
示例
1
:
增加class
示例
2
:
删除class
示例
3
:
切换class
示例
4
:
css函数
通过addClass() 增加一个样式中的class
");
window.frames["iframe_show983"].document.write(decodeHtml($("textarea#stepcodeTextarea983").val()));
window.frames["iframe_show983"].document.close();
$(window.frames["iframe_show983"]).load(function(){
$("#iframe_show983").height($("#iframe_show983").contents().find("body").height()+showittryitheight);
});
$("#iframe_show983").height($("#iframe_show983").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").addClass("pink");
});
});
</script>
<button id="b1">增加背景色</button>
<br>
<br>
<style>
.pink{
background-color:pink;
}
</style>
<div id="d">
Hello JQuery
</div>
<script src="http://127.0.0.1/study/jquery.min.js"></script>
<script>
$(function(){
$("#b1").click(function(){
$("#d").addClass("pink");
});
});
</script>
<button id="b1">增加背景色</button>
<br>
<br>
<style>
.pink{
background-color:pink;
}
</style>
<div id="d">
Hello JQuery
</div>
");
window.frames["iframe983"].document.write(decodeHtml(code983));
window.frames["iframe983"].document.close();
//load和下面的非load必需并存，因为如果代码用到了jquery就必须使用load的方式
$(window.frames["iframe983"]).load(function(){
$("#iframe983").height($("#iframe983").contents().find("body").height()+showittryitheight);
});
$("#iframe983").height($("#iframe983").contents().find("body").height()+showittryitheight);
alreadyWriteCode983 = code983;
$("#rendering983").hide();
$("#rendered983").show();
}
var tRereshRetry2DemoPanel983 = setInterval(rereshRetry2DemoPanel983,1000);
var binded983 = false;
$("textarea#stepcodeTextarea983").keyup(function(){
if(!binded983){
$(window).bind('beforeunload',function(){
binded983 = true;
return "xxxx";
});
}
var newCode = $(this).val()
code983 = newCode;
/*below code is replaced by function rereshRetry2DemoPanel()*/
// if(code983!=newCode){
// window.frames["iframe983"].document.write("
");
// window.frames["iframe983"].document.write(decodeHtml($("textarea#stepcodeTextarea983").val()));
// window.frames["iframe983"].document.close();
// $(window.frames["iframe983"]).load(function(){
// $("#iframe983").height($("#iframe983").contents().find("body").height()+showittryitheight);
// });
// code983 = newCode;
// }
});
$(".tryButton983").click(function(){
$("#tryDiv983").show();
$("#stepcodeTextarea983").focus();
$("#stepcodeTextarea983").height(200);
$("#iframe983").height(0);
window.frames["iframe983"].document.write("
");
window.frames["iframe983"].document.write(decodeHtml($("textarea#stepcodeTextarea983").val()));
window.frames["iframe983"].document.close();
//load和下面的非load必需并存，因为如果代码用到了jquery就必须使用load的方式
$(window.frames["iframe983"]).load(function(){
$("#iframe983").height($("#iframe983").contents().find("body").height()+showittryitheight);
});
$("#iframe983").height($("#iframe983").contents().find("body").height()+showittryitheight);
this.scrollIntoView(true);
editor983.focus();
editor983.setSize(null, "250");
$("#rendering983").hide();
$("#rendered983").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 editor983 = CodeMirror.fromTextArea(document.getElementById("stepcodeTextarea983"), {
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);
}
}
});
editor983.on("change",function(doc){
if(!binded983){
$(window).bind('beforeunload',function(){
binded983 = true;
return "xxxx";
});
}
var newCode = doc.getValue();
code983 = newCode;
$("textarea#stepcodeTextarea983").val(newCode);
if(alreadyWriteCode983!=code983){
lastModifedTime983 = new Date().getTime();
$("#rendering983").show();
$("#rendered983").hide();
}
// alert(doc.getValue());
});
$(".CodeMirror").addClass("form-control");
// var editor983 = CodeMirror.fromTextArea(, {
// lineNumbers: true,
// styleActiveLine: true,
// matchBrackets: true,
// theme:"eclipse",
// });
editor983.on("change",function(doc){
// alert(doc.getValue());
});
$("#tryDiv983").hide();
});
$("div.codemirrorTips span").addClass("glyphicon glyphicon-asterisk");
1. 双击选中单词
2. 三击选中整行
3. CTRL+F 查找
4. F8 全屏编辑，再次点击恢复
|
|
渲染中
渲染完成
|
通过removeClass() 删除一个样式中的class
");
window.frames["iframe_show984"].document.write(decodeHtml($("textarea#stepcodeTextarea984").val()));
window.frames["iframe_show984"].document.close();
$(window.frames["iframe_show984"]).load(function(){
$("#iframe_show984").height($("#iframe_show984").contents().find("body").height()+showittryitheight);
});
$("#iframe_show984").height($("#iframe_show984").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").removeClass("pink");
});
});
</script>
<button id="b1">删除背景色</button>
<br>
<br>
<style>
.pink{
background-color:pink;
}
</style>
<div id="d" class="pink">
Hello JQuery
</div>
<script src="http://127.0.0.1/study/jquery.min.js"></script>
<script>
$(function(){
$("#b1").click(function(){
$("#d").removeClass("pink");
});
});
</script>
<button id="b1">删除背景色</button>
<br>
<br>
<style>
.pink{
background-color:pink;
}
</style>
<div id="d" class="pink">
Hello JQuery
</div>
");
window.frames["iframe984"].document.write(decodeHtml(code984));
window.frames["iframe984"].document.close();
//load和下面的非load必需并存，因为如果代码用到了jquery就必须使用load的方式
$(window.frames["iframe984"]).load(function(){
$("#iframe984").height($("#iframe984").contents().find("body").height()+showittryitheight);
});
$("#iframe984").height($("#iframe984").contents().find("body").height()+showittryitheight);
alreadyWriteCode984 = code984;
$("#rendering984").hide();
$("#rendered984").show();
}
var tRereshRetry2DemoPanel984 = setInterval(rereshRetry2DemoPanel984,1000);
var binded984 = false;
$("textarea#stepcodeTextarea984").keyup(function(){
if(!binded984){
$(window).bind('beforeunload',function(){
binded984 = true;
return "xxxx";
});
}
var newCode = $(this).val()
code984 = newCode;
/*below code is replaced by function rereshRetry2DemoPanel()*/
// if(code984!=newCode){
// window.frames["iframe984"].document.write("
");
// window.frames["iframe984"].document.write(decodeHtml($("textarea#stepcodeTextarea984").val()));
// window.frames["iframe984"].document.close();
// $(window.frames["iframe984"]).load(function(){
// $("#iframe984").height($("#iframe984").contents().find("body").height()+showittryitheight);
// });
// code984 = newCode;
// }
});
$(".tryButton984").click(function(){
$("#tryDiv984").show();
$("#stepcodeTextarea984").focus();
$("#stepcodeTextarea984").height(200);
$("#iframe984").height(0);
window.frames["iframe984"].document.write("
");
window.frames["iframe984"].document.write(decodeHtml($("textarea#stepcodeTextarea984").val()));
window.frames["iframe984"].document.close();
//load和下面的非load必需并存，因为如果代码用到了jquery就必须使用load的方式
$(window.frames["iframe984"]).load(function(){
$("#iframe984").height($("#iframe984").contents().find("body").height()+showittryitheight);
});
$("#iframe984").height($("#iframe984").contents().find("body").height()+showittryitheight);
this.scrollIntoView(true);
editor984.focus();
editor984.setSize(null, "250");
$("#rendering984").hide();
$("#rendered984").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 editor984 = CodeMirror.fromTextArea(document.getElementById("stepcodeTextarea984"), {
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);
}
}
});
editor984.on("change",function(doc){
if(!binded984){
$(window).bind('beforeunload',function(){
binded984 = true;
return "xxxx";
});
}
var newCode = doc.getValue();
code984 = newCode;
$("textarea#stepcodeTextarea984").val(newCode);
if(alreadyWriteCode984!=code984){
lastModifedTime984 = new Date().getTime();
$("#rendering984").show();
$("#rendered984").hide();
}
// alert(doc.getValue());
});
$(".CodeMirror").addClass("form-control");
// var editor984 = CodeMirror.fromTextArea(, {
// lineNumbers: true,
// styleActiveLine: true,
// matchBrackets: true,
// theme:"eclipse",
// });
editor984.on("change",function(doc){
// alert(doc.getValue());
});
$("#tryDiv984").hide();
});
$("div.codemirrorTips span").addClass("glyphicon glyphicon-asterisk");
1. 双击选中单词
2. 三击选中整行
3. CTRL+F 查找
4. F8 全屏编辑，再次点击恢复
|
|
渲染中
渲染完成
|
通过toggleClass() 切换一个样式中的class
这里的切换，指得是：
如果存在就删除
如果不存在，就添加
");
window.frames["iframe_show985"].document.write(decodeHtml($("textarea#stepcodeTextarea985").val()));
window.frames["iframe_show985"].document.close();
$(window.frames["iframe_show985"]).load(function(){
$("#iframe_show985").height($("#iframe_show985").contents().find("body").height()+showittryitheight);
});
$("#iframe_show985").height($("#iframe_show985").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").toggleClass("pink");
});
});
</script>
<button id="b1">切换背景色</button>
<br>
<br>
<style>
.pink{
background-color:pink;
}
</style>
<div id="d" >
Hello JQuery
</div>
<script src="http://127.0.0.1/study/jquery.min.js"></script>
<script>
$(function(){
$("#b1").click(function(){
$("#d").toggleClass("pink");
});
});
</script>
<button id="b1">切换背景色</button>
<br>
<br>
<style>
.pink{
background-color:pink;
}
</style>
<div id="d" >
Hello JQuery
</div>
");
window.frames["iframe985"].document.write(decodeHtml(code985));
window.frames["iframe985"].document.close();
//load和下面的非load必需并存，因为如果代码用到了jquery就必须使用load的方式
$(window.frames["iframe985"]).load(function(){
$("#iframe985").height($("#iframe985").contents().find("body").height()+showittryitheight);
});
$("#iframe985").height($("#iframe985").contents().find("body").height()+showittryitheight);
alreadyWriteCode985 = code985;
$("#rendering985").hide();
$("#rendered985").show();
}
var tRereshRetry2DemoPanel985 = setInterval(rereshRetry2DemoPanel985,1000);
var binded985 = false;
$("textarea#stepcodeTextarea985").keyup(function(){
if(!binded985){
$(window).bind('beforeunload',function(){
binded985 = true;
return "xxxx";
});
}
var newCode = $(this).val()
code985 = newCode;
/*below code is replaced by function rereshRetry2DemoPanel()*/
// if(code985!=newCode){
// window.frames["iframe985"].document.write("
");
// window.frames["iframe985"].document.write(decodeHtml($("textarea#stepcodeTextarea985").val()));
// window.frames["iframe985"].document.close();
// $(window.frames["iframe985"]).load(function(){
// $("#iframe985").height($("#iframe985").contents().find("body").height()+showittryitheight);
// });
// code985 = newCode;
// }
});
$(".tryButton985").click(function(){
$("#tryDiv985").show();
$("#stepcodeTextarea985").focus();
$("#stepcodeTextarea985").height(200);
$("#iframe985").height(0);
window.frames["iframe985"].document.write("
");
window.frames["iframe985"].document.write(decodeHtml($("textarea#stepcodeTextarea985").val()));
window.frames["iframe985"].document.close();
//load和下面的非load必需并存，因为如果代码用到了jquery就必须使用load的方式
$(window.frames["iframe985"]).load(function(){
$("#iframe985").height($("#iframe985").contents().find("body").height()+showittryitheight);
});
$("#iframe985").height($("#iframe985").contents().find("body").height()+showittryitheight);
this.scrollIntoView(true);
editor985.focus();
editor985.setSize(null, "250");
$("#rendering985").hide();
$("#rendered985").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 editor985 = CodeMirror.fromTextArea(document.getElementById("stepcodeTextarea985"), {
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);
}
}
});
editor985.on("change",function(doc){
if(!binded985){
$(window).bind('beforeunload',function(){
binded985 = true;
return "xxxx";
});
}
var newCode = doc.getValue();
code985 = newCode;
$("textarea#stepcodeTextarea985").val(newCode);
if(alreadyWriteCode985!=code985){
lastModifedTime985 = new Date().getTime();
$("#rendering985").show();
$("#rendered985").hide();
}
// alert(doc.getValue());
});
$(".CodeMirror").addClass("form-control");
// var editor985 = CodeMirror.fromTextArea(, {
// lineNumbers: true,
// styleActiveLine: true,
// matchBrackets: true,
// theme:"eclipse",
// });
editor985.on("change",function(doc){
// alert(doc.getValue());
});
$("#tryDiv985").hide();
});
$("div.codemirrorTips span").addClass("glyphicon glyphicon-asterisk");
1. 双击选中单词
2. 三击选中整行
3. CTRL+F 查找
4. F8 全屏编辑，再次点击恢复
|
|
渲染中
渲染完成
|
通过css函数 直接设置样式
css(property,value)
第一个参数是样式属性，第二个参数是样式值
css({p1:v1,p2:v2})
参数是 {} 包含的属性值对。 属性值对之间用 逗号，分割 属性值之间用 冒号 ：分割 属性和值都需要用引号 “
");
window.frames["iframe_show1217"].document.write(decodeHtml($("textarea#stepcodeTextarea1217").val()));
window.frames["iframe_show1217"].document.close();
$(window.frames["iframe_show1217"]).load(function(){
$("#iframe_show1217").height($("#iframe_show1217").contents().find("body").height()+showittryitheight);
});
$("#iframe_show1217").height($("#iframe_show1217").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(){
$("#d1").css("background-color","pink");
});
$("#b2").click(function(){
$("#d2").css({"background-color":"pink","color":"green"});
});
});
</script>
<button id="b1">设置单一样式</button>
<button id="b2">设置多种样式</button>
<br>
<br>
<div id="d1" >
单一样式，只设置背景色
</div>
<div id="d2" >
多种样式，不仅设置背景色，还设置字体颜色
</div>
<script src="http://127.0.0.1/study/jquery.min.js"></script>
<script>
$(function(){
$("#b1").click(function(){
$("#d1").css("background-color","pink");
});
$("#b2").click(function(){
$("#d2").css({"background-color":"pink","color":"green"});
});
});
</script>
<button id="b1">设置单一样式</button>
<button id="b2">设置多种样式</button>
<br>
<br>
<div id="d1" >
单一样式，只设置背景色
</div>
<div id="d2" >
多种样式，不仅设置背景色，还设置字体颜色
</div>
");
window.frames["iframe1217"].document.write(decodeHtml(code1217));
window.frames["iframe1217"].document.close();
//load和下面的非load必需并存，因为如果代码用到了jquery就必须使用load的方式
$(window.frames["iframe1217"]).load(function(){
$("#iframe1217").height($("#iframe1217").contents().find("body").height()+showittryitheight);
});
$("#iframe1217").height($("#iframe1217").contents().find("body").height()+showittryitheight);
alreadyWriteCode1217 = code1217;
$("#rendering1217").hide();
$("#rendered1217").show();
}
var tRereshRetry2DemoPanel1217 = setInterval(rereshRetry2DemoPanel1217,1000);
var binded1217 = false;
$("textarea#stepcodeTextarea1217").keyup(function(){
if(!binded1217){
$(window).bind('beforeunload',function(){
binded1217 = true;
return "xxxx";
});
}
var newCode = $(this).val()
code1217 = newCode;
/*below code is replaced by function rereshRetry2DemoPanel()*/
// if(code1217!=newCode){
// window.frames["iframe1217"].document.write("
");
// window.frames["iframe1217"].document.write(decodeHtml($("textarea#stepcodeTextarea1217").val()));
// window.frames["iframe1217"].document.close();
// $(window.frames["iframe1217"]).load(function(){
// $("#iframe1217").height($("#iframe1217").contents().find("body").height()+showittryitheight);
// });
// code1217 = newCode;
// }
});
$(".tryButton1217").click(function(){
$("#tryDiv1217").show();
$("#stepcodeTextarea1217").focus();
$("#stepcodeTextarea1217").height(200);
$("#iframe1217").height(0);
window.frames["iframe1217"].document.write("
");
window.frames["iframe1217"].document.write(decodeHtml($("textarea#stepcodeTextarea1217").val()));
window.frames["iframe1217"].document.close();
//load和下面的非load必需并存，因为如果代码用到了jquery就必须使用load的方式
$(window.frames["iframe1217"]).load(function(){
$("#iframe1217").height($("#iframe1217").contents().find("body").height()+showittryitheight);
});
$("#iframe1217").height($("#iframe1217").contents().find("body").height()+showittryitheight);
this.scrollIntoView(true);
editor1217.focus();
editor1217.setSize(null, "250");
$("#rendering1217").hide();
$("#rendered1217").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 editor1217 = CodeMirror.fromTextArea(document.getElementById("stepcodeTextarea1217"), {
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);
}
}
});
editor1217.on("change",function(doc){
if(!binded1217){
$(window).bind('beforeunload',function(){
binded1217 = true;
return "xxxx";
});
}
var newCode = doc.getValue();
code1217 = newCode;
$("textarea#stepcodeTextarea1217").val(newCode);
if(alreadyWriteCode1217!=code1217){
lastModifedTime1217 = new Date().getTime();
$("#rendering1217").show();
$("#rendered1217").hide();
}
// alert(doc.getValue());
});
$(".CodeMirror").addClass("form-control");
// var editor1217 = CodeMirror.fromTextArea(, {
// lineNumbers: true,
// styleActiveLine: true,
// matchBrackets: true,
// theme:"eclipse",
// });
editor1217.on("change",function(doc){
// alert(doc.getValue());
});
$("#tryDiv1217").hide();
});
$("div.codemirrorTips span").addClass("glyphicon glyphicon-asterisk");
1. 双击选中单词
2. 三击选中整行
3. CTRL+F 查找
4. F8 全屏编辑，再次点击恢复
|
|
渲染中
渲染完成
|
代码高亮插件双击即可选中，不过部分同学反应，通过代码高亮插件复制的代码无法在IDEA里正常显示，这里提供TEXTAREA的方式，方便复制，谢谢
1. 自行完成练习
根据练习目标尽量自己实现代码效果，期间会碰到疑问，难题，和自己不懂的地方，这些都是必要的过程
2. 带着疑问查看答案
完成过程中，碰到无法解决的问题，带着疑问，查看答案，分析答案的解决思路
3. 查看答案讲解视频
依然有不明白的地方，点开视频讲解，带着疑问，听视频讲解有问题的部分
4. 再做一遍
理解后，再从头做一遍，把有疑问的地方都捋清楚
5. 总结
最后再总结一遍，总结思路，总结解决办法，以后遇到类似的问题，怎么处理
HOW2J公众号，关注后实时获知布最新的教程和优惠活动，谢谢。
提问之前请登陆
|
