dom 学习笔记 5

五十六、编程控制层练习点评
关键代码
<script type="text/javascript">
function IndexOf(arr, element) {
for (var i = 0; i < arr.length; i++) {
if (arr[i] == element)
return i;
}
return -1;
}

function initEvent() {
var rating = document.getElementById("rating");
var tds = rating.getElementsByTagName("td");
for (var i = 0; i < tds.length; i++) {
var td = tds[i];
td.style.cursor = "pointer";
td.onmouseover = function() {
//不用担心和initEvent中的ration 冲突 因为是不同的函数 只是写在一起了
var rating = document.getElementById("rating");
var tds = rating.getElementsByTagName("td");
var index = IndexOf(tds, this);
for (var i = 0; i <=index; i++) {
tds[i].innerText = "★";
}
for (var i = index+1; i < tds.length; i++) {
tds[i].innerText = "☆";
}
};
}
}

</script>
五十七、编程控制层案例
//设置文本框为搜索框 （如果没有ID可以再控件中传入this）
var txt1 = document.getElementById("txt1");
txt1.value = "输入搜索关键字";
txt1.style.color = "Gray";
txt1.onfocus = function() {
if (txt1.value == '输入搜索关键字') {
txt1.value = "";
txt1.style.color = "Black";
}

};
txt1.onblur = function() {
if (txt1.value == '') {
txt1.value = '输入搜索关键字';
txt1.style.color = "Gray";
}
};
五十九、编程操作表单
1、form对象时表单的Dom对象
2、方法 submit 提交表单
3、自动提交表单 onblur="document.getElementById('form1').submit()"
应用场景为:选择 北京、天津 等进入分站 后者选择山西 立即提交出现市
4、提交时候可以做个校验 ,如果不正确 return false; 则不提交
<form id="form1" runat="server" action="ok.aspx" onsubmit="if(document.getElementById('username').value=='') {alert('姓名不能为空');return false;}">
<div>
<input type="text" id="username" />

<input type="submit" />
<%-- 下面这种方式不会触发onsubmit事件--%>
<input type="button" value="button 提交" onclick="document.getElementById('form1').submit()" />
<input type="button" value="按钮1" onclick="alert('点我,我是button1')" id="btn1" />
<input type="button" value="按钮2" onclick="document.getElementById('btn1').click()" />
</div>
</form>
六十、不同浏览器的差异(*)
1、不同浏览器对DOM支持的方法不一样
(1)、获取网页中哪个元素使用了哪个事件,IE是srcElement,在fireFox 使用targer
(2)、使用DOM获取网页标签元素内文本 IE是innerText ,在fireFox 使用textContent
(3)、动态为网页或元素绑定事件 IE是attachEvent, fireFox 使用addEventListener
2、不同的浏览器对CSS支持也不一样的 哀悼网页使用的CSS只有IE支持 FF不支持
3、JQuery之类的框架进行了封装,将不同的浏览器差异帮开发人员处理了,开发人员只要调用JQuery的方法
JQuery会帮助在不同浏览器中进行翻译



六十一、JS中的正则表达式
1、JavaScript 中创建正则表达式类的方法
var regex=new RegExp("\\d{5}")\d 代表数字 {5} 代表5个数字
或者 var regex=/\d{5}/ 连个斜线加正则表达式 类似C# @
2、RegExp对象方法
(1)、test(str)判断str是否满足正则表达式,相当于IsMatch
var regex=/.+@.+/;//.代表任意字符 + 代表1到多个字符
(2)、exec(str) 进行搜索匹配 返回值为匹配结果
(3)、compile编译表达式、提高运行速度

3、string 的正则表达式方法
String对象中提供了一些与正则表达式相关的方法,相当于对于RegExp类的包装,简化调用
match(regexp),相当于调用exec
var s = "[e-mail]";
var regex = /(.+)@(.+)/;
var match = s.match(regex);
alert(RegExp.$1 + "服务器:"+RegExp.$2);
六十二、回车实现Tab跳转
1、响应文本框的onKeyDown事件
2、window.event.keyCode获得用户点击的keyCode
3、由于事件冒泡 所以可以监听外层的onKeyDown事件
4、if(window.event.keyCode==13) {window.event.keyCode=9} 只有少数的键可以替换，大部分不行有权限问题

keyCode
ascii码说明
8退格键46delete
37-40方向键
48-57小键盘的数字
96-105主键盘的数字
110、190小键盘区和主键盘区的小数点
189、109小键盘区和主键盘区的负号
9tab键
13回车

5、财务软件要求
金额框不能使用中文输入法style="ime-mode:disabled" IE有效 禁用输入法
不能输入非数字监听onKeyDown
((k == 9) || (k == 46) || (k == 8) || (k == 189) || (k == 109) || (k == 110) || (k == 190) || (k >= 48 && k <= 57) || (k >= 96 && k <= 105) || (k >= 37 && k <= 40));

焦点在文本框中时文本框左对齐，离开后使用右对齐 this.style.textAlign='left'


6、replace 只能替换第一个符合的值
例如
var str = "123,345,456,789";
alert(str.replace(',', '')); 结果为123345,456,789

用正则可以喜欢全部 /,/代表替换的是, g表示替换所有
var str = "123,345,456,789";
alert(str.replace( /,/g, '')); 结果为123345,456,789
关键代码
function isVaildNum(ch) {
var k = ch;
return ((k == 9) || (k == 46) || (k == 8) || (k == 189) || (k == 109) || (k == 110) || (k == 190) || (k >= 48 && k <= 57) || (k >= 96 && k <= 105) || (k >= 37 && k <= 40));

}


function numKeyDown() {
var k = window.event.keyCode;
//判断K 是否是合法的ascii
return isVaildNum(k);
}
function numPaste() {
var text = clipboardData.getData('Text');
for (var i = 0; i < text.length; i++) {
var asc = text.charAt(); //"3" charCodeAt 去到得是AscII码
asc = text.charCodeAt(i);
if (isVaildNum(asc)) {

}
else {
return false;
}

}
return true;
}

<input type="text" id="txtMoney" style="ime-mode:disabled" onkeydown= "return numKeyDown()" onpaste="return numPaste()" />

六十六、练习省市
multiple="multiple" size="10" 多选和listBox风格
option 的selected属性判断是否选中

<script type="text/javascript">
var data = { '山西': ['太原', '运城', '临汾'], "河南": ["郑州", "洛阳", "三门峡"], "山东": ["济南", "青岛", "廊坊"] };
function loadProv() {
var prov = document.getElementById("prov");
for (var key in data) {
var option = document.createElement("option");
option.value = key;
option.innerText = key;
prov.appendChild(option);
}

}
function provChange() {
var prov = document.getElementById("prov");
var city = document.getElementById("city");
//alert(city.childNodes.length);

//方法1 清除旧的列表 如果从前往后删除 每次都有漏网之鱼
for (var i = 0; i < city.childNodes.length; i++) {
var option = city.childNodes[i];
city.removeChild(option);
i--;
}

for (var i = city.childNodes.length - 1; i >= 0; i--) {
var option = city.childNodes[i];
city.removeChild(option);
}

//可以清除
//city.options.length = 0;

//也可以每次都删除第0个

var provName = prov.value;
if (provName == "none")
return;
var citys = data[provName]; //取出来的呢荣 ['太原', '运城', '临汾']
for (var i = 0; i < citys.length; i++) {
var option = document.createElement("option");
option.value = citys[i];
option.innerText = citys[i];
city.appendChild(option);
}
}

</script>


<div>
<label for="prov">
省</label>
<select id="prov" onchange="provChange()">
<option value="none">请选择省 </option>
</select>
<br />
<label for="city">
市</label>
<select id="city">
</select>
</div>
六十七、歌曲全选 不选 反选
<script type="text/javascript">
//flag 传入checked 全选 ''全不选 3 反选
function selAll(flag) {
var playlist = document.getElementById("playlist");
var inputs = playlist.getElementsByTagName("input");
for (var i = 0; i < inputs.length; i++) {
var input;
input = inputs[i];
//说明是反选
if (flag == 3) {
input.checked = !input.checked;
}
else {
if (input.type == "checkbox") {
input.checked = flag;
}
}
}
}

</script>

权限选择实例
function moveSelected(selectSrc, selectDest) {
//便利源
for (var i = 0; i < selectSrc.childNodes.length; i++) {
var option = selectSrc.childNodes[i];
if (option.selected == true) {
option.selected = false;
selectSrc.removeChild(option);
selectDest.appendChild(option);
}

}


}

布局最好用CSS float