JavaScript基础学习
学习js的基础很重要,可以让自己有更多的技能。我相信这个以后就会用到。
Eg:点击选择框,在div中显示出选择的数量
-
window.onload = function() {
-
var inputs = document.getElementById('div1').getElementsByTagName('input');
-
for (var i = 0; i < inputs.length; i++) {
-
inputs[i].onclick = function () {
-
var inputss = document.getElementById('div1').getElementsByTagName('input');
-
var arroy = [];
-
for (var j = 0; j <inputss.length; j++) {
-
if (inputss[j].checked) {
-
arroy[arroy.length] = inputss[j].value; //将选择的项放到数组中,循环的放置。
-
}
-
}
-
document.getElementById('div2').innerHTML = '共选中'+arroy.length+'项:'+arroy.toString()+'';
-
};
-
}
-
};
Eg:图标跟随鼠标移动
注意:需要将图片脱离文档流,我们需要设置其css中的position:absolute;这样就可以了。还有我们的body是有一个宽度,不代表整个页面。
-
<style type="text/css">
-
img {
-
position: absolute;
-
}
-
</style>
-
<script type="text/javascript">
-
window.onload = function() {
-
document.onmousemove = function (event) {
-
var s = window.event || event;
-
var img = document.getElementById('imgAhui');
-
img.style.left = s.clientX+'px';
-
img.style.top = s.clientY + 'px';
-
};
-
};
-
</script>
元素的position样式值
à:static,无定位显示在默认位置。
à:absolute,绝对定位。
à:fixed,相对于窗口固定定位,位置不会跟随浏览器的滚动而变化。
à:relative,相对元素默认位置定位。
1:Onmouseover和onmouseout事件
Onmouseover和onmouseout事件,可以用于用户的鼠标移至html元素上方或移出的时候触发函数
-
window.onload = function () {
-
//+onmouseover鼠标
-
document.getElementById('aaa').onmouseover = function () {
-
//获取层对象
-
var sss = document.getElementById('div1');
-
//显示层
-
sss.style.display = 'block ';
-
//使层脱离文档流
-
sss.style.position = 'absolute';
-
sss.style.left = this.offsetLeft + 'px';
-
sss.style.top = this.offsetTop + 'px';
-
};
-
//+onmouseout鼠标移动开
-
document.getElementById('aaa').onmouseout = function() {
-
var ssss = document.getElementById('div1');
-
ssss.style.display = 'none';
-
};
-
};
2:当设置了层的边框,margin,padding等问题的时候通过offsetHeight获取的高度。
-
var div11 = document.getElementById('div1').offsetHeight;
-
var div1 = document.getElementById('div1').currentStyle.height;
onfocus事件:获得焦点事件。onclick事件:点击事件。
-
window.onload = function () {
-
//onfocus+获得焦点事件
-
document.getElementById('dd').onfocus = function() {
-
if (this.value == '请输入内容' && this.className == 'inter') {
-
//清空内容和样式
-
this.value = ' ';
-
this.className = '';
-
}
-
};
-
//onblur+失去焦点事件
-
document.getElementById('dd').onblur = function() {
-
if (this.value==' ') {
-
this.value = '请输入内容';
-
this.className = 'inter';
-
}
-
};
-
};
3:js提交表单的方法
找到submit按钮并点击它的点击事件,或者可以直接调用表单对象的submit()方法实现提交。
JS中使用正则表达式
1:Js中创建正则表达式的方法
*一*:第一种方法
//判断邮箱是否合法。
-
var regex=/^[0-9]{6}$/;
就是把正则表达式写在我们常写的注释里面,但是对于正则表达式来说不是这样子的。
*二:*第二种方法
这种写法用于动态生成正则表达式的情况下。
-
var regex2 = new RegExp('^[0-9]{6}$');
我们在使用的时候推荐使用第一种方法,因为第一种方法使用起来方便。不需要管转义字符。
2:eg,利用正则表达式提供的test()方法来进行匹配
-
<script type="text/javascript">
-
window.onload = function() {
-
document.getElementById('btn').onclick = function() {
-
var txt = document.getElementById('txt').value;
-
//js中正则表达式的声明
-
var regex = /^[0-9]{6}$/;
-
//调用正则表达式对象的test()方法来测试是否匹配
-
var isno = regex.test(txt);
-
alert(isno);
-
};
-
};
-
</script>
3:使用正则表达式进行提取。
利用正则表达式的exec()方法来提取。这个的使用方法和test()一样。
这个方法的提取每次只能提取出来一个数据。
-
<script type="text/javascript">
-
var msg = 'ahui1193451014小辉18694597894你好11599874857';
-
window.onload = function () {
-
//申明,定义正则表达式,用于提取数字,\d表示匹配数字,+表示一次或多次。
-
var regex = /\d+/;
-
var result = regex.exec(msg);
-
alert(result);
-
result = regex.exec(msg);
-
alert(result);
-
};
-
</script>
当我们需要提取多个数据的时候,我们需要在定义正则的时候加上g(全局模式
),这样提取出来是个集合,我们接着在使用就可以了。
-
<script type="text/javascript">
-
var msg = 'ahui1193451014小辉18694597894你好11599874857';
-
window.onload = function () {
-
//申明,定义正则表达式,用于提取数字,\d表示匹配数字,+表示一次或多次。
-
var regex = /\d+/g;
-
//进行全局模式后,那么反复调用exec()方法,就可以提取出来每个匹配了。
-
var result = regex.exec(msg);
-
while (result) {
-
alert(result);
-
result = regex.exec(msg);
-
}
-
};
-
</script>
G(全局模式):加上这个是因为每次查找的时候记住了个数(index),每次找的时候从之前查找的后面进行查找。
4:js中如何提取组。
还是和C#中的一样,是使用()来进行分组。当我们使用提取组,那个exec()方法返回的提取到的结果就不是一个简单的匹配字符串,而是一个数组,该组第一个元素是包含的字符串,第二个是提取到第一组的内容,三个是提取到第二组的内容。
-
<script type="text/javascript">
-
var msg = 'ahui1193451014小辉18694597894你好11599874857';
-
window.onload = function () {
-
//这里使用()来进行来组的划分
-
var regex=/(\d{3})\d{4}(\d{4})/;
-
var result = regex.exec(msg);
-
while (result) {
-
alert(result);
-
result = regex.exec(msg);
-
}
-
};
-
</script>
5:字符串的match()方法和replace()方法来操作正则表达式。
Match():是匹配正则,replace():实现替换
-
<script type="text/javascript">
-
var msg = 'ahui1193451014小辉18694597894你好11599874857';
-
window.onload = function () {
-
var datas = msg.match(/\d+/g);//正则要加全局模式
-
for (var i = 0; i < datas.length; i++) {
-
alert(datas[i]);
-
}
-
};
-
</script>