0%

Jquery常用操作

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

html属性操作

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

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

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

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

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

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

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

CSS类

addClass(class|fn)

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

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

removeClass([class|fn])

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

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

选择器

#id

element

.class

**

selector1,selector2,selectorN

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

文档的处理

append(content|fn)

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

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

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

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

事件

blur([[data],fn])

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

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

change([[data],fn])

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

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

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

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

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

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

eg:
html代码:

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

jquery代码:

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

对象和数组的操作

jQuery.each(object, [callback])

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

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

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

jQuery.map(arr|obj,callback)

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

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

结果:[4, 5, 6]

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

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

1
2
3
4
5
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的元素数组

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

jQuery.merge(first,second)

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

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

数组/对象 叠加元素

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

数组/对象 删除元素

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

注意:0位数组的索引,1位长度

jQuery.unique(array)

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

jQuery.isNumeric(value)

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

1
2
3
4
$.isNumeric("-10");  // true
$.isNumeric(16); // true
$.isNumeric(Infinity); // false
$.isNumeric(undefined); // false

jQuery.param(obj,[traditional])

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

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

jQuery对数组操作

1、数组的创建

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

2、数组的元素的访问

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

3、数组元素的添加

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

4、数组元素的删除

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

5、数组的截取和合并

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

6、数组元素的排序

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

7、数组元素的字符串化

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

特别注意

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

对象 Object.assign({}, object)

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