Web学习笔记之：JS、HTML、Bootstrap初学小知识点总结一
Web学习笔记之：JS、HTML、Bootstrap初学小知识点总结一
- 1.html 控件隐藏和radio不可选状态
- 2.HTML中各类空格占位符
- html一条竖线
- js设置控件灰色不可点击
- input不可编辑，不显示禁止图标
- JS声明全局变量
- jquery 监听 radio button选择状态
- 表单控件(复选框checkbox和单选择按钮radio)
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一条竖线
（目前还在研究怎么让竖线各种听话哈哈）
"float:left;margin-top: 30px;width: 1px;height: 200px; background: darkgray;">
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就不会了。
"text" name="input1" value="value1" readonly>
"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>
运行效果：
