javascript
- javascript里没有集合,只有数组
js隔行换色
- table标签补充
- table标签第一行用<thead><tr><th></th></tr></thead>
- table标签表格内容用<tbody><tr><td></td></tr></tbody>
- 思路:
- onload函数在页面加载完成后调用函数
- onload可以在body标签中调用一个有名的函数,但是直接在script标签通过:window.onload = function() {}调用也一样
- document.getElementById()获取表格元素(为了获取表格中tbody的行数)
- tBody中rows.length获取所有的行数
- onload函数在页面加载完成后调用函数
<script>
window.onload = function(){
//1.获取表格
var tblEle = document.getElementById("tbl");
//2.获取表格中tbody里面的行数(长度)
var len = tblEle.tBodies[0].rows.length;
//alert(len);
//3.对tbody里面的行进行遍历
for(var i=0;i<len;i++){
if(i%2==0){
//4.对偶数行设置背景颜色
tblEle.tBodies[0].rows[i].style.backgroundColor="pink";
}else{
//5.对奇数行设置背景颜色
tblEle.tBodies[0].rows[i].style.backgroundColor="gold";
}
}
}
</script>
鼠标移动到哪一行,表格哪一行颜色不一样
- onmouseover & onmouseout
<script>
function changeColor(id,flag){
if(flag=="over"){
document.getElementById(id).style.backgroundColor="red";
}else if(flag=="out"){
document.getElementById(id).style.backgroundColor="white";
}
}
</script>
# 网页加载完测后对元素设置事件
<script>
window.onload = function(){
document.getElementById("btn").onclick = function(){
location.href="xxx.html"
}
}
</script>
- 常用事件:
- onblur:元素失去焦点(表单校验)
- onfocus:获取焦点(表单校验)
- onchange:用户改变区域内的内容(二级联动)
- onclick:点击
- ondblclick:双击
- onload:某个页面或者图像加载完成
- onmouseover:鼠标悬浮在元素上
- onmouseout:鼠标离开元素范围
- onsubmit:提交表单
- onkeydowm:键盘按下(网页搜索监听)
- onkeypress:键盘释放(网页搜索)
js完成复选框全选效果
- 应用:群发邮件,批量操作
- 实现:目前只能使用传统的javascript来实现
- document.getElementsByName:获取多个
<script type="text/javascript">
function selectAll(element) {
var flag = element.checked;
elements = document.getElementsByClassName("checked");
for (var i = 0; i < elements.length; i++) {
elements[i].checked = flag;
}
}
</script>
DOM的操作
- DOM:
- document:html被浏览器解析后生成的树结构的文档对象模型
- 每个载入浏览器的html文档都会成为document对象
- 所有的标签都是Element(元素)
- 标签中的属性:attributte
- 标签中的内容:text
- 以上的document,element,attribute,text都统称为node
- document:html被浏览器解析后生成的树结构的文档对象模型
- document对象:
- getElementById:获取单个Element
- getElementsByName:获取Element数组
- getElementsByTagName:获取Elment数组
- ==创建文本节点:document.createTextNode()==
- ==创建元素节点:document.createElement()==
- element对象
- element.appendChild():在元素里追加子节点
- element.firstChild:返回元素首个子元素
- element.getAttribute():获取节点中某个具体属性
- element.innerHTML():设置或者返回元素的内容
- element.insertBefore():在指定子节点前插入子元素
- element.lastChild:返回最后一个子元素
- element.setAttribute():将制定属性设置为制定值
- attribute对象:
- attirb.value:获取属性值
<!--动态添加城市--
<script type="text/javascript">
function addCity() {
var textNode = document.createTextNode('杭州')
var liEle = document.createElement('li')
liEle.appendChild(textNode)
//通过liEle.inerHTML = '杭州'也可以添加
var cityList = document.getElementById('cityList')
cityList.appendChild(liEle)
}
</script>
js完成二级联动效果
- 开发中特别常用
- 使用二维数组存储省市(实际开发中从数据库中获取数据)
- 用户选择省份(通过方法传参的方式:this-代表当前操作的对象,this.value)
- javascript中数组对象:
- 创建对象：
- new Array()
- new Array(size)
- new Array(ele1, ele2, ele3,...)
- 创建对象：
- 清空下拉列表的内容:
- selection.options.length = 0
<script>
//1.创建一个二维数组用于存储省份和城市
var cities = new Array(3);
cities[0] = new Array("武汉市","黄冈市","襄阳市","荆州市");
cities[1] = new Array("长沙市","郴州市","株洲市","岳阳市");
cities[2] = new Array("石家庄市","邯郸市","廊坊市","保定市");
cities[3] = new Array("郑州市","洛阳市","开封市","安阳市");
function changeCity(val){
//7.获取第二个下拉列表
var cityEle = document.getElementById("city");
//9.清空第二个下拉列表的option内容
cityEle.options.length=0;
//2.遍历二维数组中的省份
for(var i=0;i<cities.length;i++){
//注意，比较的是角标
if(val==i){
//3.遍历用户选择的省份下的城市
for(var j=0;j<cities[i].length;j++){
//alert(cities[i][j]);
//4.创建城市的文本节点
var textNode = document.createTextNode(cities[i][j]);
//5.创建option元素节点
var opEle = document.createElement("option");
//6.将城市的文本节点添加到option元素节点
opEle.appendChild(textNode);
//8.将option元素节点添加到第二个下拉列表中去
cityEle.appendChild(opEle);
}
}
}
}
</script>
javascript内置对象
-
Array:
- 数组的长度可变
- 数组长度为最大索引 + 1
-
Boolean:
- new Boolean(val):如果参数不写,默认创建的为false
-
Date:
- getTime():返回时间戳,访问网站,浏览器默认从缓存里取,如果加上时间戳,则不会取缓存的(解决浏览器缓存问题)
Math:与java里的基本一致
Number:与java里的基本一致
-
String:
- match():匹配正则表达式
- subStr(start, counts):从起始索引提取字符串中指定数目的字符
- subString(start, end):提取字符串中两个指定索引号之间的字符(包头不包尾)
<script> var str = "-a-b-c-d-e-f-"; var str1 = str.substr(2,4);//-b-c //alert(str1); var str2 = str.substring(2,4);//-b alert(str2); </script> -
RegExp:正则表达式
- test():检索字符串中指定的值
-
Functions:
- 全局函数(直接用,不需要创建对象)
- decodeURI():解码某个编码的URI
- decodeURIComponent():解码一个编码的URI组件
- encodeURI():把字符串编码为URI
- encodeURIComponent():把字符串编码为URI组件
- eval():执行字符串里的代码
- parseInt():
- parseFloat():
- String():把对象转成字符串
- 全局函数(直接用,不需要创建对象)
<script>
var str = "张三";
//alert(encodeURI(str));//%E5%BC%A0%E4%B8%89
//alert(encodeURIComponent(str));//%E5%BC%A0%E4%B8%89
//alert(decodeURI(encodeURI(str)));//张三
//alert(decodeURIComponent(encodeURIComponent(str)));//张三
var str1 = "http://www.itheima.cn";
//alert(encodeURI(str1));//http://www.itheima.cn
//alert(encodeURIComponent(str1));//http%3A%2F%2Fwww.itheima.cn
//alert(decodeURI(encodeURI(str1)));//http://www.itheima.cn
//alert(decodeURIComponent(encodeURIComponent(str1)));//http://www.itheima.cn
var str2 = "alert('abc')";
//alert(str2);
eval(str2);
</script>
