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

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

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!‘)
}

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

时间: 2024-10-29 15:20:03

我的第十九篇博客---JavaScript基本操作的相关文章

我的第二十九篇博客---正则进阶

re.match() 从头找一个re.search() 找一个re.findall() 找所有返回一个列表,没有就是空列表re.findall('\d','chuan1zhi2') 结果为['1','2'] re.sub() 替换 re.sub('\d','_','chuan1zhi2') 结果为['chuan_zhi_'] re.compile(编译)返回一个模型p,具有和re一样的方法,但是传递的参数不同匹配模式需要传到compile中如果不使用re.S参数,则只在每一行内进行匹配,如果一行

阅读架构漫谈九篇博客有感-1500字

架构漫谈是由资深架构师王概凯撰写的系列专栏,逐步讨论什么是架构.怎样做好架构.软件架构如何落地.如何写好程序等问题. 架构漫谈分为九篇: 什么是架构? 认识概念是理解架构的基础 如何做好架构之识别问题 如何做好架构之架构切分 什么是软件 软件架构到底是要解决什么问题? 不要空设架构师这个职位,给他实权 从架构的角度看如何写好代码 理清技术.业务和架构的关系 第一篇 什么是架构? 主要讲到了缘起,什么是架构和为什么会产生架构. 由于问题越来越复杂,一个人已经很难完成想要完成的事情,而许多人一起却可

DataSnap起源于MIDAS(十几篇博客)

作为MIDAS起始于Delphi3,Delphi4是MIDAS II,Delphi5中是MIDASIII,而后基于COM远程数据模块方式使用TCP/IP,HTTP,(D)COM构建出强大的通讯能力.从Delphi6开始改名为DataSnap,直到D2007这个框架一直在使用.D2009重新架构了DataSnap—移除COM依赖,使用TCP/IP以更轻量级的方式生成远程服务对象和客户端连接能力.同时提供了与Delphi Prism2009开发的.NET程序通讯的功能.Delphi2010中构建于D

我的第三十二篇博客---mongo和python结合

交互再用管道 或者$ 的时候 要加引号括住ret=collection.find({'$or':[{'age':{'$gt':20}},{'age':{'$lt':17}}]})ret=collection.aggregate([{"$group":{'_id':'$age'}}]) from pymongo import MongoClientclient=MongoClient(host='localhost',port=27017)collection=client['test'

我的第三十五篇博客---flask-wtf表单验证

在Flask中,为了处理web表单,我们可以使用Flask-WTF扩展,它封装了WTForms,并且它有验证表单数据的功能WTForms支持的HTML标准字段 字段对象 说明StringField 文本字段TextAreaField 多行文本字段PasswordField 密码文本字段HiddenField 隐藏文件字段DateField 文本字段,值为datetime.date文本格式DateTimeField 文本字段,值为datetime.datetime文本格式IntegerField

我的第十六篇博客---HTML

html概述及html文档基本结构 html概述:HTML是Hyper Text Mark-up Language 的首字母简写,意思是超文本标记语言,超文本指的是超链接,标记指的是标签,是一种用来制作网页的语言,这种语言由一个个的标签组成,用这种语言制作的文件保存的是一个文本文件,文件的扩展名为html或者htm html 文档基本结构 一个html的基本结构如下:<!DOCTYPE html><html> <head> <meta charset="

我的第二十八篇博客---seleinum

from selenium import webdriver #初始化驱动driver=webdriver.Chrome()#请求页面driver.get(url='https://www.baidu.com')#找到对应标签,发送文本driver.find_element_by_xpath("//*[@id='kw']").send_keys('2019') #找到按钮,点击clickdriver.find_element_by_xpath("//*[@id='su']&q

我的第二十二篇博客---VUE

Vue.js基本概念:首先通过将vue.js作为一个js库来使用,来学习vue的一些基本概念,我们下载了vue.js后,需要在页面上通过script标签引入vue.js.开发中可以使用开发版本vue.js.产品上线要换成vue.min.js. <script type="text/javascript" src="../static/js/vue.js"></script>Vue实例 每个Vue应用都是通过实例化一个新的Vue对象开始的: &

我的第一篇博客——JavaScript学习总结

JavaScript的特点:交互性,安全性,跨平台性 1.Js与java的区别: (1)java是oracle公司,js 是网景公司 (2)js是基于对象,java是面向对象 (3)Java是强类型语言,js是弱类型语言 (4)Js只需解析就能执行,而Java需要先编译成字节码文件才能执行  2.Js的string对象: Substr:从第几位开始,向后截取几位 Substring:从第几位开始,到第几位结束,左闭右开区间 3.Js是否存在重载? 不存在,但是可以通过其他方式模拟重载的效果(通过