本地存储
1.特性
- 数据存储在浏览器中;
- 页面刷新不丢失数据;
- 容量大,sessionStorage约5M,localStorage约20M;
- 只能存储字符串,对象需要编码。
2.window.sessionStroage
- 生命周期为关闭浏览器窗口(该页面);
- 在同一个窗口下数据可以共享;
- 以键值对的形式存储使用。
存储数据:
sessionStorage.setItem(key,value);
获取数据:
sessionStorage.getItem(key);
删除数据:
sessionStorage.removeItem(key);
更改数据:
直接覆盖即可。
删除所有数据:
sessionStorage.clear();
3. window.localStorage
- 生命周期永久生效,除非手动删除,否则关闭页面也会存在;
- 可以多窗口共享;
- 以键值对存储。
存储数据:
localStorage.setItem(key,value);
获取数据:
localStorage.getItem(key);
删除数据:
localStorage.removeItem(key);
更改数据:
直接覆盖即可。
删除所有数据:
localStorage.clear();
jQuery入门
1.概述
JS库:
一个封装好的特定的集合(方法或函数)。
jQuery:为了快速方便地操作DOM,里面基本都是函数。
jQuery是一个快速、简洁的JS库,设计宗旨是Write Less,Do More。把JS中DOM操作进行了封装,优化了DOM操作、事件处理、动画设计和Ajax交互。
优点:
- 轻量级,不会影响页面加载速度;
- 跨浏览器兼容;
- 链式编程,隐式迭代;
- 对事件、样式、动画支持,大大简化了DOM操作;
- 支持插件开发;
- 免费、开源。
2.基本使用
- 去官网下载jQuery文件,(压缩版即可);
- 引入jQuery文件:
<script src="jQuery.min.js"></script>
入口函数:
- 等页面DOM加载完再执行js代码;
- 相当于原生js中的DOMContentLoaded;
- 等页面文档、外部js文件、css文件、图片都加载完毕才执行内部代码。
写法一:
$(document).ready(function(){
})
写法二:
$(function(){
})
3. jQuery对象
- $是jQuery的别称,在代码中可以使用jQuery代替;
- $是jQuery的顶级对象,相当于js的window,把元素利用 $包装成jQuery对象,可以调用jQuery方法;
- DOM对象:用原生js获取来的对象;
- jQuery对象:用jquery方法获取过来的,
$(' ')
,以伪数组方式存储。 - jQuery对象只能使用jQuery方法,DOM对象使用原生js属性和方法;
- 原生js比jQuery大,因为它封装了部分常用属性和方法。
转换:
DOM→jQuery:
$('DOM对象')
jQuery→DOM:
$(' ')[index]
或$(' ').get(index)
index=0
4. 常用API
选择器:
$(' 选择器 ')
设置样式:
$(' ').css('属性','值')
隐式迭代:
遍历内部DOM元素(伪数组方式存储)的过程。简单说就是把匹配到的所有元素进行循环遍历,执行相应方法,不用我们再进行循环。
筛选选择器:
排他思想:
利用隐式迭代获取全部元素,然后添加事件,设置当前,去掉兄弟。
链式编程:
减少代码量。自己怎样.兄弟怎样
样式操作:
- 操作css:
- 参数只写属性名,则返回属性值:
$(' ').css("属性名")
; - 修改:
$(' ').css("属性名","属性值")
逗号分割,加引号; - 参数是对象,修改多个属性。
- 操作类:
- 添加类:
$(' ').addClass("类名")
; - 删除类:
$(' ').removeClass("类名")
; - 切换类:
$(' ').toggleClass("类名")
;添加或删除
注意:原生js操作类会覆盖,jQuery不会覆盖,会追加,只修改指定类名的类。
5.动画效果
显示与隐藏:
show([speed,[easing],[fn]])
hide([speed,[easing],[fn]])
toggle([speed,[easing],[fn]])
- 参数都可以省略,无动画直接显示;
- speed:速度,slow或normal或fast或动画时长毫秒数;
- easing:切换效果,默认swing,可设置为linear;
- fn:回调函数,动画完成时的执行函数,每个元素执行一次。
滑动:
slideDown([speed,[easing],[fn]])
slideUp([speed,[easing],[fn]])
slideToggle([speed,[easing],[fn]])
切换事件:
hover([over,]out)
- over:鼠标移动到元素上要触发的函数;
- out:鼠标移出元素要触发的函数
动画队列:
动画效果一旦触发就会执行,如果多次触发,就会造成多个动画或效果排队执行。
停止排队:
stop()
必须写在动画的前面,因为它结束上一次动画。
淡入淡出效果:
fadeIn([speed,[easing],[fn]])
fadeout([speed,[easing],[fn]])
fadeToggle([speed,[easing],[fn]])
fadeTo(speed,opacity,[easing],[fn])
:修改透明度 opacity:0~1
自定义动画:
animate(params,[speed],[easing],[fn])
- params:想要更改的样式属性,以对象形式传递,必须写,属性名可以不带引号,如果是复合属性则需要采用驼峰命名法。
6.属性操作
固有属性:
- 获取属性值:
prop("属性")
- 设置属性值:
prop("属性","属性值")
自定义属性:
- 获取属性值:
attr("属性")
- 设置属性值:
attr("属性","属性值")
数据缓存data():
data()方法可以在指定元素上存取数据,并不会修改DOM元素结构,一旦页面刷新之前存放的数据都将被移除。
获取h5自定义属性不用写data- 返回数字型。
7.内容文本值操作
针对元素的内容还有表单的值:
- 获取元素内容:
$(' ').html()
- 修改元素内容:
$(' ').html("值")
- 获取文本内容:
$(' ').text()
- 修改文本内容:
$(' ').text("值")
- 获取表单内容:
$(' ').val()
- 修改表单内容:
$(' ').val("值")
8. 元素操作
遍历元素:
隐式迭代可以对一组元素进行同样的操作;
如果想给同一元素做不同操作,需要遍历。
$(" ").each(function(index,domEle){ })
- each()方法遍历匹配的每一个元素,主要用DOM处理;
- index是每个元素的索引号,domEle是每个DOM对象。
$.each(object,function(index,element){ })
- $.each()方法可用于遍历任何对象,比如数组、对象
- index是每个元素的索引号,element遍历内容
创建元素:
var name=$(" 元素 ")
添加元素:
- 内部添加:
$(" 原").append("要添加的")
放置在原元素的最后;$(" 原").prepend("要添加的")
放在原元素最前; 成父子 - 外部添加:
element.after("内容")
element.before("内容")
成兄弟
删除元素:
$(element).remove()
删除元素本身$(element).empty()
删除元素子节点,不删除本身$(element).html("")
清空该元素内容,同上
9. 尺寸与位置
position只能获取不能设置。
scroll:滚动事件
节流阀 互斥锁
10.事件
事件注册:
单个事件注册:$(" ").click(function(){ })
事件处理:
on()方法在匹配元素上绑定一个或多个事件的事件处理函数;
element.on(events,[selector],fn)
- events:一个或多个用空格分隔的事件类型;
- selector:元素的子元素选择器;
- fn:回调函数
events:对象,eg:
$("div").on({
click:function(){ },mouseenter:function(){ }
})
可以完成事件委派操作:要加给子元素的事件绑定在父元素身上,把事件委派给父元素;
$("ul").on("click","li",function(){ })
给动态创建的元素绑定事件(未来创建的元素也可以绑定)。
解绑事件:
off()方法可以移除on()方法绑定的事件处理程序。
$(" ").off()
:解除所有事件;
$(" ").off("事件名 ")
:接触指定事件;
$(" ").off("事件名","子元素")
:解除事件委托。
one()
:只触发事件一次 ,用法等于on。
自动触发事件:
定时器自动触发,不必进行鼠标操作。
- 直接在入口函数里:
$(" ").事件()
; $("element").trigger("事件")
;$("element").triggerHandler("事件")
:不会触发元素默认行为
事件对象:
11.其他方法
对象拷贝:
$.extend([deep],target,object1,[objectN]
会覆盖目标原有属性值;
- deep:为true则为深拷贝,为false则为浅拷贝;
- target:拷贝到的目标对象;
- object:待拷贝的对象
深拷贝:会拷贝其的子对象,新开辟空间,属性合并
浅拷贝:把原来对象的复杂数据类型地址拷贝给目标对象(同一个子对象),属性覆盖。
多库共存:
$可能会冲突,解决方案:
- 把$统一改为jQuery;
- 自己设置新名字:
var xx=$.noConflict()
jQuery插件