三、JS基础
三、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>
