锐客网

  1. 首页 > it技术 > >

jquery作品知识点记录

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是指需要删除的个数。

2，插入 arr.splice(i,0,n1,n2...)
i是指从哪个位置的后面插入，0表示删除0个元素，n1、n2是需要插入的值

3，替换
arr.splice(i,n,n1,n2...) i是指从哪个位置开始删除n个元素，然后插入n1,n2.....

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"); //将所有段落字体设为红色
【jquery作品知识点记录】案例分析

    推荐阅读


    上一篇：4-3-1|4-3-1 彩色矩形

    下一篇：重磅！辽宁省首例自体脐带血出库治疗孤独症