您现在的位置是:首页 > web开发 > JS笔记-强化版2

JS笔记-强化版2

web开发作者:dayu日期:10天前点击:5



<input type="radio" name="sex" value="男" />男

<input type="radio" name="sex" value="女" />女



<input type="checkbox" name="aihao" value="电影" />电影

<input type="checkbox" name="aihao" value="音乐" />音乐

<input type="checkbox" name="aihao" value="体育" />体育



<select name="city" value="">

<option>请选择一个城市</option>

<option value="北京">北京</option>

<option value="上海">上海</option>

<option value="广州">广州</option>

<option value="深圳">深圳</option>

</select>

</form>


可以用name获取表单中一个元素
表单.元素name:form1.username

onchange: 当表单值发生改变的时候触发。

文本:
text : 当光标离开元素的时候再去判断值是否发生了变化,如果发生了变化则触发onchange事件
oForm.username.onchange = function() {
alert(‘值变了‘);
}

单选、多选:
name值要相同为一类,否则失效。
radio、checkbox: 标准下点击的时候如果值变化了就会触发on change
非标准下焦点离开的时候如果值变了会触发

oForm.sex[0].onchange = function() {
alert(this.value);//值
alert(this.checked);//是否被选中
}

下拉菜单:
选择后就会触发onchange事件。
oForm.city.onchange = function (){
alert(this.value );
}


<formaction="http://www.baidu.com">
<input type="text" name="username" />
<input type="password" name="password" />
<input type="submit" value="提交" />
<input type="reset" value="重置" />
</form>



onsubmit: 事件 当表单被提交的时候触发
oForm.submit(); 方法 提交表单

oForm.onsubmit = function() {

if (this.username.value == ‘‘) {
alert(‘请填写用户名‘);
return false;
}

}

onreset: 当表单要重置的时候触发
oForm.onreset = function() {

/*if ( confirm(‘你确定要重置?‘) ) {
return true;
} else {
return false;
}*/

return confirm(‘你确定要重置?‘);

}






2、BOM


BOM : Browser Object Model 浏览器对象模型

1) window.open() \ close()

open(地址默认是空白页面,打开方式默认新窗口) 打开一个新窗口


aInput[0].onclick = function() {

window.open(‘http://www.baidu.com‘, ‘_self‘);
opener = window.open();//返回值 返回的新开页面的window对象
opener.document.body.style.background = ‘red‘;

window.close();
ff : 无法关闭
chrome : 直接关闭
ie : 询问用户

opener.close(); //可以通过关闭用window.open方法打开的新窗口

}


2)window.navigator.userAgent : 浏览器信息

alert( window.navigator.userAgent )

if ( window.navigator.userAgent.indexOf(‘MSIE‘) != -1 ) {
alert(‘我是ie‘);// ie8的MSIE是8.0 ,7是7.0 ..
} else {
alert(‘我不是ie‘);
}


3)window.location : 地址


window.location.href = window.location内容
window.location.search = url?后面的内容
window.location.hash = url#后面的内容


4)宽高


可视区尺寸
alert( document.documentElement.clientHeight );

document.onclick = function() {
//滚动距离
//alert( document.documentElement.scrollTop );//除去chrome

//alert( document.body.scrollTop );//chrome

//document.documentElement.scrollTop = 100

var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;

//alert(scrollTop)

var oDiv = document.getElementById(‘div1‘);

//scrollHeight : 内容实际宽高

alert(oDiv.scrollHeight);

//offsetHeight
//alert( document.body.offsetHeight );

//ie : 如果内容没有可视区高,那么文档高就是可视区
//alert( document.documentElement.offsetHeight );


}

offsetTop :(left)
指 obj 距离body最上方或者定位父级的位置

clientHeight:(width)
大家对 clientHeight 都没有什么异议,都认为是内容可视区域的高度,也就是说页面浏览器中可以看到内容的这个区域的高度,一般是最后一个工具条以下到状态栏以上的这个区域,与页面内容无关。

offsetHeight:(width)
IE、Opera 认为 offsetHeight = clientHeight + 滚动条 + 边框。
NS、FF 认为 offsetHeight 是网页内容实际高度,可以小于 clientHeight。

scrollHeight:(width)
IE、Opera 认为 scrollHeight 是网页内容实际高度,可以小于 clientHeight。
NS、FF 认为 scrollHeight 是网页内容高度,不过最小值是 clientHeight

对某个HTML控件:(div...)
offsetHeight(width)是自身元素的高度,scrollHeight(width)是 自身元素的高度+隐藏元素的高度。



onscroll事件 : 当滚动条滚动的时候触发,在指定毫秒时间内触发一次

onresize事件 : 当窗口大小发生变化的时候触发




3、Event

1)焦点事件

焦点 : 使浏览器能够区分用户输入的对象,当一个元素有焦点的时候,那么他就可以接收用户的输入。
我们可以通过一些方式给元素设置焦点 1.点击 2.tab 3.js
不是所有元素都能够接收焦点的.能够响应用户操作的元素才有焦点。比如文本输入框、a标签..

onfocus : 当元素获取到焦点的时候触发

onblur : 当元素失去焦点的时候触发

oText.onfocus = function() {

if ( this.value == ‘请输入内容‘ ) {
this.value = ‘‘;
}

}
oText.onblur = function() {

if ( this.value == ‘‘ ) {
this.value = ‘请输入内容‘;
}

}

obj.focus() 给指定的元素设置焦点
obj.blur() 取消指定元素的焦点
obj.select() 选择指定元素里面的文本内容,适用于具有焦点事件的元素。


2)event事件对象、clientX、clientY

event : 事件对象 , 当一个事件发生的时候,和当前这个对象发生的这个事件有关的一些详细的信息都会被临时保存到一个指定地方-event对象,供我们在需要的调用。飞机-黑匣子

事件对象必须在一个事件调用的函数里面使用才有内容
事件函数:事件调用的函数,一个函数是不是事件函数,不在定义的决定,而是取决于这个调用的时候

兼容:
ie/chrome : event是一个内置全局对象
标准所有浏览器下 : 事件对象是通过事件函数的第一个参数传入
获取事件(Event)对象的兼容:ev = ev || window.event

如果一个函数是被事件调用的那么,这个函数定义的第一个参数就是事件对象

clientX、clientY : 当一个事件发生的时候,鼠标到页面可视区的距离


alert( event ); //这里没有事件

document.onclick = function() {
alert(event);
};

function fn1(ev) {
//alert( event );
//alert( ev );
var ev = ev || event; //event对象的兼容
//alert(ev);

/*for ( var attr in ev ) { // 把该事件对象的所有属性都列出来
console.log( attr + ‘ = ‘ + ev[attr] );
}*/

alert(ev.clientX);
}

//fn1(); //不是事件调用的函数
document.onclick = fn1; //是事件调用的函数,所以event有内容

eg:红色小方块跟随鼠标移动而移动:

<body>
<divvalue="确定"/>

JS:

window.onload = function(){
var aT = document.getElementsByTagName(‘textarea‘);
var oInput = document.getElementById(‘input1‘);

var re = /菲称|中国船|监视之下/g;

oInput.onclick = function(){

//aT[1].value = aT[0].value.replace(re,‘*‘); //这样只能把几个汉字转成一个*
aT[1].value = aT[0].value.replace(re,function(str){//函数的第一个参数:就是匹配成功的字符
var result = ‘‘;
for(var i=0;i<str.length;i++){

result += ‘*‘;
}
return result;
});

};

};





4)匹配子项 : 小括号 () (还有另外一个意思,分组操作)

把正则的整体叫做(母亲)
然后把左边第一个小括号里面的正则,叫做这个第一个子项(母亲的第一个孩子)
第二个小括号就是第二个孩子

var str = ‘2013-6-7‘;

var re = /(\d+)(-)/g;

str = str.replace(re,function($0,$1,$2){
//第一个参数:$0(母亲),第二个参数 : $1(第一个孩子)
//,第三个参数 : $1(第二个孩子)

//alert( $2 ); // -

//return $1 + ‘.‘;

return $0.substring(0,$0.length-1) + ‘.‘;

});

alert( str ); //2013.6.7



var str = ‘abc‘;

var re = /(a)(b)(c)/;

alert( str.match(re) ); //[abc,a,b,c](当match不加g的时候才可以获取到子项的集合)


5)字符类:

字符类 : 一组相似的元素 [] 中括号的整体代表一个字符,[]中的内容都是或的关系

var str = ‘abdc‘;

var re = /a[bde]c/;

alert( re.test(str) ); //true


排除 : ^ 如果^写在[]里面的话,就代表排除的意思

var str = ‘abc‘;

var re = /a[^bde]c/;

alert( re.test(str) ); // false


组合写法:[a-z0-9A-Z]:

var str = ‘abc‘;

var re = /a[a-z0-9A-Z]c/;

alert( re.test(str) );// true


6)量词 : 代表前面的值出现的次数,{n,m},至少出现n次,最多m次

{n,} 至少n次
* 任意次 {0,}
? 零次或一次 {0,1}
+ 一次或任意次{1,}
{n} 正好n次

eg:

{4,7} : 最少出现4次,最多出现7次
{4,} : 最少出现4次
{4} : 正好出现4次


7)正则收尾:^ 开始 $ 结束

^ : 正则的最开始位置,就代笔起始的意思
$ : 正则的最后位置 , 就代笔结束的意思

eg:去掉前后空格

var str = ‘ hello ‘;

alert( ‘(‘+trim(str)+‘)‘ ); // (hello)

function trim(str){

var re = /^\s+|\s+$/g;

return str.replace(re,‘‘);

}


8)正则与面向对象

把方法包在一个JSON里

var re = {
qq : /[1-9][0-9]{4,9}/,
email : /^\w+@[a-z0-9]+(\.[a-z]+){1,3}$/,
number : /\d+/
};

用的时候:re.email


9)常用正则例子:

匹配中文:[\u4e00-\u9fa5]
行首行尾空格:^\s*|\s*$
Email:^\w+@[a-z0-9]+(\.[a-z]+){1,3}$
网址:[a-zA-z]+://[^\s]*
QQ号:[1-9][0-9]{4,9}
邮政编码:[1-9]\d{5}
身份证:[1-9]\d{14}|[1-9]\d{17}|[1-9]\d{16}x

JS笔记-强化版2

原文地址:http://www.cnblogs.com/hello-web/p/7221465.html


下一篇       上一篇