JS基础

Posted 2020-09-30 来呀来呀

 

三、js基础语句

1、JS调用,可以放在任意地方，建议放在html末端

(1)调用js文件

<script type="css/javascript" src="js/web.js"></script>

(2)直接编写

<script type="css/javascript" >

alert("hello");

</script>

2、变量控制语句

a、变量定义，弱类型语言，没有变量类型

var d = new Date();

var a = 1 ;

var m = 0 , n = 0 ;

var cars =["1","2","3"];

 

//结构如下

var names=["张三","李四"];

for(var i =0;i<names.length;i++ ){

if (names[i]=="张三"){

alert(names[i]);

}

 

}

b、定义方法和调用方法：

(1)不带参数的方法

sum(); //方法调用

function sum(){//定义方法

var n=0,sum=0;

while(n<10){

sum=sum+n;

n++

}

alert ("为"+ sum);

}

(2)带参数的方法

sum(80,100); //方法调用

function sum(n,m){//定义方法

var n,sum=0;

while(n<m){

sum=sum+n;

n++

}

alert ("为"+ sum);

}

(3)带参和返回值的方法

al(3);//调用加成之和

function pro(m){//定义方法,求m! m的阶乘

var n=1,pro=1;

while(n<=m){

pro=pro*n;

n++

}

return pro; //返回值

}

 

function al(n){//阶乘之和

var sum=0;

for (i=1; i <=n;i++){

sum=sum +pro(i)

}

alert(sum);

}

c、事件，事件写在标签的属性里，""内填写js方法名，""内的字符串加‘‘

onclick=""//单击事件

ondblclick=""//双击事件

onload=""//加载时间，一般放在body属性上

onfocus=""//聚集焦点

onblur=""//失去焦点

onmousedown=""//鼠标点下

onmouseover=""//鼠标悬浮

onmouseout=""//鼠标移开

 

d、js输入输出

输入：

prompt();

输出：

alert("你好");

doucument.write("你好")；

 

e.Document对象方法(HTML DOM Style对象)

close()//关闭用 document.open() 方法打开的输出流，并显示选定的数据。

getElementById()//返回对拥有指定 id 的第一个对象的引用。

getElementsByName()//返回带有指定名称的对象集合。

getElementsByTagName()//返回带有指定标签名的对象集合。

open()//打开一个流，以收集来自任何 document.write() 或 document.writeln() 方法的输出。

write()//向文档写 HTML 表达式 或 JavaScript 代码。

writeln()//等同于 write() 方法，不同的是在每个表达式之后写一个换行符。

 

举例：input标签聚焦和失焦来触发方法

<input class="rg" name="username" type="text" placeholder="请设置用户名"  onFocus="showMsg()"

            onBlur="hiddenMsg()" >

        <div id="Msg" style="width:120px; float:right; display: none;"  >

<span> 设置后不可更改</span>

</div>

<script>//调用script，可以通过js来修改CSS样式

function showMsg(){document.getElementById("Msg").style.display="block";}

function hiddenMsg(){document.getElementById("Msg").style.display="none";}      

</script>

f.jQuery

jQuery 是一个 JavaScript 库。

jQuery 极大地简化了 JavaScript 编程。

jQuery 很容易学习。

 

举例：用jQuery来写一个隐藏的JS语句

<script src="/jquery/jquery-1.11.1.min.js">//先调用jquery的js库，类似于java中的包

</script>

<script>

$(document).ready(function(){ 

 $("p").click(function(){  //p标签的点击事件

$(this).hide();      //p标签隐藏

 });

});

</script>