JavaScript基础二

最新推荐文章于 2018-12-20 10:02:03 发布

langao_

最新推荐文章于 2018-12-20 10:02:03 发布

阅读量264

点赞数

分类专栏：前端文章标签： javscript

本文链接：https://blog.csdn.net/langao_q/article/details/80956580

版权

前端专栏收录该内容

8 篇文章 0 订阅

订阅专栏

1.新的html标签

<thead>和<tbody>：嵌于<table>标签中，把表格分为了表头<thead>和表内容<tbody>两部分

<table border="1" width="500" height="50" align="center" id="tbl">
	<thead>
		<tr>
			<th>编号</th>
			<th>姓名</th>
			<th>年龄</th>
		</tr>
	</thead>
	<tbody>
		<tr >
			<td>1</td>
			<td>张三</td>
			<td>22</td>
		</tr>
	</tbody>
</table>

2.on事件（划重点）

onload：某个页面或图像被完成加载，一般放在<body>里，即页面加载完就执行的事件

onsubmit：submit提交按钮被点击，有返回值，控制表单是否提交，返回false即不提交表单内容

onchang：用户改变域的内容，省市二级联动

onclick：鼠标单击事件，按钮单击后执行某操作

ondblclick：鼠标双击事件，按钮双击后执行某操作

onfocus：得到焦点，注册表单校验时弹出提示信息

onblur：失去焦点，注册表单校验，内容合法删除提示信息

onmouseover：鼠标移到上面，购物网站商品详情

onmouseout：鼠标从上面移开，购物网站商品详情

以上为几个常用事件，遇到不熟的事件查询w3c手册即可（百度亦可）

3.编写JavaScript程序思路：

先确定事件（on），之后在事件中编写需求代码

4.javascript三大组成部分之DOM操作

DOM（Document ，Element，Attribute）

4.1）Document 对象：整个html文件都成为一个document文档

getElementById()	返回对拥有指定 id 的第一个对象的引用。
getElementsByName()	返回带有指定名称的对象集合。
getElementsByTagName()	返回带有指定标签名的对象集合。

getElementsByName()，getElemengtsByIdName()：得到的是数组，需要循环遍历

document.createTextNode()：创建文本节点

document.createElement()：创建元素节点

4.2）Element对象：所有的标签都是Element元素，语法格式（标签.Element对象方法）

element.appendChild()	向元素添加新的子节点，作为最后一个子节点。
element.firstChild	返回元素的首个子节点。
element.getAttribute()	返回元素节点的指定属性值。
element.innerHTML	设置或返回元素的内容。
element.insertBefore()	在指定的已有的子节点之前插入新节点。
element.lastChild	返回元素的最后一个子元素。
element.setAttribute()	把指定属性设置或更改为指定值。
element.removeChild()	从元素中移除子节点。
element.replaceChild()	替换元素中的子节点。

4.3)Attribute对象：标签里面的属性

attr.value：设置或返回属性的值

5.JavaScript内置对象

内置对象：Array，Boolean，Date，Math，Number，String，RegExp

Array对象：Array对象用于在单个变量中储存多个值，语法如下：

new Array();
new Array(size);
new Array(element0, element1, ..., elementn);

size是期望的数组元素个数，数组的特点：长度可变！数组的长度=最大角标+1

Boolean对象：boolean只有true和false两种值

new Boolean(value);	//构造函数
Boolean(value);		//转换函数

如果value不写，那么默认的创建结果为false

Date对象：用于处理日期和时间

var myDate=new Date()

getTime()返回1970年1月1日至今的毫秒数，解决浏览器缓存问题

Math和Number对象

与java对象基本一致，需要时查询文档（或百度）

String对象：处理文本（字符串）

new String(s);
String(s);

substr：从起始索引提前指定数目的字符

substring：提前两个索引之间的字符

<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：检索字符串中指定的值。返回true或false

<script>
    function validation(){
	//验证邮箱，el表达式
	var ema = document.getElementById("email").value;
	if(!/^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(.[a-zA-Z0-9_-])+/.test(ema)){
		alert("邮箱格式不正确");
		return false;
	}
    }
</script>