javascript笔记.docx

javascript笔记.docx

《javascript笔记.docx》由会员分享，可在线阅读，更多相关《javascript笔记.docx（9页珍藏版）》请在冰点文库上搜索。

javascript笔记

类名的添加删除，切换是否存在

addClass、removeClass、toggleClass、hasClass

添加多个类名addClass（“div1div2”）

只删除div2类名removeClass（“div2”）

jQuery对象与DOM对象的转换

DOM对象：

通过docment去获取页面上的元素，得到的对象就是一个dom对象。

jQuery对象：

通过$（）--jQuery获取得到的对象就是jQuery对象。

jQuery对象使用jq的api;

jQuery对象不能调用dom的api;

Dom不能调用jQuery的api;

jQuery对象转换dom对象利用[0]

jQuery对象转换dom对象利用get（0）

获取jQuery对象的长度两种方式：

alert（$（arrLi）.size（））;/

alert（$（arrLi）.length）;

在一个页面上可以写js的原生代码，也可以写jQuery代码

为了在对象上面做一个区分，区分jQuery对象已经dom对象，一般情况下如果是jQuery对象，其命名规则是$（）开头

jQuery对象节点的操作（区分与dom对象的节点）

属性：

Text（）只获取内容HTML（）获取内容和标签attr（属性值）val（）值

节点：

添加before、after、prepend、prependTo、append、appendTo

删除empty（清空内容）、remove（全删）

克隆clone

替换replaceWith、replaceAll

表单属性。

新的jQuery版本使用prop。

早期版本操作input属性checked，disableselected的属性

我们使用attr没有问题

$（function（）{

$（"button:

eq（0）"）.click（function（）{

$（"input:

checkbox"）.prop（"checked",true）;

}）;

$（"button:

eq

（1）"）.click（function（）{

$（"input:

checkbox"）.prop（"checked",false）;

}）;

}）

随机数document.write（Math.random（））;

document.write（parseInt（Math.random（）*100））;

事件及其绑定

事件

表单事件：

焦点事件（blur、focus）、文本选择事件（select、submit、change）、点击事件（click、dblclick）

鼠标事件

Hover（mouseenter与mouseleave事件）clickdblclick

Mousedown事件与mouseup事件

mouseover事件与mouseenter事件

mouseover事件与mouseenter事件不同，只有在鼠标指针穿过被选元素时，才会触发mouseenter事件。

如果鼠标指针穿过任何子元素，同样会触发mouseover事件。

不论鼠标指针穿过被选元素或其子元素，都会触发mouseover事件。

只有在鼠标指针穿过被选元素时，才会触发mouseenter事件。

Mousemove事件与event.pageX,event.pageY鼠标跟随案例

mouseleave与mouseout事件

preventDefault（）阻止默认行为

键盘事件

Keydown与keyup事件

Keypress事件同步进行

Keycode键盘码测试键盘

窗口事件

resize（）窗口大小改变触发

Scroll（）窗口滚动条滚动触发

事件对象event

事件对象中保存着很多信息。

鼠标和键盘许多相关的信息

1、function（ev）（因为有兼容性必须写参数）

2、ev.pageYev.pageX获取坐标（已经包含卷去的距离）

事件绑定：

动态的为元素绑定事件：

第一种：

bind劣势bind不支持给动态的元素绑定事件

第二种：

delegate（委托、委派）

第三种：

on事件已经通过父元素委派off取消

链式编程$（“div”）.animate（）.show（）.hide（）.attr（“”,“”）.css（“”,“”）

这种形式的方法连我们叫做链式编程。

原理Returnthis；

我们链式变成的条件的前提当前方法返回得是jQuery对象。

特点：

减少代码，节省空间，提高效率。

返回的必须是jq对象，才能继续编程。

隐式迭代：

通常都是遍历数组（each）

jQuery对象他可以理解为一个数组，这个数组里面放着多个dom对象。

我们可以遍历jQuery对象，得到里面具体的dom对象，然后就可以操作指定的dom对象。

$（"div"）.each（function（）{

if（index==3）{

//操作dom

}

}）

定时器

循环定时器

延时定时器/炸弹定时器

Vartimer;

$（function（）{

var$btn1=$（".btn1"）

var$btn2=$（".btn2"）

$btn1.click（function（）{

timer=setTimeout（function（）{

alert（'a'）;

},1000）

}）

$btn2.click（function（）{

clearTimeout（）;

}）

}）

Stop（所有动画，当前执行的动画快速结束）默认值falsefalse；

Stop（）停止上一个动画，执行当前动画；

Stop（true）停止所有动画true，当前执行的动画快速结束；

取消文本的选中returnfalse

Callback把函数作为参数

Skew斜切

C3居中属性：

position：

fixed

Left：

50%

Top：

50%

Transform：

translate（-50%，-50%）；

兼容IE9以上浏览器

阴影

渐变background-image：

linear-gradient（toright,yellow,blue）;

渐变可以控制方向（可以使用角度）起始颜色，结束颜色

width:

1200px;

height:

50px;

margin:

200pxauto;

background-image:

linear-gradient（

90deg,

yellow25%,

green55%,

pink75%,

green100%

）;

辐射半径

中心点的位置

起始颜色

结束颜色

background-image:

radial-gradient（150pxatcenter,yellow,green）;以盒子自身为参照

background-image:

radial-gradient（300pxatleftcenter,yellow,green）;左上角为原点

transition-property（过渡属性）all；

transition-duration（过渡时间）1s；

transition-timing-function（过渡速度）ease默认ease先快后慢linear匀速

linear：

线性过渡。

等同于贝塞尔曲线（0.0,0.0,1.0,1.0）

ease：

平滑过渡。

等同于贝塞尔曲线（0.25,0.1,0.25,1.0）

ease-in：

由慢到快。

等同于贝塞尔曲线（0.42,0,1.0,1.0）

ease-out：

由快到慢。

等同于贝塞尔曲线（0,0,0.58,1.0）

ease-in-out：

由慢到快再到慢。

等同于贝塞尔曲线（0.42,0,0.58,1.0）

cubic-bezier（,,,）：

特定的贝塞尔曲线类型，4个数值需在[0,1]区间内

渐变

线性渐变

linear-gradient（）:

指向一个方向产生渐变

注意：

1.方向2.开始颜色2.终止颜色3.距离

径向渐变

radial-gradient：

指从中心向四周渐变

注意：

1.渐变半径（半径可以不等）2.渐变圆心（中心位置参照的是盒子的左上角） 3. 开始颜色 4. 终止颜色

好处：

css3中渐变绚丽的效果，减少在网页中图片的使用

transition-delay（过渡延时）0s；

3d效果在2d平面上实现，通过透视（perspective）实现

、透视

概念

通过屏幕2d平面，通过一种视觉呈现，显示3d的效果。

必须给父元素设置

属性

perspective

值

值越小离眼睛越近反之越大

perspective有两种写法

作为一个属性，设置给父元素，作用于所有3D转换的子元素

作为transform属性的一个值，做用于元素自身并且写在最前面

背景

属性

background-size设置背景图片的尺寸

可以设置长度单位或百分比

设置为cover时，会自动调整缩放比例，保证图片始终填充满背景区域，如有溢出部分则会被隐藏。

设置为contain会自动调整缩放比例，保证图片始终完整显示在背景区域。

background-origin设置背景定位的原点

border-box以边框做为参考原点

padding-box以内边距做为参考原点；

content-box以内容区做为参考点；

background-clip设置背景区域裁切

border-box裁切边框以内为背景区域

padding-box裁切内边距以内为背景区域；

content-box裁切内容区做为背景区域；

注意：

背景图片尺寸在实际开发中应用十分广泛

3D 转换

透视

perspective:

1000px

3D效果

transform-style：

preserve-3d;

属性

移动

translate（x,y,z）

旋转

rotate（Xdeg,Ydeg,Zdeg）

倾斜

skew（deg,deg）

缩放

scale（0-1）

18、2D  转换

属性

移动

translate（x,y）

旋转

rotate（deg）

倾斜

skew（deg,deg）

缩放

scale（0-）

transform：

转换

transform-origin:

转换原点

Git是一个免费和开源的 分布式版本控制系统，旨在处理从小到大的项目，速度和效率。

Git 易于学习， 占用空间小，闪电般快速。

它超越了像Subversion，CVS，Perforce和ClearCase这样的SCM工具，具有便宜的本地分支，便捷的分段区域和 多个工作流程等功能。