Web学习笔记之：JS、HTML、Bootstrap初学小知识点总结一

最新推荐文章于 2022-04-30 16:04:25 发布

whstudio123

最新推荐文章于 2022-04-30 16:04:25 发布

阅读量1.1k

点赞数 2

分类专栏： web开发学习笔记文章标签： js bootstrap html web app web

本文链接：https://blog.csdn.net/whstudio123/article/details/106176855

版权

学习笔记同时被 2 个专栏收录

32 篇文章 5 订阅

订阅专栏

web开发

7 篇文章 0 订阅

订阅专栏

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中各类空格占位符

个人用了第三个，中文全角空格（一个中文宽度）作占位符

&#32;	普通的英文半角空格
&#160; &nbsp; &#xA0;	普通的英文半角空格但不换行
&#12288;	中文全角空格（一个中文宽度）
&#8194; &ensp;	半角(en)空格 （半个中文宽度，不受字体影响）
&#8195; &emsp;	全角(em)空格 （一个中文宽度，不受字体影响）
&#8197;	四分之一全角(em)空格 （四分之一中文宽度）
&#32;	普通空格
&nbsp;	相比普通空格，不间断,按下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>

运行效果：
在这里插入图片描述

whstudio123

关注

2
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
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控件上试过一次，貌似隐藏了还可以点击？并且占据了位置。也许要
复制链接

扫一扫

专栏目录