第1章 DOM
1.1.1 什么是DOM
DOM：Document Object Model 文档对象模型，定义访问和操作结构化文档（HTML）的方式。
创建的结构化文档：html、xml 等
DOM包括：核心DOM、HTML DOM、XML DOM。通常情况下HTML DOM 和XML DOM是可以相互使用的。
HTML DOM 将 整个HTML文档呈现成一颗DOM树，树中有元素、属性、文本等成员。
1.1.2 document文档对象
浏览器加载整个HTML文档形成Document 对象，Document 对象可以访问和操作HTML文档中的所有元素。
标签元素的操作
1）获得元素对象：
根据id获得一个元素：getElementById(id属性值)
根据标签名称获得多个元素：getElementsByTagName(标签名称)
根据class属性获得多个元素：getElementsByClassName(class的属性值)
根据name属性获得多个元素：getElementsByName(name属性值)
2）创建一个新元素createElement()
3）将元素放到某个父元素的内部appendChild()
4）标签体的获取与设置：innerHTML
属性的操作
获得属性的值：getAtrribute(name)
设置属性的值：setAtrribute(name,value)
删除某个属性：removeAtrribute(name)
第2章 JavaScript内置对象
2.1 String对象
JS的对象也分为内置对象和定义对象,Java中Object,String,System属于内置对象,自定义的Person,Student属于自定义的对象.
JS的自定义对象是函数实现的
<script type="text/javascript">
/*
String对象
*/
var str = "abc"// typeof 输出string
var str2 = new String(str); //typeof 输出 object
//以上定义方式,都可以使用String对象的方法
var s = "a-b-c-de-FG";
//字符串的长度
//alert(s.length);
//指定索引找字符
//alert(s.charAt(1));
//字符第一次出现的索引
//alert(s.indexOf("c"));
//字符最后一次出现的索引
//alert(s.lastIndexOf("c"));
//切割字符串
/*var strArr = s.split("-");
for(var i = 0 ; i < strArr.length;i++){
alert(strArr[i]);
}*/
//获取索引之间的字符
//alert(s.substring(1,3));
//获取索引开始到长度的字符
//alert(s.substr(1,3));
</script>
2.2 Date对象
JS中的日期对象
<script type="text/javascript">
/*
* Data对象
* 创建方式直接new
*/
var date = new Date();
//拼接年月日
alert(date.getFullYear()+"年"+(date.getMonth()+1)+"月"+date.getDate()+"日");
//获取毫秒值
alert(date.getTime());
</script>
2.3 Math对象
Math是数学计算的对象,此对象无需创建,直接Math.调用
<script type="text/javascript">
/*
Math对象
直接调用
*/
//向上取整
alert(Math.ceil(3.14));
//向下取整
alert(Math.floor(3.14));
//四舍五入取整
alert(Math.round(3.14));
</script>
2.4 Array数组对象
<script type="text/javascript">
/*
数组对象定义方式
new Array();
new Array(size);
new Array(element0, element0, ..., elementn);
*/
//定义数组对象
var arr1 = new Array();
//赋值元素
arr1[0] = 1;
arr1[1] = "a";
arr1[2] = 2.2;
alert(arr1);
//定义数组对象
var arr2 = new Array(3);
//打印数组长度
alert(arr2.length);
//定义数组对象
var arr3 = new Array(3,4,5,"a",true);
alert(arr3);
//开发中最常用方式
var arr4 = [1,2,3,4,"a","b","c"];
for(var i = 0 ; i< arr4.length;i++){
alert(arr4[i]);
}
//定义二位数组
var arr5 = [
[1,2,3],["a",4,"b"],[true,5,false]
];
//打印3
alert(arr5[0][2]);
//打印a
alert(arr5[1][0]);
//打印false
alert(arr5[2][2]);
</script>
2.5 RegExp正则表达式对象
JS中的正则表达式和Java中的正则表达式相似
定义方式: 直接定义和创建对象方式
<script type="text/javascript">
/*
* JS内置对象RegExp,正则表达式对象
* 正则表达式意义: 对复杂字符串进行处理的技术
* 正则表达式的本质:是一种规则,字符串和规则进行匹配,成功true
* 写正则表达式的规则
* 规则写法:
* [a-z] 这个字符必须是小写字母
* [abc] 字符必须是abc
* [0-9] 这个字符必须是数字
* [a-zA-Z0-9] 这个字符必须是字母或者是数字
* [^a-z] 这个字符不是小写字母 ^
* [\d] 等同于[0-9]
* [\w] 等同于[a-zA-Z0-9_]
* [\D] 等同于[^0-9]
* [\W] 等同于[^a-zA-Z0-9_]
* X* X这个字符可以出现零次或者多次
* X? X这个字符可以出现零次或者一次
* X+ X这个字符可以出现一次或者多次
* X{m} X这个字符出现次数正好m次
* X{m,} X这个字符出现次数至少m次
* X{m,n} X这个字符出现次数至少m次,最多n次
*/
//要求: 手机号,验证格式 13800138000
// 1开头 第二位 3567894 第三位必须数字-11
//JS中,定义正则表达式规则 定义在 /规则/ 内部
var telReg = /^1[3567894][0-9]{9}$/;
//正则表达式对象方法 test(字符串)
var bool = telReg.test("13800138000");
//alert(bool);
//需求: 用户名字母,数字,6-8
var userReg = /^[a-zA-Z0-9]{6,8}$/;
alert(userReg.test("tomtom"))
//String reg = "[0-9]"; "abc".matches(reg);
</script>
第3章 隔行换色
<script type="text/javascript">
/*
* 实现思想:
* 表格行,分出奇偶数
* 奇数行,设置背景色
* 偶数行,设置背景色
* tagName("tr")返回数组,数组有索引的
* 设置背景色
*/
var trs=document.getElementsByTagName("tr");
for (var i = 2; i < trs.length; i++) {
if (i%2==0) {
trs[i].bgColor="AAAAAA";
}else{
trs[i].bgColor="ABF123";
}
}
//定义变量,保存变化后的颜色
var color="";
for (var i = 2; i < trs.length; i++) {
trs[i].onmouseover=function(){
color=this.bgColor;
this.bgColor="FA0000";
}
trs[i].onmouseout=function(){
this.bgColor=color;
}
}
</script>
第4章 全选和全不选
<script type="text/javascript">
/*
* 定义名字:
* 上面复选框,总选框
* 下面复选框,分选框
*
* <input type="checkbox" > 属性 checked="checked"
* 所有的分选框的属性 checked属性值,跟随总选框checked属性值
*/
function selectAll(){
var zong=document.getElementById("zong");
var checkboxs =document.getElementsByClassName("itemSelect");
for (var i = 0; i < checkboxs.length; i++) {
checkboxs[i].checked=zong.checked;
}
}
</script>
第5章 省市联动
<script type="text/javascript">
// 定义二维数组:存储省市信息
var pros = [
["朝阳","海淀","昌平"],["长春市","锦州市","吉林市"],["南京市","苏州市","徐州市"]
];
function selectCity(province){
//获取选中省份的市数组
var cityArr = pros[province];
//获取城市的select标签对象
var cityEle = document.getElementById("cityId");
//添加之前先清空option子标签
cityEle.innerHTML="";
//创建请选择的option子标签
var optionEle = document.createElement("option");
optionEle.innerHTML="----请-选-择-市----";
cityEle.appendChild(optionEle);
//遍历数组,几个元素就创建几个子option标签
for(var i = 0;i < cityArr.length;i++){
//创建子标签
var optionEle = document.createElement("option");
//设置子标签的标签体内容
optionEle.innerHTML=cityArr[i];
//添加子标签
cityEle.appendChild(optionEle);
}
}
</script>
第6章 表单注册
<script type="text/javascript">
function checkForm(){
//获取填写用户名,数字,字母,下划线,长度6-10
var username =document.getElementById("loginnameId").value;
//定义用户名的规则
var userReg = /^[a-zA-Z0-9_]{6,10}$/;
if(userReg.test(username)){
//验证通过
//return true;
}else{
//验证失败
var userMsg=document.getElementById("userMsg");
userMsg.innerHTML="用户名必须是数字字母下划线,长度6-10";
userMsg.style.color="red";
return false;
}
//获取填写邮件地址
var email = document.getElementById("emailId").value;
//定义邮件的正则规则: shisong@163.com 123213123@qq.com.cn shisong@itcast.cn
/*@前面:字母数组下划线
*@后面:小写字母,数组
*/
var emailReg=/^[a-zA-Z0-9_]+@[a-z0-9]+(\.[a-z]+)+$/;
if(emailReg.test(email)){
//验证通过
return true;
}else{
//验证失败
var emailMsg = document.getElementById("emailMsg");
emailMsg.innerHTML="邮箱格式不正确";
emailMsg.style.color="red";
return false;
}
}
</script>
扫一扫
2990
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
