一.JS三大组成部分
1.JavaScript文档对象类型操作:
什么是HTML DOM
文档对象模型（Document Object Model），是W3C组织推荐的处理可扩展置标语言的标准编程接口。简单理解就是HTML DOM 是关于如何获取、修改、添加或删除 HTML 元素的标准。我们用JavaScript对网页进行的所有操作都是通过DOM进行的。
获取dom页面元素的方式(3种):
(1)通过dom方法:getElementById():根据元素id获取元素
案例:
<script type="text/javascript">
// 通过dom方法获取页面元素,共有三种方法:
// (1)根据id获取页面元素
window.onload=function(){
var div=document.getElementById('div1');
// alert(div);
div.style.borderWidth=1+'px';
div.style.borderStyle='solid';
div.style.borderColor='green';
div.style.background='lightblue';
// div.style.border='1px solid blue';
div.style.width=200+'px';
div.style.height=100+'px'
div.style.margin='100px auto';
</script>
(2)通过getElementByClassName():根据元素class获取页面元素元素
案例:注意:(将javascript写在div元素之上且没有加载事件的时候,就会出错,因为页面加载是自上而下的)
JavaScript样式书写的位置有两种写法:(可以放在head/body中)
第一种方法：将 javascript 放到页面元素的最下边
<body>
<div id="div1"></div>
<script type="text/javascript">
var div=document.getElementById('div1');
alert(div);
div.style.borderWidth=1+'px';
div.style.borderStyle='solid';
div.style.borderColor='green';
div.style.background='lightblue';
div.style.width=200+'px';
div.style.height=100+'px'
div.style.margin='100px auto';
</script>
</body>第二种方法：将 javascript 语句放到 window.onload 触发的函数里面, 获取元素的语句会在页面加载完后才执行
<script type="text/javascript">
window.onload=function(){
// 因为getElementsByClassName()获取到的结果是一个集合,要想获取单个的元素使用索引的方式获取
var div=document.getElementsByClassName('div1')[0];
alert(div);
div.style.borderWidth=1+'px';
div.style.borderStyle='solid';
div.style.width=200+'px';
div.style.height=100+'px';
}
</script>
</head>
<body>
<div id="div1"></div>
<div id="div1>"</div>
</body>
(2)通过getElementByTagName():根据标签元素获取页面元素: (返回集合对象数组,可以通过*方式获取页面上所有的元素)
<body>
<div id="div1">好好学习天天向上<p>请认真听讲</p></div>
<div id="div1">好好学习天天向上<p>请认真听讲</p></div>
<div id="div1">好好学习天天向上<p>请认真听讲</p></div>
<script type="text/javascript">
var div=document.getElementsByTagName('*').innerHTML;
alert(div1);
</script>
</body>2.获取/写入页面元素中div的值 :通过innerHTML和innerText
innerHTML和innerText的区别:
共同点：innerHTML和innerText都会把元素内内容替换掉。
不同点：(1)innerHTML:也就是从对象的起始位置到终止位置的全部内容,包括Html标签。
(2)innerText:从起始位置到终止位置的内容, 但它去除Html标签
innerHTML是符合W3C标准的属性，而innerText只适用于IE浏览器，因此，尽可能地去使用innerHTML，
案例:innerHTML:获取页面元素中的内容(包括元素中html的子元素)
<body>
<div id="div1">好好学习天天向上<p>请认真听讲</p></div>
<script type="text/javascript">
var div=document.getElementById('div1');
alert(div);
var content=div.innerHTML;
alert(content);
</script>
</body>innerText:获取页面元素文本中的内容
<body>
<div id="div1">好好学习天天向上<p>请认真听讲</p></div>
<script type="text/javascript">
var div=document.getElementById('div1');
alert(div);
var content=div.innerText;
alert(content);
</script>
</body>
二.JS数组及数组方法
1.定义:数组就是一组数据的集合,可以用来存储不同数据类型的数据
2.数组的声明:(1)var 数组的名称=new Array();
(2)var 数组的名称=[数组值];
3.数组的初始化:(1)var 数组的名称=new Array(值1,'值2');------可以是不同类型的值(数字/字符串....)
(2)var 数组的名称=[值1,值2,值3.....];
(3)var 数组的名称=new Array();
数组名称[0]=值1;
数组名称[1]=值2;
.........
案例:数组初始化的3种方式(遍历数组使用length属性获取数组长度)
<script type="text/javascript">
// js是一种弱类型的脚本语言,索引可以存储不同数据类型
// 数组的初始化1:
var arr=new Array('abc',123,12.34,true);
// 根据索引获取数组中的第一个值,索引值从0开始
alert(arr[0]);
// 通过遍历数组的方式获取数组中所有的值
for(var i=0;i<arr.length;i++){
document.write(arr[i]);
}
// 数组的初始化方法2:
var arr1=new Array();
arr1[0]=10;
arr1[1]=20;
arr1[2]=35;
arr1[3]=66;
arr1[4]='hello';
// 数组的初始化方法3:
var arr1=new Array[12,15,20,60];
</script>三.操作数组数据的方法(7种):
(1) Join()：将数组成员通过一个分割符合并成字符串
(2) Push()和 pop()：从数组最后增加成员或是删除成员
(3) Unshift()和 shift()：从数组的前面增加成员或是删除成员
(4) Reverse()：将数组的数值进行翻转
(5) Indexof()：返回数组中元素第一次出现的索引值
(6) Splice()：在数组中增加或是删除成员
(7) Slice()：从一个数组中选择（截取元素)
<script type="text/javascript">
var arr=[10,9,8,7,6];
var str=['h','e','l','l','o'];
// (1) Join()：将数组成员通过一个分割符合并成字符串
document.write(arr.join('*')+'<br/>');
document.write(str.join('-'));
(2) Push()和 pop()：从数组最后增加成员或是删除成员
var str=['hi','hello','world'];
var num=str.push('js');
// document.write(str);
str.pop();
// document.write(str);
// (3) Unshift()和 shift()：从数组的前面增加成员或是删除成员
str.unshift('hei');
// document.write(str);
str.shift();
// document.write(str);
// (4) Reverse()：将数组的数值进行翻转
var num=[1,2,3,4,5,6];
num.reverse(num);
// document.write(num);
// (5) Indexof()：返回数组中元素第一次出现的索引值
var num1=[1,2,3,6,1,2,2];
var index=num1.indexOf(1);
// document.write(index);
// indexOf(2,2):第一个值表示要查询的数字;第二个字表示要起始查询的索引;
var index=num1.indexOf(2,2);
// 查询不到则返回-1
var index=num1.indexOf(2,7);
// document.write(index);
// (6) Splice()：在数组中增加或是删除成员
var num2=[1,2,3,4,5];
// splice(2,3,7,8,9):第一个值2表示要开始添加成员的索引;第二个值3表示删除3个成员(包含自身)
// 第三个值7,8,9表示在此位置上添加3个值7,8,9
num2.splice(2,3,7,8,9);
// document.write(num2);
// (7) Slice()：从一个数组中选择（截取元素)
var num3=[2,3,4,5,6,7,8,9];
// num2.slice(2,3);第一个值2表示开始截取的索引位置;第二个值3表示截取结束的索引位置(并不包含结束索引所对应的值)
var num4=num3.slice(2,6);
document.write(num4);
</script>
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
