码迷,mamicode.com
首页 > 编程语言 > 详细

我的第十九篇博客---JavaScript基本操作

时间:2019-05-26 16:21:09      阅读:135      评论:0      收藏:0      [点我收藏+]

标签:索引   多维数组   script   下标   inpu   字符   使用   切片   fonts   

通过条件来控制程序的走向,就需要用到条件语句
条件运算符:
==, ===, >, >=, <, <=, !=, &&(而且), ||(或者), !(否)

if else
var iNum01=3;
var iNum02=5;
var sTr;
if (iNum01>iNum02){
sTr=‘大于‘;
}
else
{
sTr=‘小于‘;
}
alert(sTr);

多重 if else 语句
var iNow=1;
if(iNow==1)
{
...;
}
else if (iNow==2)
{
...;
}
else
{
...;
}

 

获取页面元素

document.ElementByid(‘a‘).value 获取表单里的内容
document.ElementById(‘a‘).innerHTML 获取文字内容
c=document.ElementById(‘a‘)
c.name 获取 属性值

 


可以使用内置对象document上的getElementByld方法来获取页面上设置了id属性的元素,获取到的是一个html对象,然后将它赋值给一个变量,比如:
<script type=‘text/javascript‘>
var oDiv=document.getElementById(‘div1‘);
</script>
...
<div id=‘div1‘>这是一个div元素</div>

上面的语句,如果吧javascript写在元素的上面,就会出错,因为页面上从上往下加载执行的,javascript去页面上获取元素div1的时候,元素div1还没有加载,解决办法有两种:
第一种方法:将javascript放到页面最下边
...
<div id="div1">这是一个div元素</div>
...
<script type="text/javascript">
var oDiv=document.getElementById(‘div1‘);
</script>

第二种方法:将javascript语句放到window.onload触发的函数里面,获取元素的语句会在页面加载完后才执行,就不会出错了
<script type="text/javascript">
window.onload=function(){
var oDiv=doucment.getElementById(‘div1‘);
}
</script>

...
<div id="id">这是一个div元素</div>

 

操作元素属性:

获取的页面元素,就可以对页面元素的属性进行操作,属性的操作包括属性的读和写

操作元素属性
var 变量=变量.属性名 读取属性
元素.属性名=新属性值 改写属性

属性名在js中的写法
1、html的属性和js里面的属性写法一样
2、“class"属性写成"className"
3、"style"属性里面的属性,有横杠的改成驼峰式,比如:‘font-size‘,改成‘style.fontSize‘

<scirpt type="text/javascript">
window.onload=function(){
var oInput=document.getElementById(‘link1‘);
//读取属性值
var sValue=oInput.value;
var sType=oInput.type;
var sName=oInput.name;
var sLins=oA.href;
//写(设置)属性
oA.style.color=‘red‘;
oA.style.fontSize=sValue;
}
</script>
...
<input type="text" name="setsize" id="input1" value="20px">
<a href="http://www.itcast.cn" id="link1">传智播客</a>


innerHTML
innerHTML可以读取或者写入标签包裹的内容
<script type="text/javascript">
window.onload=function(){
var oDiv=document.getElementById(‘div1‘);
//读取
var sTxt=oDiv.innerHTML;
alert(sTxt);
//写入
oDiv.innerHTML=‘<a href="http://www.itcast.cn">传智播客<a/>‘;
}
</script>
...
<div id="div1">这是一个div元素</div>

 

事件属性及匿名函数:

事件属性:
元素上除了有样式,id等属性外,还有事件属性,常用的事件属性由鼠标点击事件属性(onclick),鼠标移入事件属性(mouseover),鼠标移出事件属性(mouseout),将函数名称赋值给元素事件属性,可以将事件和函数关联起来。
<div id="a">我是你爸爸</div>
<script type="text/javascript">
var i=document.getElementById("a");
i.onclick=f;
function f(){
alert(‘ok!‘);
}
</script>

匿名函数
定义的函数可以不给名称,这个叫做匿名函数,可以将匿名函数的定义直接赋值给元素的事件属性来完成事件和函数的关联,这样可以减少函数命名,并且简化代码,函数如果做公共函数,就可以写成匿名函数的形式。
<script type="text/javascript">
window.onload=function(){ //等到页面加载完后自动执行该函数
var i=document.getElementById("a");
i.onclick=function(){
alert("ok!");
}
}
</script>

<div id="a">我是你爸爸</div>

 

数组操作:

数组及操作方法:
数组就是一组数据的集合。javascript中,数组里面的数据可以是不同类型的。
定义数组的方法:
//对象的实例创建
var alist=new Array(1,2,3);

//直接创建
var alist2=[1,2,3,‘asd‘];

操作数组中数据的方法:
1、获取数组的长度:alist.length;
var alist=[1,2,3,4];
alert(alist.length); //弹出4

2、用下标操作数据的某个数据:alist[0];
var alist=[1,2,3,4];
alert(alist[0]); //弹出1

3、join()将数组成员通过一个分隔符合并成字符串
var alist=[1,2,3,4];
alert(alist.join(‘-‘)); //弹出1-2-3-4

4、push()和pop()从数组最后添加成员或删除成员
var alist=[1,2,3,4];
alist.push(5);
alert(alist); //弹出1,2,3,4,5
alist.pop();
alert(alist); //弹出1,2,3,4

5、reverse()将数组反转
var alist=[1,2,3,4];
alist.reverse();
alert(alist); //弹出4,3,2,1

6、indexOf()返回数组中元素第一次出现的索引值
var alist=[1,2,3,4,1,3,4];
alert(alist.indexOf(1)); //弹出0

7、splice()在数组中增加或删除成员
var alist=[1,2,3,4];
alist.splice(2,1,7,8,9); //从第二个元素开始,删除一个元素,然后在此位置增加7,8,9三个元素
alert(alist); //弹出1,2,7,8,9,4

多维数组
多维数组指的是数组的成员也是数组的数组
var a=[[1,2,3],[‘a‘,‘b‘]];
alert(a[0][1]]); //弹出2;

 

字符串操作:

1、字符串合并:+
var i01=12;
var i02=24;
var i03=‘12‘;
var i04=‘24‘;
alert(i01+i02); //弹出36
alert(i03+i04); //弹出1224
alert(i01+i03); //弹出1224 数字和字符串相加等同于字符串相加


2、parseInt()将数字字符串转化为整数
var i01=‘12‘;
var i02=‘24‘;
var i03=‘12.34‘;
alert(i01+i02); //弹出1224
alert(parseInt(i01)+parseInt(i02)) //弹出36
alert(parseInt(i03)) //弹出数字12 将字符串小数转化为 数字整数

3、parseFloat()将数字字符串转化为小数
var i=‘12.43‘
alert(parseFloat(i)) //弹出12.43

4、split()把一个字符串分割成字符串组成的数组
var s=‘2017-4-22‘;
var a=s.split("-");
var b=s.spilt("");
alert(a); //弹出[‘2017‘,‘4‘,‘22‘]
alert(b); //弹出[‘2‘,‘0‘,‘1‘,‘7‘,‘-‘,‘4‘,‘-‘,2‘,‘2‘]

5、indexOf()查找字符串是否含有某字符
var s=‘abcdefgh‘;
var i=s.indexOf("c");
alert(i); //弹出2

6、substring()截取字符串用法:substring(start,end) (不包括end)
跟python里的字符串切片一样 不过python里是以:分隔,JavaScript是以,分隔
var s=‘abcdefghjkl‘;
var s2=s.substring(3,5);
var s3=s.substring(1);
alert(s2); //弹出de
alert(s3); //弹出bcdefghijkl

7、字符串反转:
var s=‘abcd‘;
var s2=s.split(‘‘).reverse().join(‘‘);
alert(s2) //弹出dcba

调试程序的方法:
1、alert
2、console.log
3、document.title

 

 定时器:

定时器在javascript的作用
1、定时调用函数
2、制作动画

定时器类型及语法

/*
定时器:
setTimeout 只执行一次的定时器
clearTimeout 关闭只执行一次的定时器
setInterval 反复执行的定时器
clearInterval 关闭反复执行的定时器
*/

var time1 = setTimeout(myalert,2000);
var time2 = setInterval(myalert,2000);

/*
clearTimeout(time1)
clearInterval(time2)
*/

function myalert(){
alert(‘ok!‘)
}

 

我的第十九篇博客---JavaScript基本操作

标签:索引   多维数组   script   下标   inpu   字符   使用   切片   fonts   

原文地址:https://www.cnblogs.com/sll-csdn/p/10926014.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!