javascript 学习笔记

1.

///////////////////////////////////////////////////////////////////////////////////////////

2.字母大小写的快速切换方法：按住shift再按住字母即可

///////////////////////////////////////////////////////////////////////////////////////////

3.获取元素的方式：document.getElementById("ID")

///////////////////////////////////////////////////////////////////////////////////////////

4.事件--onblur元素失去焦点事件 onfocus元素获得焦点事件

///////////////////////////////////////////////////////////////////////////////////////////

5.获取浏览器的可视高度的方法 document.documentElement.clientHeight;

///////////////////////////////////////////////////////////////////////////////////////////

6.获取浏览器的可视宽度的方法 document.documentElement.clientWidth;

///////////////////////////////////////////////////////////////////////////////////////////

7.background-img:(url)给元素加背景图片

background-repeat:no-repeat不重复

background-attachment:fixed固定背景图不随滚动条滚动

///////////////////////////////////////////////////////////////////////////////////////////

8.鼠标的型状

手形：cursor:pointer;

///////////////////////////////////////////////////////////////////////////////////////////

9.overflow,display,visibility

overflow 主要是对容器内超出本容器内容如何来显示进行处理

-hidden 隐藏超出的内容

///////////////////////////////////////////////////////////////////////////////////////////

10.opacity:0`1透明度

滤镜filter:alpha(opacity = 50);

-visible始终显示实际的内容

-auto超出出现滚动条，未超出正常显示

-scroll始终出现滚动条

display主要是控制元素的显示状态（元素完全消失，不再占有位置）

-常用属性none指的是不显示即隐藏

-block以块元素的方式显示

-inline以行元素的方式显示

-inline-blick以行内块级元素

visibility主要是控制元素的隐藏和显示状态（元素消失但是还会占有原来我位置）

-visible当前元素为显示状态

-hidden当前元素为隐藏状态

///////////////////////////////////////////////////////////////////////////////////////////

11.alert("话");

document.wirte("话")

prompt("话"，"默认值")弹出让用户输出的窗口

///////////////////////////////////////////////////////////////////////////////////////////

12.for(var i = 0 ;i

///////////////////////////////////////////////////////////////////////////////////////////

13.函数的调用方式

通过括号来调用----函数名()

通过触发事件来调用----对象.事件=function(){}

自调用----(function(){})()

///////////////////////////////////////////////////////////////////////////////////////////

13.document.querySelectorAll("元素");----html5新的获取元素的方法 获取到是一组数组

document.querySelector("元素");----获取单个元素

///////////////////////////////////////////////////////////////////////////////////////////

14.CSS3 Filter（滤镜）属性提供了提供模糊和改变元素颜色的功能。CSS3 Fitler 常用于调整图像的渲染、背景或边框显示效果。

grayscale 灰度 值为0-1之间的小数

sepia 褐色　　　　　　 值为0-1之间的小数

saturate 饱和度　　　　 值为num

hue-rotate 色相旋转　　值为angle

invert 反色　　　　　　 值为0-1之间的小数

opacity 透明度　　　　　值为0-1之间的小数

brightness 亮度　　　　 值为0-1之间的小数

contrast 对比度　　　　 值为num

blur 模糊　　　　　　 值为length

drop-shadow 阴影

///////////////////////////////////////////////////////////////////////////////////////////

15.数组方法

push()方法 -------- 向数组末尾追加新的元素

unshift()方法 ------ 向数组开头追加新的元素

pop()方法 ---------- 删除数组最后一个元素

shift()方法 -----------删除第一个元素

* join()方法 ------------将数组转换成字符串

concat()方法 ----------将两个数组连接在一起（可以是自己连接自己））

sort()方法-------------数组排序比大小

他又专门用来排序的函数

是它：function 名字(x,y){ return x-y;---从小到大

return y-x;---从大到小

}

数组.sort(名字);

万能添加或删除方法

splice(x,y,"元素")方法 ------x表示指定从几号元素开始删除或者开始追加

------y表示指定删除几个元素

------'元素'表示从x位置开始添加

注意只添加不删除用splice(x,0,'元素')

！作业 ： 1。写一个函数，传入一个数组，返回数组去重复之后的结果

！作业 ： 2. 写一个函数，对一个数组进行排序，返回数组排序的结果

///////////////////////////////////////////////////////////////////////////////////////////

16.字符串对象

对象.charAt(个数)方法 ---- --------用以获取字符串第几个元素的内容

对象.charCodeAt(个数)方法 ------------用以获得字符串第几个元素的内容的Unicode编码

String.fromCharCode(数字)方法- ---将Unicode编码转化成原始字符

对象.indexOf("字符")方法 ------------获得该字符第一次出现的位置

对象.match('字符串')方法 -------------找对象里是否出项该字符串 返回值是指定的置或没有返回 null

对象.replace(‘要替换的字符’,‘替换成的字符’)方法 -------------------默认只替换第一个找到的字符

对象slice(x,y).--------对字符串截取x:开始位置--y:结束位置的前一个结束

* 对象.split(‘字符’) --------字符串转换成数组，根据给的字符为拆分点变为数组

！作业：3.将字符串中所有的我都换成你；

！作业：4.查找所有我在字符串中出现位置，并打印出来；

///////////////////////////////////////////////////////////////////////////////////////////

17.数学对象方法

取绝对值

Math.abs()方法 -----------对数字取绝对值的方法

取近视值(四舍五入)(整数向上向下取整还剩那个整数)

Math.round()方法----------得出的结果是整数

Math.ceil()方法;--------- 向上取整

Math.floor()方法 ---------向下取整

取随机数

Math.random()方法---------获得0~1之间的小数

若取x到y之间的随机小数有公式

Math.random()*(y-x)+x 即可

！作业：5.写一个想吃的随机水果程序

思想 创建数组 随机下标 读出下标对应的数组元素

*********************************************************************************************

///////////////////////////////////////////////////////////////////////////////////////////

18.BOM定时器

启动定时器

setInterval(函数,时间);--------一直执行

setTimeout(函数,时间);----------只执行一次

停掉定时器

clearInterval(定时器名字)

clearTimeout(定时器名字)

///////////////////////////////////////////////////////////////////////////////////////////

19.Window对象方法

alert()弹窗

prompt()用户输入框

confirm()弹出确定或取消的窗口值是ture和false

///////////////////////////////////////////////////////////////////////////////////////////

20.Window子对象方法

history();-- ---可以查用户的访问记录

history().back ----- 网页后退

history().forward-----网页前进

history().go(数字)----返回第几个访问记录

location.replace(网址)-----跳转网页

location.assign(网址)----- 跳转网页可以返回前一个网页

location.href(网址) -------跳转网页

location.reload()-----重新加载本网页

///////////////////////////////////////////////////////////////////////////////////////////

21.事件初识 鼠标事件详解

onload------ --加载完毕事件

window.onload需要js在body里面操作元素的时候

点击事件

onclick-----------单击事件

ondblclick--------双击事件

鼠标事件

onmousedown -------- 鼠标按下事件

onmouseup-------------鼠标抬起事件

onmouseover-----------鼠标移入事件

onmousemove ----------鼠标移动事件

onmouseout------------鼠标移出事件

!作业：6.点击图片弹出你好

///////////////////////////////////////////////////////////////////////////////////////////

22.事件绑定 事件监听

事件绑定

￥在js脚本里绑定事件

变量.事件= function()

￥在html标签里添加事件

----函数在JS中写

注意 如果同一个事件执行多个函数时只会执行最后一个

事件监听

addEventListener('什么事件',function())

说明 ： 它是w3c的标准方法，不支持ie的低版本

在ie低版本中用下面的方法

attachEvent('on+事件',function(){})

第一个参数前不要加on

注意 如果同一个事件执行多个函数时会依次执行函数

///////////////////////////////////////////////////////////////////////////////////////////

23.判断浏览器

document.all

认识他的是低版本的ie浏览器

不认识他的是w3c标准的浏览器

///////////////////////////////////////////////////////////////////////////////////////////

24.获得和设置元素行内样式.

！作业：7.点击按钮让盒子的宽变大

！作业：8.让盒子的宽自动变大

///////////////////////////////////////////////////////////////////////////////////////////

25.JS运动效果原理

定位模块position:absolute

改变Top,Left值

添加在定时器里