Jquery常用操作

由于自身是后端开发，长期做的项目都基本在纯后端，对于js熟悉程度一直都是自己过不去的坎，近段时间接触了一个较为复杂的页面交互，恶补了下jquery的一些常用操作，在此整理一下，以下内容只属于部分记录，重点在于记录数据的处理版块。

html属性操作

attr(name|properties|key,value|fn)

设置或返回被选元素的属性值。
eg：返回文档中所有图像的src属性值。

$("img").attr("src");

eg:为所有图像设置src和alt属性。

$("img").attr({ src: "test.jpg", alt: "Test Image" });

removeAttr(name)
从每一个匹配的元素中删除一个属性
eg:将文档中图像的src属性删除

$("img").removeAttr("src");

CSS类

addClass(class|fn)

为每个匹配的元素添加指定的类名。
eg:为匹配的元素加上 ‘selected’ 类

$("p").addClass("selected");
$("p").addClass("selected1 selected2");

removeClass([class|fn])

从所有匹配的元素中删除全部或者指定的类。
eg:从匹配的元素中删除 ‘selected’ 类

$("p").removeClass("selected");

选择器

#id

element

.class

**

selector1,selector2,selectorN

$("div,span,p.myClass")

文档的处理

append(content|fn)

向每个匹配的元素内部追加内容。
eg:向所有段落中追加一些HTML标记。

$("p").append("<b>Hello</b>");

appendTo(content)
把所有匹配的元素追加到另一个指定的元素元素集合中。
eg:把所有段落追加到ID值为foo的元素中。

$("p").appendTo("div");

事件

blur([[data],fn])

当元素失去焦点时触发 blur 事件。
eg:任何段落失去焦点时弹出一个 “Hello World!”在每一个匹配元素的blur事件中绑定的处理函数。

$("p").blur( function () { 
	alert("Hello World!"); 
});

change([[data],fn])

当元素的值发生改变时，会发生 change 事件。
eg:给所有的文本框增加输入验证

$("input[type='text']").change( function() {
  // 这里可以写些验证代码
});

click([[data],fn])
触发每一个匹配元素的click事件。
eg:将页面内所有段落点击后隐藏

$("p").click( function () { 
	$(this).hide();
 });

事件还有很多，请参考手册，根据业务需求选用。

在实际操作过程中可能会遇到’未来‘的一些元素，或者在业务场景中由脚本新增的一些元素，如果在这个时候直接使用以上事件，就会有出发没有反应的情况这时候就需要借助下面这个来操作
delegate(selector,[type],[data],fn)
指定的元素（属于被选元素的子元素）添加一个或多个事件处理程序，并规定当这些事件发生时运行的函数。

eg:
html代码：

<div style="background-color:red">
<p>这是一个段落。</p>
<button>请点击这里</button>
</div>

jquery代码:

$("div").delegate("button","click",function(){
  $("p").slideToggle();
});

对象和数组的操作

jQuery.each(object, [callback])

通用例遍方法，可用于例遍对象和数组。

$.each( [0,1,2], function(i, n){
  alert( "Item #" + i + ": " + n );
});

注意：$.each是就按照数组或对象中的顺序一个一个的跟他们做点什么，具体做什么，随便;$.map就是将原始数组中每一项克隆一份，一项一项的放到一个新的数组中，结束的时候，得到一个新的数组，原始数组不变，新数组中的顺序和原始数组中一样

jQuery.map(arr|obj,callback)

将一个数组中的元素转换到另一个数组中。
eg:将原数组中每个元素加 4 转换为一个新数组。

$.map( [0,1,2], function(n){
  return n + 4;
});

结果：[4, 5, 6]

jQuery.inArray(value,array,[fromIndex])

确定第一个参数在数组中的位置，从0开始计数(如果没有找到则返回 -1 )。

var arr = [ 4, "Pete", 8, "John" ];
jQuery.inArray("John", arr);  //3
jQuery.inArray(4, arr);  //0
jQuery.inArray("David", arr);  //-1
jQuery.inArray("Pete", arr, 2);  //-1

jQuery.toArray()

把jQuery集合中所有DOM元素恢复成一个数组。
eg:得到所有li的元素数组

alert($('li').toArray());
结果：[<li id="foo">, <li id="bar">]

jQuery.merge(first,second)

合并两个数组
eg:合并两个数组到第一个数组上。

$.merge( [0,1,2], [2,3,4] )
结果：[0,1,2,2,3,4]

数组/对象 叠加元素

var arr = [];
var a = 2;
arr.push(a);

数组/对象 删除元素

var = ['1','2','3'];
 selected_items_data.splice(0, 1);  //删除数组中的第一个

注意：0位数组的索引，1位长度

jQuery.unique(array)

删除数组中重复元素。只处理删除DOM元素数组，而不能处理字符串或者数字数组。

jQuery.isNumeric(value)

确定它的参数是否是一个数字。

$.isNumeric("-10");  // true
$.isNumeric(16);     // true
$.isNumeric(Infinity); // false
$.isNumeric(undefined); // false

jQuery.param(obj,[traditional])

将表单元素数组或者对象序列化。是.serialize()的核心方法。

var params = { width:1680, height:1050 };
var str = jQuery.param(params);
$("#results").text(str);
结果：width=1680&height=1050

jQuery对数组操作

1、数组的创建

var arrayObj = new Array();　//创建一个数组
var arrayObj = [];　//创建一个数组

2、数组的元素的访问

var testGetArrValue=arrayObj[1]; //获取数组的元素值
arrayObj[1]= "这是新值"; //给数组元素赋予新的值

3、数组元素的添加

arrayObj. push([item1 [item2 [. . . [itemN ]]]]);// 将一个或多个新元素添加到数组结尾，并返回数组新长度
arrayObj.unshift([item1 [item2 [. . . [itemN ]]]]);// 将一个或多个新元素添加到数组开始，数组中的元素自动后移，返回数组新长度
arrayObj.splice(insertPos,0,[item1[, item2[, . . . [,itemN]]]]);//将一个或多个新元素插入到数组的指定位置，插入位置的元素自动后移，返回""。

4、数组元素的删除

arrayObj.pop(); //移除最后一个元素并返回该元素值
arrayObj.shift(); //移除最前一个元素并返回该元素值，数组中元素自动前移
arrayObj.splice(deletePos,deleteCount); //删除从指定位置deletePos开始的指定数量deleteCount的元素，数组形式返回所移除的元素

5、数组的截取和合并

arrayObj.slice(start, [end]); //以数组的形式返回数组的一部分，注意不包括 end 对应的元素，如果省略 end 将复制 start 之后的所有元素
arrayObj.concat([item1[, item2[, . . . [,itemN]]]]); //将多个数组（也可以是字符串，或者是数组和字符串的混合）连接为一个数组，返回连接好的新的数组

6、数组元素的排序

arrayObj.reverse(); //反转元素（最前的排到最后、最后的排到最前），返回数组地址
arrayObj.sort(); //对数组元素排序，返回数组地址

7、数组元素的字符串化

arrayObj.join(separator); //返回字符串，这个字符串将数组的每一个元素值连接在一起，中间用 separator 隔开。

特别注意

JavaScript 中对象或数组的赋值是默认引用赋值的，使得改变对象时，原对象跟着改变。
如果你想要复制赋值，则必须要重新分配对象，使用如下代码即可避免此问题

对象 Object.assign({}, object)

et a = {'name': 'lily'};
var b = Object.assign({}, a);
b.name = 'lisa';
console.log(a.name);