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作品知识点记录)