js 1.js 2.常用函数 3.变量 4.数据类型 5.运算符 6.注释 7.分支 结构 8.If 和switch的区别 9.循环结构 10. break和continue的用法 11.数组 15.定时器 16.函数(方法) 17.变量的作用域 18.DOM document object model 19. 获取元素 20. 获取或设置元素的属性 21.下拉选择框属性和方法 22.dom节点操作 与BOM思想
html 骨架
css 美化
js 动态交互效果
js javascript livescript
java 和javascript 雷锋和雷峰塔的关系
网景公司,弱类型脚本语言。
Js的组成部分
ECMAscript 基本的语法
BOM 浏览器对象模型
DOM 文档对象模型
可写在网页的任何位置,一般写在头部script里
2.常用函数
alert(内容) 消息弹出框
document.write(内容);将内容写到body
prompt() 弹出输入框
3.变量
容器---》变量需要容器,去买需要一个变量 ,去声明一个变量 var
4.数据类型
typeof() 检测数据的数据类型
number 数值类型,包括小数,整数负数
string 字符串类型,用双引号或单引号包裹的数据
undefined 声明了未赋值
boolean 布尔类型 只有两个值 true false
object 对象类型 ,比如数组..
5.运算符
算术运算符 + - * / %+ 加法运算 ,字符串的连接
- 减法运算
* 乘法运算
/ 除法
% 取余
++ 自加1 -- 自减1
比较运算符 > < >= <= == === !=
n == 比较值,不比较数据类型
比如:22 == “22” true
n === 既比较值,也比较数据类型
比如 22===“22” false
逻辑运算符 && || !
n && 与(且)
A&&B
只有A和B都为true, A&&B才为true;
其中任何一个为false ,A&&B为false
n || 或
A || B
只要A和B中有一个为true,A||B为true.
! 非
!A 取反
如果A为true.!A为false.
NaN 不是一个具体的数值,但是属于number类型
6.注释
单行注释 //注释的内容 多行注释 /*注释的内容*/
7.分支 结构
if if(条件){ //代码块 } 当条件为true时,执行{}里的代码块 当条件为false时,不执行执{}里的代码块 If else if(条件){ //代码块1 }else{ //代码块2 } 当条件为true 执行代码块1 条件为false,执行代码块2 If.. else if .. else if.. else.. if(条件1){ //代码块1 }else if(条件2){ //代码块2 }else{ //代码块3 } 判断条件1,如果为true,执行代码块1 如果为false ,再判断条件2 如果条件2为true,执行代码块2 如果条件2位false ,执行代码块3 Switch switch(变量){ case 值1: 代码块1; break; case 值2: 代码块2; break; … default: 代码块n; } 当变量==值1,执行代码块1 当变量==值2,执行代码块2 。。。。 注意:break 跳出switch ,如果不加break,会穿透
8.If 和switch的区别
If 可以用来等值判断和范围的判断 switch 只能用来等值的判断 switch能实现的,用if也能实现 。
9.循环结构
while(){} while(①条件){ ②循环体 } ③循环外 do{} while() do{ ①循环体 }while(②条件); ③循环外 do{}while()和while的区别 While 是先判断条件,再执行循环体 Do while 先执行循环体,再判断条件,所以do while的循环体至少执行一次 for(){} for(①初始值;②条件;③增量){ ④循环体 } ⑤循环外
10. break和continue的用法
break 用在switch,表示跳出switch。
break用在循环,表示跳出当前循环。(后期循环嵌套,加上标记可跳出标记的循环)
continue 用在循环,表示结束本次循环,进入下一次循环
11.数组
类型:object
创建一个数组 var 数组名=[元素1,元素2……];
var arr=[1,2,6,9,82];
数组的长度
数组名.length
arr.length
下标 :数组里的每一个元素都有一个下标,下标是从0开始,也即第一个元素的下标为0,第二个为1,依次类推
通过下标获取数组里的元素
数组名[下标]
arr[1] 获取数组中的第二个元素
循环遍历数组
for(var i = 0;i<arr.length;i++){
arr[i];//得到数组中的元素
}
练习:数组[2,8,9,45,23,56],求出数组中元素之和
var a = [2,8,9,45,23,56];
var sum = 0;
for(var i = 0;i<a.length;i++){
sum = sum + a[i];
}
alert(sum);
Js中的一个数组可以放多种数据类型
var b = ["a","k",true,false,1,6];
数组的创建方式有多种
var arr = [1,5,6,9];
var arr = new Array();创建一个长度为0的数组
var arr = new Array(5);创建一个长度为5的数组
var arr = new Array(5,2);//创建一个长度为2的数组,元素为5,2
12.Math
类型 object
Math.random() 得到一个随机数。范围是0-1
Math.ceil(-2.3) 向上取整 -2
Math.floor(-2.3);//向下取整 -3
Math.max(5,3) 取两数中的最大值
Math.min(5,3) 取两数中的最小值
Math.abs(-5.56);//取绝对值
Math.round(2.6); 四舍五入
Math.PI; 圆周率
13.String
String的split()方法 切割字符串得到一个数组
数组的join方法 将数组的元素组合成字符串
14.Date 日期
var da = new Date(); 获取 当前系统时间
var year = da.getFullYear();//获取年
var month = da.getMonth();//获取月
var day = da.getDate();//获取日
var hour = da.getHours();//获取时
var minute = da.getMinutes();//获取分
var seconds = da.getSeconds();//获取秒
var week = da.getDay();//获取星期
15.定时器
周期性定时器
setInterval(方法,时间)
每隔指定时间执行一次方法
clearInterval(定时器的名字) 清除定时器
一次性定时器
setTimeout(方法,时间)
过了指定时间执行方法,只执行一次
clearTimeout(定时器的名字) 清除定时器
16.函数(方法)
具有一定功能的代码块
系统函数
alert() typeof()……
直接可以使用,不需要自己定义
自定义函数
function 函数名(){
}
调用函数 :函数名();
匿名函数:没有名字的函数
函数的作用:提高代码的复用性
形参(形式参数) 函数定义时,写在()里的变量名
实参(实际参数) 函数调用时,写在()里的值
函数的返回值 return
return 将结果返回给调用者
代码执行到return ,
会跳出函数 ,函数中return后的代码不执行
定义函数求n-m之间数据的和,将和返回
定义函数求圆的面积,将面积返回
17.变量的作用域
全局变量:定义在函数外部的变量,
不用var关键字定义在函数内部的变量
局部变量:用var定义在函数内部的变量
18.DOM document object model
文档对象模型
当网页被浏览器解析后,会生成树(DOM树),
网页的元素就是树的节点,我们利用DOM树
可以:
获取网页元素
设置获取元素的属性
对元素设置样式
给元素绑定事件
动态的创建新的元素,删除元素
19. 获取元素
根据id获取页面元素
document.getElementById(id名)
该方法会返回一个object,
该object对应的就是该id对应的元素
注意:浏览器解析网页顺序是从上往下
通过class获取元素,返回的是一个数组
var clas = document.getElementsByClassName("cla");
通过标签名获取元素,返回的是一个数组
var tags = document.getElementsByTagName("div")
通过name获取元素,返回的是一个数组
var ns = document.getElementsByName("liu");
20. 获取或设置元素的属性
object.innerHTML 标签里的所有内容,包括子标签
object.innerText //标签里的文本
img
·src 图片的路径
·value 获取或设置value属性 ,
通常用于具有value属性的元素
getAttribute(属性名) 获取指定属性的属性值
setAttribute(属性名,属性值) 设置属性
设置样式
object.style.样式属性 = …
给元素绑定事件
onclick 鼠标单击事件
ondblclick 鼠标双击事件
onmouseover 鼠标移入事件,经过子区域也会触发
onmouseout 鼠标移出事件
onmouseenter 鼠标移入事件
onmouseleave 鼠标移出事件
onchange 内容改变事件
onload 加载完毕事件
onblur 失去焦点事件
onfocus 获得焦点事件
onkeyup 键盘弹起事件
onkeydown 键盘按下事件
设置层级 z-index
设置z-index必须要设置position ,否则无效
21.下拉选择框属性和方法
selectedIndex 获取所选中option的索引 length option 的个数 new Option(text,value) 创建一个option add(option) 在select中添加一个option
22.dom节点操作 与BOM思想
创建节点 document.createElement(标签名); 将节点添加到其他节点上 //将pic追加到my内部 //my.append(pic); //appendChild() //将pic放在my内部中dd的前面 my.insertBefore(pic,dd);*/ 移除节点 pic.remove();//移除pic 浏览器对象模型 window *对象 所有的函数,以及全局变量都是属于window对象。
23.location 与 history 浏览历史 and Screen
window.location.href //页面地址window.location.reload()//刷新页面
hoistory
window.history.back() 后退
window.history.forward() 前进
window.history.go(整数)
正数:前进 负数:后退 screen alert(window.screen.width);//宽度 alert(window.screen.availHeight);//可用高度 jquery jq 一个js的框架(用js定义好的函数)。Js库 如何引入外部js文件? <script type="text/javascript" src="demo.js"></script> 注意: script标签要么用来引入文件,要么写js代码,不能一个script两用。 引入在前,使用在后。