javascript
一.js简介
1.什么是js
js可以嵌套到HTML中(基于对象)和(事件触发)的(脚本语言)
特点:
1)交互性
2)安全性 js不能直接访问本地磁盘
3)跨平台 浏览器只要具备js解析器
2.js能做什么
1)js可以动态修改(新增、删除)HTML和CSS的代码
2)js动态校验数据
3js的历史及组成
ECMAScript(基本语法和对象) BOM(浏览器对象模型) DOM(文档对象模型)
4.js的引用方式**
A.内嵌脚本
<input type="button" value="button" οnclick="alert('XXX')"/>
B.内部脚本**
<input type="button" value="button" />
<script type="text/javascript">
alert("XXX");
</script>
C.外部脚本***
1.创建一个js文件 .js
2.在HTML中引入JS脚本文件
<script type="text/javascript" src="demo1.js"></script>
总结:
1.JS往哪放?
在不影响HTML加载效果的情况下 越晚加载越好
2.建议<script>标签因为外部js文件了 标签中不建议写脚本内容
二.js的基本语法
1)变量
var a=5;
a='javascript';
a="哈哈";
var b=true;
2)原始数据类型
1)number :数字类型
2)string:字符串类型
3)boolean:布尔类型
4)null:空类型
5)undefined:未定义
注意点:
number string boolean:伪对象
数据类型转换
number boolean 转 string
toString();
string boolean 转 number
parseInt();
parseFloat();
boolean 类型 不能转 number类型 NaN
string 类型 转 number 能转 如果"123哈哈789" 准换完 "123"
string number 转boolean
注意:
number类型 能转布尔 非0为true 0为false
string 类型 能转布尔类型 非空为true 空为false
string boolean 转 number
Number()
boolean类型 可以转 number true为1 false 为0
string类型 转 number 如果值为数字可以转 如果"123哈哈" 转NaN
3).引用数据类型
java:Object obj=new Object();
js: var obj=new Object();
4)运算符
1.赋值运算符
=
var a=5;
2.算术运算符
+ - * / % ++ --
+:遇到字符串 连接符 (拼接作用)
-:遇到字符串 转为数字再计算
*:遇到字符串 转为数字再计算
/:遇到字符串 转为数字再计算 7/2=3.5
3.逻辑运算符
&& ||
4.比较运算符
> < >= <= == !=
== :忽略数据类中比较 比较值 内容
===:全等 比较值和类型
5.三目运算符
3>2?"大于":"小于"
6.void运算符
<a href="javascript:void(0)">点击我吧</a>
7.类运算符
typeof():判断数据类型 返回类型
instanceof(): 判断类型 返回 true or false
alert(typeof(obj));//object
alert(obj instanceof Object);//true
5逻辑语句
if:条件
number类型 能转布尔 非0为true 0为false
string 类型 能转布尔类型 非空为true 空为false
switch:
jdk1.7 string
for
for
for in
var arr=[1,2,3,4,5,"aa",true];
for(index in arr){
alert(arr[index]);
}
三.js的内置对象****
1.Number
var myNum=new Number(value);
var myNum=Number(value);
方法:
toString 把数字转换为字符串,使用指定的基数。
valueOf 返回一个 Number 对象的基本数字值。
2.Boolean
var flag=new Boolean(value); //构造函数
var flag=Boolean(value); //转换函数
方法:
toString() 把逻辑值转换为字符串,并返回结果。
valueOf() 返回 Boolean 对象的原始值。
3.String
new String(s);
String(s);
方法:
length 字符串的长度
charAt() 返回在指定位置的字符。
charCodeAt() 返回在指定的位置的字符的 Unicode 编码。
indexOf() 检索字符串。
lastIndexOf() 从后向前搜索字符串。
split() 把字符串分割为字符串数组。
substring() 提取字符串中两个指定的索引号之间的字符。 (2,3)【2,3)
substr() 从起始索引号提取字符串中指定数目的字符。 (2,3) 【2,3个
toUpperCase() 把字符串转换为大写。
4.Array
new Array();
new Array(size);
new Array(element0, element1, ..., elementn);
var arr=[];
var arr=[1,"a"];
属性:
length 设置或返回数组中元素的数目。
方法:
join() 把数组的所有元素放入一个字符串。元素通过指定的分隔符进行分隔。
pop() 删除并返回数组的最后一个元素
push() 向数组的末尾添加一个或更多元素,并返回新的长度。
reverse() 颠倒数组中元素的顺序。
sort() 对数组的元素进行排序
5.Date
var myDate=new Date();
方法:
getFullYear() 从 Date 对象以四位数字返回年份。
getMonth() 从 Date 对象返回月份 (0 ~ 11)。
getDate() 从 Date 对象返回一个月中的某一天 (1 ~ 31)。
getDay() 从 Date 对象返回一周中的某一天 (0 ~ 6)。
getTime() 返回 1970 年 1 月 1 日至今的毫秒数。
toLocaleString() 根据本地时间格式,把 Date 对象转换为字符串
6.Math
var pi_value=Math.PI;
var sqrt_value=Math.sqrt(15);
注释:Math 对象并不像 Date 和 String 那样是对象的类,因此没有构造函数 Math(),像 Math.sin()
这样的函数只是函数,不是某个对象的方法。您无需创建它,通过把 Math 作为对象使用就可以调用其所有属性和方法。
方法:
PI 返回圆周率(约等于3.14159)。
abs(x) 返回数的绝对值
ceil(x) 对数进行上舍入。
floor(x) 对数进行下舍入。
round(x) 把数四舍五入为最接近的整数。
pow(x,y) 返回 x 的 y 次幂。
random() 返回 0 ~ 1 之间的随机数。
7.RegExp
var reg=new RegExp(pattern);
//attributes可选参数
var reg=/^正则规则$/;
属性方法:
[0-9]:数字
[A-Z]:A-Z
[a-z]:a-z
[A-z]:所有字母(大小写字母)
\d:代表数值
\D:非数值
\w:单词字符
\W:非单词字符
\s:查找空白字符
\S:查找非空白字符
n+:至少一次
n*:出现0次或多次
n?:出现0次或1次
{5}:出现5次
{2,8}:出现2-8次
方法:
test 检索字符串中指定的值。返回 true 或 false。
四.js的函数
1.js中函数的定义方式**
A.普通函数
语法:
function 函数名(参数列表){函数}
实例
function method(){
alert("XXX");
}
method();
B.匿名函数(闭包)****
语法:
var 函数名=function(){函数}
实例:
var method=function (){
alert("YYY");
}
method();
C.对象函数(了解)
语法:
new Function(参数1,参数2,参数3);
注意点:
1.形参只能是String类型 ,最后一个只能是函数体
2.函数体也是字符串
var fn=new Function("a","b","alert(a+b)");
fn(2,22);
2.函数中的参数问题
1.形参不用var来修饰
2.形参与实参个数可以不一样(只多不能少)
案例:
function fn(a,b,c){
var sum=a+b+c;
alert(sum);
//arguments 数组内部对参数进行封装
/* for(var i=0;i<arguments.length;i++){
alert(arguments[i]);
} */
}
fn(1,2,3,4);
3.函数中的返回值
1.定义函数的时候不用表明返回值类型 var
2.返回值可以通过return 体现
案例:
function fn( a, b){
return a+b;
}
alert(fn(2,3));
4.全局函数
1)编码问题的(了解)
decodeURI() 解码某个编码的 URI。
encodeURI() 把字符串编码为 URI。
decodeURIComponent() 解码一个编码的 URI 组件。
encodeURIComponent() 把字符串编码为 URI 组件。
unescape() 对由 escape() 编码的字符串进行解码。
escape() 对字符串进行编码。
2)强转
Number()
String()
3)
parseInt()
parseFloat()
4)******
eval() 计算 JavaScript 字符串,并把它作为脚本代码来执行。
案例:
var str="var a=2;var b=3;alert(a+b)";
//alert(str);
eval(str);
五.js的事件****
事件
事件源
响应行为
1)事件绑定方式
A.将事件与响应行为内嵌到HTML代码中
<input type="button" value="button" οnclick="alert('XXX')"/>
B.将事件内嵌到HTML代码中,将响应结果封装成函数
<input type="button" value="button" οnclick="fn()"/>
<script type="text/javascript">
function fn(){
alert("YYY");
}
</script>
C.事件与响应结果完全重HTML分离出来***
<input type="button" value="button123" id="btn"/>
<script type="text/javascript">
var btn=document.getElementById("btn");
//alert(btn.value);
btn.οnclick=function(){
alert("YYY");
}
</script>
2)js中常见事件
A)onclick();点击事件
B)onchange();用户改变域的内容****
实现二级菜单联动
案例:
<body>
<select id="city">
<option value="bj">北京</option>
<option value="sh">上海</option>
<option value="tj">天津</option>
</select>
<select id="area">
<option>海淀区</option>
<option>昌平区</option>
<option>朝阳区</option>
</select>
</body>
<script type="text/javascript">
var city=document.getElementById("city");
city.οnchange=function(){
var option= city.value;
//alert(option);
switch(option){
case 'bj':
var area= document.getElementById("area");
area.innerHTML="<option value='hd'>海淀区</option><option value='cp'>昌平区</option><option value='cy'>朝阳区</option>";
break;
case 'sh':
var area= document.getElementById("area");
area.innerHTML="<option value='pd'>浦东区</option>";
break;
case 'tj':
var area= document.getElementById("area");
area.innerHTML="<option value='tg'>塘沽区</option><option value='nk'>南开区</option>";
break;
}
}
</script>
C)***
onblur();//鼠标失去焦点
onfocus();//鼠标获取焦点
案例:
<body>
<label for="txt">用户名:</label>
<input type="text" name="username" id="txt"/><span id="active"></span>
</body>
<script type="text/javascript">
var txt=document.getElementById("txt");
//元素获取焦点事件
txt.οnfοcus=function(){
//友好提示
var span=document.getElementById("active");
span.innerHTML="用户名最少长度是六位";
span.style.color="green";
}
//元素失去焦点
txt.οnblur=function (){
//友好提示
var span=document.getElementById("active");
//alert(txt.value);
if(txt.value.length<6){
span.innerHTML="对不起格式错误";
span.style.color="red";
}else{
span.innerHTML="";
}
}
</script>
D)
onmouseout();
onmouseover();
案例:
<body>
<div id="d1">div</div>
</body>
<script type="text/javascript">
var div=document.getElementById("d1");
div.οnmοusemοve=function(){
this.style.backgroundColor="green";
}
div.οnmοuseοut=function(){
this.style.backgroundColor="red";
}
</script>
E)onload()
某个图片或某个页面加载完之后
等待页面元素加载完之后 再执行onload事件里面的代码
案例:
<script type="text/javascript">
window.οnlοad=function(){
var span=document.getElementById("s");
span.innerHTML="HELLOJS";
}
</script>
</head>
<body>
<span id="s"></span>
</body>
3)阻止事件默认行为
IE:window.event.returnValue=false;(IE低版本)
w3c:传递过来的事件对象.preventDefault();
<body>
<!-- <a href="http://www.baidu.com">点击我吧</a> -->
<!-- <a href="demo3.html" οnclick="fn(event)">点击我吧</a> -->
<a href="demo3.html" οnclick="return false">点击我吧</a>
</body>
<script type="text/javascript">
function fn(e){
//IE:window.event.returnValue=false;(IE低版本8)
// w3c:传递过来的事件对象.preventDefault();
if(e&&e.preventDefault){
alert("w3c");
e.preventDefault();
}else{
alert("ie");
window.event.returnValue=false;
}
}
</script>
4)js的冒泡事件** 阻止事件传播
IE:window.event.cancelBubble=true;//IE低版本
w3c:传递过来的事件对象.stopPropagation();
案例:
<body>
<div οnclick="fn1()" style="width: 100px; height: 100px; background-color: blue; padding: 50px;">
<div οnclick="fn2(event)" style="width: 100px; height: 100px; background-color: red;">
XXX
</div>
</div>
</body>
<script type="text/javascript">
function fn1(){
window.alert("fn1");
}
function fn2(e){
// window.alert("fn2");
//IE:window.event.cancelBubble=true;//IE低版本
//w3c:传递过来的事件对象.stopPropagation();
if(e&&e.stopPropagation){
alert("w3c");
alert("fn2");
e.stopPropagation();
}else{
alert("ie");
alert("fn2");
window.event.cancelBubble=true;
}
}
</script>
六.js中BOM
BOM(浏览器对象模型)
alert();
window.alert();
1)window 对象
弹框方式
提示弹框:alert();
确认弹框:confirm();*****
确认框有返回值 点击确定 :true 点击取消 :false
输入弹框:prompt();
输入框有返回值 点击确定返回框里输入的值 点击 取消:返回null
open(url); window.open("../jsCode/demo1.html");
定时器:
A.setTimeout(函数,毫秒值):过多少毫秒值后调用该函数(只调用一次)
window.setTimeout(function() {
alert("XXX");
}, 3000);
B.clearTimeout(参数);
window.clearTimeout(参数);
<body>
<input type="button" value="button" οnclick="closer()"/>
</body>
<script type="text/javascript">
/* window.setTimeout(function() {
alert("XXX");
}, 3000); */
var timer;
var fn=function(){
alert("YYY");
timer=setTimeout(fn, 3000);
}
var closer=function(){
window.clearTimeout(timer);
}
fn();
</script>
C.setInterval(函数,毫秒值);过多少毫秒值重复调用该函数
案例:
<body>
<input type="button" value="button" οnclick="closer()"/>
</body>
<script type="text/javascript">
var timer=window.setInterval(function() {
alert("nihao");
},3000);
var closer=function(){
window.clearInterval(timer);
}
</script>
需求:
注册成功后,5秒钟跳转某个页面
<body>
恭喜您,终于注册成功了,<span id="second" style="color: red; font-size: 100px;">5</span>秒钟后页面自动跳转,如果不跳转<a href="../jsCode/demo1.html">请点击这里</a>
</body>
<script type="text/javascript">
var time=5;
var timer;
timer=window.setInterval(function() {
var span=document.getElementById("second");
if(time>=1){
span.innerHTML=time;
time--;
}else{
//页面跳转 事件结束
window.clearInterval(timer);
location.href="../jsCode/demo1.html";
}
}, 1000);
</script>
2.location:对象
location.href="链接地址";
location对象不能省
window.location.reload();//让页面重新刷新
3.history对象
历史记录
back();
forward();
go();正整数 负整数
<!-- <input type="button" value="上一页" οnclick="history.back()"/>
<input type="button" value="下一页" οnclick="history.forward()"/> -->
<input type="button" value="上一页" οnclick="history.go(-1)"/>
<input type="button" value="下一页" οnclick="history.go(1)"/>
七.js中DOM**
DOM(文档对象模型)
文档对象模型:操作页面元素
DOM:document节点
作用:通过他对页面元素进行定位和操作
NODE操作
1.NODE的类型
A.元素类型
B.文本类型
C.文档类型
D.属性类型
E.注释类型
2.NODE的获取方式:
1)通过元素获取
document.getElementById("elementid");****
document.getElementsByName("name");***
document.getElementsByTagName("tagname");***
document.getElementByClassName("classname");
2)通过NODE关系获取引用
document.parentNode;//获取该元素的父节点
document.childNode;//获取所有子节点
document.firstChild;//获取该元素第一个子节点
document.lastChild;//获取该元素最后一个子节点
document.nextSibing;//获取该元素的下一个兄弟节点
document.previousSibing;//获取该元素上一个兄弟节点
3)NODE属性
节点中文 nodeType nodeName nodeValue
元素 1 tagname null
属性 2 attr 属性值
文本 3 #text 文本值
注释 8 #comment 注释的文字
文档 9 #document null
4)NODE节点的增删改查
A.创建一个节点
1)创建一个元素节点 :document.creatElement();
2)创建属性节点: object.attr=val;
object.setAttribute(attr,val);
3)创建一个文本节点:
object.innerHTML=val;
object.creatTextNode(text);
B.添加NODE
1.parentNode.appendChild(newNode);
说明:
向节点子节点末尾追加一个新节点,如果文章中存在新节点,将其从文档中移除,重新插入节点
appendChild(newNode);
2.parentNode.insertBefore(newNode,exisingNode);
说明:
文档已经存在新节点了,将其从文档中移除,重新插入节点
3.parentNode.replaceChild(newNode,oldNode);
说明:
文档已经存在新节点了,将其从文档中移除,重新插入节点
4.parentNode.removeChild(node);
说明:
从子节点表中删除某个节点
--------------------------------------------------------------------
总结:
1.定位页面
document.getElementById();
document.getElementsByName();**
document.getElementsByTagName();**
2.可以查看和修改属性
setAttribute(name,value);
getAttribute(name);
3.空格换行的处理
使用层析关系访问节点
document.parentNode;//获取该元素的父节点
document.childNode;//获取所有子节点
document.firstChild;//获取该元素第一个子节点
document.lastChild;//获取该元素最后一个子节点
document.nextSibing;//获取该元素的下一个兄弟节点
document.previousSibing;//获取该元素上一个兄弟节点 去空白
4.节点操作
创建节点:createElement("节点名");
元素前添加新的节点:insertBefore("新节点","旧节点");
元素后拼接新节点:appendChild(新节点);
删除子节点:removeChild(节点);
克隆节点:cloneNode(boolean ) //false只克隆该标签 true 克隆包含的子标签
替换节点:replaceChild(新,旧);
dom可以操作表格
table对象中的属性方法
属性:rows获取所有行
方法:
insertRow(行下标);
deleteRow(行下标);
tableRow属性和方法
属性:
cells:获取所有单元格
rowIndex:获取行位置下标
方法:
insertCell(单元格下标);
deleteCell(单元格下标);
tableCell属性与方法
属性:
innerHTML:设置文本<a></a>
innerText:设置文本
className:类样式
小结:
js可以修改CSS样式
1)元素对象。setAttribute("style","CSS样式");
2)通过className绑定CSS样式