JavaScript 存储对象
Web 存储 API 提供了 sessionStorage (会话存储) 和 localStorage(本地存储)两个存储对象来对网页的数据进行添加、删除、修改、查询操作。
localStorage 用于长久保存整个网站的数据,保存的数据没有过期时间,直到手动去除。
sessionStorage 用于临时保存同一窗口(或标签页)的数据,在关闭窗口或标签页之后将会删除这些数据。
存储对象属性
属性描述
length返回存储对象中包含多少条数据。
存储对象方法
方法描述
key(n)返回存储对象中第 n 个键的名称
getItem(keyname)返回指定键的值
setItem(keyname, value)添加键和值,如果对应的值存在,则更新该键对应的值。
removeItem(keyname)移除键
clear()清除存储对象中所有的键
Web 存储 API
属性描述
window.localStorage在浏览器中存储 key/value 对。没有过期时间。
window.sessionStorage在浏览器中存储 key/value 对。 在关闭窗口或标签页之后将会删除这些数据。
定义和使用
localStorage 和 sessionStorage 属性允许在浏览器中存储 key/value 对的数据。
localStorage 用于长久保存整个网站的数据,保存的数据没有过期时间,直到手动去删除。
localStorage 属性是只读的。
提示: 如果你只想将数据保存在当前会话中,可以使用 sessionStorage 属性, 该数据对象
语法
window.localStorage
保存数据语法:
localStorage.setItem("key", "value");
读取数据语法:
var lastname = localStorage.getItem("key");
删除数据语法:
localStorage.removeItem("key");
jQuery 中 each()方法
each() 方法为每个匹配元素规定要运行的函数。
提示:返回 false 可用于及早停止循环
语法:$(selector).each(function(index,element))
参数描述
function(index,element)必需。为每个匹配元素规定运行的函数。index - 选择器的 index 位置。element - 当前的元素(也可使用 "this" 选择器)。
each的几种常用的用法
each处理一维数组
var arr1 = [ "aaa", "bbb", "ccc" ];
$.each(arr1, function(i,val){
alert(i);
alert(val);
});
alert(i)将输出0,1,2 // i 是循环的序数
alert(val)将输出aaa,bbb,ccc // a 是值
each处理二维数组
var arr = [['a', 'aa', 'aaa'], ['b', 'bb', 'bbb'], ['c', 'cc', 'ccc']]
$.each(arr, function(i, item){
$.each(item,function(j,val){
alert(j);
alert(val);
});
});
alert(j)将输出为0,1,2,0,1,2,0,1,2
alert(val)将输出为a,aa,aaa,b,bb,bbb,c,cc,ccc
each处理json数据,这个each就有更厉害了,能循环每一个属性
var obj = { one:1, two:2, three:3};
each(obj, function(key, val) {
alert(key);
alert(val);
});
这里alert(key)将输出one two three //键
alert(val)将输出one,1,two,2,three,3 //值
ecah处理dom元素,此处以一个input表单元素作为例子。
如果你dom中有一段这样的代码
写法一
$.each($("input:hidden"), function(i,val){
alert(val);
alert(i);
alert(val.name);
alert(val.value);
});
写法二:
$("input:hidden").each(function(i,val){
alert(i);
alert(val.name);
alert(val.value);
});
alert(val)将输出[object HTMLInputElement],因为它是一个表单元素。
alert(i)将输出为0,1,2,3
alert(val.name);将输出aaa,bbb,ccc,ddd,如果使用this.name将输出同样的结果alert(val.value); 将输出111,222,333,444,如果使用this.value将输出同样的结果
empty,remove,detach方法的区别
js中splice()方法--删除、插入、替换,用法小结笔记
splice()方法直接修改原数组
1,删除
arr.splice(i,n); i是指从不包含(i)的位置开始,n是指需要删除的个数。
var arr = [a,b,c,d,e];
var arrNew = array.splice(2,2);
console.log(arrNew);//结果是[c,d]
console.log(arr);//结果是[a,b,e]
2,插入 arr.splice(i,0,n1,n2...)
i是指从哪个位置的后面插入,0表示删除0个元素,n1、n2是需要插入的值
var arr = [a,b,c,d,e];
arr.splice(3,0,f,g,h);
console.log(arr);//结果是[a,b,c,f,g,h,d,e]
3,替换
arr.splice(i,n,n1,n2...) i是指从哪个位置开始删除n个元素,然后插入n1,n2.....
var arr = [a,b,c,d,e];
arr.splice(3,2,f,g);
console.log(arr);//结果是[a,b,c,f,g]
jquery数组常用方法及例子
Array对象的方法有: concat()连接两个或更多的数组,并返回结果。 join()把数组的所有元素放入一个字符串。元素通过指定的分隔符进行分隔。 pop()删除并返回数组的最后一个元素。 push()向数组的末尾添加一个或更多元素,并返回新的长度。 reverse()颠倒数组中元素的顺序。 shift()删除并返回数组的第一个元素 slice()从某个已有的数组返回选定的元素 sort()对数组的元素进行排序 splice()删除元素,并向数组添加新元素。 toSource()返回该对象的源代码。 toString()把数组转换为字符串,并返回结果。 toLocaleString()把数组转换为本地数组,并返回结果。 unshift()向数组的开头添加一个或更多元素,并返回新的长度。 valueOf()返回数组对象的原始值。
jQuery中 属性操作 attr( ) prop()css( )区别
属性包括,标准属性:id class style title 语言属性 lang dir以及某些特定的元素的固有的属性,比如 a 的 href target 属性,input元素的 radio checked type alt src disabled value 等 ,img标签的width height src alt 等,不存在的属性叫做新增属性。2 attr( ) 可以设置元素的属性(也就是给元素新增加一个原来并不存在的属性)也可以获取元素的本来就有的属性以及额外设置的属性。如果要获取的属性没有设置,那么获取到的结果是 undefined;3 prop( )可以设置元素的属性(HTML固有的属性,可以给元素添加属性)也可以获取元素的固有的属性值,如果是额外设置的其他属性,则无法通过prop( )获取。4 设置元素属性:attr (“属性名”,“属性值”) 既可以设置元素固有的属性,也可以设置元素本来不存在的属性,比如attr()可以给下面代码div行设置固有的HTML属性,包括 ttle id class 等,也可以设置原先不存在的属性,也就是造一个新的属性,比如 index aaa 等,任何都行;而 prop( “属性名”,“属性值”)只能设置固有的HTML属性。获取元素属性值:attr(“属性值“)只能获取已经设置在元素身体上的属性值,包括固有属性和新增属性,没有设置的属性将无法获取到值,结果全部是undefined;prop(“属性值”) 只能获取固有属性的属性值,新增属性的属性值无法被获取到
总结1:
console.log($("#dv").prop("title"));
console.log($("#dv").attr("title"));
console.log($("#dv").prop("style"));
console.log($("#dv").attr("style"));
//输出结果
我是一个div
我是一个div
CSSStyleDeclaration {alignContent: "", alignItems: "", alignSelf: "", alignmentBaseline: "", all: ""…}
undefined
1 对于固有的HTMl属性,如果在元素中设置了,那么attr 和 prop 都可以获取的到2 对于固有的HTMl属性,如果在元素中没有设置,那么 attr 获取的结果是undefined 而prop可以获取那个属性的值。
总结二:
$("#dv").attr("index","1")//通过attr给元素设置新的属性,W3C原来不存在的属性
console.log($("#dv").prop("index"));
console.log($("#dv").attr("index"));
//执行代码
//控制台输出
undefined
1
1 如果想要通过attr()获取属性值,那么该属性必须显式的设置在HTML代码中或者通过attr新增的属性才能被获取到,如果没有设置,那么将返回undefined2 如果通过prop()获取属性值,那么该属性只能是HTMl的固有属性,无论是否显式的设置,都可以获取其对应的属性值,如果是额外增加的属性,那么将无法获取。
css() 只能获取是 style 里面的属性值;
注意语法:获取style样式属性值:对象.css(“属性名”),设置style样式属性值:对象.css(“属性名”),设置style样式属性值:对象.css(“属性名”,“属性值”)双引号必不可少
1、css(name)访问第一个匹配元素的样式属性。返回值 String参数name (String) : 要访问的属性名称示例:$("p").css("color"); //取得第一个段落的color样式属性的值2、css(properties)把一个“名/值对”对象设置为所有匹配元素的样式属性。这是一种在所有匹配的元素上设置大量样式属性的最佳方式。返回值 jQuery参数properties (Map) : 要设置为样式属性的名/值对示例:
//1 将所有段落的字体颜色设为红色并且背景为蓝色$("p").css({ color: "#ff0011", background: "blue" });
**//2 如果属性名包含 "-"的话,必须使用引号$("p").css({ "margin-left": "10px", "background-color": "blue" });3、css(name,value)在所有匹配的元素中,设置一个样式属性的值。数字将自动转化为像素值返回值 jQuery参数**
name (value) : 属性名value (String, Number) : 属性值示例:$("p").css("color","red"); //将所有段落字体设为红色
案例分析