Web学习笔记之:JS、HTML、Bootstrap初学小知识点总结一
1.html 控件隐藏和radio不可选状态
Html 控件的隐藏
1 隐藏并且不占据的位置
(在radio控件上试过一次,貌似隐藏了还可以点击?并且占据了位置。也许要与禁止点击合用)
document.getElementById('myVideo').style.display = "none”;//隐藏
document.getElementById('myVideo').style.display = “block”;//显示
如果用html操作:
style="display:none"
2 隐藏但是仍占据的位置
document.getElementById(Id).style.visibility=‘hidden’//隐藏
document.getElementById(Id).style.visibility=’visible‘;//显示
radio 点击事件,点击一个选项则触发一次
<input type="radio" id="viewer_role" name="userRole" value="viewer" onclick="hidControl('hidden')">
<script>
function hidControl(action){
alert(action);
}
</script>
3 radio 变为不可选状态
document.getElementById("teacher_role").disabled = false;//不可选
document.getElementById("teacher_role").disabled = true//可选
2.HTML中各类空格占位符
个人用了第三个,中文全角空格(一个中文宽度)作占位符
  普通的英文半角空格
    普通的英文半角空格但不换行
  中文全角空格(一个中文宽度)
    半角(en)空格 (半个中文宽度,不受字体影响)
    全角(em)空格 (一个中文宽度,不受字体影响)
  四分之一全角(em)空格 (四分之一中文宽度)
  普通空格
相比普通空格,不间断,按下space键产生的空格,不累加
html一条竖线
(目前还在研究怎么让竖线各种听话哈哈)
<div style="float:left;margin-top: 30px;width: 1px;height: 200px; background: darkgray;"></div>
js设置控件灰色不可点击
document.getElementById("btnSave").setAttribute("disabled", true);//设置不可点击
document.getElementById("btnSave").style.backgroundColor = '#555555';//设置背景色
document.getElementById("btnSave").removeAttribute("disabled");//去掉不可点击
window.parent.location.href = url;//调用父页面重新加载
input不可编辑,不显示禁止图标
disable会显示图标,但readonly就不会了。
<input type="text" name="input1" value="value1" readonly>
<input type="text" name="input1" value="value1" readonly="true">
JS声明全局变量
JS中声明全局变量主要分为显式声明或者隐式声明。
声明方式一:
使用var(关键字)+变量名(标识符)的方式在function外部声明,即为全局变量,否则在function声明的是局部变量。该方式即为显式声明。详细如下:
var test = 5; //全局变量
function a()
{
var cc=3; //局部变量
alert(test);
}
function b(){alert(test);}
声明方式二:
没有使用var,直接给标识符test赋值,这样会隐式的声明了全局变量test。即使该语句是在一个function内,当该function被执行后test变成了全局变量。
test = 5;//全局变量
function a()
{
aa=3; //全局变量
alert(test);
}
声明方式三:
使用window全局对象来声明,全局对象的属性对应也是全局变量,详细如下:
window.test;
window.test = 5;
这种方式经常被用到一个匿名函数执行后将一些函数公开到全局。 如JQuery1.5中最末一句
复制代码代码如下:
window.jQuery = window.$ = jQuery;
jquery 监听 radio button选择状态
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/JavaScript"></script>
<script type="text/JavaScript">
$(document).ready(function ()
{
$("#needradio :radio").change(function ()
{
var value=$(this).val();
if(value==1)
{ $("#log").hide();}
else
{$("#log").show();
}
});
});
</script>
</head>
<body>
<div id="needradio">
<input type="radio" id="need" name="need" value="1" />满意
<input type="radio" id="need" name="need" value="0" />不满意
</div>
<div id="log">啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊</div>
</body>
</html>
表单控件(复选框checkbox和单选择按钮radio)
Bootstrap框架中checkbox和radio有点特殊,Bootstrap针对他们做了一些特殊化处理,主要是checkbox和radio与label标签配合使用会出现一些小问题(最头痛的是对齐问题)。
使用Bootstrap框架,开发人员无需考虑太多,只需要按照下面的方法使用即可。
<form role="form">
<div class="checkbox">
<label>
<input type="checkbox" value="">
记住密码
</label>
</div>
<div class="radio">
<label>
<input type="radio" name="optionsRadios" id="optionsRadios1" value="love" checked>
喜欢
</label>
</div>
<div class="radio">
<label>
<input type="radio" name="optionsRadios" id="optionsRadios2" value="hate">
不喜欢
</label>
</div>
</form>
运行效果:
从上面的示例,我们可以得知:
1、不管是checkbox还是radio都使用label包起来了
2、checkbox连同label标签放置在一个名为“.checkbox”的容器内
3、radio连同label标签放置在一个名为“.radio”的容器内 在Bootstrap框架中,主要借
助“.checkbox”和“.radio”样式,来处理复选框、单选按钮与标签的对齐方式。
有时候,为了布局的需要,将复选框和单选按钮需要水平排列。Bootstrap框架也做了这方面的考虑:
1、如果checkbox需要水平排列,只需要在label标签上添加类名“checkbox-inline”
2、如果radio需要水平排列,只需要在label标签上添加类名“radio-inline” 如下所示:
<form role="form">
<div class="form-group">
<label class="checkbox-inline">
<input type="checkbox" value="option1">游戏
</label>
<label class="checkbox-inline">
<input type="checkbox" value="option2">摄影
</label>
<label class="checkbox-inline">
<input type="checkbox" value="option3">旅游
</label>
</div>
<div class="form-group">
<label class="radio-inline">
<input type="radio" value="option1" name="sex">男性
</label>
<label class="radio-inline">
<input type="radio" value="option2" name="sex">女性
</label>
<label class="radio-inline">
<input type="radio" value="option3" name="sex">中性
</label>
</div>
</form>
运行效果: