js
js和html整合
方式1:在页面上直接写
将js代码放在 <script></script>标签中,一般放在head标签中
<script type="text/javascript">
alert("hello")
</script>
方式2:独立的js文件
通过script标签的src属性导入
<script src="js/1.js"></script>
js中变量声明:
var 变量名=初始化值;
var 变量名;
变量名=初始化值;
注意:
var可以省略 建议不要省略
一行要以分号结尾,最后一个分号可以省略,建议不要省略
js的数据类型:
原始类型:(5种)
Null
String
Number
Boolean
Undefined
通过 typeof运算符可以判断一个值或者变量是否属于原始类型,若属于原始类型,他还可以判断出属于那种原始类型
typeof 变量|值;
若变量为null,使用typeof弹出的值 object
使用typeof的返回值
undefined - 如果变量是 Undefined 类型的
boolean - 如果变量是 Boolean 类型的
number - 如果变量是 Number 类型的
string - 如果变量是 String 类型的
object - 如果变量是一种引用类型或 Null 类型的
var b=false;
alert(typeof b); boolean
函数的定义:
方式1:
function 函数名(参数){
函数体;
}
方式2:
var 函数名=function(参数){
函数体;
}
js中的事件:
常见的事件:
单击: onclick
表单提交: onsubmit 加在form表单上的 onsubmit="return 函数名()" 注意函数返回值为boolean类型
页面加载: onload
<form action="#" onsubmit="return checkForm()" method="post">
姓名：<input type="text" id="username" /><br>
年龄：<input type="text" id="age" /><br><br>
<input type="submit" />
</form>
onsubmit是在提交form前执行的方法，返回Boolean，true:就提交；false:不提交
<script>
function checkForm(){
//获取 几个input的值，判断是否为空
var usernameObj = document.getElementById("username");
if('' == usernameObj.value){
alert("姓名不能为空");
return false;
}
var ageObj = document.getElementById("age");
if('' == ageObj.value){
alert("age不能为空");
return false;
}
return true;
}
</script>
js事件和函数的绑定:
方式1:
通过标签的事件属性 <xxx onclick="函数名(参数)"></xxx>
方式2:
给元素派发事件
document.getElementById("id值").onclick=function(参数){....}
document.getElementById("id值").onclick=函数名
注意:
内存中应该存在该元素才可以派发事件
a.将方式2的js代码放在html页面的最下面
b.在页面加载成功之后在运行方式2的js代码 onload事件.
<body onload="init()">
<input type="button" onclick="f1()" value="点击f1" />
<input type="button" id="btn2" value="点击f2">
<input type="button" id="btn3" value="点击f3">
</body>
<script>
function init(){
document.getElementById("btn2").onclick=f2;
document.getElementById("btn3").onclick=f3;
}
function f1(){
alert('f1');
}
function f2(){
alert('f2');
}
var f3=function(){
alert('f3');
}
</script>
js获取元素:
方式1:
var obj=documnet.getElementById("id值");
获取元素的value值
obj.value;
获取元素的标签体中的内容
obj.innerHTML;
<input id="btn1" type="button" value="点击" onclick="f1()" />
function f1(){
//1现获取到标签对象
var obj=document.getElementById("btn1");
//2在获取标签的属性对应的值
alert(obj.value);
}
修改样式：
<script>
function f1(){
var obj = document.getElementById("divId1");
obj.style.backgroundColor="red";
obj.style.border="1px solid blue";
obj.style.width="100px";
obj.style.height="100px";
}
</script>
运算符:
比较运算符: > >= < <=
若两边都是数字 和java一样
若一般为数字,另一边为字符串形式的数字,将字符串形式的数字转换成数字在进行比较 3>"2"
若一般为数字,另一边为字符串,返回一个false 3>"hello"
两边都是字符串的时候,比较ascii
等性运算符 == ===
== :只判断值是否相同
===:不仅判断是否相同,还要判断类型是否相同
语句:
if语句 和java一样
for while 语句和java一样
switch 和java一样(区别,switch 后面跟字符串. 还可以跟变量)
定时器:
var id=setInterVal(code,毫秒数):每隔指定的毫秒数执行一次函数 周期
var id=setTimeout(code,毫秒数):延迟指定的毫秒数之后 只执行一次函数
清除定时器:
clearInterval(id);
claerTimeout(id);
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body onload="init()">
<span id="span1"></span>
</body>
</html>
<script>
var s="我们的明天更加美好!";
var obj;
function init(){
obj=document.getElementById("span1");
setInterval(changeSpan,500);
}
var i=0;
function changeSpan(){
i++;
obj.innerHTML=s.substring(0,i);
if(i==10){
i=0;
}
}
</script>
history
back();后退
forward():向前
★go(int)
go(-1) 相当于 back()
go(1) 相当于 forward()
<input type="button" onclick="forw()" value="下一页" />
<script>
function forw(){
window.history.go(1);
}
</script>
location
window.location.href='../history/a.html';
window
* js的bom对象
** navigator、screen、location、history
** window：是顶层对象，代表一个窗口
*** alert、setInterval、setTimeout
window对象详解:
如果文档包含框架（frame 或 iframe 标签），浏览器会为 HTML 文档创建一个 window 对象，
并为每个框架创建一个额外的 window 对象。
常用的属性:
通过window可以获取其他的四个对象
window.location 等价域 location
window.history 等价于 history
...
常用的方法
消息框
alert("...."):警告框
confirm("你确定要删除吗?"):确定框 返回值:boolean
prompt("请输入您的姓名"):输入框 返回值:你输入的内容
定时器
设置定时器
setInterval(code,毫秒数):周期执行
setTimeout(code,毫秒数):延迟多长事件后 只执行一次.
例如:
setInterval(showAd,4000);
serInterval("showAd()",4000);
清除定时器
clearInterval(id):
clearTimeout(id):
打开和关闭
open(url):打开
close():关闭
<input type="button" onclick="closeCurrent()" value="关闭次页面"/>
<input type="button" onclick="openC()" value="打开C页面" />
<script>
// 方法名不能直接用 open() close(), 否则会与window的open() close()冲突，导致方法失效
function closeCurrent(){
window.close();
}
function openC(){
window.open('../location/c.html');
}
</script>
消息框
function init(){
alert(1);
var result = window.confirm("是否删除该记录");
alert(result);
var result = window.prompt("请输入密码","123456");
if(null==result){
alert("你没有输入密码");
}else{
alert(result);
}
}
常见事件
常见的事件:
焦点事件:★
onfocus
onblur
表单事件:★
onsubmit
onchange 改变
页面加载事件:★
onload
鼠标事件(掌握)
onclick
鼠标事件(了解)
ondblclick:双击
onmousedown:按下
onmouserup:弹起
onmousemove:移动
onmouserover:悬停
onmouserout:移出
键盘事件(理解)
onkeydown:按下
onkeyup:弹起
onkeypress:按住
function f2(event){
var event=event || window.event;
//阻止浏览器的默认行为； onclic在href前面执行
event.preventDefault();
}
function f1(event){
var event=event || window.event;
//阻止浏览的传播行为
event.stopPropagation();
}
止浏览的传播行为：正常情况下，大框套小框，如果我们点击了小框，那么大框也会收到点击事件。 但是如果我们阻止了事件的传播行为，那么大框就感觉不到点击了。stopPropagation()
js的全局函数
* 这些函数不属于任何的一个对象，使用使用不需要写任何的对象，直接写函数名称
= eval()：把字符串当成js代码来执行
== var str = "alert('aaaa');";
//alert(str);
eval(str);
= encodeURI()：对字符串编码
= decodeURI()：对编码之后的字符串进行解码
** 在传递参数的过程中，如果参数中包含中文，中文会有乱码问题
*** 解决方式：首先对中文进行编码，获取数据时候在对编码之后的内容进行解码
== var encode1 = "abc123东方不败";
var e1 = encodeURI(encode1);
document.write(e1);
document.write("<hr/>");
//decodeURI()：对编码之后的字符串进行解码
var d1 = decodeURI(e1);
document.write(d1);
= isNaN()：判断是否是一个数字
== var s = "aa";
//如果是数字返回 false；如果不是数字返回 true
alert(isNaN(s));
= parseInt()：把字符串转化成number类型
== var a1 = "10";
document.write(a1+1);
document.write("<hr/>");
document.write(parseInt(a1)+1);
案例
案例一表单校验
<form action="#" method="post" onsubmit="return checkForm()">
<table width="50%" height="400px" align="center" border="1">
<tr>
<td>用户名：</td>
<td>
<input type="text" name="username" id="username" onblur="loseFocus(this)"/>
<span id="username_msg"></span>
</td>
</tr>
<tr >
<td>密码：</td>
<td>
<input type="password" name="password" id="password"/>
</td>
</tr>
<tr>
<td>确认密码：</td>
<td>
<input type="password" name="password2" id="password2"/>
<span id="password_msg"></span>
</td>
</tr>
</table>
<input type="submit" />
</form>
<script>
function loseFocus(obj){
var username = obj.value;
if(null==username || username==''){
var username_msg=document.getElementById("username_msg");
username_msg.innerHTML='<font color="red" size="4" >用户名不能为空</font>';
}
}
function checkForm(){
var flag=true;
//用户名不能为空
var username=document.getElementById("username").value;
if(null==username || username==''){
var username_msg=document.getElementById("username_msg");
username_msg.innerHTML='<font color="red" size="4" >用户名不能为空</font>';
flag=false;
}
//密码是否相等
var password=document.getElementById("password").value;
var password2=document.getElementById("password2").value;
if(null==password || password==''){
var password_msg=document.getElementById("password_msg");
password_msg.innerHTML='<font color="red" size="4" >密码不能为空</font>';
flag=false;
}else if(password!=password2){
var password_msg=document.getElementById("password_msg");
password_msg.innerHTML='<font color="red" size="4" >密码必须相同</font>';
flag=false;
}
return flag;
}
</script>
为什么checkForm()返回了false，页面还是跳转了？
原因： 1 checkForm()里面没有返回false,或者
2 调用checkForm()的地方有问题(漏了单词return)
案例二 隔行换色
table>style>border表示table的边框
table>border表示单元格的边框
getElementsByTagName：查找同一种标签
getElementByName: 查找name相同的标签
<table style="border: 1px solid red;width: 60%;height: 40%;" cellspacing="0" cellpadding="10px" border="1">
<tr>
<td>分类ID</td>
<td>分类名称</td>
<td>分类描述</td>
<td>操作</td>
</tr>
<tr>
<td>1</td>
<td>手机数码</td>
<td>手机数码类商品</td>
<td>修改|删除</td>
</tr>
<tr>
<td>2</td>
<td>电脑办公</td>
<td>电脑办公类商品</td>
<td>修改|删除</td>
</tr>
<tr>
<td>3</td>
<td>家居饰品</td>
<td>鞋靴箱包类商品</td>
<td>修改|删除</td>
</tr>
<tr>
<td>4</td>
<td>鞋靴箱包</td>
<td>家居饰品类商品</td>
<td>修改|删除</td>
</tr>
</table>
<script>
window.onload=function(){
var trs=document.getElementsByTagName("tr");
for (var i=1;i<trs.length;i++) {
if(i%2==0){
trs[i].style.backgroundColor='blue';
}else{
trs[i].style.backgroundColor='yellow';
}
}
}
</script>
案例三 全选或全不选
全选和全不选： 获取当前的checked状态，给下面的checkbox赋值
<table style="border: 1px solid red;width: 60%;height: 40%;" cellspacing="0" cellpadding="10px" border="1">
<tr>
<td><input type="checkbox" onclick="selectAll(this)" >全选</input></td>
<td>分类ID</td>
<td>分类名称</td>
<td>分类描述</td>
<td>操作</td>
</tr>
<tr>
<td><input type="checkbox" class="classItem" /></td>
<td>1</td>
<td>手机数码</td>
<td>手机数码类商品</td>
<td>修改|删除</td>
</tr>
<tr>
<td><input type="checkbox" class="classItem" /></td>
<td>2</td>
<td>电脑办公</td>
<td>电脑办公类商品</td>
<td>修改|删除</td>
</tr>
<tr>
<td><input type="checkbox" class="classItem" /></td>
<td>3</td>
<td>家居饰品</td>
<td>鞋靴箱包类商品</td>
<td>修改|删除</td>
</tr>
</table>
<script>
function selectAll(obj){
var state=obj.checked;
var items=document.getElementsByClassName("classItem");
for(var i=0;i<items.length;i++){
items[i].checked=state;
}
}
案例四 省市联动
数组：
语法:
new Array();//长度为0
new Array(size);//指定长度的
new Array(e1,e2..);//指定元素
非官方
var arr4=["aa","bb"];
常用属性:
length
注意:
数组是可变的
数组可以存放任意值
常用方法:(了解)
存放值:对内容的操作
pop():弹 最后一个
push():插入 到最后
shift():删除第一个
unshift():插入到首位
打印数组:
join(分隔符):将数组里的元素按照指定的分隔符打印
拼接数组:
concat():连接两个或更多的数组，并返回结果。
对结构的操作:
sort();排序
reverse();反转
concat(xx)+join(xx)产生了新的数组，原数组没变化
reverse() sort() 原数组产生了变化
籍贯：<select id="province"></select>
<select id="city"></select>
<script>
var arr=new Array();
arr[0]=new Array("广东省","江苏省","山东省");
arr[1]=new Array("广州","深证","珠海");
arr[2]=new Array("苏州","南京","常州");
arr[3]=new Array("济南","青岛","烟台");
window.onload=function(){
var province = document.getElementById("province");
var proArr=arr[0];
province.innerHTML="<option >-请选择-</option>";
for (var i = 0; i < arr[0].length; i++) {
var node="<option value='"+i+"'>"+arr[0][i]+"</option>";
province.innerHTML+=node;
}
var city = document.getElementById("city");
city.innerHTML="<option >-请选择-</option>";
province.onchange=function(){
var j=parseInt(this.value)+1;
var cityArr=arr[j];
//初始化
city.innerHTML="";
for (var i = 0; i < cityArr.length; i++) {
var node="<option value='"+i+"'>"+cityArr[i]+"</option>";
city.innerHTML+=node;
}
}
}
</script>
案例五 左右选中
<table>
<tr>
<td>
<select id="leftSelect" multiple="multiple" size="10" style="width: 100px;height: 200px;"></select>
</td>
<td>
<input type="button" onclick="toRight()" value=">"/><br>
<input type="button" onclick="toRights()" value=">>"/><br>
<input type="button" onclick="toRightAll()" value=">>>"/><br>
<br><br>
<input type="button" onclick="toLeft()" value="<"/><br>
<input type="button" onclick="toLefts()" value="<<"/><br>
<input type="button" onclick="toLeftAll()" value="<<<"/><br>
</td>
<td>
<select id="rightSelect" multiple="multiple" size="10" style="width: 100px;height: 200px;"></select>
</td>
</tr>
</table>
<script>
var leftSelect=document.getElementById("leftSelect");
var rightSelect=document.getElementById("rightSelect");
window.onload=function(){
//左侧select赋值
var leftArr=["赵","钱","孙","李","周","吴","郑","王"];
leftArr.forEach(function(item,index){
var option="<option>"+item+"</option>";
leftSelect.innerHTML+=option;
});
}
function toRight(){
var leftOptions=leftSelect.options;
for (var i = 0; i < leftOptions.length; i++) {
if(leftOptions[i].selected){
rightSelect.appendChild(leftOptions[i]);
break;
}
}
}
function toRights(){
var leftOptions=leftSelect.options;
for (var i = 0; i < leftOptions.length; i++) {
if(leftOptions[i].selected){
rightSelect.appendChild(leftOptions[i]);
i--;
}
}
}
function toRightAll(){
var leftOptions=leftSelect.options;
for (var i = 0; i < leftOptions.length;) {
rightSelect.appendChild(leftOptions[i]);
}
}
</script>
为什么下面的方法会报错undefined is not a function？
forEach()是给数组用的，leftOptions 不是Array，是 HTMLOptionsCollection，所以会报错undefined is not a function
js用forEach() ; jquery用each()(js对象用each()会报错undefined is not a function)
leftOptions.forEach(function(item){
if(item.selected){
rightSelect.appendChild(item);
return;
}
});
leftOptions.each(function(item){
rightSelect.appendChild(item);
});
引用类型
引用类型总结:
原始类型中的String Number Boolean都是伪对象,可以调用相应的方法
Array:数组
String:
语法:
new String(值|变量);//返回一个对象
String(值|变量);//返回原始类型
常用方法:
substring(start,end):[start,end)
substr(start,size):从索引为指定的值开始向后截取几个
charAt(index):返回在指定位置的字符。
indexOf(""):返回字符串所在索引
replace():替换
split():切割
常用属性:length
Boolean:
语法:
new Boolean(值|变量);
Boolean(值|变量);
非0数字 非空字符串 非空对象 转成true
Number
语法:
new Number(值|变量);
Number(值|变量);
注意:
null====>0
fale====>0 true====>1
字符串的数字=====>对应的数字
其他的NaN
Date:
new Date();
常用方法:
toLocalString()
RegExp:正则表达式
语法:
直接量语法 /正则表达式/参数
直接量语法 /正则表达式/
new RegExp("正则表达式")
new RegExp("正则表达式","参数")
参数:
i:忽略大小写
g:全局
常用方法:
test() :返回值为boolean
Math:
Math.常量|方法
Math.PI
Math.random() [0,1)
全局:
★
decodeURI() 解码某个编码的 URI。
encodeURI() 把字符串编码为 URI。
Number():强制转换成数字
String():转成字符串
parseInt():尝试转换成整数
parseFloat():尝试转换成小数
eval() 计算 JavaScript 字符串，并把它作为脚本代码来执行。
171
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
