2019.08.02(day03)
js:
变量
数组
api
完成对html页面中的节点元素/属性节点/文本节点做增删改查
原生的js写法
jquery js写法
javascript:
简称js
javascript是嵌入html中在浏览器中运行的脚本语言
js跟java和c没有任何关系,只是语法相似
是一种网页的编程技术,用来向html页面添加交互行为
直接嵌入html页面
由浏览器解释执行代码,不进行预编译
javascript特点:
-可以用任何编辑文本的工具编写js代码
-由浏览器内置的javascript引擎执行代码
解释执行:事先不编译,逐行执行
基于对象:内置大量的现成的对象
-适宜:
客户端的数据计算
客户端的表单验证
浏览器的事件触发
网页特效制作
服务器的异步提交 ajax
如何引入js:
三种方式:
1.把js代码写在html的某个标签中
<input type="button" value="点一下" οnclick="alert('哈哈')" />
2.把js代码写在html文件中<head>元素中的<script>标记中
这样的<script>标记,在head中可以出现多次
<script>可以写在任意位置,但是推荐放在<head>中
<head>
<script type="text/javascript" language="javascript">
function aa(){
alert("哈哈")
}
</script>
</head>
在body体中
<input type="button" value="再点一下" οnclick="aa();" />
3.把js代码写在专门的js文件中
test.js
文件内容:
function bb(){
alert("哈哈 bb方法");
}
在html文件中的head元素中引入js文件
在html的head元素中中可以引入多个js文件
但每个script标记只能引入一个js文件
demo3.html
<head>
<script src="test.js" ></script>
</head>
在body体中
<input type="button" value="再点一下" οnclick="bb();" />
js的语法
js的注释:
单行 //
多行 /**/
js代码区分大小写,大小写敏感
所有js语句用分号结束
标识符和关键字:
标识符的定义:可以包含字母,数字,下划线,$符号,就是不能用数字开头
命名的规范用骆驼(驼峰)命名法
变量:
js变量声明用var定义
比如:
var i=3;i="abc";
js的数据类型:
-特殊类型 null 空 , undefined 未定义
-内置对象(类型)
Number 数字
String 字符串
Boolean 布尔
Function 函数
Array 数组
-外置对象:
window对象:浏览器对象
document对象:文档对象
-自定义对象: Object对象
String类型:
用双引和单引都可以标记js的字符串
转义字符:\n \\ \" \'
Number类型:
不区分整型数据和浮点型数据
var k=3;
k=3.3;
所有的数字都采用64位浮点格式存储,类似于double格式
Boolean类型:
只有两个值 true和false
可以自动转换作为数值参与运算,运算时true=1,false=0
js属于松散类型的程序语言(弱类型)
变量在声明时不需要指定数据类型
变量所引用的数据就是这个变量的类型
数字+字符串 字符串
数字+布尔 数字,true=1,false=0
字符串+布尔 字符串,把true和false转成字符串
布尔+布尔 数字
数据类型的转换函数
toString() 将所有数据类型转换为String类型
parseInt() 强制转换成整数,如果不转换,则返回NaN(not a number)
parseInt("5.5"); //结果5
parseFloat() 强制转换成浮点数,不能转换返回NaN
parseFloat("5.5");//结果5.5
typeof() 查询当前的数据类型
typeof("test"+10);//返回String
isNaN() 是否不是一个数字
特殊的数据类型
null 在程序中代表的是"无值"或"无对象"
可以给一个变量赋值为null,相当于清除变量的内容
undefined 声明了变量但从未赋值
对象属性不存在
运算符:
算术运算符
关系运算符
逻辑运算符
三元运算符
js流程控制:
顺序结构
选择分支结构 if else switch case
循环结构 for while do while
js中有关表达式真假值问题:
0 false
null false
"" false
undefined false
NaN false
一切表示空的值都是false
非空值 true
js中的一些对象(api)
-内置对象
-外部对象
window对象
document对象
-自定义对象
常用的内置对象
String对象
Number对象
Boolean对象
Array对象
Math对象
Date对象
RegExp对象
Function对象
String对象
var str="abc";
var str1=new String("abc");
length属性:取字符串的长度
console.log(str.length);
方法:
str.toLowerCase();//转小写
str.toUpperCase();//转大写
str.charAt(2);//返回指定位置的字符
str.charCodeAt(2);//返回指定位置的字符的unicode编码
str.indexOf(findstr,[index]);从index位置开始拿findstr去str寻找
找到了返回位置,没找到-1
str.lastIndexOf(findstr,[index]);
str.substring(start,[end]);返回子字符串;
str.substr(start,length);返回子字符串;
str.replace(findstr,tostr);在str中寻找findstr,找到后用tostr替换
返回值换后的字符串
str.split(bystr[,howmany]);
bystr:分隔的字符串
howmany 指定返回的数组的最大长度,可以省略
返回值是分割后的字符串数组
Number对象:是数值对象
创建Number对象
var mynum=12.567;
toFixed(num)转换为字符串,并保留小数点后一位数
如果必要,该数字会被舍入,也可以用0补充
var num=23.56789;
console.log(num.toFixed(2));//23.57
var num1=23.5;
console.log(num.toFixed(2));//23.50
Array对象
创建数组对象
var arr1=new Array();
var arr2=new Array(10);
var arr3=new Array(100,"abc",true);
var arr4=[100,"200",true];
数组对象的属性
arr.length;返回数组的长度
创建二维数组:
var arr5=[
[1,"2",3],
[true,"abc"],
[12.567]
];
var arr6=new Array();
arr6[0]=new Array();
数组的方法:
arr.reverse() 翻转,改变了源数组
数组的排序:
arr.sort([sortFunc]);数组排序
var arr=[32,12,111,444];
arr.sort();
console.log(arr.toString());//111,12,32,444;
arr.sort(sortFunction);
console.log(arr.toString());//12,32,111,444;
function sortFunction(a,b){
return a-b;
}
for in 循环
var x
var mycars = new Array()
mycars[0] = "Saab"
mycars[1] = "Volvo"
mycars[2] = "BMW"
for (x in mycars)
{
document.write(mycars[x] + "<br />")
}
Math对象:
Math.PI Math.E Math.round(3.567);
Math.sin(x)....
Math.sqrt(x)...
Math.abs(x)...
Math.random()
Date对象:用于处理日期和时间,封装系统时间毫秒数
创建对象:
var now=new Date();
var now1=new Date("2017/9/14 11:27");
读写时间毫秒数
getTime(),setTime();
读写时间分量
getDate() getDay() getFullYear()
setDate() setDay() setFullYear()
转换日期为字符串
toString()
toLocaleTimeString();
toLocaleDateString();
RegExp对象
创建对象:
var regexp=/pattern/flags;
var regexp1=new RegExp("pattern"[,flags]);
flags:
g:设定当前匹配为全局模式
i:忽略匹配中的大小写检测
比如:
var reg1=/^\d{3,6}$/;
var reg12=new RedExp("^\d{3,6}$");
匹配正则表达式的方法
reg1.test(string)
如果字符串string中含有与reg1对象匹配的文本,返回true
否则返回false;
var name="aaaa";
var reg=new RegExp("^[a-zA-Z0-9]{3,6}$")
var flag=reg.test(name);
reg1.replace(regexp,tostr);//按照正则规则寻找,找到后替换为toStr
reg1.match(regext);//返回匹配字符串数组
reg1.search(regext);//返回匹配字符串的首字符的位置索引
函数对象:
js中的函数就是Function对象
函数的名称就指向Function对象的引用
定以一个函数
function 函数名称(函数的的参数){
函数体
return 返回值;
}
函数的返回值,如果没有return 就是默认返回undefined
如果有return,就return后边的数据,且一个数据
函数参数的说明:
js中没有函数重载
调用时只要函数名一样,无论传入多少个参数,
调用都是一个函数
没有接收到实参的参数值是undefined
所有的参数传递给arguments数组对象,可以重新更改赋值
函数的参数不能加var
匿名函数:
var func=function(arg1,arg2...){
函数体
return 返回值
}
比如:
var add=function(a,b){
return a+b;
};
console.log(add(1,2));//3
console.log(add);//输出的函数的文本
有关函数的一个特殊用法
使用Function对象直接创建函数
var func=new Function(arg1,arg2...,functionbody);
比如:
var add=new Function("x","y","return (x+y);");
var result=add(1,2);
console.log(result);//3
console.log(add);//方法的文本
全局函数:
parseInt() parseFloat() isNaN()
eval();
eval函数用于计算表达式字符串,或者用于执行字符串中js代码
只能接受原始字符串做为参数
如果参数中没有合法的表达和语句,则抛出异常
var s="2+3";
eval(s);//5
外部对象:
BOM对象 browser object model浏览器对象模型,用来访问跟
浏览器窗口有关的对象
在BOM对象对象有很多的对象,每个对象还有很多属性和方法
通过这些方法和属性,移动窗口,更改状态栏文本,
和其他跟窗口操作相关的.
DOM对象: Document Object model文档对象模型,用来操作文档
定义了访问和操作html文档的标准方法
应用程序通过对dom树的操作,来实现和html的交互
window对象:
window表示浏览器窗口
是所有javascript全局对象,如果不写window,默认从window访问起
window常用的属性:
-document:在窗口中显示文档树.
-history:浏览器的窗口的后退和前进
-location:窗口文件地址对象.
window.location.href="login.html";
-screen:当前屏幕对象
-navigator:浏览器的相关信息
window对象常用的方法:
alert();弹出式窗口,模态框(当前窗口不关闭,无法操作后面的窗口)
confirm();模态框,确认窗口
setTimeOut() setInterval() 周期性函数
clearTimeOut() clearInterval();
定时器:用于网页动态时钟,制作倒计时等周期性操作
周期性时钟:以一定的时间间隔执行代码,循环往复
一次性时钟:在一个设定的时间间隔之后来执行代码,
而不是调用时立即执行
setInterval(exp,time);周期性触发代码exp
exp:执行的语句
time:时间周期,单位毫秒
返回值是已经启动的定时器对象
clearInterval(setInterval的返回值);停止启动的定时器
setTimeout(exp,time);一次性触发代码exp
exp:执行js代码
time:间隔时间,单位毫秒
返回值是已经启动的定时器对象
clearTimeOut(setTimeout的返回值);//停止启动的定时器
screen对象包含有关客户端显示屏幕的信息
常用于获取屏幕的分辨率和色彩
常用的属性:
-width/height
-avaiWidth/avaiHeight
history对象:包含用户在浏览器窗口中,访问过的url
-length属性
方法:
-back()
-forward()
-go(num)
location对象:包含有关url的信息
href属性:给地址栏赋值新地址
window.location.href="xxx.html";
navigator对象:包含的是浏览器的信息
常用语获取客户端浏览器和操作系统信息
dom编程:
查询:
-通过id查询
-通过name查询
-通过标签名查询
-通过表单名查询
根据id查询
document.getElementById("");
通过id查询返回元素节点,
在整个html文档中搜索id
只找到第一个id,返回元素
如果id错误,返回null
根据层次查询节点:
-parentNode
遵循文档的上下文层次结构,查找单个父节点
比如:
<table id="tblid">
<tr>
<td id="tdid"></td>
<td></td>
</tr>
</table>
var td_ele=document.getElementById("tdid");
var tr_ele=td_ele.parentNode;
var table_ele=td_ele.parentNode.parentNode;
-childNodes
遵循文档的上下文层次结构,查找多个子节点
比如:上面的例子
var td_ele=document.getElementById("tdid");
//获取当前td对象的所有兄弟
var tds_ele=td_ele.parentNode.childNodes;
//获取当前td的父亲,和所有叔叔节点
var trs_ele=td_ele.parentNode.parentNode.childNodes;
根据标签名查询节点:
getElementsByTagName("标签名");
从当前对象往下寻找符合标签名的所有元素对象
返回结果是一个数组
标签名错误,返回长度为0,
比如:
<table id="tblid">
<tr>
<td id="tdid"></td>
<td></td>
</tr>
</table>
var table_ele=document.getElementById("tblid");
var trs_ele=table_ele.getElementsByTagName("tr");
136
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
