黑马程序员_毕老师_CSS_JS(下)

黑马pink老师前端从入门到精通教程汇总(附源码+配套资料) 本篇内容主要是PINK老师教程汇总(主要内容如下) web端布局、移动端布局、JavaScript、web API 、操作DOM ,BOM操作 阅读详情

                                            ------- android培训、java培训、期待与您交流! ----------

空间备份

table对象
rows属性:获取表格中所有的行 cells属性:表格中所有单元格
使用table对象创建行对象:table.insertRow([index]),index默认-1,表示在行尾插入一行。添加到cells集合中去,和上面一行所说的cells不一样。这里是添加到一行中的单元格中去。
用tr对象创建单元格:tr.insertCell()
注意table的下一级子节点tbody,添加行节点要加在tbody下
tr对象也有cells集合属性,获取的是这一行中的单元格集合
给对象添加属性
1、tabNode.id = “tabid”
2、tabNode.setAttribute(“id”,”tabid”)
删除表格节点:
删除行:tabNode.deleteRow(rowIndex)
删除列:删除所有行的指定单元格 获取列数tabNode.rows[0].cells.length
trNode.deleteCell(cellIndex)
表格数据排序过程中定义的临时容器(存放行对象的数组)存放的都是行对象的引用。


对象.innerText 可以获取或设置对象的内部文本,但是包含的HTML标签或属性也会作为纯文本解析。要将内部的标签或HTML属性解析,需要使用innerHTML
按钮一次性点击效果:event.srcElement事件源/input对象.disabled=true 按钮点击后变灰


将表格中按照年龄的顺序进行排序,代码如下:
<html>
<head>
<link rel="stylesheet" href="tab.css" />
<script type="text/javascript" src="docTool.js"></script>
<script type="text/javascript">
/*
表格中按照年龄的顺序进行排序
思路:
1,每一个人的信息是一行。
那么先将行都取出,临时存入到数组中。
2,并对数组中的行对象的其中一个单元格中的数据进行排序。
3,将后的行对象重新添加到表格中。
*/
var b = true;
function sorttab()
{
//1,获取表格中所有的行对象
var tabNode = byTag("table")[0];
var trs = tabNode.rows;

//2,定义临时容器,将表格中需要参与排序的行对象临时进行存储。
var arr = new Array();  //在这个临时容器中存入的都是表格行对象引用。
for(var x=1; x<trs.length; x++)
{
arr[x-1] = trs[x];
}
sortt(arr);
var tbdNode = tabNode.childNodes[1];
//alert(tbdNode.nodeName);
if(b)
{
for(var x=0; x<arr.length; x++)
{
//alert(arr[x].cells[0].innerText+"..."+arr[x].cells[1].innerText);
tbdNode.appendChild(arr[x]);
}
b=false;
}
else
{
for(var x=arr.length-1; x>=0; x--)
{
tbdNode.appendChild(arr[x]);
}
b = true;
}
}
function sortt(arr)
{
for(var x=0; x<arr.length; x++)
{
for(var y=x+1; y<arr.length; y++)
{
if(parseInt(arr[x].cells[1].innerText)>parseInt(arr[y].cells[1].innerText))//在这里是按字典的顺序排序,所以要转换为整数的形式。
{
var temp = arr[x];
arr[x] = arr[y];
arr[y] = temp;
}
}
}
}
</script>
</head>
<table>
<tr>
    <th>姓名</th>
        <th><a href="javascript:void(0)" onclick="sorttab()">年龄</a></th>
        <th>地址</th>
    </tr>
    <tr>
    <td>张三</td>
        <td>30</td>
        <td>北京</td>
    </tr>
    <tr>
    <td>李四</td>
        <td>34</td>
        <td>上海</td>
    </tr>
    <tr>
    <td>王武</td>
        <td>23</td>
        <td>广州</td>
    </tr>
    <tr>
    <td>赵六</td>
        <td>27</td>
        <td>南京</td>
    </tr>
    <tr>
    <td>周七</td>
        <td>25</td>
        <td>大连</td>
    </tr>
    <tr>
    <td>孙八</td>
        <td>4</td>
        <td>铁岭</td>
    </tr>                    
</table>
<body>
</body>
</html>


表格行颜色间隔显示和鼠标悬浮行高亮效果:
间隔显示:奇偶行分别加载不同样式即可,onload事件中加载
悬浮高亮:行对象的onmouseover和onmouseout事件
<html>
<head>
<link rel="stylesheet" href="tab.css" />
<style sype="text/css">
.one{
background-color:#3C6;
}
.two{
background-color:#C93;
}
.over{
background-color:#FF0;
}
</style>
<script type="text/javascript" src="docTool.js"></script>
<script type="text/javascript">
//行颜色间隔显示
function trcolor()
{
var tabNode = byTag("table")[0];
var trs = tabNode.rows;
for(var x=1; x<trs.length; x++)
{
if(x%2==1)
trs[x].className = "one";
else
trs[x].className = "two";
trs[x].onmouseover = function()
{
name = this.className;
this.className = "over";
}
trs[x].onmouseout = function()
{
this.className = name;
}
}
}
var name;
/*
function over(trNode)
{
name = trNode.className;
trNode.className = "over";
}
function out(trNode)
{
trNode.className = name;
}
*/
window.onload = trcolor;  //在这里可以写匿名函数,那里面可以加载很多的东西。如果不用匿名函数的话,用trcolor也可以。
</script>
</head>


<body>
<table>
<tr>
    <th>姓名</th>
        <th><a href="javascript:void(0)" onclick="sorttab()">年龄</a></th>
        <th>地址</th>
    </tr>
    <tr >  <!--如果运用trcolor()里面的for循环来动态的设置高亮效果,就不用定这两个属性了。onmouseover="over(this)" onmouseout="out(this)--> 
    <td>张三</td>
        <td>30</td>
        <td>北京</td>
    </tr>
    <tr>
    <td>李四</td>
        <td>34</td>
        <td>上海</td>
    </tr>
    <tr>
    <td>王武</td>
        <td>23</td>
        <td>广州</td>
    </tr>
    <tr>
    <td>赵六</td>
        <td>27</td>
        <td>南京</td>
    </tr>
    <tr>
    <td>周七</td>
        <td>25</td>
        <td>大连</td>
    </tr>
    <tr>
    <td>孙八</td>
        <td>4</td>
        <td>铁岭</td>
    </tr>                    
</table>


</body>
</html>

复选框操作:获取总金额
获取所有复选框checkboxs,遍历,判断checked属性if (checkedboxs[x].checked)
注意将复选框的value属性值进行parseInt转换
全选时将其他复选框的checked属性值改为全选框的checked属性值即可
<html>
<head>
<script type="text/javascript" src="docTool.js"></script>
<script type="text/javascript">
//1,获取被选中的chechbox,通过checked属性的状态完成,
//2,获取被选择checkbox的value的金额
//3,求和
//4,定义span区域存储总金额。(这里也可以用div可以如果用div的话会换行了。)
function getSum()
{
var items = byName("item");
var sum = 0;
for(var x=0; x<items.length; x++)
{
if(items[x].checked)
sum += parseInt(items[x].value); //如果不用parseInt话,会显示成字符串的形式。而不会实现金额的数据的累加。
}
var spanNode = byId("sum");
var str = sum + "元";
spanNode.innerHTML = str.fontsize(7);
}
function checkAll(index)
{
var allNode = byName("all")[index];
var items = byName("item");
var sum = 0;
for(var x=0; x<items.length; x++)
{
items[x].checked = allNode.checked
//sum += parseInt(items[x].value);
}
}
</script>
</head>


<body>
<input type="checkbox" name="all" onclick="checkAll(0)"/>全选<br /> 
<!--如果这里即不想传0和1,也不想传this,可以用srcElement-->
<input type="checkbox" name="item" value="3000"/>笔记本电脑:3000元<br />
<input type="checkbox" name="item" value="3000"/>笔记本电脑:3000元<br />
<input type="checkbox" name="item" value="3000"/>笔记本电脑:3000元<br />
<input type="checkbox" name="item" value="3000"/>笔记本电脑:3000元<br />
<input type="checkbox" name="item" value="3000"/>笔记本电脑:3000元<br />
<input type="checkbox" name="item" value="3000"/>笔记本电脑:3000元<br />
<input type="checkbox" name="item" value="3000"/>笔记本电脑:3000元<br />
<input type="checkbox" name="item" value="3000"/>笔记本电脑:3000元<br />
<input type="checkbox" name="all" onclick="checkAll(1)"/>全选<br />
<input type="button" value="获取总金额" onclick="getSum()" /><span id="sum"></span>
</body>
</html>




通过下拉列表动态改变页面样式:select标签的onchange事件
options属性:所有列表项 selectedIndex:选中项的角标
获取列表选中项:selectNode.options[selectNode.selectedIndex]    值.value
DOM代码改变div区域内文本样式:divNode.style.textTransform
uppercase lowercase capitalize首字母大写
<html>
<head>
<script type="text/javascript" src="docTool.js"></script>
<style type="text/css">
#cssid{
height:100px;
width:300px;
background-color:#F93;
}
#textid{
background-color:#CCC;
width:300px;
}
</style>
<script type="text/javascript">
function change()
{
var selNode = byId("selid");
var value = selNode.options[selNode.selectedIndex].value;
//alert(value);
var divNode1 = byId("cssid");
var divNode2 = byId("textid");
divNode1.style.textTransform = value;
divNode2.innerText = "text-transform:"+value+";";
}
</script>
</head>


<body>
<div id="cssid">
Good good study,Day dya up!
</div>
<p>
</p>
<select id="selid" onchange="change()">
<option value="none">--text—transform--</option>
    <option value="capitalize">首字母大写</option>
    <option value="lowercase">所有字母小写</option>
    <option value="uppercase">所有字母大写</option>
</select>
<p></p>
<div id="textid">
text-transform:none;
</div>
</body>
</html>


级联菜单:省市选择示例 select标签onchange事件 添加option项
将省份对应的城市城市列表封装进二维数组,角标和省的option项角标一致
选中省份后,遍历对应的城市列表,将其封装进option标签中并添加到子菜单中
注意:在添加子项前需先清空子菜单项,以免将上一选项结果遗留
再次注意:清空子项用遍历时,注意removeChild一次,length就减一次,如果循环变量跟着递增就会移不完
移除下拉选项的简单方法,直接将列表的options属性的length置为0即可
<html>
<head>
<script type="text/javascript" src="docTool.js"></script>
<script type="text/javascript">
function selCity()
{
//在开发中,因为城市太多了,可以在网上找到相差城市后,先切一下,然后封装与数组再来用。这个数组最好封装到一js文件中去,这样的话,很多的样式都可以用。
var arr = [['--选择城市--'],
["海淀区","朝阳区","东城区","西城区"],
["沈阳","大连","鞍山","抚顺"],
["洛阳","郑州","开封","南阳"]];
var index = byId("selid").selectedIndex;
//alert(byId("selid").options[index].innerText);
var subselNode = byId("subselid");
var citys = arr[index];
subselNode.options.length = 0; //这个是上面的那个
/*for(var x=0; x<subselNode.options.length; )  //如果这里是0的话,就没有“--选择城市--这一个选项了”,第一项直接就是海淀区。这个for循环用于在添加之前,把上一个所有添加的东西给移除。另外要明确的是长度在递减,x在自增,一折中,有的东西没有删完。所以不写x++了,不递增了,只删位置为0的位置。
{
//alert(x+".."+subselNode.options[x].innerText+"...."+subselNode.options.length)
subselNode.removeChild(subselNode.options[x]);
}
*/
for(var x=0; x<citys.length; x++)
{
var optNode = doc.createElement("option");
optNode.innerText = citys[x];
subselNode.appendChild(optNode);
}
}
</script>
</head>


<body>
<select id="selid" onchange="selCity()">
<option>--选择城市</option>
    <option>北京</option>
    <option>辽宁</option>
    <option>山东</option>
    <option>河南</option>
</select>
<select id="subselid">
<option>--选择城市--</option>
</select>
</body>
</html>


添加附件的事例:
<html>
<head>
<style type="text/css">
table td a:link,table td a:visited{
text-decoration:none;
color:#F63;
}
table,table td{
border:#3F0 1px solid;
}
</style>
<script type="text/javascript" src="docTool.js"></script>
<script type="text/javascript">
var count = 1;
function addFile()
{
var tabNode = byTag("table")[0];
var trNode = tabNode.insertRow();
trNode.id = "tr_"+count;


//给每一行都固定一个名字,这个id名不是我写在标签里面的,而是我动态的创建出来的。
var tdNode_file = trNode.insertCell();
var tdNode_del = trNode.insertCell();
tdNode_file.innerHTML = "<input type = 'file' />";
tdNode_del.innerHTML = "<a href='javascript:void(0)' onclick='delFile1("+count+")'>删除附件"+count+"</a>";
//如果用deleteRow(),删除行的话,等级和长度在发生着变化。少了一行,其他行的角标也在发生着变化。不应该这样,我们可以通过给行对象编号的方式来完成。
//不通过编号的方式来删除,可以用下面的方式:
tdNode_del.innerHTML = "<a href='javascript:void(0)' onclick='delFile(this)'>删除附件"+count+"</a>";
count++;
}
function delFile(node)
{
var trNode = node.parentNode.parentNode;
trNode.parentNode.removeChild(trNode);
}
function delFile1(num)
{
var trNode = byId("tr_"+num);
/*
var tabNode = byTag("table")[0];      //这样做的话麻烦,能不能有更简单的方式呢?
var tbdNode = tabNode.childNodes[1];
tbdNode.removeChild(trNode);
*/
trNode.parentNode.removeChild(trNode);
//alert(node.nodeName);
}
</script>
</head>


<body>
<table>
<tr>
    <td>
        <a href="javascript:void(0)" onclick="addFile()">添加</a>
        </td>
    </tr>
</table>
</body>
</html>


JavaScript代码写在head标签内时要注意全局变量的问题:
函数只有调用时才执行,封装在函数内部的变量没有问题;在函数外部定义的全局变量,页面加载时还没读到下边的具体标签,全局变量获取指定标签对象时就会出现null






获取鼠标的坐标,让指定区域随鼠标移动
获取鼠标坐标方法:event.x event.y
随鼠标移动:改变指定区域的left和top属性
用到的事件:body对象的onmousemove
还用到CSS样式的position定位属性,将页面分层,使指定区域悬浮在body区域上方。层次:直接定义页面所有对象到同一个层里,为了对某个区域进行移动、定位,将该区域分离到另一个单独的层里
<body>
//用position属性将广告区域进行分层,绝对定位,使广告区域悬浮在body区域上方
<div id=”ad” style=”position:absolute; left:0; top:0”>广告</div>
<div id=”bodyid”>body区域</div>
</body>
window.onload=function()
{
document.body.onmousemove = function()
{
var adNode=document.getElementById(‘ad’)
adNode.style.left = event.x;
adNode.style.top = event.y;
}
}
流氓:将广告区域的坐标值设置为鼠标坐标值左上一点,使鼠标停在广告区域中
将广告区域用a标签封装
在广告区域添加点击事件,点击后关闭广告ad.style.dislay=none
限定边界: addiv.offsetWidth 广告区域自己的宽度
document.body.clientWidth body区域的宽度
边界内移动代码:
<script type="text/javascript">
var x=y=1;
var movex=movey=0;


function move()
{
var ad = document.getElementById("ad");
movex = movex + x*5; //每次移动位置递增5个像素
movey = movey + y*5;


ad.style.left = movex; //移动
ad.style.top = movey;
//alert("aaaaaaaa");


var bdx = document.body.clientWidth; //获取当前浏览器页面窗口的宽和高
var bdy = document.body.clientHeight;
var adx = ad.offsetWidth; //获取广告区域的大小
var ady = ad.offsetHeight;
//alert(bdx+"----------"+bdy);
if (movex+adx >= bdx) //判断是否移到边界了
{ //移到边界开始递减
x = -1;
}
else if (movex <= 0) //递减只零再开始递增
{
x = 1;
}

if (movey+ady >= bdy)
{
y = -1;
}
else if (movey <= 0)
{
y = 1;
}
}
var timeid;
function fly()//飞吧  每个10毫秒执行一次移动
{
//move();
timeid = window.setInterval("move()", 100);
}
function over()//鼠标进入广告区停止移动
{
window.clearInterval(timeid);
}
window.onload = function() //页面一加载就开始飞
{
fly();
var ad = document.getElementById("ad");
ad.onmouseover = function()
{
over(); //鼠标进入取消定时移动
}
ad.onmouseout = function()
{
fly(); //鼠标离开继续移动
}
}
function closeAD() //点击关闭后停止定时移动,隐藏广告区域
{
var ad = document.getElementById("ad");
ad.style.display = 'none';
over();
}
</script>


</head>
<body>


<div id="ad" style="position:absolute; border: red 1px solid; left:0; top:0; height:90; width:90">
<a href="http://www.ad.com" target="_blank">广告</a><br/><br/><br/><br/>
<a href="javascript:void(0)" onclick="closeAD()">关闭广告</a></div>


</body>




邮件列表示例中删除所选邮件时注意:
和用遍历方法删除列表项时的问题一样,删除时,长度递减,循环变量递增,删不全
可定义一个临时容器用来存储待删除的节点索引,然后遍历临时容器时再删除这些节点。临时容器中存放的也是表格行节点的引用,每次删除完颜色事件都要加载一遍




邮件列表示例:
<html>
<head>
<style type="text/css">
table{
border: black 2px solid;
border-collapse: collapse;
text-align: center;
width: 600px;
/* margin: 10px; 外框边距*/
}
table th{
background: #33FF33;
}
table td, table th{
padding: 5px;
border: black 1px solid;
}
.one{
background: #CCFF66;
}
.two{
background: #FFCCFF;
}
.over{
background: #FF9933;
}
</style>


<script type="text/javascript">
var name;
//行颜色间隔显示并高亮。
function trColor() 
{
var tabNode = document.getElementById("maillist");
var tabRows = tabNode.rows;
for (var x=1; x<tabRows.length-1; x++)
{
if (x%2==1)
{
tabRows[x].className = "one";
}
else
tabRows[x].className = "two";

tabRows[x].onmouseover = function()
{
name = this.className;
this.className = "over";
}
tabRows[x].onmouseout = function()
{
this.className = name;
}
}
}
window.onload = function()
{
trColor();
}
//完成checkbox的全选的动作。
function checkAll(index)
{
var allNodes = document.getElementsByName("all");
//不管选的哪个都让两个全选框一样
allNodes[Math.abs(index-1)].checked = allNodes[index].checked;
var mails = document.getElementsByName("mail");
for (var x=0; x<mails.length; x++)
{
mails[x].checked = allNodes[index].checked;
}
}
//完成按钮的选取
function checkByBut(mode) //选择按钮事件处理
{
var mails = document.getElementsByName("mail");
for (var x=0; x<mails.length; x++)
{
if (mode==2)
mails[x].checked = !mails[x].checked;
else
mails[x].checked = mode; //如果传进来的数字,为0的话为假,为1的话是真。
}
}
//删除所选邮件
function del()
{
if(!window.confirm("你真人要删除所选邮件吗?"))
return ;
/*
var mails = document.getElementsByName("mail");
for (var x=0; x<mails.length; x++)
{
if (mails[x].checked)
{
var trNode = mails[x].parentNode.parentNode;
trNode.removeNode(true); //这样删掉之后length在减小 而x在递增 导致删一半留一半,可是在这里又不能去掉x++;
}
}
trColor();
*/
//把被选中的那个行对象的索引给它取出来。
var arr = new Array(); //定义一个临时的容器,记录所有被选择对象的引用。记录完之后可以统一的干掉。
var pos = 0;
var mails = document.getElementsByName("mail");
for (var x=0; x<mails.length; x++)
{
if (mails[x].checked)
{
var trNode = mails[x].parentNode.parentNode;
arr[pos++] = trNode;
}
}
var tabNode = document.getElementById("maillist");
var tabRows = tabNode.rows;
for (var x=0; x<arr.length; x++)
{
arr[x].removeNode(true);
}
trColor(); //每次删完了之后,重新加载一次样式,颜色间隔效果

}
</script>


<body> <!--邮件列表操作演示-->


<table id="maillist">
<tr>
<th><input type="checkbox" name="all" onclick="checkAll(0)" />全选</th>
<th>发件人</th>
<th>邮件主题</th>
<th>邮件内容</th>
<tr>
<tr>
<td><input type="checkbox" name="mail" /></td>
<td>张三11</td>
<td>主题:邮件11</td>
<td>内容:邮件11</td>
</tr>
<tr>
<td><input type="checkbox" name="mail" /></td>
<td>张三22</td>
<td>主题:邮件22</td>
<td>内容:邮件22</td>
</tr>
<tr>
<td><input type="checkbox" name="mail" /></td>
<td>张三33</td>
<td>主题:邮件33</td>
<td>内容:邮件33</td>
</tr>
<tr>
<td><input type="checkbox" name="mail" /></td>
<td>张三44</td>
<td>主题:邮件44</td>
<td>内容:邮件44</td>
</tr>
<tr>
<td><input type="checkbox" name="mail" /></td>
<td>张三55</td>
<td>主题:邮件55</td>
<td>内容:邮件55</td>
</tr>
<tr>
<td><input type="checkbox" name="mail" /></td>
<td>张三66</td>
<td>主题:邮件66</td>
<td>内容:邮件66</td>
</tr>
<tr>
<td><input type="checkbox" name="mail" /></td>
<td>张三77</td>
<td>主题:邮件77</td>
<td>内容:邮件77</td>
</tr>
<tr>
<td><input type="checkbox" name="mail" /></td>
<td>张三88</td>
<td>主题:邮件88</td>
<td>内容:邮件88</td>
</tr>
<tr>
<td><input type="checkbox" name="mail" /></td>
<td>张三99</td>
<td>主题:邮件99</td>
<td>内容:邮件99</td>
</tr>


<tr>
<th><input type="checkbox" name="all" onclick="checkAll(1)" />全选</th>
<th colspan=3>
<input type="button" value="全选" onclick="checkByBut(1)" />
<input type="button" value="取消选择"  onclick="checkByBut(0)" />
<input type="button" value="反选" onclick="checkByBut(2)" />
<input type="button" value="删除所选邮件" onclick="del()" />
</th>
<tr>
</table>
</body>


表音校验示例1:
<html>
<head>
<script type="text/javascript" src="docTool.js"></script>
<script type="text/javascript">
function checkUser(userNode)
{
var name = userNode.value;
var namereg = new RegExp("^[a-z]{5}$"); //封装一个头,封装一个尾,要保证在字符串的头到尾先是5个。
var spanNode = byId("userspan");
if(name.match(namereg))  //match返回的是一个数组。null就为假,非空就为真。
spanNode.innerHTML = "用户名正确".fontcolor("green");
//这是一种方式,但是要在这里面写文字。不写文字,让文字直接在页面上也可以。
else
spanNode.innerHTML = "错误的用户名".fontcolor("red");
}
</script>
</head>


<body>
<form>
用户名称:<input type="text" name="user" onblur="checkUser(this)" />
    <span id="userspan"></span>
    <br />
    输入密码:<input type="text" name="psw" /><br />
    确认密码:<input type="text" name="repsw" /><br />
    邮件地址:<input type="text" name="mail" />
    <br />
    <input type="submit" name="提交数据" />
</form>


</body>
</html>


表单验证示例2:
<html>
<head>
<style type="text/css">
#useryes,#userno{
display:none;
}
</style>
<script type="text/javascript" src="docTool.js"></script>
<script type="text/javascript">
function checkUser(userNode)
{
var name = userNode.value;
var namereg = new RegExp("^[a-z]{5}$");
var spanNode1 = byId("useryes");
var spanNode2 = byId("userno");
if(name.match(namereg))  
{
spanNode1.style.display = "inline";
spanNode1.style.color = "green";
spanNode2.style.display = "none";
}
else
{
spanNode2.style.display = "inline";
spanNode2.style.color = "red";
spanNode1.style.display = "none";
}
}
function checkPsw(pswNode)
{
var pass = pswNode.value;
//var passreg = new RegExp("^[0-9]{5}$");
//var passreg = new RegExp("^\\d{5}$");
var passreg = /^\d{5}$/;  //只有在字符串中\d才需要转义,在这里用//来表示正则,不用转义了。
var spanNode = byId("pswspan");
if(pass.match(passreg))
spanNode.innerHTML = "密码正确".fontcolor('green');
else
spanNode.innerHTML = "密码错误".fontcolor('red');
}
function checkMail(mailNode)
{
var mail = mailNode.value;
var mailreg = /^\w+@\w+(\.\w+)+$/; //用正则表达式,对数据进行校验
var spanNode = byId("mailspan");
if(mailreg.test(mail))
spanNode.innerHTML = "邮件正确".fontcolor('green');
else
spanNode.innerHTML = "邮件错误".fontcolor('red');
}
function checkForm()
{
//event.returnValue = true; //如果为false,用它可以中途将表单数据给中止掉。如果所有的选项都已经变成为红色的了,那才将其设成为true; 还有另外一种表示方式:不写这一句,只写return true; 在form表单中,onsubmit = "return checkForm()"
//alert(document.froms[0].user.vlaue)
var form = doc.forms[0];
if(checkUser(form.user) && checkPsw(form.psw))//你每次离开的时候校验一次,当要提交的时候再校验一次。增加安全性。
return true;
}
</script>
</head>


<body>
<form action="127.0.0.1" onsubmit="checkForm()">
用户名称:<input type="text" name="user" onblur="checkUser(this)" />
    <span id="useryes">用户名正确</span> <!--可以用div或者span的方式封装这里面的信息。-->
    <span id="userno">用户名错误</span>
    <br />
    输入密码:<input type="text" name="psw" onblur="checkPsw(this)"/>
    <span id="pswspan"></span>
    <br />
    确认密码:<input type="text" name="repsw" /><br />
    邮件地址:<input type="text" name="mail" onblur="checkMail(this)" />
    <span id="mailspan"></span>
    <br />
    <input type="submit" name="提交数据" />  
    <!--在我没有做正确的检验之前,不能提交。只有正确的时候才能向服务端去提交。如果我们没有做任何的判断的话,默认的都会把数据给发出去,我们需要将数据进行校验,增加用户的体验效果。-->
</form>
</body>
</html>




表单校验:
可以用document.forms获取页面中的所有表单对象
拿到表单对象后,可以直接使用表单中的组件名获取对应组件
输入框失去焦点时就开始验证:onblur事件发生就开始验证
怎么让表单验证失败时提交不出去呢?  
1、表单标签中的onsubmit事件中,event.returnValue=false提交按钮就失效了
2、在onsubmit事件处理函数中返回false(不提交)或true(提交),再将返回结果返回给onsubmit事件即可  onsubmit=“return checkForm()”
事件处理函数中使用returnValue时,onsubmit不用return即可


JS中的正则表达式 限定开始结束位置^  $
两种写法:var reg = /^\d{5}$/ 5位数字,下同
var reg = new RegExp(“^\\d{5}$”);
var namereg = /^[a-z]{5}$/i 5为字母 后面加i不分大小写
下面的示例创建一个包含正则表达式模式及相关标志的对象(re),向您演示正则表达式对象的用法。在本例中,作为结果的正则表达式对象又用于 match 方法中:
function MatchDemo(){
   var r, re;                     // 声明变量。
   var s = "The rain in Spain falls mainly in the plain";
   re = new RegExp("Spain","i");  // 创建正则表达式对象。
   r = s.match(re);               // 在字符串 s 中查找匹配。
   return(r);                     // 返回匹配结果。
}
如果String对象的 match 方法没有找到匹配,返回 null。


RegExp对象的test方法也可判断是否匹配
reg.test(str) 返回boolean


<html>
<head>
<style>
table{
border:#03F 1px solid;
width:600px;
border-collapse:collapse;
}
table th, table td{
border:#600 1px solid;
padding:10px;
}
table td{
background-color:#0F0;
}
table th{
background-color:#090;
}
#repswspan{
margin-left:116px
}
.errorinfo{
color:#F00;
display:none;
}
.focus{
border:#60F 2px solid;
}
.norm{
border:#999 1px solid;
}
.error{
border:#F00 2px solid;
}
</style>
<script type="text/javascript">
function inputColor(input)  //这个是为了提高重用性。
{
input.className = "norm";
input.onfocus = function()
{
this.className = "focus";
}
}
window.onload = function()
{
with(document.forms[0])
{
inputColor(user);
inputColor(psw);
inputColor(repsw);
inputColor(mail);
}
}
//校验方法
function check(inputNode, regex, divId)
{
var b = false;
var divNode = document.getElementById(divId);
if(regex.test(inputNode.value))
{
inputNode.className = "norm";
divNode.style.display = "none";
b = true;
}
else
{
inputNode.className = "error";
divNode.style.display = "block";
}
return b;
}

//校验用户名,老式的,麻烦,已过期。
function checkUserDemo(userNode)
{

var value = userNode.value;
var regex = /^\w{3,5}$/;
var divNode = document.getElementById("userdiv");
if(regex.test(value))
{
userNode.className = "norm";
divNode.style.display = "none";
return true;
}
else
{
userNode.className = "error";
divNode.style.display = "block";
return false;
}
}
//校验用户名
function checkUser(userNode)
{
var regex = /^\w{3,5}$/;
return check(userNode, regex, "userdiv");
}
//校验密码
function checkPsw(pswNode)
{
var regex = /^[a-z0-9]{3,5}$/i;
return check(pswNode, regex, "pswdiv");
}
//校验确认密码
function checkRepsw(repswNode)
{
var b = false;
var value1 = repswNode.value;
var value2 = document.getElementsByName("psw")[0].value;
var divNode = document.getElementById("repswdiv");
if(value1==value2)
{
repswNode.className = "norm";
divNode.style.display = "none";
b = true;
}
else
{
repswNode.className = "error";
divNode.style.display = "block";
}
return b;
}
//校验mail
function checkMail(mailNode)
{
var regex = /^\w+@\w+(\.\w+)+$/;
return check(mailNode, regex, "maildiv");
}
//校验表单
function checkForm(formNode)
{
with(formNode)
{
if(checkUser(user) && checkPsw(psw) && checkRepsw(repsw) && checkMail(mail))
event.returnValue = true;
else
event.returnValue = false;
}
}
</script>
</head>


<body>
<!--
1,定义页面
通过表格来格式化表单。
    表格行都有一个自己的背景颜色
    将单元格中的数据通过div进行封装,以便操作
2,定义样式。
表格的样式。
    div的样式。
3,动态效果
3.1 在页面加载时,将所有的输入框默认的颜色以及定义获取焦点时的横线颜色,
    3.2 进行内容校验,可以通过正则表达式完成,并通过框线的样式给用户提示。
      通过对刚才用户名的的分析,发现代码重复度很高,为了提高复用性。
        将不同的内容错误参数传递,将相同的内容进行函数的封装
-->
<form onsubmit="checkForm(this)">
<table>
    <tr>
        <th>注册表单</th>
        </tr>
        <tr>
        <td>
            <div>用户名</div>
                <div><input type="text" name="user" onblur = "checkUser(this)"/></div>
                <div class="errorinfo" id="userdiv">用户名错误,请按要求输入</div>
                <div>用户名必须是3-5位,由字母(a-z),数字(0-9),下划线(_)组成</div>
            </td>
        </tr>
        <tr>
        <td>
            <div><span>密码</span> <span id="repswspan">确认密码</span></div>
                <div>
                <input type="password" name="psw" onblur = "checkPsw(this)"/>
                    <input type="password" name="repsw" onblur = "checkRepsw(this)"/>
                </div>
                <div class="errorinfo" id="pswdiv">密码格式错误,请按规范输入</div>
                <div class="errorinfo" id="repswdiv">两次密码输入不一致</div>
                <div>密码必须是3-5位,由字母(a-z),数字(0-9),组成</div>
            </td>
        </tr>
        <tr>
        <td>
            <div>邮件地址</div>
                <div><input type="text" name="mail" onblur = "checkMail(this)"/></div>
                <div class="errorinfo" id="maildiv">邮箱地址错误,请按要求填写</div>
            </td>
        </tr>
        <tr>
        <th>
            <input type="submit" value="提交数据"/>
            </th>
        </tr>
    </table>
</form>
</body>
</html>


                                           ------- android培训、java培训、期待与您交流! ----------

2022年前端自学全套路线总结(黑马版) 前端完整自学路线(黑马整理版) 阅读详情

相关推荐

B 站黑马程序员 pink 老师前端课程学习笔记_02 CSS3

本篇博客为B站对应课程的学习笔记,跟实际视频ppt内容有一定差异,欢迎一起交流学习。 课程地址:https://www.bilibili.com/video/BV14J4114768?p=61

PancrasG的博客 1591

关于 删除所选行 的反思

在用js实现删除所选邮件行时,会遇到不能wanqu

u013867428的专栏 447

告别JSON!Anthropic发布Tool Calling 2.0,Agent上下文消耗骤降80%

Anthropic发布ToolCalling 2.0更新,彻底革新AI Agent开发模式。四大核心特性:1)程序化工具调用,允许模型直接输出可执行代码替代JSON交互,降低30-50%Token消耗;2)动态网页过滤,自动清洗网页内容减少24%无效信息;3)工具搜索机制,按需加载工具定义,最高优化80%上下文窗口;4)工具使用示例,通过Few-Shot示范提升复杂表单处理准确率至90%。这一升级将Agent范式从"大模型作为路由"推进到"大模型作为引擎",但需注意代

老孙 | Ethan Sun 的博客:AI 智能体与 AI 原生软件的工程实践 794

黑马程序员_毕老师_CSS_JS(上)

CSS层叠样式表cascading style sheets 将网页中的样式单独分离出来,完全由CSS控制,增强样式复用性和扩展性。 格式:选择器{属性名:属性值;属性名:属性值;……} CSS与HTML结合的4中方式: 1、每个HTML标签都有style属性。(将css代码定义在style的属性值当中) 2、当页面中有多个标签具有相同样式时,可定义style标签封装样式以复用 css

我家桂花香 1211

【QGIS】利用“创建网格”功能实现区域等距分割与坐标转换实战

本文详细介绍了如何在QGIS中使用“创建网格”工具实现区域等距分割。通过实战演示,将北京市行政区划切割为150米正方形网格,并重点讲解了关键步骤:选择投影坐标系EPSG:3857以确保网格尺寸精确,以及将结果转换为常用的WGS84经纬度坐标。文章还涵盖了进阶技巧与常见问题解决方案,帮助用户高效完成空间网格化分析任务。

weixin_29232507的博客 95

基于AT32F421的紧凑型FOC电机驱动板设计

磁场定向控制(FOC)是永磁同步电机(PMSM)与无刷直流电机(BLDC)实现高精度转矩控制和高效运行的核心技术,其本质是通过Clarke/Park坐标变换解耦定子电流,实现d轴磁链与q轴转矩的独立调节。该技术依赖实时性严苛的电流采样、高精度位置反馈及确定性PWM生成,广泛应用于机器人关节、智能装备等中小功率伺服场景。国产Cortex-M4微控制器(如AT32F421)凭借集成ADC、高级定时器与DSP指令集,已成为低成本、高可靠FOC嵌入式实现的理想平台。本文围绕一款工程化FOC驱动板展开,涵盖低侧电流采

weixin_42510243的博客 702

黑马程序员, html css javascript 前端笔记 pink老师教程

黑马程序员, html css javascript 前端笔记 pink老师教程

alexwang的博客 2397

PCIe Electrical PHY(4)-PCIE SPEC第8章指标讲解

1.1 PCIE TX SPEC TX主要关心两类参数,一类是Voltage Parameters,一类是Jitter Parameters。 其中Voltage相关参数主要关心不同preset下差分电压幅度的准确性。以及共模电压的稳定性。 PCIE spec中对Jitter相关的参数测量定义如下: 分为两大类:DDJ(Data dependent Jitter)和UJ(Uncorrelated ...

maxwell2ic的博客 5951

【黑马程序员pink老师前端】JavaScript基础大总结

JavaScirpt

⛄ 4552

STM32 HAL库驱动BMP388:从寄存器配置到高精度气压温度采集

本文详细介绍了如何使用STM32 HAL库驱动BMP388气压温度传感器,实现高精度数据采集。内容涵盖从硬件连接到STM32CubeMX配置、关键寄存器解析、驱动源码编写,到核心补偿算法与海拔换算的完整流程,并提供了针对不同应用场景的优化配置与调试技巧,帮助开发者快速构建稳定可靠的测量方案。

weixin_29299807的博客 171

Sentinel-1 Burst数据处理避坑实录:从aria2c报错到wget脚本救场

本文详细介绍了Sentinel-1 Burst数据处理的完整解决方案,从下载困境到高效处理技巧。针对aria2c报错等常见问题,提供了增强版wget脚本和智能分组方法,显著提升下载成功率和处理效率,特别适合科研机构和企业级网络环境下的哨兵数据处理需求。

weixin_42641998的博客 284

黑马JS教程笔记(JavaScript教程)——JS基础

<head><title>JavaScript练习</title></head><body><script></script></body>

Dontla的博客 2653

打开 AI 投研新时代 —— 深度解析 GitHub 高星项目 daily_stock_analysis

GitHub热门开源项目"daily_stock_analysis"是一款AI驱动的智能股票分析工具,能自动抓取行情数据、分析新闻语义并生成结构化报告。该项目采用Python开发,通过GitHub Actions实现全自动运行,支持邮件、企业微信等多渠道推送。核心功能包括AI决策仪表盘、多数据源整合和零成本部署方案,特别适合需要自动化投研辅助的个人投资者。项目强调其仅为分析工具而非投资建议,提醒用户注意AI模型的潜在误差。该工具通过智能化处理重复工作,帮助投资者提升决策效率,成为量化投资

陈奕昆的博客 1526

2021黑马前端程序员学习路线

2021年黑马程序员前端学习路线图 黑马程序员 ​ 已认证的官方帐号 73 人赞同了该文章 前端学习路线图火热出炉啦,还在为如何系统学习苦苦寻觅资源么? 2021年新版前端学习路线图这不就来了么!小伙计们甩开膀子学起来吧。 只要能坚持学下来走上人生巅峰不再是梦。 PS:别忘了收藏呦,此套路线图不定期更新呦 第一阶段:前端入门HTML5 +Css3+电商网页制作 课程内容: 1、HTML5 是网页开发的基础,从最简单的网页开发基础入手,使用常见的标签制作网页内容 2、Css3通过浮

qq_21729177的博客 1991

【ArcGIS Pro微课1000例】0022:基于DEM进行流域分析生成流域图

填洼Fill,在进行水文分析后续操作前,首先要对DEM进行填洼,创建无凹陷点的DEM。在ArcGIS中使用的是八方向流量建模(D8算法),工具位于水文分析下的【流向】。填洼需要使用水文分析工具下的【填洼】。确定输入与输出即可。

智慧空间实验室 2750

深度学习工具包 DeepLearningToolbox

深度学习工具包Deprecation notice.-----This toolbox is outdated and no longer maintained.There are much better tools available for deep learning than this toolbox, e.g. [Theano](http://deeplearning.net/software/theano/), [torch](http://torch.ch/) or [tensorflow](http://www.tensorflow.org/)I would suggest you use one of the tools mentioned above rather than use this toolbox.Best, Rasmus.DeepLearnToolbox================A Matlab toolbox for Deep Learning.Deep Learning is a new subfield of machine learning that focuses on learning deep hierarchical models of data.It is inspired by the human brain's apparent deep (layered, hierarchical) architecture.A good overview of the theory of Deep Learning theory is[Learning Deep Architectures for AI](http://www.iro.umontreal.ca/~bengioy/papers/ftml_book.pdf)For a more informal introduction, see the following videos by Geoffrey Hinton and Andrew Ng.* [The Next Generation of Neural Networks](http://www.youtube.com/watch?v=AyzOUbkUf3M) (Hinton, 2007)* [Recent Developments in Deep Learning](http://www.youtube.com/watch?v=VdIURAu1-aU) (Hinton, 2010)* [Unsupervised Feature Learning and Deep Learning](http://www.youtube.com/watch?v=ZmNOAtZIgIk) (Ng, 2011)If you use this toolbox in your research please cite [Prediction as a candidate for learning deep hierarchical models of data](http://www2.imm.dtu.dk/pubdb/views/publication_details.php?id=6284)```@MASTERSTHESIS\{IMM2012-06284, author = "R. B. Palm", title = "Prediction as a candidate for learning deep hierarchical models of data", year = "2012",}```Contact: rasmusbergpalm at gmail dot comDirectories included in the toolbox-----------------------------------`NN/` - A library for Feedforward Backpropagation Neural Networks`CNN/` - A library for Convolutional Neural Networks`DBN/` - A library for Deep Belief Networks`SAE/` - A library for Stacked Auto-Encoders`CAE/` - A library for Convolutional Auto-Encoders`util/` - Utility functions used by the libraries`data/` - Data used by the examples`tests/` - unit tests to verify toolbox is workingFor references on each library check REFS.mdSetup-----1. Download.2. addpath(genpath('DeepLearnToolbox'));Example: Deep Belief Network---------------------```matlabfunction test_example_DBNload mnist_uint8;train_x = double(train_x) / 255;test_x = double(test_x) / 255;train_y = double(train_y);test_y = double(test_y);%% ex1 train a 100 hidden unit RBM and visualize its weightsrand('state',0)dbn.sizes = [100];opts.numepochs = 1;opts.batchsize = 100;opts.momentum = 0;opts.alpha = 1;dbn = dbnsetup(dbn, train_x, opts);dbn = dbntrain(dbn, train_x, opts);figure; visualize(dbn.rbm{1}.W'); % Visualize the RBM weights%% ex2 train a 100-100 hidden unit DBN and use its weights to initialize a NNrand('state',0)%train dbndbn.sizes = [100 100];opts.numepochs = 1;opts.batchsize = 100;opts.momentum = 0;opts.alpha = 1;dbn = dbnsetup(dbn, train_x, opts);dbn = dbntrain(dbn, train_x, opts);%unfold dbn to nnnn = dbnunfoldtonn(dbn, 10);nn.activation_function = 'sigm';%train nnopts.numepochs = 1;opts.batchsize = 100;nn = nntrain(nn, train_x, train_y, opts);[er, bad] = nntest(nn, test_x, test_y);assert(er < 0.10, 'Too big error');```Example: Stacked Auto-Encoders---------------------```matlabfunction test_example_SAEload mnist_uint8;train_x = double(train_x)/255;test_x = double(test_x)/255;train_y = double(train_y);test_y = double(test_y);%% ex1 train a 100 hidden unit SDAE and use it to initialize a FFNN% Setup and train a stacked denoising autoencoder (SDAE)rand('state',0)sae = saesetup([784 100]);sae.ae{1}.activation_function = 'sigm';sae.ae{1}.learningRate = 1;sae.ae{1}.inputZeroMaskedFraction = 0.5;opts.numepochs = 1;opts.batchsize = 100;sae = saetrain(sae, train_x, opts);visualize(sae.ae{1}.W{1}(:,2:end)')% Use the SDAE to initialize a FFNNnn = nnsetup([784 100 10]);nn.activation_function = 'sigm';nn.learningRate = 1;nn.W{1} = sae.ae{1}.W{1};% Train the FFNNopts.numepochs = 1;opts.batchsize = 100;nn = nntrain(nn, train_x, train_y, opts);[er, bad] = nntest(nn, test_x, test_y);assert(er < 0.16, 'Too big error');```Example: Convolutional Neural Nets---------------------```matlabfunction test_example_CNNload mnist_uint8;train_x = double(reshape(train_x',28,28,60000))/255;test_x = double(reshape(test_x',28,28,10000))/255;train_y = double(train_y');test_y = double(test_y');%% ex1 Train a 6c-2s-12c-2s Convolutional neural network %will run 1 epoch in about 200 second and get around 11% error. %With 100 epochs you'll get around 1.2% errorrand('state',0)cnn.layers = { struct('type', 'i') %input layer struct('type', 'c', 'outputmaps', 6, 'kernelsize', 5) %convolution layer struct('type', 's', 'scale', 2) %sub sampling layer struct('type', 'c', 'outputmaps', 12, 'kernelsize', 5) %convolution layer struct('type', 's', 'scale', 2) %subsampling layer};cnn = cnnsetup(cnn, train_x, train_y);opts.alpha = 1;opts.batchsize = 50;opts.numepochs = 1;cnn = cnntrain(cnn, train_x, train_y, opts);[er, bad] = cnntest(cnn, test_x, test_y);%plot mean squared errorfigure; plot(cnn.rL);assert(er<0.12, 'Too big error');```Example: Neural Networks---------------------```matlabfunction test_example_NNload mnist_uint8;train_x = double(train_x) / 255;test_x = double(test_x) / 255;train_y = double(train_y);test_y = double(test_y);% normalize[train_x, mu, sigma] = zscore(train_x);test_x = normalize(test_x, mu, sigma);%% ex1 vanilla neural netrand('state',0)nn = nnsetup([784 100 10]);opts.numepochs = 1; % Number of full sweeps through dataopts.batchsize = 100; % Take a mean gradient step over this many samples[nn, L] = nntrain(nn, train_x, train_y, opts);[er, bad] = nntest(nn, test_x, test_y);assert(er < 0.08, 'Too big error');%% ex2 neural net with L2 weight decayrand('state',0)nn = nnsetup([784 100 10]);nn.weightPenaltyL2 = 1e-4; % L2 weight decayopts.numepochs = 1; % Number of full sweeps through dataopts.batchsize = 100; % Take a mean gradient step over this many samplesnn = nntrain(nn, train_x, train_y, opts);[er, bad] = nntest(nn, test_x, test_y);assert(er < 0.1, 'Too big error');%% ex3 neural net with dropoutrand('state',0)nn = nnsetup([784 100 10]);nn.dropoutFraction = 0.5; % Dropout fraction opts.numepochs = 1; % Number of full sweeps through dataopts.batchsize = 100; % Take a mean gradient step over this many samplesnn = nntrain(nn, train_x, train_y, opts);[er, bad] = nntest(nn, test_x, test_y);assert(er < 0.1, 'Too big error');%% ex4 neural net with sigmoid activation functionrand('state',0)nn = nnsetup([784 100 10]);nn.activation_function = 'sigm'; % Sigmoid activation functionnn.learningRate = 1; % Sigm require a lower learning rateopts.numepochs = 1; % Number of full sweeps through dataopts.batchsize = 100; % Take a mean gradient step over this many samplesnn = nntrain(nn, train_x, train_y, opts);[er, bad] = nntest(nn, test_x, test_y);assert(er < 0.1, 'Too big error');%% ex5 plotting functionalityrand('state',0)nn = nnsetup([784 20 10]);opts.numepochs = 5; % Number of full sweeps through datann.output = 'softmax'; % use softmax outputopts.batchsize = 1000; % Take a mean gradient step over this many samplesopts.plot = 1; % enable plottingnn = nntrain(nn, train_x, train_y, opts);[er, bad] = nntest(nn, test_x, test_y);assert(er < 0.1, 'Too big error');%% ex6 neural net with sigmoid activation and plotting of validation and training error% split training data into training and validation datavx = train_x(1:10000,:);tx = train_x(10001:end,:);vy = train_y(1:10000,:);ty = train_y(10001:end,:);rand('state',0)nn = nnsetup([784 20 10]); nn.output = 'softmax'; % use softmax outputopts.numepochs = 5; % Number of full sweeps through dataopts.batchsize = 1000; % Take a mean gradient step over this many samplesopts.plot = 1; % enable plottingnn = nntrain(nn, tx, ty, opts, vx, vy); % nntrain takes validation set as last two arguments (optionally)[er, bad] = nntest(nn, test_x, test_y);assert(er < 0.1, 'Too big error');```[![Bitdeli Badge](https://d2weczhvl823v0.cloudfront.net/rasmusbergpalm/deeplearntoolbox/trend.png)](https://bitdeli.com/free "Bitdeli Badge")

JS实现京东倒计时秒杀效果[代码全]

【非常好用!】在自己做的网页项目里实现了仿京东倒计时效果,方法来自黑马程序员pink老师在js课程中讲解的方法 解释和注意事项全都写在代码注释中了。 js代码部分 window.onload=function() { /* 秒杀倒计时 */ var hour = document.querySelector(".hour");//小时的黑色盒子 var minute = document.querySelector(".minute");//分钟的黑色盒子 v..

weixin_46764819的博客 4633

Statistics and Machine Learning Toolbox

Statistics and Machine Learning Toolbox(带书签),MATLAB统计学习工具

2022年前端学习路线-黑马程序员

前端工程师岗位缺口一直很大,符合岗位要求的人越来越少,所以学习前端的同学要注意,一定要把技能学到扎实,做有含金量的项目,这样在找工作的时候展现更大的优势。 缺人才,又薪资高 那么怎样才能成为一名前端工程师呢?换句话说学习前端从哪里开始学习? 你想学好Web前端必须学会的3个基础技能:HTML、CSS、JavaScript.这三个是前端开发中基本也是必须的三个技能。 它要求前端开发工程师不仅要掌握基本的Web前端开发技术,网站性能优化、SEO和服务器端的基础知识,而且要学会运用各种工具进行辅助开发以及理论层面

黑马程序员官方博客 2665

蓝牙模块HM-10手册

蓝牙模块HM-10手册,该手册对蓝牙模块HM-10进行了详细的介绍和使用方法以及一些AT指令。

ssm框架搭建

这个是一个在idea上成功跑起来的ssm框架项目,保存在这里方便以后使用直接下载

今晚直播丨大佬带你10分钟快速上手JavaScript

JavaScript是前端必须掌握的三大核心(HTML、CSS、JavaScript)基础技术之一,熟悉JavaScript基础语法,是继续深入学习其他前端开发技术栈的基本要求。今晚,黑...

传智播客的专栏 169

JS-基础笔记二次总结(B站跟过黑马的同学看过来)

这里都是基于我在B站跟过的黑马教学视频上的PPT进行二次总结的笔记,结合了自己平时的加注和记录。欢迎跟过黑马视频的小伙伴们一起来复习Pink老师授予我们的快乐知识,在此也非常感谢黑马机构,让我有系统的资料对前端技术有了整体性的学习。这里也非常适合新手对JS有一个非常系统的了解与整体认识。那么,开始吧。 一、初识JavaScript 1、JavaScript的作用 表单动态校验(密码强度检测) ( JS 产生最初的目的 ) 网页特效 服务端开发(Node.js) 桌面程序(Electron)

huohuoit的博客 860

最全pink老师JavaScript笔记-JavaScript 基础部分(同步PPT)

浏览器分成两部分:渲染引擎和js引擎浏览器本身并不会执行JS代码,而是通过内置JavaScript引擎(解释器)来执行JS代码。JS引擎执行代码时逐行解释每一句源码(转换为机器语言),然后由计算机去执行,所以JavaScript语言归为脚本语言,会逐行执行ECMAScript:ECMAScript规定了JS的编程语法和基础核心知识,是所有浏览器厂商共同遵守的一套JS语法工业标准。...

qq_45432867的博客 8996

前端教程-黑马程序员版

有关前端学习这件事,基础知识和编程实践是入门阶段最重要的。刚开始学习前端的时候,需要对照一套前端教程,将基础知识学习一遍,完成好课后的练习。基础学习之后,就是实战,从一个静态的页面开始,到最后自己设计网站。想要学习前端的同学还在苦苦找寻前端教程吗?发愁没有前端资源吗?黑马程序员为大家整理了2022年全新版的路线图,还带来了前端的学习方法。前端学习不管是入门阶段还是进阶阶段,一定都要梳理知识体系。但是对于一些刚入门的小伙伴来说,连每一个名称背后的用途的都不了解。...

黑马程序员官方博客 1571

黑马程序员_java基础Html、css、JavaScript_DAY1

---------------------- ASP.Net+Android+IOS开发、.Net培训、期待与您交流! ----------------------                                                                       黑马程序员_java基础Html、css、JavaScript_DAY1

wohenai791515672的专栏 1809

“21天好习惯“ 第十八期 — 18之黑马面面移动端布局(四)

效果设计图!!! 效果设计图!!! 项目来源:黑马程序员的pink老师 点击跳转视频课程 效果设计图!!! 此项目布局采用flexible.js+rem+flex 本博客目前搭建效果(有兴趣的同学可以一起来动手) 效果设计图!!! 效果设计图!!! 项目来源:黑马程序员的pink老师 点击跳转视频课程 效果设计图!!! 此项目布局采用flexible.js+rem+flex 本博客目前搭建效果(有兴趣的同学可以一起来动手) 关于路径的问题和部分文件示意图如下:(less文件为c.

天才尼尼尼尼狐的博客 410

“21天好习惯“ 第十七期 — 17之黑马面面移动端布局(三)

效果设计图!!! 效果设计图!!! 项目来源:黑马程序员的pink老师 点击跳转视频课程 效果设计图!!! 此项目布局采用flexible.js+rem+flex 本博客目前搭建效果(有兴趣的同学可以一起来动手) 在这里插入图片描述 关于路径的问题和部分文件示意图如下:(less文件为css的预编译文件,可视为css的同分异构体) 黑马面面cssindex.cssindex.less(直接写css即可,less可以不用)normalize.cssswiper.min.cssiconsi.

天才尼尼尼尼狐的博客 290

JavaScript 学习笔记(WEB APIs Day1)

标签天生自带的属性 比如class id title等, 可以直接使用点语法操作比如: disabled、checked、selected。如果修改的样式比较多,直接通过style属性修改比较繁琐,我们可以通过借助于css类名的形式。className是使用新值换旧值, 如果需要添加一个类,需要保留之前的类名。建议:有了变量先给 const,如果发现它后面是要被修改的,再改为 let。但是对于引用数据类型,const声明的变量,里面存的不是值,是地址。2. 操作类名(className) 操作CSS。

🧑‍🎓 博士研究生在读 🔬 分享生物信息学、神经生物学方面的知识 💬 合作请在后台留言 1169

微信小程序登陆黑马程序员前端培训2.0课程!

黑马程序员于9月29日开设的微信小程序入门尝鲜版直播课程受到了大家的热烈追捧,同时在线人数达到23513人!这次课程的成功推出,也代表微信小程序正式登陆黑马程序员前端学院2.0课程。   现在,小编要公布一个更加劲爆的消息:我们的微信小程序课程再升级!10月10日、11日两天,黑马程序员前端与移动开发学院将推出更加深入、更加专业的微信小程序课程,而且首次推出将以公开课的形式让大家免费学习。据悉

黑马程序员官方博客 4456
上一篇: 黑马程序员_毕老师_CSS_JS(上)
firefly_shine
博客等级 码龄15年 8粉丝 37原创
评论 1
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付:10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值